Add animation and persist search bar in mobile

nasa · Feb 15, 2024 · 7ffd4e7 · 7ffd4e7
1 parent f4d55e1
commit 7ffd4e7
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 15 deletions.
diff --git a/src/ui/components/search.scss b/src/ui/components/search.scss
@@ -12,6 +12,9 @@
   &:before {
     // Mag glass icon
     content: $glyph-icon-magnify;
+    body.mobile & { // Make search icon stand out in mobile
+      opacity: 1;
+    }
   }
 
   &__use-regex {
@@ -54,12 +57,19 @@
   }
 
   &.is-active {
+    body.mobile & { // In mobile, persist the expanded search bar instead of collapsing upon clicking away
+      background-color: rgba($colorHeadFg, 0.2) !important; 
+      width: 50vw !important;
+    }
     .c-search__use-regex {
       margin-left: 0;
     }
 
     &:before {
       width: 0;
+      body.mobile & {
+        width: auto;
+      }
     }
 
     input[type='text'],

diff --git a/src/ui/layout/search/search.scss b/src/ui/layout/search/search.scss
@@ -28,16 +28,19 @@
       background: rgba($colorHeadFg, 0.2);
       box-shadow: none;
       flex: 1 1 auto;
-      // body.mobile & {
-      //   @include phonePortrait() { // This logic of expanding the search input upon click only happens in mobile portrait mode
-      //     background: $colorHeadBg;
-      //     width: 15%;
-      //     &:hover {
-      //       background-color: rgba($colorHeadFg, 0.2);
-      //       width: 100%;
-      //     }
-      //   }
-      // }
+      body.mobile & {
+        @include phonePortrait() {
+          // This logic of expanding the search input upon click only happens in mobile portrait mode
+          background: $colorHeadBg;
+          width: 15%;
+          &:hover {
+            // When clicked, expand the search bar
+            background-color: rgba($colorHeadFg, 0.2);
+            width: 50vw;
+            transition: width 120ms;
+          }
+        }
+      }
     }
   }
 
@@ -50,7 +53,8 @@
     max-height: 500px;
     top: $formInputH;
     z-index: 60;
-    body.mobile & { // Makes search in mobile look less like an overlay, and more fullscreen.
+    body.mobile & {
+      // Makes search in mobile look less like an overlay, and more fullscreen.
       position: absolute;
       top: 25px;
       left: -12px;
@@ -107,7 +111,7 @@
   }
 
   body.mobile & {
-    width: 50%;
+    width: 50vw;
     @include phonePortrait() {
       // This logic only appears for a mobile portrait mode
       width: 100%;
@@ -154,9 +158,9 @@
     }
 
     .c-location {
-      //color: $colorBodyFg;
-      //font-size: 0.9em;
-      //opacity: 0.8;
+      color: $colorBodyFg;
+      font-size: 0.9em;
+      opacity: 0.8;
     }
   }