Frontend Tweaks (#1159)

* allow web component names in components * remove unused files (images from old design) * move to button component (duplicate repeated button) * rewrite footer * rewrite header as popover (as better practice) * improve spacing on search page * heading border consistency * chore update dependencies
brownben · Mar 29, 2024 · 6977bad · 6977bad
1 parent 8dad350
commit 6977bad
Show file tree

Hide file tree

Showing 19 changed files with 1,094 additions and 1,745 deletions.
diff --git a/frontend/components/Button.vue b/frontend/components/Button.vue
@@ -1,10 +1,14 @@
 <script setup lang="ts">
-defineProps({ loading: { type: Boolean, default: false } })
+defineProps({
+  loading: { type: Boolean, default: false },
+  small: { type: Boolean, default: false },
+})
 </script>
 
 <template>
   <button
-    class="select-none rounded bg-gradient-to-r from-main-500 to-main-600 px-6 py-2 font-medium text-white ring-main-600 ring-offset-2 transition duration-200 hover:from-main-600 hover:to-main-700 hover:shadow focus:outline-none focus-visible:ring"
+    class="flex select-none rounded bg-gradient-to-r from-main-500 to-main-600 font-medium text-white ring-main-600 ring-offset-2 transition hover:from-main-600 hover:to-main-700 hover:shadow focus:outline-none focus-visible:ring"
+    :class="{ 'px-4 py-2 text-sm': small, 'px-6 py-2': !small }"
     :disabled="loading"
   >
     <template v-if="!loading">

diff --git a/frontend/components/Footer.vue b/frontend/components/Footer.vue
@@ -1,91 +1,47 @@
-<script setup lang="ts">
-const router = useRouter()
-const loggedIn = useLoggedIn()
-
-const logout = () => {
-  logoutRequest()
-  router.push('/')
-}
-</script>
 <template>
   <footer
-    class="font-heading border-t border-gray-100 bg-gray-50 py-6 text-center md:py-8 xl:py-10 print:hidden"
+    class="text-text w-full border-t border-gray-100 bg-gray-50 py-8 text-center"
   >
-    <div class="mb-6 w-full text-center xl:mb-8">
+    <social-links class="mb-6 flex justify-center gap-4 text-gray-600">
       <a
         href="https://github.com/brownben/munro"
-        target="_blank"
-        rel="noopener noreferrer"
-        title="GitHub"
-        class="group focus-visible:ring-0"
+        class="rounded-full bg-gray-200 p-2 outline-none ring-main-300 transition hover:bg-main-100 hover:text-main-600 focus:bg-main-100 focus:text-main-700 focus:ring-2"
       >
+        <IconGitHub class="h-4 w-4" />
         <span class="sr-only">GitHub</span>
-        <svg
-          class="mx-2 box-content inline-block h-4 rounded-full bg-gray-200 p-2 text-gray-600 ring-main-300 transition duration-300 hover:bg-main-200 hover:text-main-700 group-focus:bg-main-200 group-focus:text-main-700 group-focus-visible:ring"
-          viewBox="0 0 24 24"
-          aria-hidden="true"
-        >
-          <path
-            fill="currentColor"
-            d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
-          />
-        </svg>
       </a>
       <a
-        href="https://elk.zone/mas.to/@munroleagues"
-        target="_blank"
-        rel="noopener noreferrer"
-        title="Mastodon"
-        class="group focus-visible:ring-0"
+        href="https://www.threads.net/@munroleagues"
+        class="rounded-full bg-gray-200 p-2 outline-none ring-main-300 transition hover:bg-main-100 hover:text-main-600 focus:bg-main-100 focus:text-main-700 focus:ring-2"
       >
-        <span class="sr-only">Mastodon</span>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          aria-hidden="true"
-          viewBox="0 0 16 16"
-          class="mx-2 box-content inline-block h-4 rounded-full bg-gray-200 p-2 text-gray-600 ring-main-300 transition duration-300 hover:bg-main-200 hover:text-main-700 group-focus:bg-main-200 group-focus:text-main-700 group-focus-visible:ring"
-        >
-          <path
-            fill="currentColor"
-            d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"
-          />
-        </svg>
+        <IconThreads class="h-4" />
+        <span class="sr-only">Threads</span>
       </a>
-    </div>
-    <div class="md:mt-1">
-      <p class="block text-gray-600">
-        Created By
-        <a
-          href="https://benbrown.dev"
-          class="text-base font-extrabold text-gray-700 transition duration-300 hover:text-main-700 focus:text-main-700"
-        >
-          Ben Brown
-        </a>
-      </p>
+    </social-links>
 
-      <router-link
-        v-if="!loggedIn"
+    <p class="text-gray-600">
+      Created by
+      <a
+        href="https://benbrown.dev"
+        class="font-bold text-gray-700 outline-main-600 hover:text-main-700 focus:text-main-700"
+      >
+        Ben Brown
+      </a>
+    </p>
+    <p class="text-sm text-gray-500">
+      <NuxtLink
         :to="`/login?redirect=${$route.fullPath}`"
-        class="text-sm text-gray-500 transition duration-300 hover:text-main-600 focus:text-main-700"
+        class="outline-main-600 hover:text-main-600 focus:text-main-600"
       >
         Admin Login
-      </router-link>
-      <button
-        v-else
-        class="mr-1 text-sm text-gray-500 transition duration-300 hover:text-main-600 focus:text-main-700"
-        @click="logout"
-      >
-        Logout
-      </button>
-      <p class="inline-block text-sm text-gray-400" aria-hidden="true">
-        &bull;
-      </p>
+      </NuxtLink>
+      <span aria-hidden="true" class="select-none opacity-30"> &bull; </span>
       <a
         href="mailto:[email protected]"
-        class="text-sm text-gray-500 transition duration-300 hover:text-main-600 focus:text-main-700"
+        class="outline-main-600 hover:text-main-600 focus:text-main-600"
       >
         Contact
       </a>
-    </div>
+    </p>
   </footer>
 </template>
diff --git a/frontend/components/Heading.vue b/frontend/components/Heading.vue
@@ -8,11 +8,7 @@ defineProps({
 </script>
 <template>
   <header
-    class="w-full border-b bg-gradient-to-b from-white to-gray-50 print:border-0 print:to-white"
-    :class="{
-      'border-gray-100': !$slots.rightAction,
-      'border-gray-50': $slots.rightAction,
-    }"
+    class="w-full border-b border-gray-100 bg-gradient-to-b from-white to-gray-50 print:border-0 print:to-white"
   >
     <div
       class="relative mx-auto max-w-screen-lg px-6 py-6 sm:pb-10 sm:pt-8 lg:px-8 print:sm:py-4"

diff --git a/frontend/components/Icon/Close.vue b/frontend/components/Icon/Close.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="h-6 w-6"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M6 18 18 6M6 6l12 12"
+    />
+  </svg>
+</template>
diff --git a/frontend/components/Icon/GitHub.vue b/frontend/components/Icon/GitHub.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+    />
+  </svg>
+</template>
diff --git a/frontend/components/Icon/Hamburger.vue b/frontend/components/Icon/Hamburger.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="h-6 w-6"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+    />
+  </svg>
+</template>
diff --git a/frontend/components/Icon/Threads.vue b/frontend/components/Icon/Threads.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 878 1000">
+    <path
+      fill="currentColor"
+      d="M446.7 1000h-.3c-149.2-1-263.9-50.2-341-146.2C36.9 768.3 1.5 649.4.3 500.4v-.7c1.2-149.1 36.6-267.9 105.2-353.4C182.5 50.2 297.3 1 446.4 0h.6c114.4.8 210.1 30.2 284.4 87.4 69.9 53.8 119.1 130.4 146.2 227.8l-85 23.7c-46-165-162.4-249.3-346-250.6-121.2.9-212.9 39-272.5 113.2C118.4 271 89.6 371.4 88.5 500c1.1 128.6 29.9 229 85.7 298.5 59.6 74.3 151.3 112.4 272.5 113.2 109.3-.8 181.6-26.3 241.7-85.2 68.6-67.2 67.4-149.7 45.4-199.9-12.9-29.6-36.4-54.2-68.1-72.9-8 56.3-25.9 101.9-53.5 136.3-36.9 45.9-89.2 71-155.4 74.6-50.1 2.7-98.4-9.1-135.8-33.4a154.6 154.6 0 0 1-73-123.5c-2.7-49.6 17-95.2 55.4-128.4 36.7-31.7 88.3-50.3 149.3-53.8 44.9-2.5 87-.5 125.8 5.9-5.2-30.9-15.6-55.5-31.2-73.2-21.4-24.4-54.5-36.8-98.3-37.1h-1.2c-35.2 0-83 9.7-113.4 55L261.2 327c40.8-60.6 107-94 186.6-94h1.8c133.1.8 212.4 82.3 220.3 224.5l13.4 5.9c62.1 29.2 107.5 73.4 131.4 127.9 33.2 75.9 36.3 199.6-64.5 298.3C673.1 965 579.6 999.1 447 1000h-.3zm41.8-487.1c-10.1 0-20.3.3-30.8.9-76.5 4.3-124.2 39.4-121.5 89.3 2.8 52.3 60.5 76.6 116 73.6 51-2.7 117.4-22.6 128.6-154.6a437.5 437.5 0 0 0-92.3-9.2z"
+    />
+  </svg>
+</template>