feat(UI):Fixing issue with snapshot image being streched

Signed-off-by: Ankita Sahu <[email protected]>
meshery · Aug 26, 2024 · 087f914 · 087f914
1 parent 0ed0750
commit 087f914
Show file tree

Hide file tree

Showing 2 changed files with 170 additions and 57 deletions.
diff --git a/_includes/extensions/modal.html b/_includes/extensions/modal.html
@@ -5,61 +5,63 @@
     align-items: center;
     justify-content: flex-start;
   }
-  .modal-image > img {
+
+  .modal-image>img {
     width: 100%;
     object-fit: contain;
   }
 </style>
 <div id="open-modal" class="modal-window">
   <!-- <div class="click-container"> -->
-    <div class="modal-content">
-      <div class="modal-image">
-        <button class="modal-close close">&times;</button>
-        <img class="image-class"  
-        data-snapshot-light="{{extension.image}}"
-        data-snapshot-dark="{{extension.image}}"
-        src="{{extension.image}}"
-        onerror="this.src='/assets/images/meshery-color.svg'" loading="lazy" onclick="toggleFullScreenImage('{{ extension.extensionId }}')" />
-      </div>
-      <div class="vertical-line"></div>
-      <div class="modal-info">
-        <h2 class="modal-h2">
-          {{extension.name | upcase }}
-          <!--<a href="https://docs.meshery.io/extensions/{{extension.slug}}" target="_blank">{{extension.name | upcase }}
+  <div class="modal-content">
+    <div class="modal-image">
+      <button class="modal-close close">&times;</button>
+      <img class="image-class" style="height: 100%;" data-snapshot-light="{{extension.image}}"
+        data-snapshot-dark="{{extension.image}}" src="{{extension.image}}"
+        onerror="this.src='/assets/images/meshery-color.svg'" loading="lazy"
+        onclick="toggleFullScreenImage('{{ extension.extensionId }}')" />
+    </div>
+    <div class="vertical-line"></div>
+    <div class="modal-info">
+      <h2 class="modal-h2">
+        {{extension.name | upcase }}
+        <!--<a href="https://docs.meshery.io/extensions/{{extension.slug}}" target="_blank">{{extension.name | upcase }}
              <img class="internal-link" src="{{site.baseurl}}/assets/images/buttons/external-link_black.svg"/> 
           </a>-->
-        </h2> 
-        <h3 class="modal-h3">Description</h3>
-        <p class="content-toggle contentdata pre-white-space">{{extension.extensionInfo | url_decode | replace: '\\n', '<br/>' | replace: '\n', '<br/>' }}</p>
-        <!-- <span class="read-more" href="read-more.html">{% include expand.html %}</span> -->
+      </h2>
+      <h3 class="modal-h3">Description</h3>
+      <p class="content-toggle contentdata pre-white-space">{{extension.extensionInfo | url_decode | replace: '\\n',
+        '<br />' | replace: '\n', '<br />' }}</p>
+      <!-- <span class="read-more" href="read-more.html">{% include expand.html %}</span> -->
 
-        <h3 class="modal-h3">Features</h3>
-        <p class="content-toggle contentdata pre-white-space">{{extension.extensionCaveats | url_decode | replace: '\\n', '<br/>' | replace: '\n', '<br/>' }}</p>
-        <!-- <span class="read-more" href="read-more.html">{% include expand.html %}</span> -->
-        <div id="copy-url">
-          <div class="btn-class">
-            <div class="vertical-center" id="{{type.name}}">
-              <div class="btn-grp">
-                {% if {{extension.docsURL}} %}
-                <a href="{{extension.docsURL}}">
-                  <button class="import-secondary" style="width: 7rem;">Learn More</button></a>
-                {% endif %}
-                <div class="btn-tooltip-grp">
+      <h3 class="modal-h3">Features</h3>
+      <p class="content-toggle contentdata pre-white-space">{{extension.extensionCaveats | url_decode | replace: '\\n',
+        '<br />' | replace: '\n', '<br />' }}</p>
+      <!-- <span class="read-more" href="read-more.html">{% include expand.html %}</span> -->
+      <div id="copy-url">
+        <div class="btn-class">
+          <div class="vertical-center" id="{{type.name}}">
+            <div class="btn-grp">
+              {% if {{extension.docsURL}} %}
+              <a href="{{extension.docsURL}}">
+                <button class="import-secondary" style="width: 7rem;">Learn More</button></a>
+              {% endif %}
+              <div class="btn-tooltip-grp">
                 {% if {{extension.URL}} %}
-                  <a href="{{extension.URL}}">
-                    <button class="import" style="width: 7rem;">Visit</button></a>
+                <a href="{{extension.URL}}">
+                  <button class="import" style="width: 7rem;">Visit</button></a>
                 {% endif %}
-                </div>
               </div>
             </div>
           </div>
         </div>
-
       </div>
+
     </div>
-
- <script src="{{ site.baseurl }}/assets/js/catalog-modal.js"></script>
- <script src="{{ site.baseurl }}/assets/js/thumbnail-clickable.js"></script>
-
+  </div>
+
+  <script src="{{ site.baseurl }}/assets/js/catalog-modal.js"></script>
+  <script src="{{ site.baseurl }}/assets/js/thumbnail-clickable.js"></script>
+
   <!-- </div> -->
 </div>