From faa1d9c658088438d07f258c1a3492a8b96491b0 Mon Sep 17 00:00:00 2001 From: Sean Engelhardt Date: Wed, 18 Sep 2019 12:48:41 +0200 Subject: [PATCH] Scale motion tiles by viewport size Also puts the desktop, tablet and phone declarations into an own scss file that can be used via mixin --- .../block-tile/block-tile.component.scss | 15 +++++- .../head-bar/head-bar.component.scss | 1 + .../list-of-speakers.component.scss | 17 ++++--- .../assignment-detail.component.scss | 31 ++++-------- client/src/assets/styles/variables.scss | 22 +++++++++ client/src/styles.scss | 49 +++++++------------ 6 files changed, 74 insertions(+), 61 deletions(-) create mode 100644 client/src/assets/styles/variables.scss diff --git a/client/src/app/shared/components/block-tile/block-tile.component.scss b/client/src/app/shared/components/block-tile/block-tile.component.scss index 7b6eab9e2..24709c632 100644 --- a/client/src/app/shared/components/block-tile/block-tile.component.scss +++ b/client/src/app/shared/components/block-tile/block-tile.component.scss @@ -1,3 +1,5 @@ +@import '~assets/styles/variables.scss'; + .block-tile { padding: 0; @@ -27,10 +29,21 @@ height: 100%; .tile-content-title { - font-size: 20px; font-weight: unset; margin-bottom: 0; overflow: hidden; + + @include phone { + font-size: calc(12px + 1vmin); + } + + @include tablet { + font-size: calc(11px + 1vw); + } + + @include desktop { + font-size: calc(10px + 0.5vmax); + } } } diff --git a/client/src/app/shared/components/head-bar/head-bar.component.scss b/client/src/app/shared/components/head-bar/head-bar.component.scss index 9c896bae0..f7ec30168 100644 --- a/client/src/app/shared/components/head-bar/head-bar.component.scss +++ b/client/src/app/shared/components/head-bar/head-bar.component.scss @@ -9,6 +9,7 @@ top: 0; z-index: 5; position: sticky; + height: 64px !important; .toolbar-left { display: flex; diff --git a/client/src/app/site/agenda/components/list-of-speakers/list-of-speakers.component.scss b/client/src/app/site/agenda/components/list-of-speakers/list-of-speakers.component.scss index cc5751111..99ccdc0e9 100644 --- a/client/src/app/site/agenda/components/list-of-speakers/list-of-speakers.component.scss +++ b/client/src/app/site/agenda/components/list-of-speakers/list-of-speakers.component.scss @@ -1,3 +1,5 @@ +@import '~assets/styles/variables.scss'; + .los-title { margin-left: 25px; } @@ -14,17 +16,18 @@ .finished-speaker-grid { display: grid; width: 100%; - grid-template-areas: 'number name time controls'; grid-gap: 5px; - grid-template-columns: 30px 1fr min-content min-content; + + grid-template-areas: + 'number name controls' + 'number time controls'; + grid-template-columns: 30px 1fr min-content; } - @media only screen and (max-width: 960px) { + @include desktop { .finished-speaker-grid { - grid-template-areas: - 'number name controls' - 'number time controls'; - grid-template-columns: 30px 1fr min-content; + grid-template-areas: 'number name time controls'; + grid-template-columns: 30px 1fr min-content min-content; } } diff --git a/client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.scss b/client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.scss index b79f51a6a..0f60e5056 100644 --- a/client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.scss +++ b/client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.scss @@ -1,3 +1,5 @@ +@import '~assets/styles/variables.scss'; + .full-width { width: 100%; } @@ -5,21 +7,21 @@ .meta-info-grid { display: grid; grid-column-gap: 30px; - grid-template-columns: 1fr 2fr; + grid-template-columns: 1fr; .number-of-elected { grid-column: 1; } .current-phase { - grid-column: 2; + grid-column: 1; } - // will display the container under the one declared above on small screen - @media only screen and (max-width: 960px) { - grid-template-columns: 1fr; + @include desktop { + grid-template-columns: 1fr 2fr; + .current-phase { - grid-column: 1; + grid-column: 2; } } } @@ -29,12 +31,12 @@ } .candidates-list { - padding-top: 10px; + padding: 10px 25px 0 25px; } .add-candidates { .search-field { - padding-top: 15px; + padding: 15px 25px 0 25px; width: auto; .search-bar { @@ -46,19 +48,6 @@ } } -@media only screen and (max-width: 960px) { - .candidates-list { - // TODO: same as .waiting-list in list-of-speakers - padding: 10px 25px 0 25px; - } - - .add-candidates { - .search-field { - padding: 15px 25px 0 25px; - } - } -} - .ballot-controls-grid { display: grid; grid-column-gap: 10px; diff --git a/client/src/assets/styles/variables.scss b/client/src/assets/styles/variables.scss new file mode 100644 index 000000000..618160cb8 --- /dev/null +++ b/client/src/assets/styles/variables.scss @@ -0,0 +1,22 @@ +// define mobile desktop breakpoints +$bp-phone: 500px; +$bp-desktop: 960px; + +// reusable mixins to easily style phone and desktop +@mixin phone { + @media (max-width: #{$bp-phone}) { + @content; + } +} + +@mixin tablet { + @media (min-width: #{$bp-phone}) and (max-width: #{$bp-desktop - 1px}) { + @content; + } +} + +@mixin desktop { + @media (min-width: #{$bp-desktop}) { + @content; + } +} diff --git a/client/src/styles.scss b/client/src/styles.scss index 45df4c26b..58c851c97 100644 --- a/client/src/styles.scss +++ b/client/src/styles.scss @@ -53,6 +53,9 @@ $narrow-spacing: ( /** Load projector specific SCSS values */ @import './assets/styles/projector.scss'; +/** Load global scss variables and device mixing */ +@import './assets/styles/variables.scss'; + .general-theme { @include os-global-spinner-theme($openslides-general-theme); } @@ -125,6 +128,7 @@ $narrow-spacing: ( .mat-toolbar.sticky-toolbar { border-bottom: 1px solid rgba(255, 255, 255, 0.12); + height: 64px; } .mat-drawer-inner-container { @@ -611,7 +615,10 @@ button.mat-menu-item.selected { } .content-container { - margin: 0 65px; + margin: 0 15px; + h1 { + font-size: 30px; + } } /** @@ -619,21 +626,20 @@ button.mat-menu-item.selected { * Depending in mobile-mode and desktop mode we need to subtract different values * from 100vh */ -// no os-sort-filter-bar .virtual-scroll-full-page { height: calc(100vh - 64px); } +.virtual-scroll-with-head-bar { + height: calc(100vh - 129px); +} + /** css hacks https://codepen.io/edge0703/pen/iHJuA */ .innerTable { display: inline-block; line-height: 150%; width: -webkit-fill-available; } -// with os-sort-filter-bar -.virtual-scroll-with-head-bar { - height: calc(100vh - 129px); -} .ngrid-hide-head { // For some reason, hiding the table header adds an empty meta bar. @@ -645,34 +651,13 @@ button.mat-menu-item.selected { } /** media queries */ - -/* medium to small */ -@media only screen and (max-width: 960px) { - .virtual-scroll-full-page { - height: calc(100vh - 64px); - } - - .virtual-scroll-with-head-bar { - height: calc(100vh - 125px); - } -} - -/* medium */ -@media only screen and (min-width: 500px) and (max-width: 960px) { +@include desktop { .content-container { margin: 0 25px; - } - .content-container h1 { - font-size: 30px; - } -} -/* small */ -@media only screen and (max-width: 500px) { - .content-container { - margin: 0 15px; - } - .content-container h1 { - font-size: 30px; + + h1 { + font-size: 30px; + } } }