chore(site): add custom image ratio styles to uip editor

exadel-inc · Jan 29, 2024 · bfa4589 · bfa4589
1 parent 4c74720
commit bfa4589
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 9 deletions.
diff --git a/site/src/image/image.less b/site/src/image/image.less
diff --git a/site/views/examples/image.njk b/site/views/examples/image.njk
@@ -34,6 +34,16 @@ aside:
       <script type="text/html" uip-snippet label="Fit mode">
         <div class="d-flex">
           <div class="col-sm-6">
+            <style>
+              .img-container.img-container-2-1 {
+                padding-top: 50%;
+              }
+
+              .img-container.img-container-2-3 {
+                padding-top: 100%;
+                width: 66.66%;
+              }
+            </style>
             <div class="img-container m-auto img-container-16-9">
               <esl-image class="simple-image"
                          mode="fit" lazy
@@ -68,6 +78,16 @@ aside:
       <script type="text/html" uip-snippet label="Cover mode">
         <div class="d-flex">
           <div class="col-sm-6">
+            <style>
+              .img-container.img-container-2-1 {
+                padding-top: 50%;
+              }
+
+              .img-container.img-container-2-3 {
+                padding-top: 100%;
+                width: 66.66%;
+              }
+            </style>
             <div class="img-container m-auto img-container-4-3">
               <esl-image class="cover-mode-image bg-v-center bg-h-center"
                          mode="cover" lazy
@@ -87,6 +107,16 @@ aside:
       <script type="text/html" uip-snippet label="SVG Inline loading">
         <div class="d-flex">
           <div class="col-sm-6">
+            <style>
+              .img-container.img-container-2-1 {
+                padding-top: 50%;
+              }
+
+              .img-container.img-container-2-3 {
+                padding-top: 100%;
+                width: 66.66%;
+              }
+            </style>
             <div class="img-container m-auto img-container-2-3">
               <esl-image lazy
                          mode="inner-svg"
@@ -105,7 +135,17 @@ aside:
       <script type="text/html" uip-snippet label="ESL Query Rules">
         <div class="d-flex">
           <div class="col-sm-6">
-            <div class="img-container img-container-16-9">
+            <style>
+              .img-container.img-container-2-1 {
+                padding-top: 50%;
+              }
+
+              .img-container.img-container-2-3 {
+                padding-top: 100%;
+                width: 66.66%;
+              }
+            </style>
+            <div class="img-container m-auto img-container-16-9">
               <esl-image lazy
                          mode="cover"
                          onload="console.log('SImage Load Track', event)"