Update - General clean up (jordihales#54)

* Initial clean up * Remove overlap * Add small overlap
anurag-roy · Oct 14, 2022 · bc3e35e · bc3e35e
1 parent 7f3c0dd
commit bc3e35e
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 164 deletions.
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
@@ -4,3 +4,15 @@
 @import 'tailwindcss/components';
 @import './range.css';
 @import 'tailwindcss/utilities';
+
+*:focus {
+  @apply border-transparent outline-none ring-2 ring-pink-500 ring-offset-2 ring-offset-gray-900;
+}
+
+.toasted-container.notification-container.bottom-center {
+  @apply mx-auto max-w-xs px-4;
+}
+
+.toasted.notification.toasted-primary.success {
+  @apply justify-center rounded-lg border-2 border-pink-500 bg-gray-900 px-6 py-4 text-sm font-medium text-white shadow-xl;
+}
diff --git a/components/GlobalAnnouncement.vue b/components/GlobalAnnouncement.vue
diff --git a/components/GlobalPopup.vue b/components/GlobalPopup.vue
diff --git a/components/GradientCard.vue b/components/GradientCard.vue
@@ -11,7 +11,7 @@
 
     <div ref="gradient" class="h-64 rounded-3xl" :class="gradient" />
 
-    <div class="mx-1.5 rounded-3xl bg-gray-900 p-6 text-white" :class="card">
+    <div class="mx-1.5 -mt-6 rounded-3xl bg-gray-900 p-6 text-white">
       <p class="font-black tracking-wide uppercase" v-text="name" />
 
       <div class="flex items-center gap-4 mt-4">
@@ -36,65 +36,49 @@ export default {
   props: {
     name: {
       type: String,
-      required: true
+      required: true,
     },
     colors: {
       type: String,
-      required: true
+      required: true,
     },
     direction: {
       type: [String, Boolean],
-      default: false
-    },
-    version: {
-      type: [String, Boolean],
-      default: false
+      default: false,
     },
     controls: {
       type: Boolean,
-      default: true
+      default: true,
     },
-    overlap: {
-      type: Boolean,
-      default: true
-    }
   },
-  data () {
+  data() {
     return {
       currentDirection: this.direction,
       copyCode: '',
-      isFavourite: false
+      isFavourite: false,
     }
   },
   computed: {
-    gradient () {
+    gradient() {
       return this.currentDirection
         ? `${this.currentDirection} ${this.colors}`
         : `${this.colors}`
     },
-    directions () {
+    directions() {
       return getDirections()
     },
-    favourite () {
+    favourite() {
       return this.isFavourite ? 'text-rose-500' : 'text-white'
     },
-    card () {
-      return this.overlap && '-mt-8'
-    }
   },
-  mounted () {
+  mounted() {
     this.isFavourite = this.checkFavourite()
   },
   methods: {
-    handleDirection (data) {
-      this.currentDirection = this.version
-        ? data[this.version.toLowerCase()]
-        : data.gradient
-    },
-    saveGradient () {
+    saveGradient() {
       const gradients = JSON.parse(localStorage.getItem('gradients')) || []
 
-      const exists = gradients.find(gradient => gradient.name === this.name)
+      const exists = gradients.find((gradient) => gradient.name === this.name)
 
       if (exists) {
         gradients.splice(gradients.indexOf(exists), 1)
@@ -107,7 +91,6 @@ export default {
           name: this.name,
           colors: this.colors,
           direction: this.currentDirection,
-          version: this.version
         })
 
         this.isFavourite = true
@@ -119,11 +102,11 @@ export default {
 
       this.$emit('update')
     },
-    checkFavourite () {
+    checkFavourite() {
       const gradients = JSON.parse(localStorage.getItem('gradients')) || []
 
-      return gradients.find(gradient => gradient.name === this.name)
-    }
-  }
+      return gradients.find((gradient) => gradient.name === this.name)
+    },
+  },
 }
 </script>
diff --git a/components/GradientGrid.vue b/components/GradientGrid.vue
@@ -1,17 +1,15 @@
 <template>
   <section>
     <div
-      class="mx-auto grid max-w-screen-xl grid-cols-1 gap-8 px-4 sm:grid-cols-2 sm:px-6 lg:grid-cols-3 lg:px-8"
+      class="grid max-w-screen-xl grid-cols-1 gap-8 px-4 mx-auto sm:grid-cols-2 sm:px-6 lg:grid-cols-3 lg:px-8"
     >
       <gradient-card
         v-for="gradient of gradients"
         :key="gradient.id"
         :name="gradient.name"
         :colors="gradient.colors"
         :direction="gradient.direction"
-        :version="gradient.version"
         :controls="directions"
-        :overlap="overlap"
         v-on="$listeners"
       />
     </div>
@@ -23,16 +21,12 @@ export default {
   props: {
     gradients: {
       type: Array,
-      required: true
+      required: true,
     },
     directions: {
       type: Boolean,
-      default: true
+      default: true,
     },
-    overlap: {
-      type: Boolean,
-      default: true
-    }
-  }
+  },
 }
 </script>
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="bg-gray-900">
-    <global-announcement />
     <global-header />
-    <global-popup />
 
     <main>
       <Nuxt />
@@ -14,20 +12,6 @@
 
 <script>
 export default {
-  name: 'LayoutComponent'
+  name: 'LayoutComponent',
 }
 </script>
-
-<style lang="postcss">
-*:focus {
-  @apply border-transparent outline-none ring-2 ring-pink-500 ring-offset-2 ring-offset-gray-900;
-}
-
-.toasted-container.notification-container.bottom-center {
-  @apply mx-auto max-w-xs p-4;
-}
-
-.toasted.notification.toasted-primary.success {
-  @apply justify-center rounded-lg bg-blue-500 px-6 py-4 text-xs font-bold uppercase tracking-wide text-white shadow-xl;
-}
-</style>
diff --git a/nuxt.config.js b/nuxt.config.js
@@ -7,7 +7,7 @@ export default {
         : 'Gradients for Tailwind CSS | Hypercolor'
     },
     htmlAttrs: {
-      lang: 'en'
+      lang: 'en',
     },
     meta: [
       { charset: 'utf-8' },
@@ -16,37 +16,37 @@ export default {
         hid: 'description',
         name: 'description',
         content:
-          'A curated collection of beautiful Tailwind CSS gradients using the full range of Tailwind CSS colors. Easily copy and paste the class names, CSS or even save the gradients as an image.'
+          'A curated collection of beautiful Tailwind CSS gradients using the full range of Tailwind CSS colors. Easily copy and paste the class names, CSS or even save the gradients as an image.',
       },
       { property: 'og:type', content: 'website' },
       { property: 'og:url', content: 'https://hypercolor.dev/' },
       {
         property: 'og:title',
-        content: 'Gradients for Tailwind CSS | Hypercolor'
+        content: 'Gradients for Tailwind CSS | Hypercolor',
       },
       {
         property: 'og:description',
         content:
-          'A curated collection of beautiful Tailwind CSS gradients using the full range of Tailwind CSS colors. Easily copy and paste the class names, CSS or even save the gradients as an image.'
+          'A curated collection of beautiful Tailwind CSS gradients using the full range of Tailwind CSS colors. Easily copy and paste the class names, CSS or even save the gradients as an image.',
       },
       { property: 'og:image', content: 'https://hypercolor.dev/social.png' },
       { property: 'twitter:card', content: 'summary_large_image' },
       { property: 'twitter:url', content: 'https://hypercolor.dev/' },
       {
         property: 'twitter:title',
-        content: 'Gradients for Tailwind CSS | Hypercolor'
+        content: 'Gradients for Tailwind CSS | Hypercolor',
       },
       {
         property: 'twitter:description',
         content:
-          'A curated collection of beautiful Tailwind CSS gradients using the full range of Tailwind CSS colors. Easily copy and paste the class names, CSS or even save the gradients as an image.'
+          'A curated collection of beautiful Tailwind CSS gradients using the full range of Tailwind CSS colors. Easily copy and paste the class names, CSS or even save the gradients as an image.',
       },
       {
         property: 'twitter:image',
-        content: 'https://hypercolor.dev/social.png'
-      }
+        content: 'https://hypercolor.dev/social.png',
+      },
     ],
-    link: [{ rel: 'icon', type: 'image/png', href: '/favicon.png' }]
+    link: [{ rel: 'icon', type: 'image/png', href: '/favicon.png' }],
   },
   css: ['@/assets/css/tailwind.css'],
   plugins: [],
@@ -57,20 +57,20 @@ export default {
     postcss: {
       plugins: {
         tailwindcss: {},
-        autoprefixer: {}
-      }
-    }
+        autoprefixer: {},
+      },
+    },
   },
   sitemap: {
-    hostname: 'https://hypercolor.dev'
+    hostname: 'https://hypercolor.dev',
   },
   robots: {
-    UserAgent: '*'
+    UserAgent: '*',
   },
   toast: {
-    position: 'bottom-center',
-    duration: 2000,
+    position: 'top-right',
+    duration: 3000,
     className: 'notification',
-    containerClass: 'notification-container'
-  }
+    containerClass: 'notification-container',
+  },
 }
diff --git a/pages/flags.vue b/pages/flags.vue
@@ -7,11 +7,7 @@
       A collection of country flags created with Tailwind CSS.
     </content-banner>
 
-    <gradient-grid
-      :gradients="gradients"
-      :directions="false"
-      :overlap="false"
-    />
+    <gradient-grid :gradients="gradients" :directions="false" />
   </div>
 </template>
 
@@ -21,9 +17,9 @@ import { gradientsFlag } from '@/assets/data/gradientsFlag'
 export default {
   name: 'FlagsPage',
   computed: {
-    gradients () {
+    gradients() {
       return gradientsFlag
-    }
-  }
+    },
+  },
 }
 </script>