fix(dial-pad) resize dial buttons based on screen height

jitsi · Aug 29, 2023 · 3fb0d8b · 3fb0d8b
1 parent ce83fed
commit 3fb0d8b
Show file tree

Hide file tree

Showing 13 changed files with 146 additions and 40 deletions.
diff --git a/spot-client/src/common/css/_button.scss b/spot-client/src/common/css/_button.scss
@@ -60,7 +60,7 @@
         font-size: 1em;
         height: 36px;
 
-        @media #{$mq-tablet} {
+        @media #{$mqw-tablet} {
             height: 48px;
         }
     }

diff --git a/spot-client/src/common/css/_desktop-picker.scss b/spot-client/src/common/css/_desktop-picker.scss
@@ -9,7 +9,7 @@
     .desktop-picker {
         width: 100%;
 
-        @media #{$mq-tablet} {
+        @media #{$mqw-tablet} {
             width: 50vw;
         }
     }

diff --git a/spot-client/src/common/css/_dial-pad.scss b/spot-client/src/common/css/_dial-pad.scss
@@ -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 {
@@ -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 {
@@ -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;
+        }
     }
 }
 

diff --git a/spot-client/src/common/css/_help-view.scss b/spot-client/src/common/css/_help-view.scss
@@ -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%;
     }
 

diff --git a/spot-client/src/common/css/_home-view.scss b/spot-client/src/common/css/_home-view.scss
@@ -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%;
     }
 

diff --git a/spot-client/src/common/css/_media-queries.scss b/spot-client/src/common/css/_media-queries.scss
@@ -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.
@@ -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;
     }
 }
diff --git a/spot-client/src/common/css/_meeting-name-entry.scss b/spot-client/src/common/css/_meeting-name-entry.scss
@@ -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%;
     }
 
@@ -32,7 +32,7 @@
     .input-with-default-domain {
         display: block;
 
-        @media #{$mq-mobile-l} {
+        @media #{$mqw-mobile-l} {
             display: flex;
         }
 
@@ -47,7 +47,7 @@
             overflow: hidden;
 
 
-            @media #{$mq-mobile-l} {
+            @media #{$mqw-mobile-l} {
                 flex-direction: row;
             }
         }

diff --git a/spot-client/src/common/css/_modal.scss b/spot-client/src/common/css/_modal.scss
@@ -26,7 +26,7 @@
         position: relative;
 
 
-        @media #{$mq-tablet} {
+        @media #{$mqw-tablet} {
             background-color: var(--container-bg-color);
             height: auto;
             margin: 50px;

diff --git a/spot-client/src/common/css/_screenshare.scss b/spot-client/src/common/css/_screenshare.scss
@@ -10,7 +10,7 @@
     text-align: center;
     width: 100%;
 
-    @media #{$mq-tablet} {
+    @media #{$mqw-tablet} {
         width: 500px;
     }
 

diff --git a/spot-client/src/common/css/nav/_nav.scss b/spot-client/src/common/css/nav/_nav.scss
@@ -8,7 +8,7 @@
         text-align: center;
         width: 200px;
 
-        @media #{$mq-tablet} {
+        @media #{$mqw-tablet} {
             display: flex;
             flex: 1;
             flex-wrap: nowrap;

diff --git a/spot-client/src/common/css/page-layouts/_feedback-view.scss b/spot-client/src/common/css/page-layouts/_feedback-view.scss
@@ -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%;
         }
 

diff --git a/spot-client/src/common/css/page-layouts/_join-code-view.scss b/spot-client/src/common/css/page-layouts/_join-code-view.scss
@@ -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;
             }
         }
@@ -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;
         }
     }

diff --git a/spot-client/src/common/css/page-layouts/_waiting-view.scss b/spot-client/src/common/css/page-layouts/_waiting-view.scss
@@ -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%;
             }
         }
@@ -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;
         }
     }