Merge pull request #110 from jordanopensource/fix/design-semantics-is…

…sues Fix/design and semantics issues
jordanopensource · Jan 18, 2024 · 5053ebf · 5053ebf
2 parents 2535883 + 81940f5
commit 5053ebf
Show file tree

Hide file tree

Showing 28 changed files with 241 additions and 273 deletions.
diff --git a/assets/images/hero/jordan-commits.svg b/assets/images/hero/jordan-commits.svg
diff --git a/components/AreaChart.vue b/components/AreaChart.vue
@@ -25,7 +25,7 @@ export default {
 
 <style lang="postcss">
 .chart-section-container {
-  @apply m-auto w-11/12 bg-white py-0 px-0 md:px-7 md:py-10;
+  @apply bg-white py-0 md:py-10;
 }
 
 .tooltip {

diff --git a/components/BarChart.vue b/components/BarChart.vue
@@ -25,7 +25,7 @@ export default {
 
 <style lang="postcss">
 .bar-chart-section-container {
-  @apply m-auto w-11/12 bg-white py-0 px-0 md:px-7 md:py-10;
+  @apply bg-white py-0 md:py-10;
 }
 
 .bar-tooltip {

diff --git a/components/Card.vue b/components/Card.vue
@@ -18,7 +18,7 @@
 
 <script>
 export default {
-  name: 'Card',
+  name: 'StatCard',
   props: {
     count: { type: Number, required: true },
     description: { type: String, required: true },
@@ -55,7 +55,7 @@ export default {
 }
 
 .card-container {
-  @apply bg-white shadow my-5 mx-3 lg:w-2/4 lg:mx-5;
+  @apply bg-white shadow my-5 lg:w-2/4;
 }
 
 .content-container {

diff --git a/components/ChartsPeriodDropdown.vue b/components/ChartsPeriodDropdown.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <select id="period" name="period" @change="onChange">
+    <select :id="name" :name="name" @change="onChange">
       <option value="last_year">Last Year</option>
       <option value="this_year">This Year</option>
       <option value="last_month">Last Month</option>
@@ -20,6 +20,9 @@
 <script>
 export default {
   name: 'PeriodDropdown',
+  props: {
+    name: { type: String, default: 'period' },
+  },
   data() {
     return {
       todayDate: new Date().toLocaleString('en-GB', {
@@ -31,21 +34,21 @@ export default {
         {
           day: 'numeric',
           month: 'long',
-        }
+        },
       ),
       firstDayOfTheLastMonth: 0,
       lastDayOfTheLastMonth: new Date(
         new Date().getFullYear(),
         new Date().getMonth(),
-        0
+        0,
       ).toLocaleString('en-GB', {
         day: 'numeric',
         month: 'long',
       }),
       endOfTheYear: new Date(
         new Date().getFullYear() - 1,
         11,
-        31
+        31,
       ).toLocaleString('en-GB', {
         day: 'numeric',
         month: 'long',

diff --git a/components/Contributors.vue b/components/Contributors.vue
@@ -2,10 +2,10 @@
   <div class="section-container">
     <div class="content-conatiner">
       <div class="text-section has-border">
-        <h1 class="hidden head-text md:block">Rank</h1>
-        <h1 class="head-text px-0 lg:px-7">User</h1>
+        <h3 class="hidden head-text md:block">Rank</h3>
+        <h3 class="head-text">User</h3>
         <div class="flex justify-end w-full">
-          <h1 class="head-text">Total</h1>
+          <h3 class="head-text">Total</h3>
         </div>
       </div>
       <div>
@@ -81,11 +81,11 @@ export default {
 }
 
 .section-container {
-  @apply block w-11/12 mx-auto lg:mx-0 bg-gray;
+  @apply block bg-gray;
 }
 
 .content-conatiner {
-  @apply mx-3 lg:mx-0 bg-white;
+  @apply bg-white;
 }
 
 .has-border {

diff --git a/components/FilterSection.vue b/components/FilterSection.vue
@@ -6,7 +6,7 @@
           isOpen ? 'filter-section has-border' : 'filter-section lg:has-border'
         "
       >
-        <h1 class="filter-text">Filter</h1>
+        <h3 class="filter-text">Filter</h3>
         <button
           :class="isOpen ? 'expand-button' : 'expand-button-collapsed'"
           aria-label="Expand Filter Section"
@@ -50,12 +50,11 @@ export default {
 
 <style lang="postcss" scoped>
 .section-container {
-  @apply block w-11/12 lg:w-1/3 mx-auto lg:mx-0 lg:mr-5 lg:bg-lightgrey;
+  @apply block lg:w-[28%] lg:bg-lightgrey;
 }
 
 .content-conatiner {
   background-color: #f4f4f5;
-  @apply mx-3 lg:mx-0;
 }
 
 .filter-section {
@@ -73,7 +72,7 @@ export default {
 }
 
 .sort-section {
-  @apply mx-6 pt-6 pb-4;
+  @apply pt-6 pb-4;
 }
 
 .contributions-radio {

diff --git a/components/Hero.vue b/components/Hero.vue
@@ -13,7 +13,7 @@
 
 <script>
 export default {
-  name: 'Hero',
+  name: 'HeroBanner',
   props: {
     title: {
       type: String,
@@ -33,7 +33,7 @@ export default {
 }
 
 .banner {
-  @apply flex flex-col mx-9 md:h-96 md:flex-row;
+  @apply flex flex-col px-8 md:px-14 lg:px-24 md:h-96 md:flex-row;
 }
 
 .content-container {
@@ -42,6 +42,6 @@ export default {
 
 .content-header {
   font-family: 'IBM Mono';
-  @apply text-4xl md:text-4xl  lg:text-5xl tracking-wide font-normal md:mx-3 lg:mx-16;
+  @apply text-4xl md:text-4xl  lg:text-5xl tracking-wide font-normal;
 }
 </style>
diff --git a/components/HomePageHero.vue b/components/HomePageHero.vue
@@ -29,7 +29,7 @@
 
 <script>
 export default {
-  name: 'Hero',
+  name: 'HomeHeroBanner',
 }
 </script>
 
@@ -43,7 +43,7 @@ export default {
 }
 
 .banner {
-  @apply flex flex-col mx-9 h-auto md:flex-row;
+  @apply flex flex-col px-8 md:px-14 lg:px-24 h-auto md:flex-row;
 }
 
 .content-container {
@@ -52,15 +52,15 @@ export default {
 
 .content-header {
   font-family: 'IBM Mono';
-  @apply text-4xl md:text-4xl  lg:text-5xl tracking-wide font-normal md:mx-3 lg:mx-16;
+  @apply text-4xl md:text-4xl  lg:text-5xl tracking-wide font-normal;
 }
 
 .para-section {
   font-family: 'IBM Sans';
-  @apply w-11/12 pt-7 text-xl lg:text-2xl font-normal md:mx-3 lg:mx-16 lg:w-9/12;
+  @apply w-11/12 pt-7 text-xl lg:text-2xl font-normal lg:w-9/12;
 }
 
 .section-image {
-  @apply my-8 place-self-end w-8/12 md:w-5/12 lg:w-80 lg:mt-14 2xl:w-96 lg:mr-12;
+  @apply my-8 place-self-end w-8/12 md:w-5/12 lg:w-80  2xl:w-96;
 }
 </style>
diff --git a/components/InputsSection.vue b/components/InputsSection.vue
@@ -4,14 +4,14 @@
       <SearchInput placeholder="Search Users..." @on-search="onSearch" />
     </div>
     <div class="sort-section">
-      <h6 class="text-xs font-bold pb-2">Period:</h6>
-      <div class="flex lg:flex-col gap-1">
-        <PeriodDropdown />
+      <label for="period" class="text-xs font-bold">Period:</label>
+      <div class="flex lg:flex-col gap-1 pt-1">
+        <PeriodDropdown name="period" />
       </div>
     </div>
     <div class="sort-section has-border">
-      <h6 class="text-xs font-bold pb-2">Sort by:</h6>
-      <div class="flex lg:flex-col gap-1">
+      <span class="text-xs font-bold">Sort by:</span>
+      <div class="flex lg:flex-col gap-1 pt-1">
         <RadioButton
           class="lg:pb-1"
           :input-id="`score`"
@@ -34,8 +34,8 @@
       </div>
     </div>
     <div class="sort-section has-border">
-      <h6 class="text-xs font-bold pb-2">Show:</h6>
-      <div class="flex lg:flex-col gap-1">
+      <span class="text-xs font-bold">Show:</span>
+      <div class="flex lg:flex-col gap-1 pt-1">
         <RadioButton
           class="lg:pb-1"
           :input-id="`all`"
@@ -58,8 +58,8 @@
       </div>
     </div>
     <div class="sort-section">
-      <h6 class="text-xs font-bold pb-2">Count:</h6>
-      <div class="flex lg:flex-col justify-between gap-1">
+      <span class="text-xs font-bold">Count:</span>
+      <div class="flex lg:flex-col gap-3 pt-1">
         <div class="flex">
           <RadioButton
             class="lg:pb-1"

diff --git a/components/LastUpdated.vue b/components/LastUpdated.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="lastUpdated" class="flex justify-end pt-5 ml-8 mr-8 md:mr-12 lg:mr-20  2xl:mr-28 ">
+  <div v-if="lastUpdated" class="flex justify-end pt-5">
     <p class="opacity-50">
       {{ lastUpdated }}
     </p>

diff --git a/components/OrganizationCard.vue b/components/OrganizationCard.vue
@@ -2,20 +2,27 @@
   <div class="flex mx-8 h-36 lg:h-48 content-center has-border pb-3">
     <p class="rank hidden md:block">{{ rank }}.</p>
     <div class="image-container">
-      <img class="image" :src="imageUrl" alt="avatar" width="80" height="80" />
-      <span class="image-filter"></span>
+      <a :href="profileUrl" target="_blank">
+        <img
+          class="image"
+          :src="imageUrl"
+          alt="avatar"
+          width="80"
+          height="80" />
+        <span class="image-filter"></span
+      ></a>
     </div>
 
     <div class="block w-full pl-2 lg:px-3 mt-8 lg:mt-12">
       <div class="flex flex-col">
-        <h3 class="full-name">{{ name }}</h3>
-        <div>
+        <span class="full-name">{{ name }}</span>
+        <div class="w-max">
           <a :href="profileUrl" target="_blank" class="username-container">
             <img
               class="h-5 pr-1"
               src="~assets/images/footer/icon-github.svg"
               alt="Github Account"
-              width="auto"
+              width="25"
               height="20"
               loading="lazy"
             />
@@ -116,4 +123,13 @@ export default {
 .image-container {
   @apply self-center w-16 h-16 relative lg:w-20 lg:h-20;
 }
+
+a {
+  transition: all 0.3s ease 0s;
+}
+
+a:hover {
+  text-decoration: none;
+  color: #00b199;
+}
 </style>
diff --git a/components/Organizations.vue b/components/Organizations.vue
@@ -2,10 +2,10 @@
   <div class="section-container">
     <div class="content-conatiner">
       <div class="text-section has-border">
-        <h1 class="hidden head-text md:block">Rank</h1>
-        <h1 class="head-text px-0 lg:px-7">Organization</h1>
+        <h3 class="hidden head-text md:block">Rank</h3>
+        <h3 class="head-text px-0 lg:px-7">Organization</h3>
         <div class="flex justify-end w-full">
-          <h1 class="head-text">Total</h1>
+          <h3 class="head-text">Total</h3>
         </div>
       </div>
       <div>
@@ -76,11 +76,11 @@ export default {
 }
 
 .section-container {
-  @apply block w-11/12 mx-auto lg:mx-0 bg-gray;
+  @apply block bg-gray;
 }
 
 .content-conatiner {
-  @apply mx-3 lg:mx-0 bg-white;
+  @apply bg-white;
 }
 
 .has-border {

diff --git a/components/OrganizationsFilter.vue b/components/OrganizationsFilter.vue
@@ -6,7 +6,7 @@
           isOpen ? 'filter-section has-border' : 'filter-section lg:has-border'
         "
       >
-        <h1 class="filter-text">Filter</h1>
+        <h3 class="filter-text">Filter</h3>
         <button
           :class="isOpen ? 'expand-button' : 'expand-button-collapsed'"
           aria-label="Expand Filter Section"
@@ -50,12 +50,11 @@ export default {
 
 <style lang="postcss" scoped>
 .section-container {
-  @apply block w-11/12 lg:w-1/3 mx-auto lg:mx-0 lg:mr-5 lg:bg-lightgrey;
+  @apply block lg:w-[28%] lg:bg-lightgrey;
 }
 
 .content-conatiner {
   background-color: #f4f4f5;
-  @apply mx-3 lg:mx-0;
 }
 
 .filter-section {
@@ -73,7 +72,7 @@ export default {
 }
 
 .sort-section {
-  @apply mx-6 pt-6 pb-4;
+  @apply pt-6 pb-4;
 }
 
 .contributions-radio {

diff --git a/components/OrganizationsInput.vue b/components/OrganizationsInput.vue
@@ -7,8 +7,8 @@
           @on-search="onSearch"
         />
       </div>
-      <h6 class="text-xs font-bold pb-2">Sort by:</h6>
-      <div class="flex lg:flex-col">
+      <span class="text-xs font-bold">Sort by:</span>
+      <div class="flex lg:flex-col pt-1">
         <RadioButton
           class="mr-3 lg:pb-2 lg:mr-0"
           :input-id="`Total Stars`"