From 0c8fb7c5a8f7c84018a89fa900e5fd4b54a0acc3 Mon Sep 17 00:00:00 2001
From: Eric Fennis <eric.fennis@gmail.com>
Date: Tue, 9 May 2023 11:46:54 +0200
Subject: [PATCH] adjust versions and contributors styling on detail page

---
 .../theme/components/base/Label.vue           |  16 +++
 .../components/icons/IconContributors.vue     |  21 ++--
 .../components/icons/IconDetailOverlay.vue    |  20 ++--
 .../theme/components/icons/IconInfo.vue       |  30 ++++-
 .../theme/components/icons/IconItem.vue       |   2 +-
 docs/icons/[name].md                          | 106 +++++++++++++++---
 6 files changed, 155 insertions(+), 40 deletions(-)
 create mode 100644 docs/.vitepress/theme/components/base/Label.vue

diff --git a/docs/.vitepress/theme/components/base/Label.vue b/docs/.vitepress/theme/components/base/Label.vue
new file mode 100644
index 000000000..f3722bb8c
--- /dev/null
+++ b/docs/.vitepress/theme/components/base/Label.vue
@@ -0,0 +1,16 @@
+
+<template>
+  <h2 class="label"><slot/></h2>
+</template>
+
+<style scoped>
+.label {
+  letter-spacing: 0.4px;
+  line-height: 28px;
+  font-size: 14px;
+  font-weight: 600;
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/icons/IconContributors.vue b/docs/.vitepress/theme/components/icons/IconContributors.vue
index fcac76d54..244ea1923 100644
--- a/docs/.vitepress/theme/components/icons/IconContributors.vue
+++ b/docs/.vitepress/theme/components/icons/IconContributors.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {IconEntity} from "../../types";
+import Label from "../base/Label.vue";
 
 const props = defineProps<{
   icon: IconEntity
@@ -9,7 +10,7 @@ const props = defineProps<{
 
 <template>
   <div class="contributors" v-if="props.icon.contributors?.length>0">
-    <h2 class="label">Contributors</h2>
+    <Label>Contributors:</Label>
     <div class="avatar-group">
       <a class="avatar" v-for="contributor in props.icon.contributors" :href="`https://github.com/${contributor}`" target="_blank" :data-name="contributor">
         <img class="avatar-image" :alt="contributor" :src="`https://github.com/${contributor}.png?size=128`" />
@@ -23,14 +24,8 @@ const props = defineProps<{
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: flex-end;
-  gap: 24px;
-}
-h2.label {
-  font-size: 20px;
-  border: 0;
-  padding: 0;
-  margin: 0;
+  /* justify-content: flex-end; */
+  gap: 16px;
 }
 .avatar-group {
   display: flex;
@@ -70,12 +65,16 @@ h2.label {
   transform: translateX(-50%) scale(1);
 }
 .avatar-image {
-  width: 64px;
-  height: 64px;
+  width: 48px;
+  height: 48px;
   border-radius: 50%;
   border: 3px solid var(--vp-c-bg-elv);
 }
 .avatar:hover .avatar-image {
   border: 3px solid var(--vp-c-bg-soft-mute);
 }
+
+.avatar:hover {
+  z-index: 2;
+}
 </style>
diff --git a/docs/.vitepress/theme/components/icons/IconDetailOverlay.vue b/docs/.vitepress/theme/components/icons/IconDetailOverlay.vue
index fab059eba..c7765a41d 100644
--- a/docs/.vitepress/theme/components/icons/IconDetailOverlay.vue
+++ b/docs/.vitepress/theme/components/icons/IconDetailOverlay.vue
@@ -23,11 +23,6 @@
 
   const { go } = useRouter()
 
-  const tags = computed(() => {
-    if (!props.icon) return []
-    return props.icon.tags.join(' • ')
-  })
-
   const CloseIcon = createLucideIcon('Close', x)
   const Expand = createLucideIcon('Expand', expand)
 </script>
@@ -37,7 +32,10 @@
     <div class="overlay-container" v-if="props.icon">
       <div class="overlay-panel">
         <nav class="overlay-menu">
-          <Badge>v{{ icon.createdRelease.version }}</Badge>
+          <Badge class="version">v{{ icon.createdRelease.version }}</Badge>
+          <IconButton  @click="go(`/icons/${icon.name}`)">
+            <component :is="Expand" />
+          </IconButton>
           <IconButton  @click="onClose">
             <component :is="CloseIcon" />
           </IconButton>
@@ -50,7 +48,7 @@
         />
         <IconInfo :icon="props.icon" popoverPosition="top">
           <template v-slot:footer>
-            <IconContributors :icon="props.icon" />
+            <IconContributors :icon="props.icon" class="contributors" />
           </template>
         </IconInfo>
       </div>
@@ -139,4 +137,12 @@
   opacity: 0;
 }
 
+.version {
+  margin-right: 24px;
+}
+
+.contributors {
+  justify-content: flex-end;
+}
+
 </style>
diff --git a/docs/.vitepress/theme/components/icons/IconInfo.vue b/docs/.vitepress/theme/components/icons/IconInfo.vue
index e8f0ad9e8..9588e2cb3 100644
--- a/docs/.vitepress/theme/components/icons/IconInfo.vue
+++ b/docs/.vitepress/theme/components/icons/IconInfo.vue
@@ -6,14 +6,20 @@ import CopySVGButton from './CopySVGButton.vue';
 import CopyCodeButton from './CopyCodeButton.vue';
 import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue';
 import {useData, useRouter} from 'vitepress';
+import { computed } from 'vue';
 
-defineProps<{
+const props = defineProps<{
   icon: IconEntity
   popoverPosition?: 'top' | 'bottom'
 }>()
 
 const { go } = useRouter()
 const { page } = useData()
+
+const tags = computed(() => {
+  if (!props.icon) return []
+  return props.icon.tags.join(' • ')
+})
 </script>
 
 <template>
@@ -21,6 +27,9 @@ const { page } = useData()
     <IconDetailName class="icon-name">
       {{ icon.name }}
     </IconDetailName>
+    <p class="icon-tags">
+      {{ tags }}
+    </p>
     <div class="group">
       <Badge
         v-for="category in icon.categories"
@@ -31,7 +40,7 @@ const { page } = useData()
       </Badge>
     </div>
 
-    <div class="group">
+    <div class="group buttons">
       <VPButton
         v-if="!page?.relativePath?.startsWith?.(`icons/${icon.name}`)"
         :href="`/icons/${icon.name}`"
@@ -50,12 +59,25 @@ const { page } = useData()
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  margin-bottom: 24px;
+  margin-bottom: 16px;
 }
 .category {
   text-transform: capitalize;
 }
 .icon-name {
-  margin-bottom: 12px;
+  margin-bottom: 4px;
+}
+
+.icon-tags {
+  font-size: 16px;
+  color: var(--vp-c-text-2);
+  font-weight: 500;
+  margin-top: 0;;
+  margin-bottom: 16px;
+  line-height: 28px;
+}
+
+.buttons {
+  margin-top: 24px;
 }
 </style>
diff --git a/docs/.vitepress/theme/components/icons/IconItem.vue b/docs/.vitepress/theme/components/icons/IconItem.vue
index 1870d7420..7a5a03cb2 100644
--- a/docs/.vitepress/theme/components/icons/IconItem.vue
+++ b/docs/.vitepress/theme/components/icons/IconItem.vue
@@ -19,7 +19,7 @@ const props = defineProps<{
 const emit = defineEmits(['setActiveIcon'])
 
 const { go } = useRouter()
-const showOverlay = useMediaQuery('(min-width: 720px)');
+const showOverlay = useMediaQuery('(min-width: 860px)');
 
 const icon = createLucideIcon(props.name, props.iconNode)
 
diff --git a/docs/icons/[name].md b/docs/icons/[name].md
index 325f1e35d..d9475a1b1 100644
--- a/docs/icons/[name].md
+++ b/docs/icons/[name].md
@@ -15,6 +15,7 @@ import IconInfo from '../.vitepress/theme/components/icons/IconInfo.vue'
 import IconContributors from '../.vitepress/theme/components/icons/IconContributors.vue'
 import CodeGroup from '../.vitepress/theme/components/base/CodeGroup.vue'
 import Badge from '../.vitepress/theme/components/base/Badge.vue'
+import Label from '../.vitepress/theme/components/base/Label.vue'
 import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue';
 import { data } from './codeExamples.data'
 import { camelCase, startCase } from 'lodash-es'
@@ -43,24 +44,33 @@ const codeExample = computed(() => data.codeExamples?.map(
       :class="$style.preview"
     />
   </div>
-  <div>
-    <IconInfo :icon="$params"/>
-    <CodeGroup :groups="tabs" groupName="icon-code-example">
+  <div >
+    <div :class="$style.info">
+      <IconInfo :icon="$params" />
+      <div :class="$style.meta">
+        <div :class="$style.version">
+          <Label>Created:</Label><Badge>v{{$params.createdRelease.version}}</Badge>
+        </div>
+        <div :class="$style.version">
+          <Label>Last changed:</Label><Badge>v{{$params.changedRelease.version}}</Badge>
+        </div>
+        <IconContributors :icon="$params" :class="$style.contributors"/>
+      </div>
+    </div>
+    <CodeGroup :groups="tabs" groupName="icon-code-example" :class="$style.code">
       <div
         class="blocks"
         v-html="codeExample"
       />
     </CodeGroup>
   </div>
-  <div class="release-info">
-    <Badge><strong>Created:</strong> v{{$params.createdRelease.version}}</Badge>
-    <Badge><strong>Last changed:</strong> v{{$params.changedRelease.version}}</Badge>
-  </div>
-  <IconContributors :icon="$params" />
+
+
 </div>
 
 <style module>
   .preview {
+    grid-area: preview;
     margin-bottom: 24px;
     max-width: 240px;
   }
@@ -69,6 +79,24 @@ const codeExample = computed(() => data.codeExamples?.map(
     align-items: flex-start;
   }
 
+  .meta {
+    margin-left: auto;
+    margin-top: 24px;
+  }
+
+  .version, .contributors {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: flex-start;
+    margin-bottom: 0px;
+    justify-content: flex-start;
+  }
+
+  .version:first-child {
+    margin-bottom: 8px;
+  }
+
   @media (min-width: 640px) {
     .layout {
       align-items: flex-start;
@@ -81,15 +109,59 @@ const codeExample = computed(() => data.codeExamples?.map(
       margin: 0 auto;
     }
   }
-</style>
-<style scoped>
-  .release-info {
-    display: flex;
-    gap: 8px;
-    flex-direction: column;
-    align-items: flex-start;
+
+  @media (min-width: 860px) {
+    .info {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+    }
+
+    .meta {
+      border-left: 1px solid var(--vp-c-divider);
+      padding-left: 16px;
+      margin-top: 0;
+    }
+
+    .version, .contributors {
+      flex-direction: column;
+    }
   }
-  .badge {
-    font-weight: 500;
+
+  @media (min-width: 960px) {
+    .info {
+      display: block;
+      justify-content: space-between;
+      align-items: flex-start;
+    }
+
+    .meta {
+      border-left: none;
+      padding-left: 0;
+      margin-top: 24px;
+    }
+
+    .version, .contributors {
+      flex-direction: row;
+    }
+  }
+
+  @media (min-width: 1152px) {
+    .info {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+    }
+
+    .meta {
+      border-left: 1px solid var(--vp-c-divider);
+      padding-left: 16px;
+      margin-top: 0;
+    }
+
+    .version, .contributors {
+      flex-direction: row;
+      margin-bottom: 8px;
+    }
   }
 </style>