style: fix offenses

LeBenLeBen · Nov 1, 2023 · db587d7 · db587d7
1 parent 6960120
commit db587d7
Show file tree

Hide file tree

Showing 14 changed files with 31 additions and 340 deletions.
diff --git a/packages/frontend/src/components/Avatar.vue b/packages/frontend/src/components/Avatar.vue
@@ -1,15 +1,6 @@
 <template>
   <div
-    class="
-      flex
-      items-center
-      justify-center
-      w-12
-      h-12
-      overflow-hidden
-      rounded-full
-      bg-alt-200
-    "
+    class="flex items-center justify-center w-12 h-12 overflow-hidden rounded-full bg-alt-200"
   >
     <CPicture
       v-if="picture"

diff --git a/packages/frontend/src/components/CurrentUser.vue b/packages/frontend/src/components/CurrentUser.vue
@@ -2,13 +2,7 @@
   <CBtn
     v-if="currentUser"
     :to="{ name: 'profile' }"
-    class="
-      font-medium
-      rounded-l-3xl rounded-r-lg
-      ring-offset-alt-800
-      md:ring-offset-white
-      align-middle
-    "
+    class="font-medium rounded-l-3xl rounded-r-lg ring-offset-alt-800 md:ring-offset-white align-middle"
     :title="$t('auth.logout')"
   >
     <Avatar :image="currentUser.avatar" class="mr-3" />

diff --git a/packages/frontend/src/components/Header.vue b/packages/frontend/src/components/Header.vue
@@ -2,33 +2,12 @@
   <CCollapse
     id="app-header"
     v-model="menuIsOpen"
-    class="
-      sticky
-      md:relative
-      top-0
-      z-30
-      py-3
-      sm:py-4
-      mb-4
-      sm:mb-6
-      md:mb-8
-      bg-white
-      transition
-      duration-200
-      border-b border-alt-200
-    "
+    class="sticky md:relative top-0 z-30 py-3 sm:py-4 mb-4 sm:mb-6 md:mb-8 bg-white transition duration-200 border-b border-alt-200"
   >
     <header>
       <div class="container">
         <div
-          class="
-            flex
-            items-center
-            md:grid md:grid-cols-3
-            lg:grid-cols-4
-            md:gap-6
-            lg:gap-14
-          "
+          class="flex items-center md:grid md:grid-cols-3 lg:grid-cols-4 md:gap-6 lg:gap-14"
         >
           <div
             :class="{
@@ -39,26 +18,14 @@
           >
             <router-link
               :to="{ name: 'home' }"
-              class="
-                font-display
-                text-2xl
-                lg:text-3xl
-                text-primary-500
-                rounded-lg
-                ring-offset-white
-              "
+              class="font-display text-2xl lg:text-3xl text-primary-500 rounded-lg ring-offset-white"
             >
               Cookr
             </router-link>
           </div>
 
           <div
-            class="
-              flex-grow flex
-              items-center
-              md:col-start-2 md:col-span-2
-              lg:col-span-3
-            "
+            class="flex-grow flex items-center md:col-start-2 md:col-span-2 lg:col-span-3"
           >
             <Search
               :is-open="searchIsOpen"
@@ -77,16 +44,7 @@
             class="md:hidden flex-shrink-0"
           >
             <CCollapseBtn
-              class="
-                flex
-                items-center
-                justify-center
-                w-10
-                h-10
-                p-1
-                hover:bg-alt-200
-                rounded-md
-              "
+              class="flex items-center justify-center w-10 h-10 p-1 hover:bg-alt-200 rounded-md"
             >
               <CIcon id="hamburger" :scale="1.5" />
             </CCollapseBtn>
@@ -96,17 +54,7 @@
     </header>
 
     <CCollapseContent
-      class="
-        md:hidden
-        flex flex-col
-        items-center
-        justify-center
-        p-8
-        fixed
-        inset-0
-        z-50
-        bg-alt-800 bg-opacity-98
-      "
+      class="md:hidden flex flex-col items-center justify-center p-8 fixed inset-0 z-50 bg-alt-800 bg-opacity-98"
       :transition="{
         enterActiveClass: 'transition ease-out duration-100',
         enterFromClass: 'transform opacity-0 scale-95',
@@ -122,21 +70,7 @@
       />
 
       <CCollapseBtn
-        class="
-          absolute
-          top-3
-          right-4
-          flex
-          items-center
-          justify-center
-          w-10
-          h-10
-          p-1
-          text-alt-200
-          hover:text-white hover:bg-alt-900
-          rounded-md
-          ring-offset-alt-800
-        "
+        class="absolute top-3 right-4 flex items-center justify-center w-10 h-10 p-1 text-alt-200 hover:text-white hover:bg-alt-900 rounded-md ring-offset-alt-800"
       >
         <CIcon id="close" :scale="1.5" />
       </CCollapseBtn>
@@ -155,16 +89,7 @@
               >
                 <a
                   :href="href"
