Merge pull request #5038 from tsiegleauq/dynamic-scale-tiles

Scale motion tiles by viewport size

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);
+                }
             }
         }
 

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;

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,18 +16,19 @@
     .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;
-    }
 
-    @media only screen and (max-width: 960px) {
-        .finished-speaker-grid {
         grid-template-areas:
             'number name controls'
             'number time controls';
         grid-template-columns: 30px 1fr min-content;
     }
+
+    @include desktop {
+        .finished-speaker-grid {
+            grid-template-areas: 'number name time controls';
+            grid-template-columns: 30px 1fr min-content min-content;
+        }
     }
 
     .number {

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;

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;
+    }
+}

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,35 +651,14 @@ 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 {
+
+        h1 {
             font-size: 30px;
         }
     }
-/* small */
-@media only screen and (max-width: 500px) {
-    .content-container {
-        margin: 0 15px;
-    }
-    .content-container h1 {
-        font-size: 30px;
-    }
 }
 
 /** more helper classes **/