From 1e5532e693d9533ee37f553aeb191e284178fa52 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 25 May 2019 21:27:00 +0200 Subject: Add responsive panels to the single-column layout (#10820) * Add responsive panels to the single-column layout * Fixes * Fix not being able to save the preference * Fix code style issues * Set max-height on the compose textarea and add a link to relationship manager --- app/javascript/styles/mastodon/components.scss | 214 ++++++++++++++++++++----- 1 file changed, 174 insertions(+), 40 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 351a635bc..4fbbe67c7 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1801,7 +1801,12 @@ a.account__display-name { display: flex; justify-content: flex-end; + &--start { + justify-content: flex-start; + } + &__inner { + width: 285px; pointer-events: auto; height: 100%; } @@ -1925,6 +1930,7 @@ a.account__display-name { display: block; flex: 1 1 auto; padding: 15px 10px; + padding-bottom: 13px; color: $primary-text-color; text-decoration: none; text-align: center; @@ -1949,6 +1955,7 @@ a.account__display-name { &:active { @media screen and (min-width: 631px) { background: lighten($ui-base-color, 14%); + border-bottom-color: lighten($ui-base-color, 14%); } } @@ -1978,11 +1985,21 @@ a.account__display-name { padding: 0; } - .search__input, .autosuggest-textarea__textarea { font-size: 16px; } + .search__input { + line-height: 18px; + font-size: 16px; + padding: 15px; + padding-right: 30px; + } + + .search__icon .fa { + top: 15px; + } + @media screen and (min-width: 360px) { padding: 10px 0; } @@ -2038,6 +2055,58 @@ a.account__display-name { margin-top: 10px; } } + + .account { + padding: 15px 10px; + } + + .notification { + &__message { + margin-left: 48px + 15px * 2; + padding-top: 15px; + } + + &__favourite-icon-wrapper { + left: -32px; + } + + .status { + padding-top: 8px; + } + + .account { + padding-top: 8px; + } + + .account__avatar-wrapper { + margin-left: 17px; + margin-right: 15px; + } + } + } +} + +.floating-action-button { + position: fixed; + display: flex; + justify-content: center; + align-items: center; + width: 3.9375rem; + height: 3.9375rem; + bottom: 1.3125rem; + right: 1.3125rem; + background: darken($ui-highlight-color, 3%); + color: $white; + border-radius: 50%; + font-size: 21px; + line-height: 21px; + text-decoration: none; + box-shadow: 2px 3px 9px rgba($base-shadow-color, 0.4); + + &:hover, + &:focus, + &:active { + background: lighten($ui-highlight-color, 7%); } } @@ -2059,12 +2128,41 @@ a.account__display-name { } } +@media screen and (max-width: 600px + (285px * 1) + (10px * 1)) { + .columns-area__panels__pane--compositional { + display: none; + } +} + +@media screen and (min-width: 600px + (285px * 1) + (10px * 1)) { + .floating-action-button, + .tabs-bar__link.optional { + display: none; + } + + .search-page .search { + display: none; + } +} + +@media screen and (max-width: 600px + (285px * 2) + (10px * 2)) { + .columns-area__panels__pane--navigational { + display: none; + } +} + +@media screen and (min-width: 600px + (285px * 2) + (10px * 2)) { + .tabs-bar { + display: none; + } +} + .icon-with-badge { position: relative; &__badge { position: absolute; - right: -13px; + left: 9px; top: -13px; background: $ui-highlight-color; border: 2px solid lighten($ui-base-color, 8%); @@ -2077,6 +2175,57 @@ a.account__display-name { } } +.column-link--transparent .icon-with-badge__badge { + border-color: darken($ui-base-color, 8%); +} + +.compose-panel { + width: 285px; + margin-top: 10px; + display: flex; + flex-direction: column; + height: 100%; + + .search__input { + line-height: 18px; + font-size: 16px; + padding: 15px; + padding-right: 30px; + } + + .search__icon .fa { + top: 15px; + } + + .navigation-bar { + padding-top: 20px; + padding-bottom: 20px; + } + + .flex-spacer { + background: transparent; + } + + .autosuggest-textarea__textarea { + max-height: 200px; + } + + .compose-form__upload-thumbnail { + height: 80px; + } +} + +.navigation-panel { + margin-top: 10px; + + hr { + border: 0; + background: transparent; + border-top: 1px solid lighten($ui-base-color, 4%); + margin: 10px 0; + } +} + .drawer__pager { box-sizing: border-box; padding: 0; @@ -2127,15 +2276,6 @@ a.account__display-name { } } -.navigational-toggle { - padding: 10px; - display: flex; - align-items: center; - justify-content: space-between; - font-size: 14px; - color: $dark-text-color; -} - .pseudo-drawer { background: lighten($ui-base-color, 13%); font-size: 13px; @@ -2365,9 +2505,31 @@ a.account__display-name { padding: 15px; text-decoration: none; - &:hover { + &:hover, + &:focus, + &:active { background: lighten($ui-base-color, 11%); } + + &:focus { + outline: 0; + } + + &--transparent { + background: transparent; + color: $ui-secondary-color; + + &:hover, + &:focus, + &:active { + background: transparent; + color: $primary-text-color; + } + + &.active { + color: $ui-highlight-color; + } + } } .column-link__icon { @@ -5436,34 +5598,6 @@ noscript { } } -.floating-action-button { - position: fixed; - display: flex; - justify-content: center; - align-items: center; - width: 3.9375rem; - height: 3.9375rem; - bottom: 1.3125rem; - right: 1.3125rem; - background: darken($ui-highlight-color, 3%); - color: $white; - border-radius: 50%; - font-size: 21px; - line-height: 21px; - text-decoration: none; - box-shadow: 2px 3px 9px rgba($base-shadow-color, 0.4); - - &:hover, - &:focus, - &:active { - background: lighten($ui-highlight-color, 7%); - } - - @media screen and (min-width: 630px) { - display: none; - } -} - .account__header__content { color: $darker-text-color; font-size: 14px; -- cgit From 4168aeb234fb1cb01162aa586775d52d52c6d02c Mon Sep 17 00:00:00 2001 From: "Mélanie Chauvel (ariasuni)" Date: Sat, 25 May 2019 23:19:39 +0200 Subject: Avoid cutting bottom of letters of last paragraph of statuses (#10821) --- app/javascript/styles/mastodon/components.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 4fbbe67c7..61f595362 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -710,7 +710,7 @@ white-space: pre-wrap; &:last-child { - margin-bottom: 0; + margin-bottom: 2px; } } -- cgit From 8d5dcc9301c422f131167574da550f8cdaedb73f Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 27 May 2019 03:33:39 +0200 Subject: Use `` to render transparent SVG logo instead of inserting it (#10845) --- app/helpers/stream_entries_helper.rb | 12 +++++++---- app/javascript/images/logo_transparent.svg | 2 +- app/javascript/styles/mastodon-light/diff.scss | 2 +- app/javascript/styles/mastodon/containers.scss | 4 ---- app/javascript/styles/mastodon/footer.scss | 5 +---- app/javascript/styles/mastodon/stream_entries.scss | 25 +--------------------- app/views/layouts/application.html.haml | 3 +++ app/views/layouts/public.html.haml | 4 +--- 8 files changed, 16 insertions(+), 41 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/helpers/stream_entries_helper.rb b/app/helpers/stream_entries_helper.rb index d56efbfb9..a66fb83ea 100644 --- a/app/helpers/stream_entries_helper.rb +++ b/app/helpers/stream_entries_helper.rb @@ -16,24 +16,28 @@ module StreamEntriesHelper if user_signed_in? if account.id == current_user.account_id link_to settings_profile_url, class: 'button logo-button' do - safe_join([render(file: Rails.root.join('app', 'javascript', 'images', 'logo.svg')), t('settings.edit_profile')]) + safe_join([svg_logo, t('settings.edit_profile')]) end elsif current_account.following?(account) || current_account.requested?(account) link_to account_unfollow_path(account), class: 'button logo-button button--destructive', data: { method: :post } do - safe_join([render(file: Rails.root.join('app', 'javascript', 'images', 'logo.svg')), t('accounts.unfollow')]) + safe_join([svg_logo, t('accounts.unfollow')]) end elsif !(account.memorial? || account.moved?) link_to account_follow_path(account), class: "button logo-button#{account.blocking?(current_account) ? ' disabled' : ''}", data: { method: :post } do - safe_join([render(file: Rails.root.join('app', 'javascript', 'images', 'logo.svg')), t('accounts.follow')]) + safe_join([svg_logo, t('accounts.follow')]) end end elsif !(account.memorial? || account.moved?) link_to account_remote_follow_path(account), class: 'button logo-button modal-button', target: '_new' do - safe_join([render(file: Rails.root.join('app', 'javascript', 'images', 'logo.svg')), t('accounts.follow')]) + safe_join([svg_logo, t('accounts.follow')]) end end end + def svg_logo + content_tag(:svg, tag(:use, 'xlink:href' => '#mastodon-svg-logo'), 'viewBox' => '0 0 216.4144 232.00976') + end + def account_badge(account, all: false) if account.bot? content_tag(:div, content_tag(:div, t('accounts.roles.bot'), class: 'account-role bot'), class: 'roles') diff --git a/app/javascript/images/logo_transparent.svg b/app/javascript/images/logo_transparent.svg index abd6d1f67..a1e7b403e 100644 --- a/app/javascript/images/logo_transparent.svg +++ b/app/javascript/images/logo_transparent.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss index 48236a286..d35a59821 100644 --- a/app/javascript/styles/mastodon-light/diff.scss +++ b/app/javascript/styles/mastodon-light/diff.scss @@ -306,7 +306,7 @@ .button.logo-button { color: $white; - svg path:first-child { + svg { fill: $white; } } diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index 368c2304b..0eae4939f 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -359,10 +359,6 @@ .logo-button { background-color: $secondary-text-color; - - svg path:last-child { - fill: $secondary-text-color; - } } } diff --git a/app/javascript/styles/mastodon/footer.scss b/app/javascript/styles/mastodon/footer.scss index 4d75477e0..f74c004e9 100644 --- a/app/javascript/styles/mastodon/footer.scss +++ b/app/javascript/styles/mastodon/footer.scss @@ -122,10 +122,7 @@ height: 36px; width: auto; margin: 0 auto; - - path { - fill: lighten($ui-base-color, 34%); - } + fill: lighten($ui-base-color, 34%); } &:hover, diff --git a/app/javascript/styles/mastodon/stream_entries.scss b/app/javascript/styles/mastodon/stream_entries.scss index 63eeffe25..bfbb907e0 100644 --- a/app/javascript/styles/mastodon/stream_entries.scss +++ b/app/javascript/styles/mastodon/stream_entries.scss @@ -89,40 +89,21 @@ height: auto; vertical-align: middle; margin-right: 5px; - - path:first-child { - fill: $primary-text-color; - } - - path:last-child { - fill: $ui-highlight-color; - } + fill: $primary-text-color; } &:active, &:focus, &:hover { background: lighten($ui-highlight-color, 10%); - - svg path:last-child { - fill: lighten($ui-highlight-color, 10%); - } } &:disabled, &.disabled { - svg path:last-child { - fill: $ui-primary-color; - } - &:active, &:focus, &:hover { background: $ui-primary-color; - - svg path:last-child { - fill: $ui-primary-color; - } } } @@ -131,10 +112,6 @@ &:focus, &:hover { background: $error-red; - - svg path:last-child { - fill: $error-red; - } } } diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 3d63dc0f3..220a4ca9b 100755 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -33,3 +33,6 @@ %body{ class: body_classes } = content_for?(:content) ? yield(:content) : yield + + %div{ style: 'display: none'} + = render file: Rails.root.join('app', 'javascript', 'images', 'logo_transparent.svg') diff --git a/app/views/layouts/public.html.haml b/app/views/layouts/public.html.haml index d30b2a3ea..ee34936d6 100644 --- a/app/views/layouts/public.html.haml +++ b/app/views/layouts/public.html.haml @@ -38,9 +38,7 @@ %li= link_to t('about.api'), 'https://docs.joinmastodon.org/api/guidelines/' .column-2 %h4= link_to t('about.what_is_mastodon'), 'https://joinmastodon.org/' - - = link_to root_url, class: 'brand' do - = render file: Rails.root.join('app', 'javascript', 'images', 'logo_transparent.svg') + = link_to svg_logo, root_url, class: 'brand' .column-3 %h4= site_hostname %ul -- cgit From 7f203f7c49ef52f69e96cf8b139b876acdcaf291 Mon Sep 17 00:00:00 2001 From: Takeshi Umeda Date: Wed, 29 May 2019 18:03:56 +0900 Subject: Fix safari post field display issue in single column layout (#10883) --- app/javascript/styles/mastodon/components.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 61f595362..425a9b96f 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1976,6 +1976,7 @@ a.account__display-name { .columns-area--mobile { flex-direction: column; width: 100%; + height: 100%; margin: 0 auto; .column, -- cgit