feat: Responsive control bar buttons (#73)

openactive · Aug 7, 2024 · 0b32e8c · 0b32e8c
1 parent bb03bef
commit 0b32e8c
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 7 deletions.
diff --git a/src/client/scss/base/_variables.scss b/src/client/scss/base/_variables.scss
@@ -79,8 +79,6 @@ $link-color: #4eaff6;
 // Buttons
 $button-padding-x: rem(30px);
 $button-padding-y: rem(10px);
-$button-md-padding-y: rem(15px);
-$button-md-padding-x: rem(25px);
 $button-margin: 1rem 0 0 0;
 $button-line-height: 1;
 $button-border-width: 1px;
@@ -104,6 +102,7 @@ $nav-sm-offset-height: $nav-offset-height
 
 $control-bar-background: $gray-200;
 $control-bar-padding-y: $navbar-padding-y;
+$control-bar-button-sm-margin-x: 3px;
 $control-bar-size: $paragraph-size;
 $control-bar-line-height: $header-line-height;
 $control-bar-border-width: rem(2px);
@@ -114,9 +113,7 @@ $control-bar-height: $button-line-height * rem($button-font-size)
   + rem($button-border-width) * 2
   + $control-bar-border-width;
 
-$control-bar-md-height: $control-bar-height
-  - $button-padding-y * 2
-  + $button-md-padding-y * 2;
+$control-bar-md-height: $control-bar-height;
 
 $footer-height: rem(50px);
 $footer-background: $gray-100;

diff --git a/src/client/scss/components/_buttons.scss b/src/client/scss/components/_buttons.scss
@@ -60,8 +60,26 @@ button.btn-primary--ghost {
     cursor: default;
   }
 
-  @media only screen and (max-width: map-get($grid-breakpoints, "md")) {
-    padding: $button-md-padding-y $button-md-padding-x;
+  @media only screen and (max-width: (map-get($grid-breakpoints, "xl") + 40)) {
+    padding: $button-padding-y ($button-padding-x * 0.7);
+  }
+  @media only screen and (max-width: (map-get($grid-breakpoints, "lg") + 100)) {
+    padding: $button-padding-y ($button-padding-x * 0.5)
+  }
+  @media only screen and (max-width: (map-get($grid-breakpoints, "lg"))) {
+    padding: $button-padding-y rem(3px);
+  }
+  @media only screen and (max-width: (map-get($grid-breakpoints, "md") + 50)) {
+    padding: ($button-padding-y * 1.2) rem(2px);
+    font-size: ($base-font-size - 6);
+  }
+  @media only screen and (max-width: (map-get($grid-breakpoints, "sm") + 100)) {
+    padding: ($button-padding-y * 1.4) rem(0px);
+    font-size: ($base-font-size - 8);
+  }
+  @media only screen and (max-width: (map-get($grid-breakpoints, "sm"))) {
+    padding: ($button-padding-y * 1.4) rem(1px);
+    font-size: ($base-font-size - 9);
   }
 }
 

diff --git a/src/client/scss/pages/_home.scss b/src/client/scss/pages/_home.scss
@@ -11,6 +11,16 @@
     button {
       margin: 0;
     }
+
+    @media only screen and (max-width: (map-get($grid-breakpoints, "sm"))) {
+      padding-left: 15px;
+      padding-right: 15px;
+
+      .col-3, .col-6 {
+        padding-left: 0px;
+        padding-right: 0px;
+      }
+    }
   }
 
   .top-level-row {
@@ -85,6 +95,10 @@
 
   .url-loader {
     margin-left: 1rem;
+
+    @media only screen and (max-width: (map-get($grid-breakpoints, "sm"))) {
+      margin-left: $control-bar-button-sm-margin-x;
+    }
 
     .input-group {
       width: 35vw;
@@ -93,6 +107,11 @@
 
   .result-filters, .result-sort, .version-switcher, .validation-mode-switcher {
     margin-right: 1rem;
+
+    @media only screen and (max-width: (map-get($grid-breakpoints, "sm"))) {
+      margin-right: $control-bar-button-sm-margin-x;
+    }
+
     h6 {
       padding-left: 0.25rem;
       padding-top: 0.5rem;
@@ -140,12 +159,20 @@
   .version-switcher {
     margin-left: 0;
     margin-right: 1rem;
+
+    @media only screen and (max-width: (map-get($grid-breakpoints, "sm"))) {
+      margin-right: $control-bar-button-sm-margin-x;
+    }
   }
 
   .validation-mode-switcher {
     margin-left: 0;
     margin-right: 1rem;
 
+    @media only screen and (max-width: (map-get($grid-breakpoints, "sm"))) {
+      margin-right: $control-bar-button-sm-margin-x;
+    }
+
     .validation-mode-group {
       border-top: 1px solid $gray-200;
       padding-top: 0.5rem;
@@ -159,6 +186,10 @@
     margin-right: 0;
     margin-left: 1rem;
 
+    @media only screen and (max-width: (map-get($grid-breakpoints, "sm"))) {
+      margin-left: $control-bar-button-sm-margin-x;
+    }
+
     .sample-group {
       border-top: 1px solid $gray-200;
       &:first-child {