docs(esl-animate): update site pages according to the latest `esl-ani…

…mate` updates
exadel-inc · Jun 26, 2023 · 28f983a · 28f983a
1 parent ee60f9c
commit 28f983a
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 27 deletions.
diff --git a/pages/src/common/simple-grid.less b/pages/src/common/simple-grid.less
@@ -1,20 +1,39 @@
+@import "./variables.less";
+
 .simple-grid {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-around;
+  --col-grid: 1;
+  @media @sm {
+    --col-grid: 2;
+  }
+  @media @md {
+    --col-grid: 3;
+  }
+  @media @lg {
+    --col-grid: 4;
+  }
+  @media @xl {
+    --col-grid: 5;
+  }
+
+  &-compact {
+    --col-grid: 1;
+    @media @md-xl {
+      --col-grid: 2;
+    }
+  }
+
+  &-list {
+    --col-grid: 1;
+  }
+
+  display: grid;
+  grid-template-columns: repeat(var(--col-grid), 1fr);
 
   margin: 30px 0;
-  padding: 20px;
+  gap: 30px;
 
   & > &-cell {
     list-style-type: none;
-    flex: 1 1 0px;
-    margin: 20px;
-    min-width: 200px;
-    height: 200px;
-  }
-
-  &-fw > &-cell {
-    flex: 1 1 100%;
+    min-height: 200px;
   }
 }
diff --git a/pages/views/_includes/landing/benefits.njk b/pages/views/_includes/landing/benefits.njk
@@ -3,7 +3,7 @@
   <esl-animate target="::next::child" group></esl-animate>
   <ul class="benefit-container">
     {% for item in landing.benefits.items %}
-      <li class="benefit-item esl-animate-slide-left">
+      <li class="benefit-item esl-animate-slide left">
         <div class="benefit-icon">
           {% include "static/assets/" + item.icon %}
         </div>

diff --git a/pages/views/_includes/landing/blogs.njk b/pages/views/_includes/landing/blogs.njk
@@ -6,7 +6,7 @@
   <esl-animate target="::next::child" group></esl-animate>
   <ul class="blogs-container">
     {% for item in releasedBlogs | reverse | limit(3) %}
-      <li class="blogs-item esl-animate-slide-left">
+      <li class="blogs-item esl-animate-slide left">
         <div class="blogs-content">
           <h4 class="blogs-content-name">{{ item.data.name }}</h4>
           <p class="blogs-content-text">{{ item.templateContent | text | truncate(250) }}</p>

diff --git a/pages/views/_includes/landing/promo-banner.njk b/pages/views/_includes/landing/promo-banner.njk
@@ -1,4 +1,4 @@
-<div class="promo-banner esl-animate-slide-up">
+<div class="promo-banner esl-animate-slide up">
   <esl-animate target="::parent"></esl-animate>
   <div class="promo-banner-content container">
     <h2 class="promo-banner-heading">{{ landing.promo.title }}</h2>

diff --git a/pages/views/components/esl-animate.njk b/pages/views/components/esl-animate.njk
@@ -3,7 +3,7 @@ layout: content
 title: ESL Animate & ESL Animate Service
 seoTitle: ESL Animate - service and component to animate element on viewport intersection
 name: ESL Animate
-tags: [components, beta]
+tags: [components]
 aside:
   examples:
     - animate

diff --git a/pages/views/examples/animate.njk b/pages/views/examples/animate.njk
@@ -2,7 +2,7 @@
 layout: content
 title: Animate
 name: Animate
-tags: [examples, beta]
+tags: [examples]
 icon: examples/animate.svg
 aside:
   components:
@@ -12,21 +12,21 @@ aside:
 <section>
   <h2>Simple animation</h2>
 
-  <div class="simple-grid simple-grid-fw">
+  <div class="simple-grid simple-grid-compact">
     {% for i in range(0, 2) -%}
-      <esl-animate repeat class="esl-animate-fade simple-grid-cell bg-green round text-white h3 text-center p-4">
+      <esl-animate repeat class="esl-animate-fade simple-grid-cell bg-green round text-white h3 text-center">
         esl-animate-fade
       </esl-animate>
-      <esl-animate repeat class="esl-animate-slide-up simple-grid-cell bg-green round text-white h3 text-center p-4">
+      <esl-animate repeat class="esl-animate-slide up simple-grid-cell bg-green round text-white h3 text-center">
         esl-animate-slide-up
       </esl-animate>
-      <esl-animate repeat class="esl-animate-slide-left simple-grid-cell bg-green round text-white h3 text-center p-4">
+      <esl-animate repeat class="esl-animate-slide left simple-grid-cell bg-green round text-white h3 text-center">
         esl-animate-slide-left
       </esl-animate>
-      <esl-animate repeat class="esl-animate-slide-down simple-grid-cell bg-green round text-white h3 text-center p-4">
+      <esl-animate repeat class="esl-animate-slide down simple-grid-cell bg-green round text-white h3 text-center">
         esl-animate-slide-down
       </esl-animate>
-      <esl-animate repeat class="esl-animate-slide-right simple-grid-cell bg-green round text-white h3 text-center p-4">
+      <esl-animate repeat class="esl-animate-slide right simple-grid-cell bg-green round text-white h3 text-center">
         esl-animate-slide-right
       </esl-animate>
     {%- endfor %}
@@ -37,17 +37,21 @@ aside:
   <h2>Grouped and repetitive animation</h2>
   <ul class="round simple-grid">
     <esl-animate target="::parent::child(li)" group repeat></esl-animate>
-    {% for i in range(0, 36) -%}
-      <li class="bg-blue round esl-animate-slide-up simple-grid-cell {{ 'hide-xs' if i >= 12 }}"></li>
+    {% for i in range(0, 30) -%}
+      <li class="bg-blue round esl-animate-slide up simple-grid-cell {{ 'hide-xs' if i >= 12 }}"></li>
     {%- endfor %}
   </ul>
 </section>
 
 <section>
   <h2>Grouped animation with custom delay by mixin</h2>
+  <button class="btn btn-sec-orange"
+          onclick="[...document.querySelectorAll('[esl-animate].re-1')].forEach((el) => ESL.AnimateMixin.get(el).reanimate())">
+    Re-animate
+  </button>
   <ul class="round simple-grid">
-    {% for i in range(0, 36) -%}
-      <li class="bg-orange round esl-animate-slide-left simple-grid-cell {{ 'hide-xs' if i >= 12 }}"
+    {% for i in range(0, 30) -%}
+      <li class="re-1 bg-orange round esl-animate-slide up left simple-grid-cell {{ 'hide-xs' if i >= 12 }}"
           esl-animate="{group: true, groupDelay: 50}"></li>
     {%- endfor %}
   </ul>