Merge pull request #524 from w3bdesign/master-cf-autofix

w3bdesign · web-flow · commit 7030d1f4fe15 · 2022-01-27T02:15:08.000+01:00
Apply fixes from CodeFactor
diff --git a/components/Cart/AddToCartButton.vue b/components/Cart/AddToCartButton.vue
@@ -1,19 +1,7 @@
 <template>
   <div>
     <button
-      class="
-        relative
-        w-48
-        h-12
-        px-4
-        py-2
-        mt-4
-        font-bold
-        text-white
-        bg-blue-500
-        rounded
-        hover:bg-blue-800
-      "
+      class="relative w-48 h-12 px-4 py-2 mt-4 font-bold text-white bg-blue-500 rounded hover:bg-blue-800"
       :class="{ disabled: loading }"
       @click="addProductToCart(product)"
     >
diff --git a/components/Category/ShowAllCategories.vue b/components/Category/ShowAllCategories.vue
@@ -2,20 +2,7 @@
   <div v-if="categories">
     <section class="container mx-auto bg-white">
       <div
-        class="
-          grid
-          gap-2
-          px-2
-          pt-2
-          pb-2
-          lg:px-0
-          xl:px-0
-          md:px-0
-          lg:grid-cols-4
-          sm:grid-cols-2
-          md:grid-cols-3
-          xs:grid-cols-3
-        "
+        class="grid gap-2 px-2 pt-2 pb-2 lg:px-0 xl:px-0 md:px-0 lg:grid-cols-4 sm:grid-cols-2 md:grid-cols-3 xs:grid-cols-3"
       >
         <template v-for="nodes in categories">
           <template v-for="category in nodes">
@@ -29,18 +16,7 @@
               >
                 <div class="p-6 cursor-pointer">
                   <div
-                    class="
-                      flex
-                      items-center
-                      justify-center
-                      w-full
-                      h-16
-                      text-center
-                      border border-gray-300
-                      rounded-lg
-                      shadow
-                      hover:shadow-outline
-                    "
+                    class="flex items-center justify-center w-full h-16 text-center border border-gray-300 rounded-lg shadow hover:shadow-outline"
                   >
                     <p class="text-lg">
                       {{ category.name }}
diff --git a/components/Index/Hero.vue b/components/Index/Hero.vue
@@ -2,26 +2,10 @@
   <div id="hero">
     <img alt="Image slider slide #1" src="~assets/images/Hero.jpg" />
     <div
-      class="
-        flex flex-col
-        items-start
-        justify-center
-        w-full
-        mx-auto
-        tracking-wide
-        lg:w-1/2
-      "
+      class="flex flex-col items-start justify-center w-full mx-auto tracking-wide lg:w-1/2"
     >
       <span
-        class="
-          w-full
-          p-4
-          mt-4
-          text-center text-white
-          bg-black
-          text-md
-          lg:text-2xl lg:-mt-64
-        "
+        class="w-full p-4 mt-4 text-center text-white bg-black text-md lg:text-2xl lg:-mt-64"
       >
         Modern Interior Sample
       </span>
diff --git a/components/Layout/Cart.vue b/components/Layout/Cart.vue
@@ -22,18 +22,7 @@
         <transition name="cart">
           <div v-if="cartLength">
             <span
-              class="
-                absolute
-                w-6
-                h-6
-                pb-2
-                ml-16
-                -mt-12
-                text-center text-white
-                bg-black
-                rounded-full
-                lg:ml-14
-              "
+              class="absolute w-6 h-6 pb-2 ml-16 -mt-12 text-center text-white bg-black rounded-full lg:ml-14"
             >
               {{ cartLength }}
             </span>
diff --git a/components/Layout/Footer.vue b/components/Layout/Footer.vue
@@ -1,14 +1,7 @@
 <template>
   <div class="container mx-auto mt-24">
     <footer
-      class="
-        px-6
-        text-center
-        bg-white
-        border border-gray-300
-        rounded-lg
-        shadow-lg
-      "
+      class="px-6 text-center bg-white border border-gray-300 rounded-lg shadow-lg"
     >
       <div class="p-6">Copyright &copy; {{ todayDate }} Daniel / w3bdesign</div>
     </footer>
diff --git a/components/Layout/MobileMenu.vue b/components/Layout/MobileMenu.vue
@@ -2,17 +2,7 @@
   <div class="relative">
     <div
       v-if="!firstRender"
-      class="
-        fixed
-        top-0
-        left-0
-        w-screen
-        mt-40
-        bg-white
-        z-100
-        h-96
-        animate__animated
-      "
+      class="fixed top-0 left-0 w-screen mt-40 bg-white z-100 h-96 animate__animated"
       :class="{
         animate__fadeInLeft: expandedMenu,
         animate__fadeOutRight: !expandedMenu && !firstRender,
diff --git a/components/Layout/Navbar.vue b/components/Layout/Navbar.vue
@@ -19,13 +19,7 @@
         <div class="hidden lg:w-1/12 lg:block"></div>
         <div
           id="nav-content"
-          class="
-            hidden
-            w-full
-            mt-4
-            bg-black
-            lg:w-8/12 lg:block lg:bg-white lg:mt-0 lg:text-right
-          "
+          class="hidden w-full mt-4 bg-black lg:w-8/12 lg:block lg:bg-white lg:mt-0 lg:text-right"
           aria-expanded="false"
         >
           <div class="px-6 lg:px-0 lg:pt-5 xl:pt-7">
@@ -36,48 +30,21 @@
                 aria-labelledby="block-main-menu"
               >
                 <ul
