From bb71538bb503159177d46d8956bd466973c0876b Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 28 Jul 2018 19:25:33 +0200 Subject: Redesign public profiles and toots (#8068) --- app/javascript/styles/application.scss | 2 +- app/javascript/styles/mastodon/accounts.scss | 559 +++----------------- app/javascript/styles/mastodon/basics.scss | 5 +- app/javascript/styles/mastodon/components.scss | 12 + app/javascript/styles/mastodon/containers.scss | 573 +++++++++++++++++++++ app/javascript/styles/mastodon/footer.scss | 157 +++++- app/javascript/styles/mastodon/landing_strip.scss | 111 ---- app/javascript/styles/mastodon/stream_entries.scss | 390 +++----------- app/javascript/styles/mastodon/variables.scss | 2 + app/javascript/styles/mastodon/widgets.scss | 123 +++++ 10 files changed, 1001 insertions(+), 933 deletions(-) delete mode 100644 app/javascript/styles/mastodon/landing_strip.scss create mode 100644 app/javascript/styles/mastodon/widgets.scss (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss index 7b3b10dfe..0990a4f25 100644 --- a/app/javascript/styles/application.scss +++ b/app/javascript/styles/application.scss @@ -10,7 +10,7 @@ @import 'mastodon/lists'; @import 'mastodon/footer'; @import 'mastodon/compact_header'; -@import 'mastodon/landing_strip'; +@import 'mastodon/widgets'; @import 'mastodon/forms'; @import 'mastodon/accounts'; @import 'mastodon/stream_entries'; diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss index b4612b063..c27bc0df3 100644 --- a/app/javascript/styles/mastodon/accounts.scss +++ b/app/javascript/styles/mastodon/accounts.scss @@ -1,243 +1,100 @@ .card { - background-color: $base-shadow-color; - background-size: cover; - background-position: center; - border-radius: 4px 4px 0 0; - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - overflow: hidden; - position: relative; - display: flex; - - &::after { - background: rgba(darken($ui-base-color, 8%), 0.5); + & > a { display: block; - content: ""; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - z-index: 1; - } - - @media screen and (max-width: 740px) { - border-radius: 0; - box-shadow: none; - } - - .card__illustration { - padding: 60px 0; - position: relative; - flex: 1 1 auto; - display: flex; - justify-content: center; - align-items: center; - } - - .card__bio { - max-width: 260px; - flex: 1 1 auto; - display: flex; - flex-direction: column; - justify-content: space-between; - background: rgba(darken($ui-base-color, 8%), 0.8); - position: relative; - z-index: 2; - } - - &.compact { - padding: 30px 0; - border-radius: 4px; - - .avatar { - margin-bottom: 0; + text-decoration: none; + color: inherit; + box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - img { - object-fit: cover; - } + @media screen and (max-width: $no-gap-breakpoint) { + box-shadow: none; } - } - - .name { - display: block; - font-size: 20px; - line-height: 18px * 1.5; - color: $primary-text-color; - padding: 10px 15px; - padding-bottom: 0; - font-weight: 500; - position: relative; - z-index: 2; - margin-bottom: 30px; - overflow: hidden; - text-overflow: ellipsis; - small { - display: block; - font-size: 14px; - color: $highlight-text-color; - font-weight: 400; - overflow: hidden; - text-overflow: ellipsis; - - .fa { - margin-left: 3px; + &:hover, + &:active, + &:focus { + .card__bar { + background: lighten($ui-base-color, 8%); } } } - .avatar { - width: 120px; - margin: 0 auto; + &__img { + height: 130px; position: relative; - z-index: 2; + background: darken($ui-base-color, 12%); + border-radius: 4px 4px 0 0; img { - width: 120px; - height: 120px; - display: block; - border-radius: 120px; - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - } - } - - .roles { - margin-bottom: 30px; - padding: 0 15px; - } - - .details-counters { - margin-top: 30px; - display: flex; - flex-direction: row; - width: 100%; - } - - .counter { - width: 33.3%; - box-sizing: border-box; - flex: 0 0 auto; - color: $darker-text-color; - padding: 5px 10px 0; - margin-bottom: 10px; - border-right: 1px solid lighten($ui-base-color, 4%); - cursor: default; - text-align: center; - position: relative; - - a { - display: block; - } - - &:last-child { - border-right: 0; - } - - &::after { display: block; - content: ""; - position: absolute; - bottom: -10px; - left: 0; width: 100%; - border-bottom: 4px solid $ui-primary-color; - opacity: 0.5; - transition: all 400ms ease; - } - - &.active { - &::after { - border-bottom: 4px solid $highlight-text-color; - opacity: 1; - } - } - - &:hover { - &::after { - opacity: 1; - transition-duration: 100ms; - } + height: 100%; + margin: 0; + object-fit: cover; + border-radius: 4px 4px 0 0; } - a { - text-decoration: none; - color: inherit; + @media screen and (max-width: 600px) { + height: 200px; } - .counter-label { - font-size: 12px; - display: block; - margin-bottom: 5px; - } - - .counter-number { - font-weight: 500; - font-size: 18px; - color: $primary-text-color; - font-family: 'mastodon-font-display', sans-serif; + @media screen and (max-width: $no-gap-breakpoint) { + display: none; } } - .bio { - font-size: 14px; - line-height: 18px; - padding: 0 15px; - color: $secondary-text-color; - } - - @media screen and (max-width: 480px) { - display: block; + &__bar { + position: relative; + padding: 15px; + display: flex; + justify-content: flex-start; + align-items: center; + background: lighten($ui-base-color, 4%); + border-radius: 0 0 4px 4px; - .card__bio { - max-width: none; + @media screen and (max-width: $no-gap-breakpoint) { + border-radius: 0; } - .name, - .roles { - text-align: center; - margin-bottom: 15px; - } + .avatar { + flex: 0 0 auto; + width: 48px; + height: 48px; + padding-top: 2px; - .bio { - margin-bottom: 15px; + img { + width: 100%; + height: 100%; + display: block; + margin: 0; + border-radius: 4px; + background: darken($ui-base-color, 8%); + } } - } -} -.card, -.account-grid-card { - .controls { - position: absolute; - top: 15px; - left: 15px; - z-index: 2; - - .icon-button { - color: rgba($white, 0.8); - text-decoration: none; - font-size: 13px; - line-height: 13px; - font-weight: 500; - - .fa { - font-weight: 400; - margin-right: 5px; + .display-name { + margin-left: 15px; + text-align: left; + + strong { + font-size: 15px; + color: $primary-text-color; + font-weight: 500; + overflow: hidden; + text-overflow: ellipsis; } - &:hover, - &:active, - &:focus { - color: $white; + span { + display: block; + font-size: 14px; + color: $darker-text-color; + font-weight: 400; + overflow: hidden; + text-overflow: ellipsis; } } } } -.account-grid-card .controls { - left: auto; - right: 15px; -} - .pagination { padding: 30px 0; text-align: center; @@ -314,289 +171,23 @@ } } -.accounts-grid { - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - background: darken($simple-background-color, 8%); - border-radius: 0 0 4px 4px; - padding: 20px 5px; - padding-bottom: 10px; - overflow: hidden; - display: flex; - flex-wrap: wrap; - z-index: 2; - position: relative; - - &.empty img { - position: absolute; - opacity: 0.2; - height: 200px; - left: 0; - bottom: 0; - pointer-events: none; - } - - @media screen and (max-width: 740px) { - border-radius: 0; - box-shadow: none; - } - - .account-grid-card { - box-sizing: border-box; - width: 335px; - background: $simple-background-color; - border-radius: 4px; - color: $inverted-text-color; - margin: 0 5px 10px; - position: relative; - - @media screen and (max-width: 740px) { - width: calc(100% - 10px); - } - - .account-grid-card__header { - overflow: hidden; - height: 100px; - border-radius: 4px 4px 0 0; - background-color: lighten($inverted-text-color, 4%); - background-size: cover; - background-position: center; - position: relative; - - &::after { - background: rgba(darken($ui-base-color, 8%), 0.5); - display: block; - content: ""; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - z-index: 1; - } - } - - .account-grid-card__avatar { - box-sizing: border-box; - padding: 15px; - position: absolute; - z-index: 2; - top: 100px - (40px + 2px); - left: -2px; - } - - .avatar { - width: 80px; - height: 80px; - - img { - display: block; - width: 80px; - height: 80px; - border-radius: 80px; - border: 2px solid $simple-background-color; - background: $simple-background-color; - } - } - - .name { - padding: 15px; - padding-top: 10px; - padding-left: 15px + 80px + 15px; - - a { - display: block; - color: $inverted-text-color; - text-decoration: none; - text-overflow: ellipsis; - overflow: hidden; - font-weight: 500; - - &:hover { - .display_name { - text-decoration: underline; - } - } - } - } - - .display_name { - font-size: 16px; - display: block; - text-overflow: ellipsis; - overflow: hidden; - } - - .username { - color: $lighter-text-color; - font-size: 14px; - font-weight: 400; - } - - .account__header__content { - padding: 10px 15px; - padding-top: 15px; - color: $lighter-text-color; - word-wrap: break-word; - overflow: hidden; - text-overflow: ellipsis; - height: 5.5em; - position: relative; - - &::after { - display: block; - content: ""; - width: 100%; - height: 100px; - position: absolute; - bottom: 0; - background: linear-gradient(to bottom, rgba($simple-background-color, 0.01) 0%, rgba($simple-background-color, 1) 100%); - left: 0; - border-radius: 0 0 4px 4px; - pointer-events: none; - } - } - } -} - .nothing-here { - width: 100%; - display: block; + background: $ui-base-color; + box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); color: $light-text-color; font-size: 14px; font-weight: 500; text-align: center; - padding: 130px 0; - padding-top: 125px; - margin: 0 auto; + display: flex; + justify-content: center; + align-items: center; cursor: default; -} - -.account-card { border-radius: 4px; - text-align: left; - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - background: $simple-background-color; - - &__header { - background: $base-shadow-color; - background-size: cover; - background-position: center center; - height: 90px; - border-radius: 4px 4px 0 0; - } + padding: 20px; + min-height: 30vh; - & > .detailed-status__display-name { - display: block; - overflow: hidden; - display: flex; - align-items: center; - padding: 10px; - - &:last-child { - margin-bottom: 0; - } - - & > div:first-child { - flex: 0 0 auto; - margin-right: 10px; - width: 48px; - height: 48px; - } - - .avatar { - display: block; - border-radius: 4px; - margin: 0; - } - - .display-name { - flex: 1 0 auto; - display: block; - max-width: 100%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - cursor: default; - - & > .detailed-status__display-name { - margin-bottom: 0; - } - - strong { - font-weight: 500; - color: $ui-base-color; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - - span { - font-size: 14px; - color: $light-text-color; - } - } - - &:hover { - .display-name { - strong { - text-decoration: none; - } - } - } - } - - .counter { - box-sizing: border-box; - flex: 0 0 auto; - color: $light-text-color; - padding: 0 10px; - cursor: default; - text-align: center; - position: relative; - line-height: 24px; - - .counter-label { - font-size: 12px; - display: block; - text-transform: uppercase; - } - - .counter-number { - font-weight: 500; - font-size: 16px; - color: $inverted-text-color; - font-family: 'mastodon-font-display', sans-serif; - } - } -} - -.activity-stream-tabs { - background: $simple-background-color; - border-bottom: 1px solid $ui-secondary-color; - position: relative; - z-index: 2; - - a { - display: inline-block; - padding: 15px; - text-decoration: none; - color: $highlight-text-color; - text-transform: uppercase; - font-weight: 500; - - &:hover, - &:active, - &:focus { - color: lighten($highlight-text-color, 8%); - } - - &.active { - color: $inverted-text-color; - cursor: default; - } + &--under-tabs { + border-radius: 0 0 4px 4px; } } @@ -629,14 +220,14 @@ padding: 0; margin: 15px -15px -15px; border: 0 none; - border-top: 1px solid lighten($ui-base-color, 4%); - border-bottom: 1px solid lighten($ui-base-color, 4%); + border-top: 1px solid lighten($ui-base-color, 12%); + border-bottom: 1px solid lighten($ui-base-color, 12%); font-size: 14px; line-height: 20px; dl { display: flex; - border-bottom: 1px solid lighten($ui-base-color, 4%); + border-bottom: 1px solid lighten($ui-base-color, 12%); } dt, diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss index c52e069be..c45a50756 100644 --- a/app/javascript/styles/mastodon/basics.scss +++ b/app/javascript/styles/mastodon/basics.scss @@ -1,13 +1,12 @@ body { font-family: 'mastodon-font-sans-serif', sans-serif; - background: $ui-base-color; + background: darken($ui-base-color, 8%); background-size: cover; background-attachment: fixed; font-size: 13px; line-height: 18px; font-weight: 400; color: $primary-text-color; - padding-bottom: 20px; text-rendering: optimizelegibility; font-feature-settings: "kern"; text-size-adjust: none; @@ -52,7 +51,7 @@ body { } &.embed { - background: transparent; + background: lighten($ui-base-color, 4%); margin: 0; padding-bottom: 0; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 846bda893..814739dfc 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -946,6 +946,18 @@ background: lighten($ui-base-color, 4%); padding: 14px 10px; + &--flex { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: flex-start; + + .status__content, + .detailed-status__meta { + flex: 100%; + } + } + .status__content { font-size: 19px; line-height: 24px; diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index ac648c868..c2ff77783 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -118,3 +118,576 @@ margin-left: 8px; } } + +.public-layout { + @media screen and (max-width: $no-gap-breakpoint) { + padding-top: 48px; + } + + .container { + max-width: 960px; + + @media screen and (max-width: $no-gap-breakpoint) { + padding: 0; + } + } + + .header { + background: lighten($ui-base-color, 8%); + box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); + border-radius: 4px; + height: 48px; + margin: 10px 0; + display: flex; + align-items: stretch; + justify-content: center; + flex-wrap: nowrap; + overflow: hidden; + + @media screen and (max-width: $no-gap-breakpoint) { + position: fixed; + width: 100%; + top: 0; + left: 0; + margin: 0; + border-radius: 0; + box-shadow: none; + z-index: 110; + } + + & > div { + flex: 1 1 33.3%; + min-height: 1px; + } + + .nav-left { + display: flex; + align-items: stretch; + justify-content: flex-start; + flex-wrap: nowrap; + } + + .nav-center { + display: flex; + align-items: stretch; + justify-content: center; + flex-wrap: nowrap; + } + + .nav-right { + display: flex; + align-items: stretch; + justify-content: flex-end; + flex-wrap: nowrap; + } + + .brand { + display: block; + padding: 15px; + + img { + display: block; + height: 18px; + width: auto; + position: relative; + bottom: -2px; + + @media screen and (max-width: $no-gap-breakpoint) { + height: 20px; + } + } + + &:hover, + &:focus, + &:active { + background: lighten($ui-base-color, 12%); + } + } + + .nav-link { + display: flex; + align-items: center; + padding: 0 1rem; + font-size: 12px; + font-weight: 500; + text-decoration: none; + color: $darker-text-color; + white-space: nowrap; + text-align: center; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + color: $primary-text-color; + } + } + + .nav-button { + background: lighten($ui-base-color, 16%); + margin: 8px; + margin-left: 0; + border-radius: 4px; + + &:hover, + &:focus, + &:active { + text-decoration: none; + background: lighten($ui-base-color, 20%); + } + } + } + + $no-columns-breakpoint: 600px; + + .grid { + display: grid; + grid-gap: 10px; + grid-template-columns: minmax(300px, 3fr) minmax(298px, 1fr); + grid-auto-columns: 25%; + grid-auto-rows: max-content; + + .column-0 { + grid-row: 1; + grid-column: 1; + } + + .column-1 { + grid-row: 1; + grid-column: 2; + } + + @media screen and (max-width: $no-columns-breakpoint) { + grid-template-columns: 100%; + grid-gap: 0; + + .column-1 { + display: none; + } + } + } + + .public-account-header { + overflow: hidden; + margin-bottom: 10px; + box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); + + &__image { + border-radius: 4px 4px 0 0; + overflow: hidden; + height: 300px; + position: relative; + background: darken($ui-base-color, 12%); + + &::after { + content: ""; + display: block; + position: absolute; + width: 100%; + height: 100%; + box-shadow: inset 0 -1px 1px 1px rgba($base-shadow-color, 0.15); + top: 0; + left: 0; + } + + img { + object-fit: cover; + display: block; + width: 100%; + height: 100%; + margin: 0; + border-radius: 4px 4px 0 0; + } + + @media screen and (max-width: 600px) { + height: 200px; + } + } + + @media screen and (max-width: $no-gap-breakpoint) { + margin-bottom: 0; + box-shadow: none; + + &__image::after { + display: none; + } + + &__image, + &__image img { + border-radius: 0; + } + } + + &__bar { + position: relative; + margin-top: -80px; + display: flex; + justify-content: flex-start; + + &::before { + content: ""; + display: block; + background: lighten($ui-base-color, 4%); + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 60px; + border-radius: 0 0 4px 4px; + z-index: -1; + } + + .avatar { + display: block; + width: 120px; + height: 120px; + padding-left: 20px - 4px; + flex: 0 0 auto; + + img { + display: block; + width: 100%; + height: 100%; + margin: 0; + border-radius: 50%; + border: 4px solid lighten($ui-base-color, 4%); + background: darken($ui-base-color, 8%); + } + } + + @media screen and (max-width: 600px) { + margin-top: 0; + background: lighten($ui-base-color, 4%); + border-radius: 0 0 4px 4px; + padding: 5px; + + &::before { + display: none; + } + + .avatar { + width: 48px; + height: 48px; + padding: 7px 0; + padding-left: 10px; + + img { + border: 0; + border-radius: 4px; + } + + @media screen and (max-width: 360px) { + display: none; + } + } + } + + @media screen and (max-width: $no-gap-breakpoint) { + border-radius: 0; + } + + @media screen and (max-width: $no-columns-breakpoint) { + flex-wrap: wrap; + } + } + + &__tabs { + flex: 1 1 auto; + margin-left: 20px; + + &__name { + padding-top: 20px; + padding-bottom: 8px; + + h1 { + font-size: 20px; + line-height: 18px * 1.5; + color: $primary-text-color; + font-weight: 500; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + text-shadow: 1px 1px 1px $base-shadow-color; + + small { + display: block; + font-size: 14px; + color: $primary-text-color; + font-weight: 400; + overflow: hidden; + text-overflow: ellipsis; + } + } + } + + @media screen and (max-width: 600px) { + margin-left: 15px; + display: flex; + justify-content: space-between; + align-items: center; + + &__name { + padding-top: 0; + padding-bottom: 0; + + h1 { + font-size: 16px; + line-height: 24px; + text-shadow: none; + + small { + color: $darker-text-color; + } + } + } + } + + &__tabs { + display: flex; + justify-content: flex-start; + align-items: stretch; + height: 58px; + + .details-counters { + display: flex; + flex-direction: row; + min-width: 300px; + } + + @media screen and (max-width: $no-columns-breakpoint) { + .details-counters { + display: none; + } + } + + .counter { + width: 33.3%; + box-sizing: border-box; + flex: 0 0 auto; + color: $darker-text-color; + padding: 10px; + border-right: 1px solid lighten($ui-base-color, 4%); + cursor: default; + text-align: center; + position: relative; + + a { + display: block; + } + + &:last-child { + border-right: 0; + } + + &::after { + display: block; + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + border-bottom: 4px solid $ui-primary-color; + opacity: 0.5; + transition: all 400ms ease; + } + + &.active { + &::after { + border-bottom: 4px solid $highlight-text-color; + opacity: 1; + } + } + + &:hover { + &::after { + opacity: 1; + transition-duration: 100ms; + } + } + + a { + text-decoration: none; + color: inherit; + } + + .counter-label { + font-size: 12px; + display: block; + } + + .counter-number { + font-weight: 500; + font-size: 18px; + margin-bottom: 5px; + color: $primary-text-color; + font-family: 'mastodon-font-display', sans-serif; + } + } + + .spacer { + flex: 1 1 auto; + height: 1px; + } + + &__buttons { + padding: 7px 8px; + } + } + } + + &__extra { + display: none; + margin-top: 4px; + + .public-account-bio { + border-radius: 0; + box-shadow: none; + background: transparent; + margin: 0 -5px; + + .account__header__fields { + border-top: 1px solid lighten($ui-base-color, 12%); + } + + .roles { + display: none; + } + } + + &__links { + margin-top: -15px; + font-size: 14px; + color: $darker-text-color; + + a { + display: inline-block; + color: $darker-text-color; + text-decoration: none; + padding: 15px; + + strong { + font-weight: 700; + color: $primary-text-color; + } + } + } + + @media screen and (max-width: $no-columns-breakpoint) { + display: block; + flex: 100%; + } + } + } + + .account__section-headline { + border-radius: 4px 4px 0 0; + + @media screen and (max-width: $no-gap-breakpoint) { + border-radius: 0; + } + } + + .detailed-status__meta { + margin-top: 25px; + } + + .public-account-bio { + background: lighten($ui-base-color, 8%); + box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); + border-radius: 4px; + overflow: hidden; + margin-bottom: 10px; + + @media screen and (max-width: $no-gap-breakpoint) { + box-shadow: none; + margin-bottom: 0; + border-radius: 0; + } + + .account__header__fields { + margin: 0; + border-top: 0; + + a { + color: lighten($ui-highlight-color, 8%); + } + } + + .account__header__content { + padding: 20px; + padding-bottom: 0; + color: $primary-text-color; + } + + &__extra, + .roles { + padding: 20px; + font-size: 14px; + color: $darker-text-color; + } + + .roles { + padding-bottom: 0; + } + } + + .static-icon-button { + color: $action-button-color; + font-size: 18px; + + & > span { + font-size: 14px; + font-weight: 500; + } + } + + .card-grid { + display: flex; + flex-wrap: wrap; + min-width: 100%; + margin: 0 -5px; + + & > div { + box-sizing: border-box; + flex: 1 0 auto; + width: 300px; + padding: 0 5px; + margin-bottom: 10px; + max-width: 33.333%; + + @media screen and (max-width: 900px) { + max-width: 50%; + } + + @media screen and (max-width: 600px) { + max-width: 100%; + } + } + + @media screen and (max-width: $no-gap-breakpoint) { + margin: 0; + border-top: 1px solid lighten($ui-base-color, 8%); + + & > div { + width: 100%; + padding: 0; + margin-bottom: 0; + border-bottom: 1px solid lighten($ui-base-color, 8%); + + &:last-child { + border-bottom: 0; + } + + .card__bar { + background: $ui-base-color; + + &:hover, + &:active, + &:focus { + background: lighten($ui-base-color, 4%); + } + } + } + } + } +} diff --git a/app/javascript/styles/mastodon/footer.scss b/app/javascript/styles/mastodon/footer.scss index 81eb1ce2d..4d75477e0 100644 --- a/app/javascript/styles/mastodon/footer.scss +++ b/app/javascript/styles/mastodon/footer.scss @@ -1,39 +1,140 @@ -.footer { - text-align: center; - margin-top: 30px; - padding-bottom: 60px; - font-size: 12px; - color: $darker-text-color; - - .footer__domain { - font-weight: 500; - - a { - color: inherit; - text-decoration: none; +.public-layout { + .footer { + text-align: left; + padding-top: 20px; + padding-bottom: 60px; + font-size: 12px; + color: lighten($ui-base-color, 34%); + + @media screen and (max-width: $no-gap-breakpoint) { + padding-left: 20px; + padding-right: 20px; } - } - .powered-by, - .single-user-login { - font-weight: 400; + .grid { + display: grid; + grid-gap: 10px; + grid-template-columns: 1fr 1fr 2fr 1fr 1fr; + + .column-0 { + grid-column: 1; + grid-row: 1; + min-width: 0; + } + + .column-1 { + grid-column: 2; + grid-row: 1; + min-width: 0; + } + + .column-2 { + grid-column: 3; + grid-row: 1; + min-width: 0; + text-align: center; + + h4 a { + color: lighten($ui-base-color, 34%); + } + } + + .column-3 { + grid-column: 4; + grid-row: 1; + min-width: 0; + } + + .column-4 { + grid-column: 5; + grid-row: 1; + min-width: 0; + } + + @media screen and (max-width: 690px) { + grid-template-columns: 1fr 2fr 1fr; + + .column-0, + .column-1 { + grid-column: 1; + } + + .column-1 { + grid-row: 2; + } + + .column-2 { + grid-column: 2; + } - a { - color: inherit; - text-decoration: underline; - font-weight: 500; + .column-3, + .column-4 { + grid-column: 3; + } - &:hover { + .column-4 { + grid-row: 2; + } + } + + @media screen and (max-width: 600px) { + .column-1 { + display: block; + } + } + + @media screen and (max-width: $no-gap-breakpoint) { + .column-0, + .column-1, + .column-3, + .column-4 { + display: none; + } + } + } + + h4 { + text-transform: uppercase; + font-weight: 700; + margin-bottom: 8px; + color: $darker-text-color; + + a { + color: inherit; text-decoration: none; } } - img { - margin: 0 4px; - position: relative; - bottom: -1px; - height: 18px; - vertical-align: top; + ul a { + text-decoration: none; + color: lighten($ui-base-color, 34%); + + &:hover, + &:active, + &:focus { + text-decoration: underline; + } + } + + .brand { + svg { + display: block; + height: 36px; + width: auto; + margin: 0 auto; + + path { + fill: lighten($ui-base-color, 34%); + } + } + + &:hover, + &:focus, + &:active { + svg path { + fill: lighten($ui-base-color, 38%); + } + } } } } diff --git a/app/javascript/styles/mastodon/landing_strip.scss b/app/javascript/styles/mastodon/landing_strip.scss deleted file mode 100644 index 86614b89b..000000000 --- a/app/javascript/styles/mastodon/landing_strip.scss +++ /dev/null @@ -1,111 +0,0 @@ -.landing-strip, -.memoriam-strip { - background: rgba(darken($ui-base-color, 7%), 0.8); - color: $darker-text-color; - font-weight: 400; - padding: 14px; - border-radius: 4px; - margin-bottom: 20px; - display: flex; - align-items: center; - - strong, - a { - font-weight: 500; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - - a { - color: inherit; - text-decoration: underline; - } - - .logo { - width: 30px; - height: 30px; - flex: 0 0 auto; - margin-right: 15px; - } - - @media screen and (max-width: 740px) { - margin-bottom: 0; - } -} - -.memoriam-strip { - background: rgba($base-shadow-color, 0.7); -} - -.moved-strip { - padding: 14px; - border-radius: 4px; - background: rgba(darken($ui-base-color, 7%), 0.8); - color: $secondary-text-color; - font-weight: 400; - margin-bottom: 20px; - - strong, - a { - font-weight: 500; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - - a { - color: inherit; - text-decoration: underline; - - &.mention { - text-decoration: none; - - span { - text-decoration: none; - } - - &:focus, - &:hover, - &:active { - text-decoration: none; - - span { - text-decoration: underline; - } - } - } - } - - &__message { - margin-bottom: 15px; - - .fa { - margin-right: 5px; - color: $darker-text-color; - } - } - - &__card { - .detailed-status__display-avatar { - position: relative; - cursor: pointer; - } - - .detailed-status__display-name { - margin-bottom: 0; - text-decoration: none; - - span { - color: $highlight-text-color; - font-weight: 400; - } - } - } -} diff --git a/app/javascript/styles/mastodon/stream_entries.scss b/app/javascript/styles/mastodon/stream_entries.scss index f4d6e237f..9e2aa720c 100644 --- a/app/javascript/styles/mastodon/stream_entries.scss +++ b/app/javascript/styles/mastodon/stream_entries.scss @@ -1,367 +1,145 @@ .activity-stream { - clear: both; box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); + border-radius: 4px; + overflow: hidden; + margin-bottom: 10px; + + @media screen and (max-width: $no-gap-breakpoint) { + margin-bottom: 0; + border-radius: 0; + box-shadow: none; + } + + &--headless { + border-radius: 0; + margin: 0; + box-shadow: none; + + .detailed-status, + .status { + border-radius: 0 !important; + } + } div[data-component] { width: 100%; } .entry { - background: $simple-background-color; + background: $ui-base-color; - .detailed-status.light, - .status.light, - .more.light { - border-bottom: 1px solid $ui-secondary-color; + .detailed-status, + .status, + .load-more { animation: none; } &:last-child { - &, - .detailed-status.light, - .status.light { + .detailed-status, + .status { border-bottom: 0; border-radius: 0 0 4px 4px; } } &:first-child { - &, - .detailed-status.light, - .status.light { + .detailed-status, + .status { border-radius: 4px 4px 0 0; } &:last-child { - &, - .detailed-status.light, - .status.light { + .detailed-status, + .status { border-radius: 4px; } } } @media screen and (max-width: 740px) { - &, - .detailed-status.light, - .status.light { + .detailed-status, + .status { border-radius: 0 !important; } } } +} - &.with-header { - .entry { - &:first-child { - &, - .detailed-status.light, - .status.light { - border-radius: 0; - } - - &:last-child { - &, - .detailed-status.light, - .status.light { - border-radius: 0 0 4px 4px; - } - } - } - } - } - - .media-gallery__gifv__label { - bottom: 9px; - } - - .status.light { - padding: 14px 14px 14px (48px + 14px * 2); - position: relative; - min-height: 48px; - cursor: default; - - .status__header { - font-size: 15px; - - .status__meta { - float: right; - font-size: 14px; - - .status__relative-time { - color: $lighter-text-color; - } - } - } - - .status__display-name { - display: block; - max-width: 100%; - padding-right: 25px; - color: $inverted-text-color; - } - - .status__avatar { - position: absolute; - left: 14px; - top: 14px; - width: 48px; - height: 48px; - - & > div { - width: 48px; - height: 48px; - } - - img { - display: block; - border-radius: 4px; - } - } - - .display-name { - display: block; - max-width: 100%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - - strong { - font-weight: 500; - color: $inverted-text-color; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - - span { - font-size: 14px; - color: $light-text-color; - } - } - - .status__content { - color: $inverted-text-color; - - a { - color: $highlight-text-color; - } - - a.status__content__spoiler-link { - color: $primary-text-color; - background: $ui-base-color; - - &:hover { - background: lighten($ui-base-color, 8%); - } - } - } - } - - .detailed-status.light { - padding: 14px; - background: $simple-background-color; - cursor: default; - - .detailed-status__display-name { - display: block; - overflow: hidden; - margin-bottom: 15px; - - & > div { - float: left; - margin-right: 10px; - } - - .display-name { - display: block; - max-width: 100%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - - strong { - font-weight: 500; - color: $inverted-text-color; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - - span { - font-size: 14px; - color: $light-text-color; - } - } - } - - .avatar { - width: 48px; - height: 48px; - - img { - display: block; - border-radius: 4px; - } - } - - .status__content { - color: $inverted-text-color; - - a { - color: $highlight-text-color; - } - - a.status__content__spoiler-link { - color: $primary-text-color; - background: $ui-base-color; - - &:hover { - background: lighten($ui-base-color, 8%); - } - } - } - - .detailed-status__meta { - margin-top: 15px; - color: $light-text-color; - font-size: 14px; - line-height: 18px; - - a { - color: inherit; - } - - span > span { - font-weight: 500; - font-size: 12px; - margin-left: 6px; - display: inline-block; - } - } - - .status-card { - border-color: lighten($ui-secondary-color, 4%); - color: $lighter-text-color; - - &:hover { - background: lighten($ui-secondary-color, 4%); - } - } - - .status-card__title, - .status-card__description { - color: $inverted-text-color; - } - - .status-card__image { - background: $ui-secondary-color; - } - } - - .media-spoiler { - background: $ui-base-color; - color: $darker-text-color; - } +.button.logo-button { + flex: 0 auto; + font-size: 14px; + background: $ui-highlight-color; + color: $primary-text-color; + text-transform: none; + line-height: 36px; + height: auto; + padding: 3px 15px; + border: 0; - .pre-header { - padding: 14px 0; - padding-left: (48px + 14px * 2); - padding-bottom: 0; - margin-bottom: -4px; - color: $light-text-color; - font-size: 14px; - position: relative; + svg { + width: 20px; + height: auto; + vertical-align: middle; + margin-right: 5px; - .pre-header__icon { - position: absolute; - left: (48px + 14px * 2 - 30px); + path:first-child { + fill: $primary-text-color; } - .status__display-name.muted strong { - color: $light-text-color; + path:last-child { + fill: $ui-highlight-color; } } - .open-in-web-link { - text-decoration: none; + &:active, + &:focus, + &:hover { + background: lighten($ui-highlight-color, 10%); - &:hover { - text-decoration: underline; + svg path:last-child { + fill: lighten($ui-highlight-color, 10%); } } - .more { - color: $darker-text-color; - display: block; - padding: 14px; - text-align: center; - - &:not(:hover) { - text-decoration: none; + @media screen and (max-width: $no-gap-breakpoint) { + svg { + display: none; } } } -.embed { - .activity-stream { - box-shadow: none; +.embed, +.public-layout { + .detailed-status { + padding: 15px; } -} -.entry { - .detailed-status.light { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - align-items: flex-start; + .status { + padding: 15px 15px 15px (48px + 15px * 2); + min-height: 48px + 2px; - .detailed-status__display-name { - flex: 1; - margin: 0 5px 15px 0; + &__avatar { + left: 15px; + top: 17px; } - .button.button-secondary.logo-button { - flex: 0 auto; - font-size: 14px; - background: $ui-highlight-color; - color: $primary-text-color; - border: 0; - - svg { - width: 20px; - height: auto; - vertical-align: middle; - margin-right: 5px; - - path:first-child { - fill: $primary-text-color; - } - - path:last-child { - fill: $ui-highlight-color; - } - } + &__content { + padding-top: 5px; + } - &:active, - &:focus, - &:hover { - background: lighten($ui-highlight-color, 10%); + &__prepend { + margin-left: 48px + 15px * 2; + padding-top: 15px; + } - svg path:last-child { - fill: lighten($ui-highlight-color, 10%); - } - } + &__prepend-icon-wrapper { + left: -32px; } - .status__content, - .detailed-status__meta { - flex: 100%; + .media-gallery, + &__action-bar, + .video-player { + margin-top: 10px; } } } diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss index 40aeb4afc..009f0a3c9 100644 --- a/app/javascript/styles/mastodon/variables.scss +++ b/app/javascript/styles/mastodon/variables.scss @@ -46,3 +46,5 @@ $cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW; $media-modal-media-max-width: 100%; // put margins on top and bottom of image to avoid the screen covered by image. $media-modal-media-max-height: 80%; + +$no-gap-breakpoint: 415px; diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss new file mode 100644 index 000000000..9324533bd --- /dev/null +++ b/app/javascript/styles/mastodon/widgets.scss @@ -0,0 +1,123 @@ +.hero-widget { + margin-bottom: 10px; + box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); + + &__img { + width: 100%; + height: 167px; + position: relative; + overflow: hidden; + border-radius: 4px 4px 0 0; + background: $base-shadow-color; + + img { + object-fit: cover; + display: block; + width: 100%; + height: 100%; + margin: 0; + border-radius: 4px 4px 0 0; + } + } + + &__text { + background: $ui-base-color; + padding: 20px; + border-radius: 0 0 4px 4px; + font-size: 14px; + color: $darker-text-color; + } + + @media screen and (max-width: $no-gap-breakpoint) { + display: none; + } +} + +.moved-account-widget { + padding: 15px; + padding-bottom: 20px; + border-radius: 4px; + background: $ui-base-color; + box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); + color: $secondary-text-color; + font-weight: 400; + margin-bottom: 10px; + + strong, + a { + font-weight: 500; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } + } + + a { + color: inherit; + text-decoration: underline; + + &.mention { + text-decoration: none; + + span { + text-decoration: none; + } + + &:focus, + &:hover, + &:active { + text-decoration: none; + + span { + text-decoration: underline; + } + } + } + } + + &__message { + margin-bottom: 15px; + + .fa { + margin-right: 5px; + color: $darker-text-color; + } + } + + &__card { + .detailed-status__display-avatar { + position: relative; + cursor: pointer; + } + + .detailed-status__display-name { + margin-bottom: 0; + text-decoration: none; + + span { + font-weight: 400; + } + } + } +} + +.memoriam-widget { + padding: 20px; + border-radius: 4px; + background: $base-shadow-color; + box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); + font-size: 14px; + color: $darker-text-color; + margin-bottom: 10px; +} + +.moved-account-widget, +.memoriam-widget { + @media screen and (max-width: $no-gap-breakpoint) { + margin-bottom: 0; + box-shadow: none; + border-radius: 0; + } +} -- cgit From 2ccef52a4f5be49e5c3b2256a3c5d4f193a3fe32 Mon Sep 17 00:00:00 2001 From: "Mélanie Chauvel (ariasuni)" Date: Sat, 28 Jul 2018 20:09:58 +0200 Subject: Improve account bar css (#8087) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Remove superfluous span tags * Make account bar items (except dropdown) flexible to work well with custom CSS * Fix CSS lint warning (0px → 0) --- app/javascript/mastodon/features/account/components/action_bar.js | 6 +++--- app/javascript/styles/mastodon/components.scss | 5 ++--- 2 files changed, 5 insertions(+), 6 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/features/account/components/action_bar.js b/app/javascript/mastodon/features/account/components/action_bar.js index 69726a416..e3f2d0f55 100644 --- a/app/javascript/mastodon/features/account/components/action_bar.js +++ b/app/javascript/mastodon/features/account/components/action_bar.js @@ -142,17 +142,17 @@ export default class ActionBar extends React.PureComponent {
- + {shortNumberFormat(account.get('statuses_count'))} - + {shortNumberFormat(account.get('following_count'))} - + {shortNumberFormat(account.get('followers_count'))}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 814739dfc..708a6868a 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1236,7 +1236,6 @@ a .account__avatar { } .account__action-bar-dropdown { - flex: 0 1 calc(50% - 140px); padding: 10px; .icon-button { @@ -1268,9 +1267,9 @@ a .account__avatar { .account__action-bar__tab { text-decoration: none; overflow: hidden; - flex: 0 1 80px; + flex: 0 1 100%; border-right: 1px solid lighten($ui-base-color, 8%); - padding: 10px 5px; + padding: 10px 0; & > span { display: block; -- cgit From 1d773b3a4691b153ff0c658db53007293905d86b Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 28 Jul 2018 23:52:20 +0200 Subject: Add missing formatting to the text in hero widget (#8089) --- app/javascript/styles/mastodon/widgets.scss | 40 ++++++++++++++++++++++++++++- 1 file changed, 39 insertions(+), 1 deletion(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss index 9324533bd..d37a6f458 100644 --- a/app/javascript/styles/mastodon/widgets.scss +++ b/app/javascript/styles/mastodon/widgets.scss @@ -24,8 +24,46 @@ background: $ui-base-color; padding: 20px; border-radius: 0 0 4px 4px; - font-size: 14px; + font-size: 15px; color: $darker-text-color; + line-height: 20px; + word-wrap: break-word; + font-weight: 400; + + .emojione { + width: 20px; + height: 20px; + margin: -3px 0 0; + } + + p { + margin-bottom: 20px; + + &:last-child { + margin-bottom: 0; + } + } + + em { + display: inline; + margin: 0; + padding: 0; + font-weight: 700; + background: transparent; + font-family: inherit; + font-size: inherit; + line-height: inherit; + color: lighten($darker-text-color, 10%); + } + + a { + color: $secondary-text-color; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } } @media screen and (max-width: $no-gap-breakpoint) { -- cgit From 60df87f6f0fb8afd9a4e750917eff7c425b62891 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 31 Jul 2018 01:14:33 +0200 Subject: Compensate for scrollbar disappearing when media modal visible (#8100) * Compensate for scrollbar disappearing when media modal visible Make auth pages backgrounds lighter * Fix typo --- app/controllers/about_controller.rb | 2 +- app/controllers/accounts_controller.rb | 1 + app/controllers/auth/confirmations_controller.rb | 5 +++++ app/controllers/auth/passwords_controller.rb | 5 +++++ app/controllers/auth/registrations_controller.rb | 5 +++++ app/controllers/auth/sessions_controller.rb | 5 +++++ app/controllers/statuses_controller.rb | 2 ++ app/controllers/tags_controller.rb | 2 +- .../mastodon/containers/media_container.js | 6 +++--- .../mastodon/features/ui/components/modal_root.js | 13 +++++++------ app/javascript/styles/mastodon/basics.scss | 22 ++++++++++++++-------- app/javascript/styles/mastodon/containers.scss | 4 ---- spec/controllers/about_controller_spec.rb | 12 ------------ 13 files changed, 49 insertions(+), 35 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/controllers/about_controller.rb b/app/controllers/about_controller.rb index 4ffdfb685..810f212fd 100644 --- a/app/controllers/about_controller.rb +++ b/app/controllers/about_controller.rb @@ -26,7 +26,7 @@ class AboutController < ApplicationController end def set_body_classes - @body_classes = 'about-body' + @body_classes = 'with-modals' end def initial_state_params diff --git a/app/controllers/accounts_controller.rb b/app/controllers/accounts_controller.rb index 1152d4aca..d63363156 100644 --- a/app/controllers/accounts_controller.rb +++ b/app/controllers/accounts_controller.rb @@ -10,6 +10,7 @@ class AccountsController < ApplicationController def show respond_to do |format| format.html do + @body_classes = 'with-modals' @pinned_statuses = [] if current_account && @account.blocking?(current_account) diff --git a/app/controllers/auth/confirmations_controller.rb b/app/controllers/auth/confirmations_controller.rb index 068e71cad..7af9cbe81 100644 --- a/app/controllers/auth/confirmations_controller.rb +++ b/app/controllers/auth/confirmations_controller.rb @@ -3,6 +3,7 @@ class Auth::ConfirmationsController < Devise::ConfirmationsController layout 'auth' + before_action :set_body_classes before_action :set_user, only: [:finish_signup] # GET/PATCH /users/:id/finish_signup @@ -23,6 +24,10 @@ class Auth::ConfirmationsController < Devise::ConfirmationsController @user = current_user end + def set_body_classes + @body_classes = 'lighter' + end + def user_params params.require(:user).permit(:email) end diff --git a/app/controllers/auth/passwords_controller.rb b/app/controllers/auth/passwords_controller.rb index 171b997dc..34b98da53 100644 --- a/app/controllers/auth/passwords_controller.rb +++ b/app/controllers/auth/passwords_controller.rb @@ -2,6 +2,7 @@ class Auth::PasswordsController < Devise::PasswordsController before_action :check_validity_of_reset_password_token, only: :edit + before_action :set_body_classes layout 'auth' @@ -14,6 +15,10 @@ class Auth::PasswordsController < Devise::PasswordsController end end + def set_body_classes + @body_classes = 'lighter' + end + def reset_password_token_is_valid? resource_class.with_reset_password_token(params[:reset_password_token]).present? end diff --git a/app/controllers/auth/registrations_controller.rb b/app/controllers/auth/registrations_controller.rb index 58961554e..a19f4e62e 100644 --- a/app/controllers/auth/registrations_controller.rb +++ b/app/controllers/auth/registrations_controller.rb @@ -8,6 +8,7 @@ class Auth::RegistrationsController < Devise::RegistrationsController before_action :configure_sign_up_params, only: [:create] before_action :set_sessions, only: [:edit, :update] before_action :set_instance_presenter, only: [:new, :create, :update] + before_action :set_body_classes, only: [:new, :create] def destroy not_found @@ -79,6 +80,10 @@ class Auth::RegistrationsController < Devise::RegistrationsController @instance_presenter = InstancePresenter.new end + def set_body_classes + @body_classes = 'lighter' + end + def set_invite @invite = invite_code.present? ? Invite.find_by(code: invite_code) : nil end diff --git a/app/controllers/auth/sessions_controller.rb b/app/controllers/auth/sessions_controller.rb index c1ebe760c..2e721160b 100644 --- a/app/controllers/auth/sessions_controller.rb +++ b/app/controllers/auth/sessions_controller.rb @@ -9,6 +9,7 @@ class Auth::SessionsController < Devise::SessionsController skip_before_action :check_suspension, only: [:destroy] prepend_before_action :authenticate_with_two_factor, if: :two_factor_enabled?, only: [:create] before_action :set_instance_presenter, only: [:new] + before_action :set_body_classes def new Devise.omniauth_configs.each do |provider, config| @@ -109,6 +110,10 @@ class Auth::SessionsController < Devise::SessionsController @instance_presenter = InstancePresenter.new end + def set_body_classes + @body_classes = 'lighter' + end + def home_paths(resource) paths = [about_path] if single_user_mode? && resource.is_a?(User) diff --git a/app/controllers/statuses_controller.rb b/app/controllers/statuses_controller.rb index 755af1deb..819fcfc70 100644 --- a/app/controllers/statuses_controller.rb +++ b/app/controllers/statuses_controller.rb @@ -22,6 +22,8 @@ class StatusesController < ApplicationController def show respond_to do |format| format.html do + @body_classes = 'with-modals' + set_ancestors set_descendants diff --git a/app/controllers/tags_controller.rb b/app/controllers/tags_controller.rb index 014a5c9b8..8772509d5 100644 --- a/app/controllers/tags_controller.rb +++ b/app/controllers/tags_controller.rb @@ -37,7 +37,7 @@ class TagsController < ApplicationController private def set_body_classes - @body_classes = 'tag-body' + @body_classes = 'with-modals' end def set_instance_presenter diff --git a/app/javascript/mastodon/containers/media_container.js b/app/javascript/mastodon/containers/media_container.js index 1700fba05..43bb39403 100644 --- a/app/javascript/mastodon/containers/media_container.js +++ b/app/javascript/mastodon/containers/media_container.js @@ -29,19 +29,19 @@ export default class MediaContainer extends PureComponent { }; handleOpenMedia = (media, index) => { - document.body.classList.add('media-standalone__body'); + document.body.classList.add('with-modals--active'); this.setState({ media, index }); } handleOpenVideo = (video, time) => { const media = ImmutableList([video]); - document.body.classList.add('media-standalone__body'); + document.body.classList.add('with-modals--active'); this.setState({ media, time }); } handleCloseMedia = () => { - document.body.classList.remove('media-standalone__body'); + document.body.classList.remove('with-modals--active'); this.setState({ media: null, index: null, time: null }); } diff --git a/app/javascript/mastodon/features/ui/components/modal_root.js b/app/javascript/mastodon/features/ui/components/modal_root.js index a334318ce..d8e034554 100644 --- a/app/javascript/mastodon/features/ui/components/modal_root.js +++ b/app/javascript/mastodon/features/ui/components/modal_root.js @@ -41,14 +41,15 @@ export default class ModalRoot extends React.PureComponent { }; getSnapshotBeforeUpdate () { - const visible = !!this.props.type; - return { - overflowY: visible ? 'hidden' : null, - }; + return { visible: !!this.props.type }; } - componentDidUpdate (prevProps, prevState, { overflowY }) { - document.body.style.overflowY = overflowY; + componentDidUpdate (prevProps, prevState, { visible }) { + if (visible) { + document.body.classList.add('with-modals--active'); + } else { + document.body.classList.remove('with-modals--active'); + } } renderLoading = modalId => () => { diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss index c45a50756..7a6a1c490 100644 --- a/app/javascript/styles/mastodon/basics.scss +++ b/app/javascript/styles/mastodon/basics.scss @@ -1,8 +1,6 @@ body { font-family: 'mastodon-font-sans-serif', sans-serif; background: darken($ui-base-color, 8%); - background-size: cover; - background-attachment: fixed; font-size: 13px; line-height: 18px; font-weight: 400; @@ -34,16 +32,24 @@ body { height: 100%; padding: 0; background: $ui-base-color; + + &.with-modals--active { + overflow-y: hidden; + } } - &.about-body { - background: darken($ui-base-color, 8%); - padding-bottom: 0; + &.lighter { + background: $ui-base-color; } - &.tag-body { - background: darken($ui-base-color, 8%); - padding-bottom: 0; + &.with-modals { + overflow-x: hidden; + overflow-y: scroll; + + &--active { + overflow-y: hidden; + margin-right: 13px; + } } &.player { diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index c2ff77783..7b339277f 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -60,10 +60,6 @@ } } -.media-standalone__body { - overflow: hidden; -} - .account-header { width: 400px; margin: 0 auto; diff --git a/spec/controllers/about_controller_spec.rb b/spec/controllers/about_controller_spec.rb index 2089b3b16..03dddd8c1 100644 --- a/spec/controllers/about_controller_spec.rb +++ b/spec/controllers/about_controller_spec.rb @@ -8,10 +8,6 @@ RSpec.describe AboutController, type: :controller do get :show end - it 'assigns @body_classes' do - expect(assigns(:body_classes)).to eq 'about-body' - end - it 'assigns @instance_presenter' do expect(assigns(:instance_presenter)).to be_kind_of InstancePresenter end @@ -26,10 +22,6 @@ RSpec.describe AboutController, type: :controller do get :more end - it 'assigns @body_classes' do - expect(assigns(:body_classes)).to eq 'about-body' - end - it 'assigns @instance_presenter' do expect(assigns(:instance_presenter)).to be_kind_of InstancePresenter end @@ -44,10 +36,6 @@ RSpec.describe AboutController, type: :controller do get :terms end - it 'assigns @body_classes' do - expect(assigns(:body_classes)).to eq 'about-body' - end - it 'returns http success' do expect(response).to have_http_status(200) end -- cgit From 13ac8ca66ab01c92e4ebcc7221efb3d474c9fd0b Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 31 Jul 2018 02:54:25 +0200 Subject: Do not hide hashtag timeline in mobile view, make it full-window (#8093) --- app/javascript/styles/mastodon/about.scss | 30 +++++++++++++++++++----------- 1 file changed, 19 insertions(+), 11 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss index fefb03407..b9544bb33 100644 --- a/app/javascript/styles/mastodon/about.scss +++ b/app/javascript/styles/mastodon/about.scss @@ -1115,6 +1115,21 @@ $small-breakpoint: 960px; } &.tag-page { + @media screen and (max-width: $column-breakpoint) { + padding: 0; + + .container { + padding: 0; + } + + #mastodon-timeline { + display: block; + width: 100vw; + height: 100vh; + border-radius: 0; + } + } + .grid { @media screen and (min-width: $small-breakpoint) { grid-template-columns: 33% 67%; @@ -1146,24 +1161,17 @@ $small-breakpoint: 960px; @media screen and (max-width: $column-breakpoint) { .grid { + grid-gap: 0; + .column-1 { grid-column: 1; - grid-row: 2; + grid-row: 1; } .column-2 { - grid-column: 1; - grid-row: 1; + display: none; } } - - .brand { - margin: 0; - } - - .landing-page__features { - display: none; - } } } } -- cgit