improve program animation, layout

majak_uistyleguide/templates/patterns/molecules/menus/elections/carousel.html

@@ -14,7 +14,7 @@
           <div class="2.5xl:ml-[-10rem]">
             <img
               class="w-4/6"
-              src="../../../../../static/images/europarl-header.png"
+              src="../../../../../static/images/europarl/europarl-header.png"
             >
           </div>
         </div>

src/js/components/CandidatePrimaryBox.vue

@@ -23,7 +23,7 @@
             {{ name }}
           </h2>
 
-          <p class="font-bold text-lg mt-[-0.5rem] mb-8">
+          <p v-if="position" class="font-bold text-lg mt-[-0.5rem] mb-8">
             {{ position }}
           </p>
 

src/js/components/card_program/CardProgramItem.vue

@@ -10,9 +10,10 @@
     <div
       ref="closedVariant"
       class="
-        bg-black flex flex-row items-center px-5 py-2 gap-5 justify-start duration-200 cursor-pointer min-h-[600px]
+        bg-black flex flex-row items-center px-5 py-2 gap-5 justify-start duration-200 cursor-pointer
 
-        xl:flex-col xl:gap-12 xl:py-8 xl:px-3 xl:h-full xl:justify-between
+        xl:h-[696px] xl:flex-col xl:gap-12 xl:py-8 xl:px-3 xl:justify-between
+        2xl:h-[646px]
 
         hover:bg-grey-600
       "
@@ -38,11 +39,11 @@
 
     <div
       ref="openVariant"
-      class="bg-white h-full"
+      class="bg-white"
       :class="
         !this.defaultIsOpen ?
 
-        'w-0 [&_*]:!text-[0rem] [&_*]:!p-0 [&_*]:!gap-0 [&_*]:!leading-[0px] [&_*]:!delay-0 [&_*]:!duration-0'
+        'w-0 [&_*]:!text-[0rem] [&_*]:!p-0 [&_*]:!gap-0 [&_*]:!leading-[0px] [&_*]:!delay-0 [&_*]:!duration-0 !h-0'
           :
         'p-6 xl:p-12'
       "
@@ -51,22 +52,25 @@
         class="
           flex flex-col gap-8
 
-          xl:flex-row xl:gap-16 xl:h-full
+          xl:flex-row xl:gap-16
         "
       >
         <div
           class="
-            flex gap-7 [flex-flow:column_wrap]
-            w-full h-full justify-start
+            flex gap-7 w-full justify-start flex-col
 
-            max-h-[500px]
+            xl:[flex-flow:column_wrap]
+
+            xl:h-[600px]
+            2xl:h-[550px]
           "
         >
           <h2
             class="
               font-alt text-[3.25rem] duration-200 delay-100 w-1/2
 
-              xl:text-[6.5rem]
+              lg:text-[5.5rem]
+              2xl:text-[6.5rem]
             "
           >
             {{ this.title }}
@@ -124,6 +128,7 @@ export default {
           this.$refs.openVariant.classList.remove("[&_*]:!leading-[0px]")
           this.$refs.openVariant.classList.remove("[&_*]:!duration-0")
           this.$refs.openVariant.classList.remove("[&_*]:!delay-0")
+          this.$refs.openVariant.classList.remove("!h-0")
 
           if (isLgScreenSize()) {
             this.$refs.openVariant.classList.add("duration-300")
@@ -164,6 +169,7 @@ export default {
           this.$refs.openVariant.classList.add("[&_*]:!leading-[0px]")
           this.$refs.openVariant.classList.add("[&_*]:!duration-0")
           this.$refs.openVariant.classList.add("[&_*]:!delay-0")
+          this.$refs.openVariant.classList.add("!h-0")
         }
       }
     )
@@ -202,7 +208,7 @@ export default {
           }
         }
       },
-      1
+      0.1
     )
 
     // --- END URL watch ---

src/js/components/card_program/CardProgramItemPoint.vue

 <template>
   <div
     class="
-      [&_p]:text-lg [&_p]:leading-7 [&_p]:duration-150 [&_p]:delay-300 mt-[-5px] w-1/2
+      [&_p]:text-lg [&_p]:leading-7 [&_p]:duration-150 [&_p]:delay-300 mt-[-5px] xl:w-1/2
 
       xl:pt-1 xl:m-0
     "