Fix the image views

Jaykul · Mar 14, 2024 · 3cd3477 · 3cd3477
1 parent 749a33b
commit 3cd3477
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 90 deletions.
diff --git a/theme/layouts/image-left-pop.vue b/theme/layouts/image-left-pop.vue
@@ -5,50 +5,48 @@ import ThemeLayout from './theme-layout.vue'
 
 const components = defineComponent({ ThemeLayout })
 const props = defineProps<{
-  image?: string
+  image: string
   leftClass?: string
   rightClass?: string
   equal?: Boolean
 }>();
 </script>
 
 <template>
-  <theme-layout layout-class="image image-left image-left-pop" content-class="relative h-full grid grid-cols-12">
-    <div v-if="image"
-      :class="[
-        equal ? 'col-span-6' : 'col-span-4',
-        'my-auto h-full flex justify-center items-center',
-        leftClass
-      ]"
-      :style="{
-        backgroundImage: `url(${image})`,
-        backgroundSize: 'cover',
-        backgroundPosition: 'left',
-      }"
-    >
-      <div class="h-full w-full" style="backdropFilter: blur(6px)">&nbsp;</div>
+  <theme-layout layout-class="image image-left image-left-pop">
+    <div class="content my-auto h-full relative grid grid-cols-12">
+      <div :class="[
+              equal ? 'col-span-6' : 'col-span-4',
+              'my-auto h-full flex justify-center items-center',
+              leftClass
+            ]" :style="{
+              backgroundImage: `url(${image})`,
+              backgroundSize: 'cover',
+              backgroundPosition: 'left',
+            }">
+        <div class="h-full w-full" style="backdropFilter: blur(6px)">&nbsp;</div>
         <div class="absolute left-15">
           <div :style="{
-            boxShadow: '0px 10px 30px rgba(0,0,0,0.7)',
-            zIndex: '5',
-          }">
+                boxShadow: '0px 10px 30px rgba(0,0,0,0.7)',
+                zIndex: '5',
+              }">
             <img :src="image" class="w-[450px]" alt="" />
           </div>
         </div>
-    </div>
-    <div :class="[
-      'slidev-layout my-auto',
-      image ? 'col-span-6' : 'col-span-12',
-      equal ? 'col-span-6' : 'col-span-8',
-      rightClass
-    ]">
-      <slot />
+      </div>
+      <div :class="[
+              'pt2.5rem pa-3.5rem',
+              equal ? 'col-span-6' : 'col-span-8',
+              rightClass
+            ]">
+        <slot />
+      </div>
     </div>
   </theme-layout>
 </template>
 
-<style>
-.slidev-layout.image .slidev-content {
+<style scoped>
+.content {
   padding: 0;
   background: var(--slidev-theme-image-background);
 }

diff --git a/theme/layouts/image-left.vue b/theme/layouts/image-left.vue
@@ -15,50 +15,38 @@ const props = defineProps<{
 </script>
 
 <template>
-  <theme-layout layout-class="image image-left" content-class="relative my-auto h-full grid grid-cols-12">
-    <div
-      v-if="bleed"
-      :class="[
-        equal ? 'col-span-6' : 'col-span-4',
-        'my-auto h-full flex justify-center items-center',
-        leftClass
-      ]"
-      :style="{
-        backgroundImage: `url(${image})`,
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-      }"
-    >
-      <p />
-    </div>
-    <div
-      v-else
-      :class="[
-        'slidev-content',
+  <theme-layout layout-class="image image-left">
+    <div class="content my-auto h-full relative grid grid-cols-12">
+      <div v-if="bleed" :class="[
+            equal ? 'col-span-6' : 'col-span-4',
+            'my-auto h-full flex justify-center items-center',
+            leftClass
+          ]" :style="{
+            backgroundImage: `url(${image})`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+          }">
+        <p />
+      </div>
+      <div v-else :class="[
         equal ? 'col-span-6' : 'col-span-4',
         'my-auto h-full flex justify-center items-center',
         leftClass
       ]">
