Improved mobile layout for header search. Improved release tile layout behavior.

assets/components/header/header.vue

@@ -59,40 +59,36 @@
             </nav>
         </div>
 
-        <form
-            class="search"
-            @submit.prevent="search"
-        >
-            <input
-                v-model="query"
-                type="search"
-                class="search-input"
-                placeholder="Search..."
-            >
+        <Search class="search-full" />
+
+        <v-popover class="search-compact">
             <button
-                type="submit"
+                type="button"
                 class="search-button"
             ><Icon
                 icon="search"
             /></button>
-        </form>
+
+            <Search
+                slot="popover"
+                class="compact"
+            />
+        </v-popover>
     </header>
 </template>
 
 <script>
-async function search() {
-    this.$router.push({ name: 'search', query: { q: this.query } });
-}
+import Search from './search.vue';
 
 export default {
+    components: {
+        Search,
+    },
     data() {
         return {
             query: this.$route.query ? this.$route.query.q : null,
         };
     },
-    methods: {
-        search,
-    },
 };
 </script>
 
@@ -166,67 +162,34 @@ export default {
     }
 }
 
-.search {
-    height: 100%;
-    max-width: 20rem;
-    display: flex;
-    flex-grow: 1;
-    align-items: center;
-    justify-content: flex-end;
-    padding: 0 1rem 0 0;
-    border-left: solid 1px $shadow-hint;
-}
-
-.search-input {
-    height: 100%;
-    width: 100%;
-    padding: 0 .5rem;
-    border: none;
-    outline: none;
-    font-size: 1rem;
-    outline: none;
-
-    &::placeholder {
-        color: $shadow;
-    }
-
-    &::-webkit-search-cancel-button {
-        -webkit-appearance: none;
-        padding: .5rem;
-        position: relative;
-        right: 0;
-        color: $text;
-        background: url('/img/cancel-circle2.svg');
-        opacity: .25;
-
-        &:hover {
-            opacity: .5;
-            cursor: pointer;
-        }
-    }
-
-    &:focus::placeholder {
-        color: $shadow-weak;
-    }
-}
-
 .search-button {
     height: 100%;
     padding: 0 1rem;
     background: none;
     border: none;
-    margin: .3rem 0 0 0;
-
-    .icon {
-        fill: $shadow-weak;
-    }
-
-    &:hover {
-        cursor: pointer;
+    outline: none;
+    margin: .2rem 0 0 0;
 
     .icon {
         fill: $shadow;
     }
+
+    &:focus .icon {
+        fill: $primary;
+    }
+}
+
+.search-compact {
+    display: none;
+}
+
+@media(max-width: $breakpoint2) {
+    .search-full {
+        display: none;
+    }
+
+    .search-compact {
+        display: flex;
     }
 }
 
@@ -243,10 +206,5 @@ export default {
     .nav-item {
         flex-grow: 1;
     }
-
-    .nav-link {
-
-
-    }
 }
 </style>

assets/components/header/search.vue

@@ -0,0 +1,119 @@
+<template>
+    <form
+        class="search"
+        @submit.prevent="search"
+    >
+        <input
+            v-model="query"
+            type="search"
+            class="search-input"
+            placeholder="Search..."
+        >
+        <button
+            type="submit"
+            class="search-button"
+        ><Icon
+            icon="search"
+        /></button>
+    </form>
+</template>
+
+<script>
+async function search() {
+    this.$router.push({ name: 'search', query: { q: this.query } });
+}
+
+export default {
+    data() {
+        return {
+            query: null,
+        };
+    },
+    methods: {
+        search,
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.search {
+    height: 100%;
+    max-width: 20rem;
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0 1rem 0 0;
+    border-left: solid 1px $shadow-hint;
+
+    &.compact {
+        padding: 0;
+        border: none;
+
+        .search-input {
+            border: solid 1px $shadow-hint;
+        }
+
+        .search-button {
+            padding: 0 .5rem 0 1rem;
+            margin: 0;
+        }
+    }
+}
+
+.search-input {
+    height: 100%;
+    width: 100%;
+    padding: .5rem;
+    border: none;
+    outline: none;
+    font-size: 1rem;
+    outline: none;
+
+    &::placeholder {
+        color: $shadow;
+    }
+
+    &::-webkit-search-cancel-button {
+        -webkit-appearance: none;
+        padding: .5rem;
+        position: relative;
+        right: 0;
+        color: $text;
+        background: url('/img/cancel-circle2.svg');
+        opacity: .25;
+
+        &:hover {
+            opacity: .5;
+            cursor: pointer;
+        }
+    }
+
+    &:focus::placeholder {
+        color: $shadow-weak;
+    }
+}
+
+.search-button {
+    height: 100%;
+    padding: 0 1rem;
+    background: none;
+    border: none;
+    margin: .3rem 0 0 0;
+    outline: none;
+
+    .icon {
+        fill: $shadow-weak;
+    }
+
+    &:hover {
+        cursor: pointer;
+
+        .icon {
+            fill: $shadow;
+        }
+    }
+}
+</style>

assets/components/releases/releases.vue

@@ -75,7 +75,7 @@ export default {
 .tiles {
     width: 100%;
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(20rem, .33fr));
+    grid-template-columns: repeat(auto-fit, minmax(20rem, .25fr));
     grid-gap: 1rem;
 }
 
@@ -85,6 +85,12 @@ export default {
 }
 
 @media(max-width: $breakpoint4) {
+    .tiles {
+        grid-template-columns: repeat(auto-fit, minmax(20rem, .33fr));
+    }
+}
+
+@media(max-width: $breakpoint3) {
     .tiles {
         grid-template-columns: repeat(auto-fit, minmax(20rem, .5fr));
     }
@@ -92,7 +98,7 @@ export default {
 
 @media(max-width: $breakpoint) {
     .tiles {
-        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
     }
 }
 </style>

assets/css/_tooltip.scss

@@ -81,12 +81,12 @@
   }
 
   &.popover {
-    $color: #f9f9f9;
+    $color: #fff;
 
     .popover-inner {
       background: $color;
       color: black;
-      padding: 24px;
+      padding: .5rem;
       border-radius: 5px;
       box-shadow: 0 5px 30px rgba(black, .1);
     }