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

Scale motion tiles by viewport size
This commit is contained in:
Emanuel Schütze 2019-09-19 19:43:40 +02:00 committed by GitHub
commit 9e0817d2e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 74 additions and 61 deletions

View File

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

View File

@ -9,6 +9,7 @@
top: 0;
z-index: 5;
position: sticky;
height: 64px !important;
.toolbar-left {
display: flex;

View File

@ -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 {

View File

@ -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;

View File

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

View File

@ -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 **/