Skip to content

Commit

Permalink
fix(dial-pad) resize dial buttons based on screen height
Browse files Browse the repository at this point in the history
  • Loading branch information
@mihhu @saghul
mihhu authored and saghul committed Sep 5, 2023
1 parent 9e8afeb commit 644ceb6
Show file tree
Hide file tree
Showing 13 changed files with 146 additions and 40 deletions.
2 changes: 1 addition & 1 deletion spot-client/src/common/css/_button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
font-size: 1em;
height: 36px;

@media #{$mq-tablet} {
@media #{$mqw-tablet} {
height: 48px;
}
}
Expand Down
2 changes: 1 addition & 1 deletion spot-client/src/common/css/_desktop-picker.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
.desktop-picker {
width: 100%;

@media #{$mq-tablet} {
@media #{$mqw-tablet} {
width: 50vw;
}
}
Expand Down
96 changes: 95 additions & 1 deletion spot-client/src/common/css/_dial-pad.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,17 +27,93 @@
padding: 0;
width: 72px;

@media #{$mqh-xxsmall} {
height: 50px;
margin: 4px 6px;
width: 50px;
}

@media #{$mqh-mobile-s} {
height: 65px;
margin: 8px 12px;
width: 65px;
}

@media #{$mqh-laptop} {
height: 80px;
width: 80px;
}

@media #{$mqh-mobile-l} {
height: 90px;
width: 90px;
}

@media #{$mqh-tablet} {
height: 100px;
width: 100px;
}

@media #{$mqh-laptop-l} {
height: 120px;
width: 120px;
}

@media #{$mqh-4k} {
width: 200px;
height: 200px;
}

.main {
display: block;
font-size: 32px;
font-weight: 600;

@media #{$mqh-xxsmall} {
font-size: 22px;
line-height: 20px;
}

@media #{$mqh-mobile-s} {
font-size: 32px;
line-height: 32px;
}

@media #{$mqh-laptop-l} {
font-size: 45px;
line-height: 45px;
}

@media #{$mqh-4k} {
font-size: 65px;
line-height: 65px;
}
}

.sub {
color: var(--container-sub-content-font-color);
font-size: 10px;
font-weight: bold;
line-height: 14px;

@media #{$mqh-xxsmall} {
line-height: 8px;
}

@media #{$mqh-mobile-s} {
font-size: 10px;
line-height: 14px;
}

@media #{$mqh-laptop-l} {
font-size: 20px;
line-height: 18px;
}

@media #{$mqh-4k} {
font-size: 25px;
line-height: 20px;
}
}

.sub:empty:before {
Expand Down Expand Up @@ -110,6 +186,16 @@
font-size: 32px;
line-height: 44px;
text-align: center;

@media #{$mqh-xxsmall} {
font-size: 22px;
line-height: 34px;
}

@media #{$mqh-mobile-l} {
font-size: 32px;
line-height: 44px;
}
}

input::placeholder {
Expand Down Expand Up @@ -220,12 +306,20 @@
border: 1px solid rgba(255, 255, 255, 0.25);
color: white;
display: flex;
font-size: 13px;
font-size: 25px;
padding: 4px 8px;

.country-search-trigger-name {
margin: 0 6px;
}

@media #{$mqh-xxsmall} {
font-size: 20px;
}

@media #{$mqh-mobile-l} {
font-size: 25px;
}
}
}

Expand Down
4 changes: 2 additions & 2 deletions spot-client/src/common/css/_help-view.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@
padding: 32px 16px;
text-align: center;

@media #{$mq-xxsmall} {
@media #{$mqw-xxsmall} {
width: 95%;
}

@media #{$mq-tablet} {
@media #{$mqw-tablet} {
width: 60%;
}

Expand Down
10 changes: 5 additions & 5 deletions spot-client/src/common/css/_home-view.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,23 @@
background-color: var(--container-bg-color);
border-radius: 5px;

@media #{$mq-mobile-s} {
@media #{$mqw-mobile-s} {
width: 80%;
}

@media #{$mq-tablet} {
@media #{$mqw-tablet} {
width: 50%;
}

@media #{$mq-laptop} {
@media #{$mqw-laptop} {
width: 50%;
}

@media #{$mq-laptop-l} {
@media #{$mqw-laptop-l} {
width: 47%;
}

@media #{$mq-4k} {
@media #{$mqw-4k} {
width: 47%;
}

Expand Down
38 changes: 25 additions & 13 deletions spot-client/src/common/css/_media-queries.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,25 @@
* The various screen-width breakpoints to use to determine when styles should
* adjust.
*/
$mq-xxsmall: '(min-width: 0em)'; // catch-all
$mq-mobile-s: '(min-width: 320px)';
$mq-mobile-l: '(min-width: 425px)';
$mq-tablet: '(min-width: 768px)';
$mq-laptop: '(min-width: 1024px)';
$mq-laptop-l: '(min-width: 1440px)';
$mq-4k: '(min-width: 2460px)';
$mqw-xxsmall: '(min-width: 0em)'; // catch-all
$mqw-mobile-s: '(min-width: 320px)';
$mqw-mobile-l: '(min-width: 425px)';
$mqw-tablet: '(min-width: 768px)';
$mqw-laptop: '(min-width: 1024px)';
$mqw-laptop-l: '(min-width: 1440px)';
$mqw-4k: '(min-width: 2460px)';

