From bc642ac24b49c14dca382e7aabbc16130293d2f4 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 16 Jan 2019 19:47:46 +0100 Subject: Redesign public hashtag page to use a masonry layout (#9822) --- app/javascript/styles/mastodon/widgets.scss | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss index 87e633c70..cabef807e 100644 --- a/app/javascript/styles/mastodon/widgets.scss +++ b/app/javascript/styles/mastodon/widgets.scss @@ -425,3 +425,30 @@ border-radius: 0; } } + +$maximum-width: 1235px; +$fluid-breakpoint: $maximum-width + 20px; + +.statuses-grid { + min-height: 600px; + + &__item { + width: (960px - 20px) / 3; + + @media screen and (max-width: $fluid-breakpoint) { + width: (940px - 20px) / 3; + } + + @media screen and (max-width: $no-gap-breakpoint) { + width: 100vw; + } + } + + .detailed-status { + border-radius: 4px; + + @media screen and (max-width: $no-gap-breakpoint) { + border-bottom: 1px solid lighten($ui-base-color, 12%); + } + } +} -- cgit From 3b3a4d8a1709b8f4a9ffe67d21707117c75f9fe8 Mon Sep 17 00:00:00 2001 From: ThibG Date: Wed, 16 Jan 2019 20:36:10 +0100 Subject: Fix public hashtag timeline width on mobile, fix scrollbar width compensation (#9824) * Fix hashtag timeline width being potentially larger than window width * Add automatic computation of scrollbar width --- app/javascript/packs/public.js | 8 ++++++++ app/javascript/styles/mastodon/about.scss | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js index a86dc7831..4ab27c769 100644 --- a/app/javascript/packs/public.js +++ b/app/javascript/packs/public.js @@ -108,6 +108,14 @@ function main() { if (parallaxComponents.length > 0 ) { new Rellax('.parallax', { speed: -1 }); } + + if (document.body.classList.contains('with-modals')) { + const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth; + const scrollbarWidthStyle = document.createElement('style'); + scrollbarWidthStyle.id = 'scrollbar-width'; + document.head.appendChild(scrollbarWidthStyle); + scrollbarWidthStyle.sheet.insertRule(`body.with-modals--active { margin-right: ${scrollbarWidth}px; }`, 0); + } }); delegate(document, '.webapp-btn', 'click', ({ target, button }) => { diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss index 47ac9265b..c6f249fab 100644 --- a/app/javascript/styles/mastodon/about.scss +++ b/app/javascript/styles/mastodon/about.scss @@ -364,7 +364,7 @@ $small-breakpoint: 960px; @media screen and (max-width: $column-breakpoint) { .grid { - grid-template-columns: auto; + grid-template-columns: 100%; .column-0 { display: block; -- cgit From 8b1990355974543542544e56d2046bc0c9c8716b Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 17 Jan 2019 14:06:08 +0100 Subject: Improve the public hashtag page (#9831) - Fix height not updating when clicking show more on public hashtag page - Add header to the public hashtag page - Change text size and margins on the public hashtag page --- app/javascript/mastodon/common.js | 6 +++- .../features/standalone/hashtag_timeline/index.js | 2 +- .../features/status/components/detailed_status.js | 35 ++++++++++++---------- app/javascript/mastodon/features/status/index.js | 5 +++- app/javascript/styles/mastodon/widgets.scss | 28 +++++++++++++++++ app/views/tags/_features.html.haml | 25 ---------------- app/views/tags/show.html.haml | 6 +++- 7 files changed, 63 insertions(+), 44 deletions(-) delete mode 100644 app/views/tags/_features.html.haml (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/common.js b/app/javascript/mastodon/common.js index 2b10b8c30..fba21316a 100644 --- a/app/javascript/mastodon/common.js +++ b/app/javascript/mastodon/common.js @@ -4,5 +4,9 @@ export function start() { require('font-awesome/css/font-awesome.css'); require.context('../images/', true); - Rails.start(); + try { + Rails.start(); + } catch (e) { + // If called twice + } }; diff --git a/app/javascript/mastodon/features/standalone/hashtag_timeline/index.js b/app/javascript/mastodon/features/standalone/hashtag_timeline/index.js index 4e09b1948..333726f94 100644 --- a/app/javascript/mastodon/features/standalone/hashtag_timeline/index.js +++ b/app/javascript/mastodon/features/standalone/hashtag_timeline/index.js @@ -80,7 +80,7 @@ class HashtagTimeline extends React.PureComponent {
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js index 3ea8e9e74..2921a26f9 100644 --- a/app/javascript/mastodon/features/status/components/detailed_status.js +++ b/app/javascript/mastodon/features/status/components/detailed_status.js @@ -12,6 +12,7 @@ import Card from './card'; import ImmutablePureComponent from 'react-immutable-pure-component'; import Video from '../../video'; import scheduleIdleTask from '../../ui/util/schedule_idle_task'; +import classNames from 'classnames'; export default class DetailedStatus extends ImmutablePureComponent { @@ -27,6 +28,7 @@ export default class DetailedStatus extends ImmutablePureComponent { measureHeight: PropTypes.bool, onHeightChange: PropTypes.func, domain: PropTypes.string.isRequired, + compact: PropTypes.bool, }; state = { @@ -52,7 +54,7 @@ export default class DetailedStatus extends ImmutablePureComponent { _measureHeight (heightJustChanged) { if (this.props.measureHeight && this.node) { - scheduleIdleTask(() => this.node && this.setState({ height: this.node.offsetHeight })); + scheduleIdleTask(() => this.node && this.setState({ height: this.node.scrollHeight })); if (this.props.onHeightChange && heightJustChanged) { this.props.onHeightChange(); @@ -86,6 +88,7 @@ export default class DetailedStatus extends ImmutablePureComponent { render () { const status = this.props.status.get('reblog') ? this.props.status.get('reblog') : this.props.status; const outerStyle = { boxSizing: 'border-box' }; + const { compact } = this.props; if (!status) { return null; @@ -187,20 +190,22 @@ export default class DetailedStatus extends ImmutablePureComponent { } return ( -
- -
- - - - - - {media} - -
- - - {applicationLink} · {reblogLink} · {favouriteLink} +
+
+ +
+ + + + + + {media} + +
+ + + {applicationLink} · {reblogLink} · {favouriteLink} +
); diff --git a/app/javascript/mastodon/features/status/index.js b/app/javascript/mastodon/features/status/index.js index a092f7bb1..d48b682eb 100644 --- a/app/javascript/mastodon/features/status/index.js +++ b/app/javascript/mastodon/features/status/index.js @@ -101,6 +101,7 @@ const makeMapStateToProps = () => { ancestorsIds, descendantsIds, askReplyConfirmation: state.getIn(['compose', 'text']).trim().length !== 0, + domain: state.getIn(['meta', 'domain']), }; }; @@ -123,6 +124,7 @@ class Status extends ImmutablePureComponent { descendantsIds: ImmutablePropTypes.list, intl: PropTypes.object.isRequired, askReplyConfirmation: PropTypes.bool, + domain: PropTypes.string.isRequired, }; state = { @@ -387,7 +389,7 @@ class Status extends ImmutablePureComponent { render () { let ancestors, descendants; - const { shouldUpdateScroll, status, ancestorsIds, descendantsIds, intl } = this.props; + const { shouldUpdateScroll, status, ancestorsIds, descendantsIds, intl, domain } = this.props; const { fullscreen } = this.state; if (status === null) { @@ -438,6 +440,7 @@ class Status extends ImmutablePureComponent { onOpenVideo={this.handleOpenVideo} onOpenMedia={this.handleOpenMedia} onToggleHidden={this.handleToggleHidden} + domain={domain} /> Date: Thu, 17 Jan 2019 23:28:30 +0100 Subject: Fix slightly cropped font on settings page dropdowns when using system font (#9839) --- app/javascript/styles/mastodon/forms.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index 6132dd1ae..bab982706 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -419,7 +419,7 @@ code { background: darken($ui-base-color, 10%) url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; border: 1px solid darken($ui-base-color, 14%); border-radius: 4px; - padding: 10px; + padding-left: 10px; padding-right: 30px; height: 41px; } -- cgit From a492a9bcd355d4f0998990905177ac4f9699cc3c Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 18 Jan 2019 10:25:44 +0100 Subject: Add information about how to opt-in to the directory on the directory (#9834) Fix #9833 --- app/javascript/styles/mastodon/widgets.scss | 27 +++++++++++++++++++++++++++ app/views/directories/index.html.haml | 18 ++++++++++++++++-- config/locales/en.yml | 3 +++ 3 files changed, 46 insertions(+), 2 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss index d44a1ef06..0699900dc 100644 --- a/app/javascript/styles/mastodon/widgets.scss +++ b/app/javascript/styles/mastodon/widgets.scss @@ -480,3 +480,30 @@ $fluid-breakpoint: $maximum-width + 20px; } } } + +.notice-widget { + margin-bottom: 10px; + color: $darker-text-color; + + p { + margin-bottom: 10px; + + &:last-child { + margin-bottom: 0; + } + } + + a { + font-size: 14px; + line-height: 20px; + text-decoration: none; + font-weight: 500; + color: $ui-highlight-color; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + } + } +} diff --git a/app/views/directories/index.html.haml b/app/views/directories/index.html.haml index 88706def7..a8aa68cc4 100644 --- a/app/views/directories/index.html.haml +++ b/app/views/directories/index.html.haml @@ -41,8 +41,22 @@ = paginate @accounts .column-1 - - if @tags.empty? - .nothing-here.nothing-here--flexible + - if user_signed_in? + .box-widget.notice-widget + - if current_account.discoverable? + - if current_account.followers_count < Account::MIN_FOLLOWERS_DISCOVERY + %p= t('directories.enabled_but_waiting', min_followers: Account::MIN_FOLLOWERS_DISCOVERY) + - else + %p= t('directories.enabled') + - else + %p= t('directories.how_to_enable') + + = link_to settings_profile_path do + = t('settings.edit_profile') + = fa_icon 'chevron-right fw' + + - if @tags.empty? && !user_signed_in? + .nothing-here - else - @tags.each do |tag| .directory__tag{ class: tag.id == @tag&.id ? 'active' : nil } diff --git a/config/locales/en.yml b/config/locales/en.yml index 8ad5ecb06..10749b21b 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -553,8 +553,11 @@ en: warning_title: Disseminated content availability directories: directory: Profile directory + enabled: You are currently listed in the directory. + enabled_but_waiting: You have opted-in to be listed in the directory, but you do not have the minimum number of followers (%{min_followers}) to be listed yet. explanation: Discover users based on their interests explore_mastodon: Explore %{title} + how_to_enable: You are not currently opted-in to the directory. You can opt-in below. Use hashtags in your bio text to be listed under specific hashtags! people: one: "%{count} person" other: "%{count} people" -- cgit From b506ce119766bb3308f934e2d3de143b3ac6f5ad Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 18 Jan 2019 20:58:11 +0100 Subject: Fix new hashtag page's items not being full-width on mobile (#9852) Fix #9845 --- .../mastodon/features/status/components/detailed_status.js | 2 +- app/javascript/styles/mastodon/containers.scss | 2 +- app/javascript/styles/mastodon/widgets.scss | 10 +++++++++- 3 files changed, 11 insertions(+), 3 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js index 2921a26f9..0630387d2 100644 --- a/app/javascript/mastodon/features/status/components/detailed_status.js +++ b/app/javascript/mastodon/features/status/components/detailed_status.js @@ -54,7 +54,7 @@ export default class DetailedStatus extends ImmutablePureComponent { _measureHeight (heightJustChanged) { if (this.props.measureHeight && this.node) { - scheduleIdleTask(() => this.node && this.setState({ height: this.node.scrollHeight })); + scheduleIdleTask(() => this.node && this.setState({ height: Math.ceil(this.node.scrollHeight) + 1 })); if (this.props.onHeightChange && heightJustChanged) { this.props.onHeightChange(); diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index 8de53ca98..a98fa52c4 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -295,7 +295,7 @@ color: $primary-text-color; } - @media screen and (max-width: $no-gap-breakpoint) { + @media screen and (max-width: 550px) { &.optional { display: none; } diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss index 0699900dc..c97337e4e 100644 --- a/app/javascript/styles/mastodon/widgets.scss +++ b/app/javascript/styles/mastodon/widgets.scss @@ -432,6 +432,10 @@ $fluid-breakpoint: $maximum-width + 20px; .statuses-grid { min-height: 600px; + @media screen and (max-width: 640px) { + width: 100% !important; // Masonry layout is unnecessary at this width + } + &__item { width: (960px - 20px) / 3; @@ -439,6 +443,10 @@ $fluid-breakpoint: $maximum-width + 20px; width: (940px - 20px) / 3; } + @media screen and (max-width: 640px) { + width: 100%; + } + @media screen and (max-width: $no-gap-breakpoint) { width: 100vw; } @@ -448,7 +456,7 @@ $fluid-breakpoint: $maximum-width + 20px; border-radius: 4px; @media screen and (max-width: $no-gap-breakpoint) { - border-bottom: 1px solid lighten($ui-base-color, 12%); + border-top: 1px solid lighten($ui-base-color, 16%); } &.compact { -- cgit