diff options
3 files changed, 16 insertions, 6 deletions
diff --git a/app/javascript/flavours/glitch/components/column_header.js b/app/javascript/flavours/glitch/components/column_header.js index dd1162429..be45c9535 100644 --- a/app/javascript/flavours/glitch/components/column_header.js +++ b/app/javascript/flavours/glitch/components/column_header.js @@ -42,6 +42,7 @@ class ColumnHeader extends React.PureComponent { onMove: PropTypes.func, onClick: PropTypes.func, intl: PropTypes.object.isRequired, + appendContent: PropTypes.node, }; state = { @@ -106,7 +107,7 @@ class ColumnHeader extends React.PureComponent { } render () { - const { intl, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, notifCleaning, notifCleaningActive, placeholder } = this.props; + const { intl, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, notifCleaning, notifCleaningActive, placeholder, appendContent } = this.props; const { collapsed, animating, animatingNCD } = this.state; let title = this.props.title; @@ -229,6 +230,8 @@ class ColumnHeader extends React.PureComponent { {(!collapsed || animating) && collapsedContent} </div> </div> + + {appendContent} </div> ); diff --git a/app/javascript/flavours/glitch/features/home_timeline/index.js b/app/javascript/flavours/glitch/features/home_timeline/index.js index 457ac051c..5e36e5f76 100644 --- a/app/javascript/flavours/glitch/features/home_timeline/index.js +++ b/app/javascript/flavours/glitch/features/home_timeline/index.js @@ -142,12 +142,11 @@ class HomeTimeline extends React.PureComponent { pinned={pinned} multiColumn={multiColumn} extraButton={announcementsButton} + appendContent={hasAnnouncements && showAnnouncements && <AnnouncementsContainer />} > <ColumnSettingsContainer /> </ColumnHeader> - {hasAnnouncements && showAnnouncements && <AnnouncementsContainer />} - <StatusListContainer trackScroll={!pinned} scrollKey={`home_timeline-${columnId}`} diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 6ba9698c5..525dcaf90 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -224,13 +224,16 @@ .column-header__wrapper { position: relative; flex: 0 0 auto; + z-index: 1; &.active { + box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3); + &::before { display: block; content: ""; position: absolute; - top: 35px; + bottom: -13px; left: 0; right: 0; margin: 0 auto; @@ -241,6 +244,11 @@ background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%); } } + + .announcements { + z-index: 1; + position: relative; + } } .column-header { @@ -273,8 +281,6 @@ } &.active { - box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3); - .column-header__icon { color: $highlight-text-color; text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4); @@ -378,6 +384,8 @@ color: $darker-text-color; transition: max-height 150ms ease-in-out, opacity 300ms linear; opacity: 1; + z-index: 1; + position: relative; &.collapsed { max-height: 0; |