From 769f62d96fb34ae83e9b8197bccbb775a8cc5a5c Mon Sep 17 00:00:00 2001 From: kibigo! Date: Wed, 20 Sep 2017 01:57:08 -0700 Subject: Improvements to status headers --- app/javascript/styles/components.scss | 97 +++++++++++++---------------------- 1 file changed, 37 insertions(+), 60 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 2437d5a91..cb0b1e89d 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -550,6 +550,7 @@ .status__content, .reply-indicator__content { position: relative; + padding: 5px 12px; font-size: 15px; line-height: 20px; color: $primary-text-color; @@ -660,7 +661,6 @@ .status { padding: 8px 10px; - padding-left: 68px; position: relative; height: auto; min-height: 48px; @@ -736,7 +736,7 @@ content: ""; } - .status__display-name:hover strong { + .display-name:hover .display-name__html { text-decoration: none; } @@ -780,26 +780,21 @@ } .status__display-name { + margin: 0 auto 0 0; color: $ui-base-lighter-color; } -.status__info .status__display-name { - display: block; - max-width: 100%; -} - .status__info { - margin: 2px 0 0; + display: flex; + margin: 2px 0 5px; font-size: 15px; line-height: 24px; } .status__info__icons { - display: inline-block; + flex: none; position: relative; - float: right; color: lighten($ui-base-color, 26%); - z-index: 5; // to make it clickable .status__visibility-icon { padding-left: 6px; @@ -842,15 +837,7 @@ .status__action-bar { align-items: center; display: flex; - margin-top: 10px; - margin-left: -58px; - - &::before { - display: block; - flex: 1 1 0; - max-width: 58px; - content: ""; - } + margin: 10px 12px 0; } .status__action-bar-button { @@ -1268,15 +1255,6 @@ } } -.status__display-name, -.reply-indicator__display-name, -.detailed-status__display-name, -.account__display-name { - &:hover strong { - text-decoration: underline; - } -} - .account__display-name strong { display: block; } @@ -1312,8 +1290,8 @@ } .status__avatar { - position: absolute; - margin-left: -58px; + flex: none; + margin: 0 10px 0 0; height: 48px; width: 48px; } @@ -1383,28 +1361,37 @@ .display-name { display: block; - position: relative; + padding: 6px 0; max-width: 100%; - //overflow: hidden; - //text-overflow: ellipsis; - //white-space: nowrap; -} + height: 36px; + overflow: hidden; -.display-name__html { - font-weight: 500; -} + strong { + display: block; + height: 18px; + font-size: 16px; + font-weight: 500; + line-height: 18px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } -.display-name__account { - font-size: 14px; - display: block; - line-height: 1.1; // reduce the distance from the display name - padding-bottom: 3px; + span { + display: block; + height: 18px; + font-size: 15px; + line-height: 18px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } - // block ellipsis - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + &:hover { + strong { + text-decoration: underline; + } + } } .status__relative-time, @@ -3894,17 +3881,7 @@ button.icon-button.active i.fa-retweet { flex-direction: column; .status__display-name { - display: block; - max-width: 100%; - padding-right: 25px; - } - - .status__avatar { - height: 28px; - left: 10px; - position: absolute; - top: 10px; - width: 48px; + display: flex; } } -- cgit From 9ed51cecd0f41eeca0e303c0b0787d1928034156 Mon Sep 17 00:00:00 2001 From: kibigo! Date: Wed, 20 Sep 2017 14:51:45 -0700 Subject: Fixed notification appearance --- .../glitch/components/notification/follow.js | 75 ++++------------------ app/javascript/styles/components.scss | 18 +++--- 2 files changed, 22 insertions(+), 71 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/glitch/components/notification/follow.js b/app/javascript/glitch/components/notification/follow.js index d340e83c8..f471307b9 100644 --- a/app/javascript/glitch/components/notification/follow.js +++ b/app/javascript/glitch/components/notification/follow.js @@ -1,38 +1,12 @@ -/* +// `` +// ====================== -`` -====================== +// * * * * * * * // -This component renders a follow notification. +// Imports +// ------- -__Props:__ - - - __`id` (`PropTypes.number.isRequired`) :__ - This is the id of the notification. - - - __`onDeleteNotification` (`PropTypes.func.isRequired`) :__ - The function to call when a notification should be - dismissed/deleted. - - - __`account` (`PropTypes.object.isRequired`) :__ - The account associated with the follow notification, ie the account - which followed the user. - - - __`intl` (`PropTypes.object.isRequired`) :__ - Our internationalization object, inserted by `@injectIntl`. - -*/ - -// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - -/* - -Imports: --------- - -*/ - -// Package imports // +// Package imports. import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; @@ -40,22 +14,18 @@ import { FormattedMessage } from 'react-intl'; import escapeTextContentForBrowser from 'escape-html'; import ImmutablePureComponent from 'react-immutable-pure-component'; -// Mastodon imports // +// Mastodon imports. import emojify from '../../../mastodon/emoji'; import Permalink from '../../../mastodon/components/permalink'; import AccountContainer from '../../../mastodon/containers/account_container'; -// Our imports // +// Our imports. import NotificationOverlayContainer from '../notification/overlay/container'; -// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - -/* +// * * * * * * * // -Implementation: ---------------- - -*/ +// Implementation +// -------------- export default class NotificationFollow extends ImmutablePureComponent { @@ -65,24 +35,10 @@ export default class NotificationFollow extends ImmutablePureComponent { notification : ImmutablePropTypes.map.isRequired, }; -/* - -### `render()` - -This actually renders the component. - -*/ - render () { const { account, notification } = this.props; -/* - -`link` is a container for the account's `displayName`, which links to -the account timeline using a ``. - -*/ - + // Links to the display name. const displayName = account.get('display_name') || account.get('username'); const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) }; const link = ( @@ -95,12 +51,7 @@ the account timeline using a ``. /> ); -/* - -We can now render our component. - -*/ - + // Renders. return (
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index cb0b1e89d..e15078f96 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -752,7 +752,7 @@ } .notification__message { - margin: -10px 0 10px; + margin: -10px -10px 10px; } } @@ -970,8 +970,7 @@ .account__avatar-wrapper { float: left; - margin-left: 12px; - margin-right: 12px; + margin: 6px 16px 6px 6px; } .account__avatar { @@ -987,6 +986,7 @@ } .account__avatar-overlay { + position: relative; @include avatar-size(48px); &-base { @@ -1007,7 +1007,7 @@ .account__relationship { height: 18px; - padding: 10px; + padding: 12px 10px; white-space: nowrap; } @@ -1322,9 +1322,7 @@ } .notification__message { - margin-left: 68px; - padding: 8px 0; - padding-bottom: 0; + padding: 8px 10px 0; cursor: default; color: $ui-primary-color; font-size: 15px; @@ -1336,8 +1334,10 @@ } .notification__favourite-icon-wrapper { - left: -26px; - position: absolute; + float: left; + margin: 0 10px 0 0; + width: 48px; + text-align: right; .star-icon { color: $gold-star; -- cgit