-                  class="
-                    flex
-                    items-center
-                    px-4
-                    py-2
-                    lg:-ml-4
-                    text-lg
-                    font-bold
-                    rounded-full
-                  "
+                  class="flex items-center px-4 py-2 lg:-ml-4 text-lg font-bold rounded-full"
                   :class="[
                     'text-alt-200 hover:text-white focus:text-white',
                     {

diff --git a/packages/frontend/src/components/Nav.vue b/packages/frontend/src/components/Nav.vue
@@ -13,15 +13,7 @@
           >
             <a
               :href="href"
-              class="
-                flex
-                items-center
-                px-3
-                py-2
-                lg:-ml-4
-                font-bold
-                rounded-full
-              "
+              class="flex items-center px-3 py-2 lg:-ml-4 font-bold rounded-full"
               :class="[
                 'hover:text-alt-800 focus:text-alt-800',
                 {

diff --git a/packages/frontend/src/components/Notifications.vue b/packages/frontend/src/components/Notifications.vue
@@ -3,20 +3,7 @@
     appear
     tag="ul"
     name="fade-in-left"
-    class="
-      fixed
-      z-40
-      right-2
-      sm:right-3
-      md:right-4
-      top-20
-      sm:top-23
-      md:top-24
-      left-2
-      sm:left-3
-      md:left-auto md:max-w-84
-      space-y-3
-    "
+    class="fixed z-40 right-2 sm:right-3 md:right-4 top-20 sm:top-23 md:top-24 left-2 sm:left-3 md:left-auto md:max-w-84 space-y-3"
     :style="style"
   >
     <li v-for="(notification, i) in notifications" :key="i">

diff --git a/packages/frontend/src/components/RecipeCard.vue b/packages/frontend/src/components/RecipeCard.vue
@@ -1,17 +1,7 @@
 <template>
   <router-link
     :to="{ name: 'recipe', params: { id: recipe.id, slug: recipe.slug } }"
-    class="
-      overflow-hidden
-      flex flex-col
-      h-full
-      text-alt-800
-      hover:text-alt-800
-      bg-alt-50
-      hover:bg-white
-      rounded-xl
-      border-b border-alt-200
-    "
+    class="overflow-hidden flex flex-col h-full text-alt-800 hover:text-alt-800 bg-alt-50 hover:bg-white rounded-xl border-b border-alt-200"
   >
     <RecipeImage
       :image="recipe.image"
@@ -22,14 +12,7 @@
 
     <div class="py-3 px-4">
       <h2
-        class="
-          font-display
-          text-lg
-          font-medium
-          text-alt-700
-          overflow-hidden overflow-ellipsis
-          whitespace-nowrap
-        "
+        class="font-display text-lg font-medium text-alt-700 overflow-hidden overflow-ellipsis whitespace-nowrap"
       >
         {{ recipe.title }}
       </h2>

diff --git a/packages/frontend/src/components/RecipeListItem.vue b/packages/frontend/src/components/RecipeListItem.vue
@@ -1,19 +1,7 @@
 <template>
   <router-link
     :to="{ name: 'recipe', params: { id: recipe.id, slug: recipe.slug } }"
-    class="
-      overflow-hidden
-      min-height-150px
-      flex flex-col
-      sm:flex-row
-      text-alt-800
-      hover:text-alt-800
-      bg-alt-50
-      hover:bg-white
-      rounded-xl
-      border-b border-alt-200
-      ring-offset-2
-    "
+    class="overflow-hidden min-height-150px flex flex-col sm:flex-row text-alt-800 hover:text-alt-800 bg-alt-50 hover:bg-white rounded-xl border-b border-alt-200 ring-offset-2"
   >
     <RecipeImage
       :image="recipe.image"
@@ -35,15 +23,7 @@
 
       <ul
         v-if="recipe.time || recipe.quantity"
-        class="
-          flex
-          items-end
-          text-alt-600 text-sm
-          md:text-base
-          leading-none
-          pt-3
-          mt-auto
-        "
+        class="flex items-end text-alt-600 text-sm md:text-base leading-none pt-3 mt-auto"
       >
         <li v-if="recipe.time" class="mr-4 sm:mr-6">
           <RecipeTime :time="recipe.time" />

diff --git a/packages/frontend/src/components/RecipesCarousel.vue b/packages/frontend/src/components/RecipesCarousel.vue
@@ -1,19 +1,7 @@
 <template>
   <div class="relative -mx-4 sm:-mx-6 md:-ml-1 lg:-mx-1">
     <CBtn
-      class="
-        -sm:hidden
-        py-1
-        absolute
-        top-20
-        left-0
-        z-10
-        text-alt-600
-        hover:text-alt-800
-        bg-white bg-opacity-85
-        hover:bg-opacity-100
-        rounded-r
-      "
+      class="-sm:hidden py-1 absolute top-20 left-0 z-10 text-alt-600 hover:text-alt-800 bg-white bg-opacity-85 hover:bg-opacity-100 rounded-r"
       :class="{ 'opacity-0': swiper?.isBeginning }"
       @click="swiper?.slidePrev()"
     >
@@ -61,19 +49,7 @@
       </template>
     </Swiper>
     <CBtn
-      class="
-        -sm:hidden
-        py-1
-        absolute
-        top-20
-        right-0
-        z-10
-        text-alt-600
-        hover:text-alt-800
-        bg-white bg-opacity-85
-        hover:bg-opacity-100
-        rounded-l
-      "
+      class="-sm:hidden py-1 absolute top-20 right-0 z-10 text-alt-600 hover:text-alt-800 bg-white bg-opacity-85 hover:bg-opacity-100 rounded-l"
       :class="{ 'opacity-0': swiper?.isEnd }"
       @click="swiper?.slideNext()"
     >