-
-
-
-
{medias.map(media =>
(
+
+
+
+
+
+
);
}
diff --git a/app/javascript/flavours/glitch/features/account_timeline/index.js b/app/javascript/flavours/glitch/features/account_timeline/index.js
index 75dba50490..a391a1c804 100644
--- a/app/javascript/flavours/glitch/features/account_timeline/index.js
+++ b/app/javascript/flavours/glitch/features/account_timeline/index.js
@@ -12,11 +12,15 @@ import ColumnBackButton from '../../components/column_back_button';
import { List as ImmutableList } from 'immutable';
import ImmutablePureComponent from 'react-immutable-pure-component';
-const mapStateToProps = (state, props) => ({
- statusIds: state.getIn(['timelines', `account:${props.params.accountId}`, 'items'], ImmutableList()),
- isLoading: state.getIn(['timelines', `account:${props.params.accountId}`, 'isLoading']),
- hasMore: !!state.getIn(['timelines', `account:${props.params.accountId}`, 'next']),
-});
+const mapStateToProps = (state, { params: { accountId }, withReplies = false }) => {
+ const path = withReplies ? `${accountId}:with_replies` : accountId;
+
+ return {
+ statusIds: state.getIn(['timelines', `account:${path}`, 'items'], ImmutableList()),
+ isLoading: state.getIn(['timelines', `account:${path}`, 'isLoading']),
+ hasMore: !!state.getIn(['timelines', `account:${path}`, 'next']),
+ };
+};
@connect(mapStateToProps)
export default class AccountTimeline extends ImmutablePureComponent {
@@ -27,23 +31,24 @@ export default class AccountTimeline extends ImmutablePureComponent {
statusIds: ImmutablePropTypes.list,
isLoading: PropTypes.bool,
hasMore: PropTypes.bool,
+ withReplies: PropTypes.bool,
};
componentWillMount () {
this.props.dispatch(fetchAccount(this.props.params.accountId));
- this.props.dispatch(refreshAccountTimeline(this.props.params.accountId));
+ this.props.dispatch(refreshAccountTimeline(this.props.params.accountId, this.props.withReplies));
}
componentWillReceiveProps (nextProps) {
- if (nextProps.params.accountId !== this.props.params.accountId && nextProps.params.accountId) {
+ if ((nextProps.params.accountId !== this.props.params.accountId && nextProps.params.accountId) || nextProps.withReplies !== this.props.withReplies) {
this.props.dispatch(fetchAccount(nextProps.params.accountId));
- this.props.dispatch(refreshAccountTimeline(nextProps.params.accountId));
+ this.props.dispatch(refreshAccountTimeline(nextProps.params.accountId, nextProps.params.withReplies));
}
}
handleScrollToBottom = () => {
if (!this.props.isLoading && this.props.hasMore) {
- this.props.dispatch(expandAccountTimeline(this.props.params.accountId));
+ this.props.dispatch(expandAccountTimeline(this.props.params.accountId, this.props.withReplies));
}
}
diff --git a/app/javascript/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js
index fae705deb7..0b031a7f0e 100644
--- a/app/javascript/flavours/glitch/features/ui/index.js
+++ b/app/javascript/flavours/glitch/features/ui/index.js
@@ -431,6 +431,7 @@ export default class UI extends React.Component {
+
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index 2bc894d253..81adf7c312 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -380,64 +380,94 @@
}
.account-gallery__container {
- margin: -2px;
- padding: 4px;
display: flex;
+ justify-content: center;
flex-wrap: wrap;
+ padding: 2px;
}
.account-gallery__item {
- flex: 1 1 auto;
- width: calc(100% / 3 - 4px);
- height: 95px;
- margin: 2px;
+ flex-grow: 1;
+ width: 50%;
+ overflow: hidden;
+ position: relative;
+
+ &::before {
+ content: "";
+ display: block;
+ padding-top: 100%;
+ }
a {
display: block;
- width: 100%;
- height: 100%;
+ width: calc(100% - 4px);
+ height: calc(100% - 4px);
+ margin: 2px;
+ top: 0;
+ left: 0;
background-color: $base-overlay-background;
background-size: cover;
background-position: center;
- position: relative;
+ position: absolute;
color: inherit;
text-decoration: none;
+ border-radius: 4px;
&:hover,
&:active,
&:focus {
outline: 0;
+
+ &::before {
+ content: "";
+ display: block;
+ width: 100%;
+ height: 100%;
+ background: rgba($base-overlay-background, 0.3);
+ border-radius: 4px;
+ }
}
}
}
-.account-section-headline {
- color: $ui-base-lighter-color;
+.account__section-headline {
background: lighten($ui-base-color, 2%);
border-bottom: 1px solid lighten($ui-base-color, 4%);
- padding: 15px 10px;
- font-size: 14px;
- font-weight: 500;
- position: relative;
cursor: default;
+ display: flex;
- &::before,
- &::after {
+ a {
display: block;
- content: "";
- position: absolute;
- bottom: 0;
- left: 18px;
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 10px 10px;
- border-color: transparent transparent lighten($ui-base-color, 4%);
- }
+ color: $ui-base-lighter-color;
+ padding: 15px 10px;
+ font-size: 14px;
+ font-weight: 500;
+ text-decoration: none;
+ position: relative;
- &::after {
- bottom: -1px;
- border-color: transparent transparent $ui-base-color;
+ &.active {
+ color: $ui-highlight-color;
+
+ &::before,
+ &::after {
+ display: block;
+ content: "";
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ width: 0;
+ height: 0;
+ transform: translateX(-50%);
+ border-style: solid;
+ border-width: 0 10px 10px;
+ border-color: transparent transparent lighten($ui-base-color, 4%);
+ }
+
+ &::after {
+ bottom: -1px;
+ border-color: transparent transparent $ui-base-color;
+ }
+ }
}
}
diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss
index 4dd7482277..d7407cdaf4 100644
--- a/app/javascript/flavours/glitch/styles/components/media.scss
+++ b/app/javascript/flavours/glitch/styles/components/media.scss
@@ -102,6 +102,7 @@
&.standalone {
.media-gallery__item-gifv-thumbnail {
transform: none;
+ top: 0;
}
}
}
diff --git a/app/javascript/flavours/glitch/util/react_router_helpers.js b/app/javascript/flavours/glitch/util/react_router_helpers.js
index 1dba5e9bb0..e36c512f34 100644
--- a/app/javascript/flavours/glitch/util/react_router_helpers.js
+++ b/app/javascript/flavours/glitch/util/react_router_helpers.js
@@ -35,14 +35,19 @@ export class WrappedRoute extends React.Component {
component: PropTypes.func.isRequired,
content: PropTypes.node,
multiColumn: PropTypes.bool,
+ componentParams: PropTypes.object,
}
+ static defaultProps = {
+ componentParams: {},
+ };
+
renderComponent = ({ match }) => {
- const { component, content, multiColumn } = this.props;
+ const { component, content, multiColumn, componentParams } = this.props;
return (
- {Component => {content}}
+ {Component => {content}}
);
}