Rename is-mobile to is-portrait, create a counter variable to make up…

… for scss not having a "not" keyword for bools
micro-nova · Jan 16, 2025 · f4967dd · f4967dd
1 parent d4a4663
commit f4967dd
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 12 deletions.
diff --git a/web/src/components/MediaControl/MediaControl.scss b/web/src/components/MediaControl/MediaControl.scss
@@ -24,7 +24,7 @@
   padding-right: 1.5rem;
 
 
-  @media (general.$is-mobile) {
+  @media (general.$is-portrait) {
     font-size: 3.5rem;
   }
 

diff --git a/web/src/general.scss b/web/src/general.scss
@@ -25,7 +25,10 @@ $navbar-height: 56px;
 
 $small-mobile: 365px;
 $medium-mobile: 435px;
-$is-mobile: "max-aspect-ratio: 1/1";  // to be used directly in @media queries, like @media (general.$is-mobile){stuff}
+
+// meant to be used directly in @media queries, like @media (general.$is-portrait){stuff}
+$is-portrait: "max-aspect-ratio: 1/1";
+$is-landscape: "min-aspect-ratio: 1/1";
 
 // fonts
 @font-face {

diff --git a/web/src/pages/Home/Home.scss b/web/src/pages/Home/Home.scss
@@ -2,10 +2,10 @@
 
 .home-outer {
   padding-top: 10px;
-  @media (general.$is-mobile) {
+  @media (general.$is-landscape) {
     padding-bottom: 10px;
   }
-  @media (max-width: general.$medium-mobile) {
+  @media (general.$is-portrait) {
     padding-bottom: 85px;  // Used to ensure the screen is still scrollable to just above the PresetAndAdd component on mobile
   }
   display: flex;
@@ -74,7 +74,7 @@
 }
 
 .home-presets-container {
-  @media (max-width: general.$medium-mobile) {
+  @media (general.$is-portrait) {
     position: fixed;
     bottom: calc(general.$navbar-height + 10px);
   }

diff --git a/web/src/pages/Player/Player.scss b/web/src/pages/Player/Player.scss
@@ -30,7 +30,7 @@
   align-self: center;
   max-height: 22rem;
   border-radius: 2.5%;
-  @media (general.$is-mobile) {
+  @media (general.$is-portrait) {
     max-width: 85vw;
   }
   @media (max-width: general.$small-mobile) {
@@ -40,30 +40,30 @@
 
 // Solo vs Grouped media controls are different because solo volumes have titles, making them tall enough to need further adjustment
 .grouped-media-controls {
-  @media (general.$is-mobile) {
+  @media (general.$is-portrait) {
     position: fixed;
     z-index: 0;
     bottom: 130px
   }
 }
 .solo-media-controls {
-  @media (general.$is-mobile) {
+  @media (general.$is-portrait) {
     position: fixed;
     z-index: 0;
     bottom: 150px;
   }
 }
 
 .player-volume-container {
-  @media (general.$is-mobile) {
+  @media (general.$is-portrait) {
     position: fixed;
     bottom: calc(general.$navbar-height + 7px);
     z-index: 1;
   }
 }
 
 .solo-volume {
-  @media (general.$is-mobile) {
+  @media (general.$is-portrait) {
     position: fixed;
     bottom: calc(general.$navbar-height + 7px);
     z-index: 1;
@@ -82,14 +82,14 @@
   display: flex;
   align-items: center;
   flex-direction: column;
-  @media (general.$is-mobile) {
+  @media (general.$is-portrait) {
     max-height: calc(85vh - 120px);
     overflow-y: auto;
   }
 }
 
 .expanded-volume-body {
-  @media (general.$is-mobile) {
+  @media (general.$is-portrait) {
     height: 100vh;
   }
 }