-        <img
-          :src="image"
-          class="my-auto mx-auto w-auto"
-          :class="imageClass"
-        />
+        <img :src="image" class="my-auto mx-auto w-auto" :class="imageClass" />
       </div>
-    <div
-      :class="[
-        'slidev-content',
-        image ? (equal ? 'col-span-6' : 'col-span-8') : 'col-span-12',
+      <div :class="[
+        'pt2.5rem pa-3.5rem',
+        equal ? 'col-span-6' : 'col-span-8',
         rightClass
-      ]"
-    >
-      <slot />
+      ]">
+        <slot />
+      </div>
     </div>
   </theme-layout>
 </template>
-
-<style>
-.slidev-layout.image .slidev-content {
+<style scoped>
+.content {
   padding: 0;
   background: var(--slidev-theme-image-background);
 }

diff --git a/theme/layouts/image-right-pop.vue b/theme/layouts/image-right-pop.vue
@@ -15,31 +15,26 @@ const props = defineProps<{
 
 <template>
   <theme-layout layout-class="image image-right image-right-pop">
-    <div class="content my-auto h-full relative grid grid-cols-12 pa-0">
-      <div
-          :class="[
-            'pt2.5rem pa-3.5rem',
-            image ? 'col-span-6' : 'col-span-12',
-            equal ? 'col-span-6' : 'col-span-8',
-            leftClass
-          ]">
+    <div class="content my-auto h-full relative grid grid-cols-12">
+      <div :class="[
+              'pt2.5rem pa-3.5rem',
+              equal ? 'col-span-6' : 'col-span-8',
+              leftClass
+            ]">
         <slot />
       </div>
-      <div
-          :class="[
+      <div :class="[
             equal ? 'col-span-6' : 'col-span-4',
             'my-auto h-full flex justify-center items-center',
             rightClass
-          ]"
-          :style="{
+          ]" :style="{
             backgroundImage: `url(${image})`,
             backgroundSize: 'cover',
             backgroundPosition: 'right',
           }">
         <div class="h-full w-full" style="backdropFilter: blur(6px)">&nbsp;</div>
         <div class="absolute right-15">
-          <div
-              :style="{
+          <div :style="{
                 boxShadow: '0px 10px 30px rgba(0,0,0,0.7)',
                 zIndex: '5',
               }">

diff --git a/theme/layouts/image-right.vue b/theme/layouts/image-right.vue
@@ -17,43 +17,39 @@ const props = defineProps<{
 
 <template>
   <theme-layout class="image image-right">
-    <div class="content my-auto h-full relative grid grid-cols-12 pa-0">
-      <div class="pt2.5rem pa-3.5rem"
-          :class="[
-            image ? (equal ? 'col-span-6' : 'col-span-8') : 'col-span-12',
+    <div class="content my-auto h-full relative grid grid-cols-12">
+      <div :class="[
+            'pt2.5rem pa-3.5rem',
+            equal ? 'col-span-6' : 'col-span-8',
             leftClass,
           ]">
         <slot />
       </div>
-      <div v-if="bleed"
-          :class="[
+      <div v-if="bleed" :class="[
             equal ? 'col-span-6' : 'col-span-4',
             'my-auto h-full flex justify-center items-center',
             rightClass,
-          ]"
-          :style="{
+          ]" :style="{
             backgroundImage: `url(${image})`,
             backgroundSize: 'cover',
             backgroundPosition: 'center',
           }">
         <p />
       </div>
-      <div v-else
-          :class="[
+      <div v-else :class="[
             equal ? 'col-span-6' : 'col-span-4',
             'my-auto h-full flex justify-center items-center',
             rightClass,
           ]">
-        <img class="my-auto mx-auto w-auto"
-            :src="image"
-            :class="imageClass" />
+        <img class="my-auto mx-auto w-auto" :src="image" :class="imageClass" />
       </div>
     </div>
   </theme-layout>
 </template>
 
 <style scoped>
 .content {
+  padding: 0;
   background: var(--slidev-theme-image-background);
 }
 </style>