From 82d1f0fd3874905d6e14c33fa13c5ae5edfed00e Mon Sep 17 00:00:00 2001
From: Niels Simenon <niels.simenon@gmail.com>
Date: Wed, 26 Feb 2020 04:07:35 +0100
Subject: [PATCH] Improved mobile layout for header search. Improved release
 tile layout behavior.

---
 assets/components/header/header.vue     | 106 +++++++--------------
 assets/components/header/search.vue     | 119 ++++++++++++++++++++++++
 assets/components/releases/releases.vue |  10 +-
 assets/css/_tooltip.scss                |   4 +-
 4 files changed, 161 insertions(+), 78 deletions(-)
 create mode 100644 assets/components/header/search.vue

diff --git a/assets/components/header/header.vue b/assets/components/header/header.vue
index b965aae4..57035722 100644
--- a/assets/components/header/header.vue
+++ b/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;
+    outline: none;
+    margin: .2rem 0 0 0;
 
     .icon {
-        fill: $shadow-weak;
+        fill: $shadow;
     }
 
-    &:hover {
-        cursor: pointer;
+    &:focus .icon {
+        fill: $primary;
+    }
+}
 
-        .icon {
-            fill: $shadow;
-        }
+.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>
diff --git a/assets/components/header/search.vue b/assets/components/header/search.vue
new file mode 100644
index 00000000..9e9507ea
--- /dev/null
+++ b/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>
diff --git a/assets/components/releases/releases.vue b/assets/components/releases/releases.vue
index ceb1746c..e9c23974 100644
--- a/assets/components/releases/releases.vue
+++ b/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>
diff --git a/assets/css/_tooltip.scss b/assets/css/_tooltip.scss
index 17701257..5f538a56 100644
--- a/assets/css/_tooltip.scss
+++ b/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);
     }