chore: release v4.8.6

Author: Amr Wagdy

examples/common/demo.js

@@ -23,6 +23,8 @@ const bgCopyButton = getElementById("bg-copy-button");
 const leftColumnImage = getElementById("left-column-image");
 const leftColumnImageSize = getElementById("left-column-image-size");
 
+const heroSectionImage = getElementById("hero-section-image");
+const heroSectionImageSize = getElementById("hero-section-image-size");
 const carImage = getElementById("car-image");
 const originalCarImageSize = getElementById("original-car-image-size");
 const cropCarImageSize = getElementById("crop-car-image-size");
@@ -109,6 +111,7 @@ function updateImageAndBoxSize() {
   setWindowBoxes();
 
   devicePixelRatio.innerText = window.devicePixelRatio.toFixed(1);
+  heroSectionImageSize.innerHTML = heroSectionImage.offsetWidth;
   originalCarImageSize.innerHTML = carImage.offsetWidth;
   cropCarImageSize.innerHTML = carImage.offsetWidth;
   autoCropCarImageSize.innerHTML = carImage.offsetWidth;

examples/low-preview/src/index.html

@@ -90,7 +90,7 @@ <h2 class="content-text">
           </a>
         </div>
         <div class="sea-coast container">
-          <img ci-params="ci_info=2" ci-src="Main+image.jpg?vh=a1983b" alt="sea-coast" />
+          <img ci-params="ci_info=1" ci-src="Main+image.jpg?vh=a1983b" alt="sea-coast" />
           <div class="green-blur-circle hide-in-mobile"></div>
           <div class="blue-blur-circle hide-in-mobile"></div>
         </div>
@@ -194,17 +194,11 @@ <h2>Demo gallery</h2>
               id="left-column-image"
               ci-params="ci_info=2"
             />
-            <p class="square-img-text">
-              Container-square: <strong><span id="left-column-image-size"></span> px</strong>
-            </p>
-            <p class="original-size-text">
-              Original size: <strong>180 kB</strong>
-              <a
-                target="_blank"
-                href="https://scaleflex.cloudimg.io/v7/demo/cloudimage-responsive-demo/josh-withers-xMTXJbHxOZk-unsplash.jpg?ci_info=2">
-                Link
-              </a>
-            </p>
+            <div class="image-size-wrapper">
+              <div class="text">
+                <span><span id="left-column-image-size"></span> px</span>
+              </div>
+            </div>
           </div>
           <div class="right-column">
             <div class="square-with-circle-img">
@@ -215,18 +209,11 @@ <h2>Demo gallery</h2>
                   id="right-column-first-image"
                   ci-params="ci_info=2"
                 />
-                <p class="square-img-text">
-                  Container-square: <strong><span id="right-column-first-image-size"></span> px</strong>
-                </p>
-                <p class="original-size-text">
-                  Original size: <strong>57.5 kB</strong>
-                  <a
-                  target="_blank"
-                  href="https://scaleflex.cloudimg.io/v7/demo/cloudimage-responsive-demo/miroslav-skopek-7Wd3_WwpPb0-unsplash.jpg?ci_info=2"
-                  >
-                    Link
-                  </a>
-                </p>
+                <div class="image-size-wrapper">
+                  <p class="text">
+                    <span><span id="right-column-first-image-size"></span> px</span>
+                  </p>
+                </div>
               </div>
               <div class="circle-image-wrapper">
                 <img
@@ -238,18 +225,11 @@ <h2>Demo gallery</h2>
                   style="border-radius: 50%;"
                 />
                 <div class="circle-image-text-wrapper">
-                  <p class="square-img-text">
-                    Container-circle: <strong><span id="right-column-second-image-size"></span> px</strong>
-                  </p>
-                  <p class="original-size-text">
-                    Original size: <strong>39.7 kB</strong>
-                    <a
-                    target="_blank"
-                    href="https://scaleflex.cloudimg.io/v7/demo/cloudimage-responsive-demo/ibrahima-toure-qVrgGyQqZgg-unsplash.jpg?ci_info=2"
-                    >
-                      Link
-                    </a>
-                  </p>
+                  <div class="image-size-wrapper">
+                    <p class="text">
+                      <span><span id="right-column-second-image-size"></span> px</span>
+                    </p>
+                  </div>
                 </div>
               </div>
             </div>
@@ -260,18 +240,11 @@ <h2>Demo gallery</h2>
                 alt="img"
                 ci-params="ci_info=2"
               />
-              <p class="square-img-text">
-                Container-square: <strong><span id="first-horizontal-image-size"></span> px</strong>
-              </p>
-              <p class="original-size-text">
-                Original size: <strong>106 kB</strong>
-                <a
-                target="_blank"
-                href="https://scaleflex.cloudimg.io/v7/demo/cloudimage-responsive-demo/alexandra-lawrence-N-zxiG46luY-unsplash.jpg?ci_info=2"
-                >
-                  Link
-                </a>
-              </p>
+              <div class="image-size-wrapper">
+                <p class="text">
+                  <span><span id="first-horizontal-image-size"></span> px</span>
+                </p>
+              </div>
             </div>
           </div>
         </div>
@@ -282,18 +255,11 @@ <h2>Demo gallery</h2>
             id="second-horizontal-image"
             ci-params="ci_info=2"
           />
-          <p class="square-img-text">
-            Container-square: <strong><span id="second-horizontal-image-size"></span> px</strong>
-          </p>
-          <p class="original-size-text">
-            Original size: <strong>3 MB</strong>
-            <a
-              target="_blank"
-              href="https://scaleflex.cloudimg.io/v7/demo/cloudimage-responsive-demo/alexandra-lawrence-N-zxiG46luY-unsplash.jpg?ci_info=2"
-            >
-              Link
-            </a>
-          </p>
+          <div class="image-size-wrapper">
+            <p class="text">
+              <span><span id="second-horizontal-image-size"></span> px</span>
+            </p>
+          </div>
         </div>
       </div>
     </section>
@@ -665,12 +631,15 @@ <h2>Any questions?</h2>
       </div>
     </section>
     <div id="device-pixel-ratio" class="device-pixel-ratio">
-      <div class="label">Your device pixel ratio:</div>
-      <span>---</span>
-      <hr>
-      <div class="label">Your device width:</div>
-      <div class="window-width-box">
-        <span>---</span>
+      <div class="label">Your device pixel ratio:
+        <div class="window-width-box">
+          <span>---</span>
+        </div>
+      </div>
+      <div class="label">Your device width:
+        <div class="window-width-box">
+          <span>---</span>
+        </div>
       </div>
     </div>
     <section class="footer">

examples/low-preview/src/styles/main.css

@@ -342,42 +342,6 @@ body {
   min-width: calc(100% - (471px + 32px));
 }
 
-.demo-gallery .image-wrapper p {
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: 400;
-  color: #4d5c74;
-  width: 100%;
-}
-
-.demo-gallery .image-wrapper a {
-  color: #3daba4;
-  font-size: 16px;
-  line-height: 20px;
-  padding-left: 12px;
-  font-weight: 600;
-}
-
-.demo-gallery .original-size-text a {
-  color: #3daba4;
-  font-size: 16px;
-  line-height: 20px;
-  padding-left: 12px;
-  font-weight: 600;
-}
-
-.demo-gallery .image-wrapper .square-img-text {
-  margin-top: 9px;
-}
-
-.demo-gallery .image-wrapper .circle-image-text-wrapper {
-  text-align: center;
-}
-
-.demo-gallery .image-wrapper .original-size-text {
-  margin-top: 4px;
-}
-
 .demo-gallery .image-wrapper .square-with-circle-img {
   display: flex;
   column-gap: 22.48px;
@@ -397,17 +361,6 @@ body {
   display: none;
 }
 
-.demo-gallery .mobile-screen-horizontal-image p {
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: 400;
-  color: #4d5c74;
-}
-
-.demo-gallery .mobile-screen-horizontal-image .square-img-text {
-  margin-top: 9px;
-}
-
 .crop-images-section {
   display: flex;
   flex-direction: column;
@@ -965,6 +918,61 @@ body {
   margin: 0 auto;
 }
 
+.device-pixel-ratio {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 839px;
+  right: 18px;
+  width: 314px;
+  height: 112px;
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.8);
+  box-shadow: 0px 2px 41px 10px rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+  row-gap: 8px;
+}
+
+.device-pixel-ratio .label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 16px;
+  line-height: 24px;
+  color: #4D5C74;
+  font-weight: 400;
+}
+
+.device-pixel-ratio .label span {
+  font-size: 16px;
+  line-height: 24px;
+  color: #203254;
+  font-weight: 600;
+}
+
+.device-pixel-ratio .window-width-box:nth-child(1) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 6.4px 27.12px 6.4px 28px;
+  background-color:  #F2F7FA;
+  border-radius: 4px;
+  width: 90px;
+  height: 32px;
+}
+
+.device-pixel-ratio .window-width-box:nth-child(2) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 7.2px 12px 6.4px 13px;
+  background-color:  #F2F7FA;
+  border-radius: 4px;
+  width: 90px;
+  height: 32px;
+  margin-top: 8px
+}
+
 .footer .accordion-wrapper {
   display: flex;
   flex-direction: column;
@@ -1146,6 +1154,39 @@ body {
   color: #4d5c74;
 }
 
+.image-size-wrapper {
+  display: flex;
+  justify-content: center;
+  margin-top: 15px;
+}
+
+.image-size-wrapper::before {
+  content: "";
+  height: 14px;
+  border: 1px solid #BEC6D2;
+  border-top: none;
+  border-right: none;
+  width: 50%;
+}
+
+.image-size-wrapper::after {
+  content: "";
+  height: 14px;
+  border: 1px solid #BEC6D2;
+  border-top: none;
+  border-left: none;
+  width: 50%;
+}
+
+.text {
+  white-space: nowrap;
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 600;
+  color: #4d5c74;
+  margin: 0 12px;
+}
+
 @media(max-width: 1229px){
   .content-wrapper .features-wrapper .features {
     margin-top: 54px;
@@ -1317,16 +1358,6 @@ body {
     align-items: flex-start;
   }
 
-  .demo-gallery .image-wrapper .square-img-text {
-    text-align: left;
-    white-space: nowrap;
-  }
-
-  .demo-gallery .image-wrapper .original-size-text {
-    text-align: left;
-    white-space: nowrap;
-  }
-
   .demo-gallery .image-wrapper a {
     padding-left: 0;
   }