-                  class="
-                    items-center
-                    justify-end
-                    flex-1
-                    pr-4
-                    -mr-4
-                    list-reset
-                    lg:flex
-                  "
+                  class="items-center justify-end flex-1 pr-4 -mr-4 list-reset lg:flex"
                 >
                   <li
-                    class="
-                      inline-block
-                      py-2
-                      text-xl
-                      font-semibold
-                      no-underline
-                      lg:text-base lg:px-4
-                    "
+                    class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
                   >
                     <NuxtLink to="/">
                       <span
-                        class="
-                          text-xl text-white
-                          no-underline
-                          lg:text-black
-                          is-active
-                        "
+                        class="text-xl text-white no-underline lg:text-black is-active"
                       >
                         Home
                       </span>
                     </NuxtLink>
                   </li>
                   <li
-                    class="
-                      inline-block
-                      py-2
-                      text-xl
-                      font-semibold
-                      no-underline
-                      lg:text-base lg:px-4
-                    "
+                    class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
                   >
                     <NuxtLink to="/products">
                       <span
@@ -87,58 +54,27 @@
                     </NuxtLink>
                   </li>
                   <li
-                    class="
-                      inline-block
-                      py-2
-                      text-xl
-                      font-semibold
-                      no-underline
-                      lg:text-base lg:px-4
-                    "
+                    class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
                   >
                     <NuxtLink to="/categories">
                       <span
-                        class="
-                          text-xl text-white
-                          no-underline
-                          lg:text-black
-                          is-active
-                        "
+                        class="text-xl text-white no-underline lg:text-black is-active"
                         >Categories</span
                       >
                     </NuxtLink>
                   </li>
                   <li
-                    class="
-                      inline-block
-                      py-2
-                      text-xl
-                      font-semibold
-                      no-underline
-                      lg:text-base lg:px-4
-                    "
+                    class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
                   >
                     <NuxtLink to="/search">
                       <span
-                        class="
-                          text-xl text-white
-                          no-underline
-                          lg:text-black
-                          is-active
-                        "
+                        class="text-xl text-white no-underline lg:text-black is-active"
                         >Search</span
                       >
                     </NuxtLink>
                   </li>
                   <li
-                    class="
-                      inline-block
-                      py-2
-                      text-xl
-                      font-semibold
-                      no-underline
-                      lg:text-base lg:px-4
-                    "
+                    class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
                   >
                     <LayoutCart class="-mr-4" />
                   </li>
diff --git a/components/Order/SubmitOrderButton.vue b/components/Order/SubmitOrderButton.vue
@@ -1,19 +1,7 @@
 <template>
   <div v-if="!success" class="flex justify-center">
     <button
-      class="
-        relative
-        w-48
-        h-12
-        px-4
-        py-2
-        mt-4
-        font-bold
-        text-white
-        bg-blue-500
-        rounded
-        hover:bg-blue-800
-      "
+      class="relative w-48 h-12 px-4 py-2 mt-4 font-bold text-white bg-blue-500 rounded hover:bg-blue-800"
       :class="{ disabled: loading }"
       type="submit"
     >
diff --git a/components/Products/ShowAllProducts.vue b/components/Products/ShowAllProducts.vue
@@ -17,19 +17,7 @@
             >
               <img
                 id="product-image"
-                class="
-                  container
-                  mx-auto
-                  transition
-                  duration-500
-                  ease-in-out
-                  transform
-                  cursor-pointer
-                  lg:w-64
-                  xl:w-64
-                  sm:p-4
-                  hover:scale-110
-                "
+                class="container mx-auto transition duration-500 ease-in-out transform cursor-pointer lg:w-64 xl:w-64 sm:p-4 hover:scale-110"
                 :alt="product.name"
                 :src="productImage(product)"
               />
diff --git a/components/Products/ShowSingleProduct.vue b/components/Products/ShowSingleProduct.vue
@@ -3,49 +3,19 @@
     <section>
       <div class="container flex flex-wrap items-center pt-4 pb-12 mx-auto">
         <div
-          class="
-            grid grid-cols-1
-            gap-4
-            mt-8
-            lg:grid-cols-2
-            xl:grid-cols-2
-            md:grid-cols-2
-            sm:grid-cols-2
-          "
+          class="grid grid-cols-1 gap-4 mt-8 lg:grid-cols-2 xl:grid-cols-2 md:grid-cols-2 sm:grid-cols-2"
         >
           <img
             v-if="product.image !== undefined"
             id="product-image"
-            class="
-              h-auto
-              p-8
-              transition
-              duration-500
-              ease-in-out
-              transform
-              xl:p-2
-              md:p-2
-              lg:p-2
-              hover:grow hover:shadow-lg hover:scale-105
-            "
+            class="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 hover:grow hover:shadow-lg hover:scale-105"
             :alt="product.name"
             :src="product.image.sourceUrl"
           />
           <img
             v-else
             id="product-image"
-            class="
-              h-auto
-              p-8
-              transition
-              duration-500
-              ease-in-out
-              transform
-              xl:p-2
-              md:p-2
-              lg:p-2
-              hover:grow hover:shadow-lg hover:scale-105
-            "
+            class="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 hover:grow hover:shadow-lg hover:scale-105"
             :alt="product.name"
             :src="process.env.placeholderSmallImage"
           />
@@ -81,16 +51,7 @@
                 id="variant"
                 v-model="variationProduct"
                 name="variant"
-                class="
-                  block
-                  w-64
-                  px-6
-                  py-2
-                  bg-white
-                  border border-gray-500
-                  rounded-lg
-                  focus:outline-none focus:shadow-outline
-                "
+                class="block w-64 px-6 py-2 bg-white border border-gray-500 rounded-lg focus:outline-none focus:shadow-outline"
               >
                 <option
                   v-for="(variation, index) in product.variations.nodes"
