Refactor to make removing flag from template easier

WordPress · Oct 18, 2023 · e61a628 · e61a628
1 parent c4bf4c9
commit e61a628
Showing 1 changed file with 38 additions and 40 deletions.
diff --git a/frontend/src/components/VAudioTrack/layouts/VFullLayout.vue b/frontend/src/components/VAudioTrack/layouts/VFullLayout.vue
@@ -16,42 +16,49 @@
       </div>
     </div>
     <div
-      class="mx-auto gap-6 lg:max-w-5xl lg:flex-nowrap"
-      :class="[
-        additionalSearchViews
-          ? 'grid grid-cols-1 grid-rows-[auto,auto] p-6 pb-0 lg:mb-6'
-          : 'items-top mt-6 flex flex-row flex-wrap px-6',
-      ]"
+      v-if="additionalSearchViews"
+      class="mx-auto grid grid-cols-1 grid-rows-[auto,auto] gap-6 p-6 pb-0 lg:mb-6 lg:max-w-5xl lg:flex-nowrap"
     >
-      <div
-        v-if="additionalSearchViews"
-        class="row-start-1 flex justify-between gap-x-6 sm:col-start-2"
-      >
+      <div class="row-start-1 flex justify-between gap-x-6 sm:col-start-2">
         <slot name="play-pause" size="medium" />
         <VGetMediaButton
           :media="audio"
           media-type="audio"
           class="col-start-2 !w-full px-0 sm:!w-auto sm:flex-shrink-0"
         />
       </div>
-      <slot v-else name="play-pause" :size="isSmall ? 'small' : 'large'" />
 
       <div
-        class="audio-info flex w-full flex-col justify-center lg:w-auto"
-        :class="[
-          additionalSearchViews
-            ? 'row-start-2 sm:col-start-1 sm:row-start-1'
-            : 'order-2 lg:order-1',
-        ]"
+        class="audio-info row-start-2 flex w-full flex-col justify-center sm:col-start-1 sm:row-start-1 lg:w-auto"
       >
-        <h1
-          class="lg:line-clamp-2"
-          :class="
-            additionalSearchViews
-              ? 'heading-6'
-              : 'description-bold lg:heading-5'
-          "
+        <h1 class="heading-6 lg:line-clamp-2">{{ audio.title }}</h1>
+        <div
+          class="subtitle mt-1 flex flex-col gap-2 text-base leading-snug lg:flex-row lg:items-center"
         >
+          <i18n as="span" path="audioTrack.creator" class="font-semibold">
+            <template #creator>
+              <VLink
+                class="rounded-sm p-px focus-visible:outline-none focus-visible:ring focus-visible:ring-pink"
+                :href="audio.creator_url"
+                :send-external-link-click-event="false"
+              >
+                {{ audio.creator }}
+              </VLink>
+            </template>
+          </i18n>
+        </div>
+      </div>
+    </div>
+    <div
+      v-else
+      class="items-top mx-auto mt-6 flex flex-row flex-wrap gap-6 px-6 lg:max-w-5xl lg:flex-nowrap"
+    >
+      <slot name="play-pause" :size="isSmall ? 'small' : 'large'" />
+
+      <div
+        class="audio-info order-2 flex w-full flex-col justify-center lg:order-1 lg:w-auto"
+      >
+        <h1 class="description-bold lg:heading-5 lg:line-clamp-2">
           {{ audio.title }}
         </h1>
         <div
@@ -60,32 +67,23 @@
           <i18n as="span" path="audioTrack.creator" class="font-semibold">
             <template #creator>
               <VLink
-                class="rounded-sm p-px"
-                :class="
-                  additionalSearchViews
-                    ? 'focus-visible:outline-none focus-visible:ring focus-visible:ring-pink'
-                    : 'focus:outline-none focus:ring focus:ring-pink'
-                "
+                class="rounded-sm p-px focus:outline-none focus:ring focus:ring-pink"
                 :href="audio.creator_url"
                 :send-external-link-click-event="false"
               >
                 {{ audio.creator }}
               </VLink>
             </template>
           </i18n>
-          <template v-if="!additionalSearchViews">
-            <span
-              class="hidden text-dark-charcoal-70 lg:block"
-              aria-hidden="true"
-              >{{ $t("interpunct") }}</span
-            >
-
-            <div>{{ timeFmt(audio.duration || 0, true) }}</div>
-          </template>
+          <span
+            class="hidden text-dark-charcoal-70 lg:block"
+            aria-hidden="true"
+            >{{ $t("interpunct") }}</span
+          >
+          <div>{{ timeFmt(audio.duration || 0, true) }}</div>
         </div>
       </div>
       <VGetMediaButton
-        v-if="!additionalSearchViews"
         media-type="audio"
         :media="audio"
         class="order-1 my-1 ms-auto flex-shrink-0 lg:order-2"