UI tweaks (#12)

* tweaks to display content * adjusted side colour * text tweaks
angus-websites · Dec 21, 2023 · 298e3b5 · 298e3b5
1 parent 3436289
commit 298e3b5
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 11 deletions.
diff --git a/components/AboutShell.vue b/components/AboutShell.vue
@@ -1,7 +1,7 @@
 <template>
   <section
       aria-labelledby={id}
-      class="md:border-l md:border-zinc-400/30 md:pl-6 md:dark:border-evening-sea-600/40"
+      class="md:border-l md:border-zinc-400/30 md:pl-6 md:dark:border-lunar-500/20"
   >
     <div class="grid max-w-3xl grid-cols-1 items-baseline gap-y-8 md:grid-cols-4">
       <h2

diff --git a/components/education/EducationRow.vue b/components/education/EducationRow.vue
@@ -17,9 +17,9 @@
       <!-- Employer and Title -->
       <div class="flex flex-col justify-start flex-1">
         <div
-          class="text-lg text-evening-sea-900 dark:text-zinc-50 font-semibold tracking-tight"
+          class="text-lg text-evening-sea-900 dark:text-zinc-100 font-semibold tracking-tight"
         >
-          {{ education.school }}
+          <p>{{ education.school }}</p>
         </div>
         <div class="flex flex-wrap justify-between">
           <div class="text-sm text-evening-sea-700 dark:text-evening-sea-200">

diff --git a/components/employment/EmploymentRow.vue b/components/employment/EmploymentRow.vue
@@ -17,16 +17,16 @@
       <!-- Employer and Title -->
       <div class="flex flex-col justify-start flex-1">
         <div
-          class="text-lg text-evening-sea-900 dark:text-zinc-50 font-semibold tracking-tight"
+          class="text-lg text-evening-sea-900 dark:text-zinc-100 font-semibold tracking-tight"
         >
-          {{ employment.employer }}
+          <p>{{ employment.employer }}</p>
         </div>
         <div class="flex flex-wrap justify-between">
           <div class="text-sm text-evening-sea-700 dark:text-evening-sea-200">
-            {{ employment.job_title }}
+            <p>{{ employment.job_title }}</p>
           </div>
           <div class="text-sm text-evening-sea-700 dark:text-evening-sea-200">
-            {{ convertDateToYear(employment.start_date) }} -
+            <span>{{ convertDateToYear(employment.start_date) }}</span> -
             <span v-if="employment.end_date">{{ convertDateToYear(employment.end_date, true) }}</span>
           </div>
         </div>

diff --git a/components/project/ProjectShow.vue b/components/project/ProjectShow.vue
@@ -4,9 +4,9 @@
     <div v-if="!project.coming_soon" class="mx-auto px-4 pb-16 sm:px-6  lg:max-w-7xl lg:px-8">
       <!-- Breadcrumb -->
       <ProjectBreadcrumb  class="my-5" />
-      <!-- Product -->
+      <!-- Project -->
       <div class="lg:grid lg:grid-cols-7 lg:grid-rows-1 lg:gap-x-8 lg:gap-y-10 xl:gap-x-16">
-        <!-- Product image -->
+        <!-- Project image -->
         <div class="lg:col-span-4 lg:row-end-1">
 
           <TabGroup as="div" class="flex flex-col-reverse">
@@ -65,7 +65,7 @@
             </a>
           </div>
 
-          <div v-if="project.highlights" class="mt-10 border-t border-zinc-300 dark:border-lunar-600/20 pt-10">
+          <div v-if="hasProjectHighlights()" class="mt-10 border-t border-zinc-300 dark:border-lunar-600/20 pt-10">
             <h3 class="text-sm font-medium text-lunar-700 dark:text-lunar-200">Highlights</h3>
             <div class="prose prose-sm mt-4 prose-polo dark:prose-invert">
               <ul role="list">
@@ -103,7 +103,7 @@
 
         </div>
 
-        <div v-if="project.long_description" class="mx-auto mt-20 w-full max-w-2xl lg:col-span-4 lg:mt-0 lg:max-w-none">
+        <div v-if="project.long_description_html" class="mx-auto mt-20 w-full max-w-2xl lg:col-span-4 lg:mt-0 lg:max-w-none">
           <div class="py-5 border-t border-b border-lunar-700/40  dark:border-lunar-600/20">
             <h3 class="sr-only">Project overview</h3>
             <div class="prose max-w-none prose-polo prose-img:rounded-lg prose-h2:text-lunar-800 dark:prose-h2:text-lunar-300 dark:prose-invert" v-html="project.long_description_html" />
@@ -157,6 +157,14 @@ function hasProjectImages(){
   return false
 }
 
+function hasProjectHighlights(){
+  // Handle undefined
+  if (props.project.highlights) {
+    return props.project.highlights.length > 0;
+  }
+  return false
+}
+