update carousel indicator

fudan-generative-vision · Mar 24, 2024 · 0ce433b · 0ce433b
1 parent d726831
commit 0ce433b
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 205 deletions.
diff --git a/src/components/AnimateHumanVideos.vue b/src/components/AnimateHumanVideos.vue
@@ -60,23 +60,19 @@ watch(animateHumanCarousel, (newV) => {
     </div>
 
     <!--Carousel indicators-->
-    <div class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0"
+    <div class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] -mb-8 flex list-none justify-center p-0"
       data-twe-carousel-indicators>
       <button type="button" data-twe-target="#animateHumanCarousel" data-twe-slide-to="0" data-twe-carousel-active
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
-        aria-current="true" aria-label="Slide 1"></button>
-      <button type="button" data-twe-target="#animateHumanCarousel" data-twe-slide-to="1"
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
+        class="indicator" aria-current="true" aria-label="Slide 1"></button>
+      <button type="button" data-twe-target="#animateHumanCarousel" data-twe-slide-to="1" class="indicator"
         aria-label="Slide 2"></button>
-      <button type="button" data-twe-target="#animateHumanCarousel" data-twe-slide-to="2"
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
+      <button type="button" data-twe-target="#animateHumanCarousel" data-twe-slide-to="2" class="indicator"
         aria-label="Slide 3"></button>
     </div>
 
     <!--Carousel controls - prev item-->
-    <button
-      class="absolute bottom-0 left-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
-      type="button" data-twe-target="#animateHumanCarousel" data-twe-slide="prev">
+    <button class="indicator-btn indicator-left-btn" type="button" data-twe-target="#animateHumanCarousel"
+      data-twe-slide="prev">
       <span class="inline-block h-8 w-8">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
           class="h-6 w-6">
@@ -87,9 +83,8 @@ watch(animateHumanCarousel, (newV) => {
         class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Previous</span>
     </button>
     <!--Carousel controls - next item-->
-    <button
-      class="absolute bottom-0 right-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
-      type="button" data-twe-target="#animateHumanCarousel" data-twe-slide="next">
+    <button class="indicator-btn indicator-right-btn" type="button" data-twe-target="#animateHumanCarousel"
+      data-twe-slide="next">
       <span class="inline-block h-8 w-8">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
           class="h-6 w-6">

diff --git a/src/components/ComparisionVideos.vue b/src/components/ComparisionVideos.vue
@@ -60,26 +60,21 @@ watch(comparisionsCarousel, (newV) => {
     </div>
 
     <!--Carousel indicators-->
-    <div class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0"
+    <div class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] -mb-8 flex list-none justify-center p-0"
       data-twe-carousel-indicators>
       <button type="button" data-twe-target="#comparisionsCarousel" data-twe-slide-to="0" data-twe-carousel-active
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
-        aria-current="true" aria-label="Slide 1"></button>
-      <button type="button" data-twe-target="#comparisionsCarousel" data-twe-slide-to="1"
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
+        class="indicator" aria-current="true" aria-label="Slide 1"></button>
+      <button type="button" data-twe-target="#comparisionsCarousel" data-twe-slide-to="1" class="indicator"
         aria-label="Slide 2"></button>
-      <button type="button" data-twe-target="#comparisionsCarousel" data-twe-slide-to="2"
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
+      <button type="button" data-twe-target="#comparisionsCarousel" data-twe-slide-to="2" class="indicator"
         aria-label="Slide 3"></button>
-      <button type="button" data-twe-target="#comparisionsCarousel" data-twe-slide-to="3"
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
+      <button type="button" data-twe-target="#comparisionsCarousel" data-twe-slide-to="3" class="indicator"
         aria-label="Slide 4"></button>
     </div>
 
     <!--Carousel controls - prev item-->
-    <button
-      class="absolute bottom-0 left-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
-      type="button" data-twe-target="#comparisionsCarousel" data-twe-slide="prev">
+    <button class="indicator-btn indicator-left-btn" type="button" data-twe-target="#comparisionsCarousel"
+      data-twe-slide="prev">
       <span class="inline-block h-8 w-8">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
           class="h-6 w-6">
@@ -90,9 +85,8 @@ watch(comparisionsCarousel, (newV) => {
         class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Previous</span>
     </button>
     <!--Carousel controls - next item-->
-    <button
-      class="absolute bottom-0 right-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
-      type="button" data-twe-target="#comparisionsCarousel" data-twe-slide="next">
+    <button class="indicator-btn indicator-right-btn" type="button" data-twe-target="#comparisionsCarousel"
+      data-twe-slide="next">
       <span class="inline-block h-8 w-8">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
           class="h-6 w-6">

diff --git a/src/components/CrossIdVideos.vue b/src/components/CrossIdVideos.vue
@@ -49,23 +49,19 @@ watch(crossIdCarousel, (newV) => {
     </div>
 
     <!--Carousel indicators-->
-    <div class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0"
+    <div class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] -mb-8 flex list-none justify-center p-0"
       data-twe-carousel-indicators>
       <button type="button" data-twe-target="#crossIdCarousel" data-twe-slide-to="0" data-twe-carousel-active
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
-        aria-current="true" aria-label="Slide 1"></button>
-      <button type="button" data-twe-target="#crossIdCarousel" data-twe-slide-to="1"
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
+        class="indicator" aria-current="true" aria-label="Slide 1"></button>
+      <button type="button" data-twe-target="#crossIdCarousel" data-twe-slide-to="1" class="indicator"
         aria-label="Slide 2"></button>
-      <button type="button" data-twe-target="#crossIdCarousel" data-twe-slide-to="2"
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
+      <button type="button" data-twe-target="#crossIdCarousel" data-twe-slide-to="2" class="indicator"
         aria-label="Slide 3"></button>
     </div>
 
     <!--Carousel controls - prev item-->
-    <button
-      class="absolute bottom-0 left-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
-      type="button" data-twe-target="#crossIdCarousel" data-twe-slide="prev">
+    <button class="indicator-btn indicator-left-btn" type="button" data-twe-target="#crossIdCarousel"
+      data-twe-slide="prev">
       <span class="inline-block h-8 w-8">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
           class="h-6 w-6">
@@ -76,9 +72,8 @@ watch(crossIdCarousel, (newV) => {
         class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Previous</span>
     </button>
     <!--Carousel controls - next item-->
-    <button
-      class="absolute bottom-0 right-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
-      type="button" data-twe-target="#crossIdCarousel" data-twe-slide="next">
+    <button class="indicator-btn indicator-right-btn" type="button" data-twe-target="#crossIdCarousel"
+      data-twe-slide="next">
       <span class="inline-block h-8 w-8">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
           class="h-6 w-6">

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
diff --git a/src/components/T2IVideos.vue b/src/components/T2IVideos.vue
@@ -43,45 +43,47 @@ const t2iCaptions = ref([
       <div
         class="relative float-left -mr-[100%] w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
         data-twe-carousel-active data-twe-carousel-item style="backface-visibility: hidden">
-
-        <video :ref="(el: any) => videos[0] = el" v-lazy src="@/assets/video/T2I/0.mp4" muted loop autoplay></video>
-
-
+        <div class="item-content">
+          <div class="t2i-caption"><span>Prompt: </span>{{ t2iCaptions[t2iIndex] }}</div>
+          <video :ref="(el: any) => videos[0] = el" v-lazy src="@/assets/video/T2I/0.mp4" muted loop autoplay></video>
+        </div>
       </div>
       <!--Second item-->
       <div
         class="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
         data-twe-carousel-item style="backface-visibility: hidden">
-        <video :ref="(el: any) => videos[1] = el" v-lazy src="@/assets/video/T2I/1.mp4" muted loop></video>
+
+        <div class="item-content">
+          <div class="t2i-caption"><span>Prompt: </span>{{ t2iCaptions[t2iIndex] }}</div>
+          <video :ref="(el: any) => videos[1] = el" v-lazy src="@/assets/video/T2I/1.mp4" muted loop></video>
+        </div>
 
       </div>
       <!--Third item-->
       <div
         class="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
         data-twe-carousel-item style="backface-visibility: hidden">
-        <video :ref="(el: any) => videos[2] = el" v-lazy src="@/assets/video/T2I/2.mp4" muted loop></video>
+        <div class="item-content">
+          <div class="t2i-caption"><span>Prompt: </span>{{ t2iCaptions[t2iIndex] }}</div>
+          <video :ref="(el: any) => videos[2] = el" v-lazy src="@/assets/video/T2I/2.mp4" muted loop></video>
+        </div>
       </div>
 
     </div>
 
     <!--Carousel indicators-->
-    <div class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0"
+    <div class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] -mb-8 flex list-none justify-center p-0"
       data-twe-carousel-indicators>
       <button type="button" data-twe-target="#t2iCarousel" data-twe-slide-to="0" data-twe-carousel-active
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
-        aria-current="true" aria-label="Slide 1"></button>
-      <button type="button" data-twe-target="#t2iCarousel" data-twe-slide-to="1"
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
+        class="indicator" aria-current="true" aria-label="Slide 1"></button>
+      <button type="button" data-twe-target="#t2iCarousel" data-twe-slide-to="1" class="indicator"
         aria-label="Slide 2"></button>
-      <button type="button" data-twe-target="#t2iCarousel" data-twe-slide-to="2"
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
+      <button type="button" data-twe-target="#t2iCarousel" data-twe-slide-to="2" class="indicator"
         aria-label="Slide 3"></button>
     </div>
 
     <!--Carousel controls - prev item-->
-    <button
-      class="absolute bottom-0 left-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
-      type="button" data-twe-target="#t2iCarousel" data-twe-slide="prev">
+    <button class="indicator-btn indicator-left-btn" type="button" data-twe-target="#t2iCarousel" data-twe-slide="prev">
       <span class="inline-block h-8 w-8">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
           class="h-6 w-6">
@@ -92,9 +94,8 @@ const t2iCaptions = ref([
         class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Previous</span>
     </button>
     <!--Carousel controls - next item-->
-    <button
-      class="absolute bottom-0 right-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
-      type="button" data-twe-target="#t2iCarousel" data-twe-slide="next">
+    <button class="indicator-btn indicator-right-btn" type="button" data-twe-target="#t2iCarousel"
+      data-twe-slide="next">
       <span class="inline-block h-8 w-8">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
           class="h-6 w-6">
@@ -106,11 +107,24 @@ const t2iCaptions = ref([
     </button>
   </div>
 
-  <div class="t2i-caption"><span>Prompt: </span>{{ t2iCaptions[t2iIndex] }}</div>
+  <!-- <div class="t2i-caption"><span>Prompt: </span>{{ t2iCaptions[t2iIndex] }}</div> -->
 </template>
 
 <style scoped>
-.t2i-caption {
-  @apply font-light md:px-20 text-center leading-snug mt-2;
+/* .t2i-caption {
+  @apply font-light text-center leading-snug mt-2 px-4;
+} */
+
+
+.item-content {
+  @apply flex flex-row justify-between items-center;
+
+  video {
+    @apply w-1/2;
+  }
+
+  div {
+    @apply w-1/2 pl-2 pr-20 font-thin;
+  }
 }
 </style>