diff options
| author | Eugen Rochko <eugen@zeonfederated.com> | 2019-05-23 20:01:10 +0200 |
|---|---|---|
| committer | multiple creatures <dev@multiple-creature.party> | 2020-02-22 01:22:00 -0600 |
| commit | e745bd64e7aca52ca7ba96e412aaacb2fbf22ee4 (patch) | |
| tree | dc55ed019c6faed6127d9a1479b2b844afed9f3c /app/javascript/flavours/glitch/styles | |
| parent | 687fa7b9edd6a8b46eb6f12d7db8abde76e1eaf2 (diff) | |
[Glitch] Various improvements to single column layout
Port 84dc21d55d8627182ce201baeddb6fbbdf8748c2 to glitch-soc Signed-off-by: Thibaut Girka <thib@sitedethib.com>
Diffstat (limited to 'app/javascript/flavours/glitch/styles')
| -rw-r--r-- | app/javascript/flavours/glitch/styles/components/columns.scss | 37 | ||||
| -rw-r--r-- | app/javascript/flavours/glitch/styles/components/index.scss | 6 |
2 files changed, 39 insertions, 4 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 50438393e..f372a4830 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -11,6 +11,39 @@ justify-content: flex-start; overflow-x: auto; position: relative; + + &__panels { + display: flex; + justify-content: center; + width: 100%; + height: 100%; + + &__pane { + flex: 1 1 auto; + height: 100%; + overflow: hidden; + pointer-events: none; + display: flex; + justify-content: flex-end; + + &__inner { + pointer-events: auto; + height: 100%; + } + } + + &__main { + box-sizing: border-box; + width: 100%; + max-width: 600px; + display: flex; + flex-direction: column; + + @media screen and (min-width: 360px) { + padding: 0 10px; + } + } + } } .react-swipeable-view-container { @@ -496,4 +529,8 @@ &:active { background: lighten($ui-highlight-color, 7%); } + + @media screen and (min-width: 630px) { + display: none; + } } diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 4861bf492..5557b0473 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -608,7 +608,6 @@ .columns-area--mobile { flex-direction: column; width: 100%; - max-width: 600px; margin: 0 auto; .column, @@ -624,7 +623,7 @@ } @media screen and (min-width: 360px) { - padding: 10px; + padding: 10px 0; } @media screen and (min-width: 630px) { @@ -685,8 +684,7 @@ .tabs-bar { margin: 10px auto; margin-bottom: 0; - width: calc(100% - 20px); - max-width: 600px; + width: 100%; } .react-swipeable-view-container .columns-area--mobile { |