/**
* The various screen-height breakpoints to use to determine when styles should
* adjust.
*/
$mqh-xxsmall: '(min-height: 0em)'; // catch-all
$mqh-mobile-s: '(min-height: 667px)';
$mqh-mobile-l: '(min-height: 812px)';
$mqh-tablet: '(min-height: 1024px)';
$mqh-laptop: '(min-height: 768px)';
$mqh-laptop-l: '(min-height: 1080px)';
$mqh-4k: '(min-height: 2160px)';

/**
* The font size from which all other font sizes should inherit.
Expand All @@ -24,31 +36,31 @@ body {
font-size: $base-font-size;
line-height: $base-line-height;

@media #{$mq-xxsmall} {
@media #{$mqw-xxsmall} {
font-size: $base-font-size * 0.7;
line-height: $base-line-height * 0.7;
}

@media #{$mq-mobile-s} {
@media #{$mqw-mobile-s} {
font-size: $base-font-size * 0.7;
line-height: $base-line-height * 0.7;
}

@media #{$mq-tablet} {
@media #{$mqw-tablet} {
font-size: $base-font-size * 0.9;
line-height: $base-line-height * 0.9;
}

@media #{$mq-laptop} {
@media #{$mqw-laptop} {
font-size: $base-font-size;
line-height: $base-line-height;
}

@media #{$mq-laptop-l} {
@media #{$mqw-laptop-l} {
font-size: $base-font-size * 1.3;
}

@media #{$mq-4k} {
@media #{$mqw-4k} {
font-size: $base-font-size * 1.5;
}
}
8 changes: 4 additions & 4 deletions spot-client/src/common/css/_meeting-name-entry.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@
padding: 20px;
width: 80%;

@media #{$mq-laptop} {
@media #{$mqw-laptop} {
width: 70%;
}

@media #{$mq-laptop-l} {
@media #{$mqw-laptop-l} {
width: 60%;
}

Expand All @@ -32,7 +32,7 @@
.input-with-default-domain {
display: block;

@media #{$mq-mobile-l} {
@media #{$mqw-mobile-l} {
display: flex;
}

Expand All @@ -47,7 +47,7 @@
overflow: hidden;


@media #{$mq-mobile-l} {
@media #{$mqw-mobile-l} {
flex-direction: row;
}
}
Expand Down
2 changes: 1 addition & 1 deletion spot-client/src/common/css/_modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
position: relative;


@media #{$mq-tablet} {
@media #{$mqw-tablet} {
background-color: var(--container-bg-color);
height: auto;
margin: 50px;
Expand Down
2 changes: 1 addition & 1 deletion spot-client/src/common/css/_screenshare.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
text-align: center;
width: 100%;

@media #{$mq-tablet} {
@media #{$mqw-tablet} {
width: 500px;
}

Expand Down
2 changes: 1 addition & 1 deletion spot-client/src/common/css/nav/_nav.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
text-align: center;
width: 200px;

@media #{$mq-tablet} {
@media #{$mqw-tablet} {
display: flex;
flex: 1;
flex-wrap: nowrap;
Expand Down
4 changes: 2 additions & 2 deletions spot-client/src/common/css/page-layouts/_feedback-view.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,11 @@
padding: 32px 16px;
text-align: center;

@media #{$mq-xxsmall} {
@media #{$mqw-xxsmall} {
width: 100%;
}

@media #{$mq-tablet} {
@media #{$mqw-tablet} {
width: 50%;
}

Expand Down
8 changes: 4 additions & 4 deletions spot-client/src/common/css/page-layouts/_join-code-view.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,15 @@
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;

@media #{$mq-tablet} {
@media #{$mqw-tablet} {
display: flex;
}
}
&.boxes-6 .code-entry {
display: grid;
grid-template-columns: 1fr 1fr 1fr;

@media #{$mq-tablet} {
@media #{$mqw-tablet} {
display: flex;
}
}
Expand All @@ -59,11 +59,11 @@
position: absolute;
left: 5px;

@media #{$mq-xxsmall} {
@media #{$mqw-xxsmall} {
font-size: 3.5em;
}

@media #{$mq-laptop} {
@media #{$mqw-laptop} {
font-size: 2em;
}
}
Expand Down
8 changes: 4 additions & 4 deletions spot-client/src/common/css/page-layouts/_waiting-view.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,11 @@
padding: .8em 1.2em;
width: 80%;

@media #{$mq-laptop} {
@media #{$mqw-laptop} {
width: 70%;
}

@media #{$mq-laptop-l} {
@media #{$mqw-laptop-l} {
width: 60%;
}
}
Expand Down Expand Up @@ -61,11 +61,11 @@
padding: 0;
width: 100%;

@media #{$mq-tablet} {
@media #{$mqw-tablet} {
width: 450px;
}

@media #{$mq-laptop-l} {
@media #{$mqw-laptop-l} {
width: 500px;
}
}
Expand Down

0 comments on commit 644ceb6

Please sign in to comment.