Move project link to title to save space

claudiabdm · Oct 3, 2024 · 8d4c7d8 · 8d4c7d8
1 parent e3875be
commit 8d4c7d8
Show file tree

Hide file tree

Showing 4 changed files with 166 additions and 52 deletions.
diff --git a/assets/sprite.svg b/assets/sprite.svg
diff --git a/components/CvPreviewProjectLink.vue b/components/CvPreviewProjectLink.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+interface Props {
+    href: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+    <a
+        class="flex items-center font-thin italic underline-offset-2 underline"
+        target="_blank"
+        rel="noopener"
+        :href="href"
+    >
+        <svg class="cv__icon">
+            <use href="@/assets/sprite.svg#link" />
+        </svg>
+        {{ href }}
+    </a>
+</template>
diff --git a/components/CvPreviewProjects.vue b/components/CvPreviewProjects.vue
@@ -26,25 +26,19 @@ const formatDate = useFormatDate()
         :key="project.id"
       >
         <div class="flex justify-between">
-          <h5 class="cv__section-title cv__section-title--sm">
+          <h5 class="cv__section-title cv__section-title--sm flex">
             {{ project.title }}
+            <CvPreviewProjectLink v-if="formSettings.layout === 'one-column'" class="ml-2" :href="project.location"/>
           </h5>
           <span>
             {{ formatDate(project.from) }} –
             <template v-if="project.current">{{
               $t("current")
-            }}</template>
+              }}</template>
             <template v-else>{{ formatDate(project.to) }}</template>
           </span>
         </div>
-        <a
-          class="font-thin italic underline-offset-2 underline mb-2"
-          target="_blank"
-          rel="noopener"
-          :href="project.location"
-        >
-          {{ project.location }}
-        </a>
+        <CvPreviewProjectLink v-if="formSettings.layout === 'two-column'" class="mb-1" :href="project.location"/>
         <CvTextEditor
           v-model="project.summary"
           :read-only="true"

diff --git a/components/CvPreviewSkill.vue b/components/CvPreviewSkill.vue
@@ -15,7 +15,7 @@ const { formSettings } = useCvState()
   <section
     v-if="display"
     class="cv__section"
-    :class="formSettings.layout === 'one-column' && 'flex gap-1 mb-1'"
+    :class="formSettings.layout === 'one-column' && 'flex gap-1'"
   >
     <h3
       class="capitalize"