diff options
Diffstat (limited to 'app')
4 files changed, 238 insertions, 295 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index b8ecf647e..b354e7acf 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -90,34 +90,6 @@ overflow: hidden; } -@include multi-columns('screen and (min-width: 631px)', $parent: null) { - .columns-area { - padding: 0; - } - - .column { - flex: 0 0 auto; - padding: 10px; - padding-left: 5px; - padding-right: 5px; - - &:first-child { - padding-left: 10px; - } - - &:last-child { - padding-right: 10px; - } - } - - .columns-area > div { - .column { - padding-left: 5px; - padding-right: 5px; - } - } -} - .column-back-button { background: lighten($ui-base-color, 4%); color: $highlight-text-color; @@ -298,7 +270,7 @@ flex-direction: column; overflow: hidden; - .wide & { + .wide .columns-area:not(.columns-area--mobile) & { flex: auto; min-width: 330px; max-width: 400px; diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index 07558a8d0..f054ddbc0 100644 --- a/app/javascript/flavours/glitch/styles/components/drawer.scss +++ b/app/javascript/flavours/glitch/styles/components/drawer.scss @@ -86,9 +86,8 @@ box-sizing: border-box; margin: 0; border: none; - padding: 10px 30px 10px 10px; + padding: 15px 30px 15px 15px; width: 100%; - height: 36px; outline: 0; color: $darker-text-color; background: $ui-base-color; diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 27caf32ac..0f187d9e9 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -597,201 +597,10 @@ margin-left: 5px; display: none; } -} - -@media screen and (min-width: 600px) { - .tabs-bar__link { - span { - display: inline; - } - } -} - -.columns-area--mobile { - flex-direction: column; - width: 100%; - margin: 0 auto; - - .column, - .drawer { - width: 100%; - height: 100%; - padding: 0; - } - - .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; - } - - @media screen and (min-width: 630px) { - .detailed-status { - padding: 15px; - - .media-gallery, - .video-player { - margin-top: 15px; - } - } - - .account__header__bar { - padding: 5px 10px; - } - - .navigation-bar, - .compose-form { - padding: 15px; - } - - .compose-form .compose-form__publish .compose-form__publish-button-wrapper { - padding-top: 15px; - } - - .status { - padding: 15px 15px 15px (48px + 15px * 2); - min-height: 48px + 2px; - - &__avatar { - left: 15px; - top: 17px; - } - - &__content { - padding-top: 5px; - } - - &__prepend { - margin-left: 48px + 15px * 2; - padding-top: 15px; - } - - &__prepend-icon-wrapper { - left: -32px; - } - - .media-gallery, - &__action-bar, - .video-player { - margin-top: 10px; - } - } - - .account { - padding: 15px 10px; - - &__header__bio { - margin: 0 -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%); - } -} - -@media screen and (min-width: 360px) { - .tabs-bar { - margin: 10px auto; - margin-bottom: 0; - width: 100%; - } - .react-swipeable-view-container .columns-area--mobile { - height: calc(100% - 20px) !important; - } - - .getting-started__wrapper, - .getting-started__trends, - .search { - margin-bottom: 10px; - } -} - -@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; + span.icon { + margin-left: 0; + display: inline; } } @@ -817,76 +626,6 @@ border-color: darken($ui-base-color, 8%); } -.compose-panel { - width: 285px; - margin-top: 10px; - display: flex; - flex-direction: column; - height: calc(100% - 10px); - overflow-y: hidden; - - .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: 0 1 48px; - min-height: 20px; - } - - .flex-spacer { - background: transparent; - } - - .compose-form { - flex: 1; - overflow-y: hidden; - display: flex; - flex-direction: column; - min-height: 310px; - padding-bottom: 71px; - margin-bottom: -71px; - } - - .compose-form__autosuggest-wrapper { - overflow-y: auto; - background-color: $white; - border-radius: 4px 4px 0 0; - flex: 0 1 auto; - } - - .autosuggest-textarea__textarea { - overflow-y: hidden; - } - - .compose-form__upload-thumbnail { - height: 80px; - } -} - -.navigation-panel { - margin-top: 10px; - margin-bottom: 10px; - height: calc(100% - 20px); - overflow-y: auto; - - hr { - border: 0; - background: transparent; - border-top: 1px solid lighten($ui-base-color, 4%); - margin: 10px 0; - } -} - .scrollable { overflow-y: scroll; overflow-x: hidden; @@ -1657,3 +1396,4 @@ noscript { @import 'emoji_picker'; @import 'local_settings'; @import 'error_boundary'; +@import 'single_column'; diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss new file mode 100644 index 000000000..ca962abd2 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/single_column.scss @@ -0,0 +1,232 @@ +.compose-panel { + width: 285px; + margin-top: 10px; + display: flex; + flex-direction: column; + height: calc(100% - 10px); + overflow-y: hidden; + + .drawer--search input { + line-height: 18px; + font-size: 16px; + padding: 15px; + padding-right: 30px; + } + + .search__icon .fa { + top: 15px; + } + + .drawer--account { + flex: 0 1 48px; + } + + .flex-spacer { + background: transparent; + } + + .composer { + flex: 1; + overflow-y: hidden; + display: flex; + flex-direction: column; + min-height: 310px; + } + + .compose-form__autosuggest-wrapper { + overflow-y: auto; + background-color: $white; + border-radius: 4px 4px 0 0; + flex: 0 1 auto; + } + + .autosuggest-textarea__textarea { + overflow-y: hidden; + } + + .compose-form__upload-thumbnail { + height: 80px; + } +} + +.navigation-panel { + margin-top: 10px; + margin-bottom: 10px; + height: calc(100% - 20px); + overflow-y: auto; + + hr { + border: 0; + background: transparent; + border-top: 1px solid lighten($ui-base-color, 4%); + margin: 10px 0; + } +} + +@media screen and (min-width: 600px) { + .tabs-bar__link { + span { + display: inline; + } + } +} + +.columns-area--mobile { + flex-direction: column; + width: 100%; + margin: 0 auto; + + .column, + .drawer { + width: 100%; + height: 100%; + padding: 0; + } + + .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; + } + + @media screen and (min-width: 630px) { + .detailed-status { + padding: 15px; + + .media-gallery, + .video-player { + margin-top: 15px; + } + } + + .account__header__bar { + padding: 5px 10px; + } + + .navigation-bar, + .compose-form { + padding: 15px; + } + + .compose-form .compose-form__publish .compose-form__publish-button-wrapper { + padding-top: 15px; + } + + .status { + padding: 15px; + min-height: 48px + 2px; + + .media-gallery, + &__action-bar, + .video-player { + margin-top: 10px; + } + } + + .account { + padding: 15px 10px; + + &__header__bio { + margin: 0 -10px; + } + } + + .notification { + &__message { + padding-top: 15px; + } + + .status { + padding-top: 8px; + } + + .account { + padding-top: 8px; + } + } + } +} + +.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: 360px) { + .tabs-bar { + margin: 10px auto; + margin-bottom: 0; + width: 100%; + } + + .react-swipeable-view-container .columns-area--mobile { + height: calc(100% - 20px) !important; + } + + .getting-started__wrapper, + .getting-started__trends, + .search { + margin-bottom: 10px; + } +} + +@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; + } +} |