update modal cards

meshery · Jan 29, 2024 · 22f10ff · 22f10ff
1 parent b4be175
commit 22f10ff
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/_includes/card.html b/_includes/card.html
@@ -8,7 +8,7 @@
         </div>
         <h4 class="pattern-name">{{pattern.name}}</h4>
         <div class="pattern-image-container">
-          <img class= "pattern-image" 
+          <img class= "pattern-image pattern-snapshot" 
           data-snapshot-light="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}-light.png"
           data-snapshot-dark="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}-dark.png"
           src="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}-dark.png" 

diff --git a/_includes/modal.html b/_includes/modal.html
@@ -16,7 +16,11 @@ <h6 class="pattern-type"> {{pattern.type | upcase }}</h6>
         {%if pattern.filters.type == "wasm filter" %}
         <img class="image-class" src="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}.png" onerror="this.src='/assets/images/webassembly_logo.svg'" loading="lazy" onclick="toggleFullScreenImage('{{ pattern.patternId }}')" />
         {%else%}
-        <img class="image-class" src="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}.png" onerror="this.src='/assets/images/patterns/service-mesh.svg'" loading="lazy" onclick="toggleFullScreenImage('{{ pattern.patternId }}')" />
+        <img class="image-class pattern-snapshot"  
+        data-snapshot-light="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}-light.png"
+        data-snapshot-dark="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}-dark.png"
+        src="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}-dark.png"
+        onerror="this.src='/assets/images/patterns/service-mesh.svg'" loading="lazy" onclick="toggleFullScreenImage('{{ pattern.patternId }}')" />
         {%endif%}
         <h4 class="related-patterns">RELATED PATTERNS</h4>
         {% include related-patterns.html %}

diff --git a/_includes/partials/mini-card.html b/_includes/partials/mini-card.html
@@ -7,7 +7,11 @@
             <small class="modal-pattern-type"> {{pttrn.type}}</small>
         </div>
         <h5 class="modal-pattern-name">{{pttrn.name}}</h5>
-        <img class= "modal-pattern-image" src="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pttrn.patternId}}.png" onerror="this.src='/assets/images/patterns/service-mesh.svg'" loading="lazy"/>
+        <img class= "modal-pattern-image pattern-snapshot" 
+        data-snapshot-light="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}-light.png"
+        data-snapshot-dark="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}-dark.png"
+        src="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}-dark.png" 
+        onerror="this.src='/assets/images/patterns/service-mesh.svg'" loading="lazy"/>
         <div>
         <h6 class="modal-pattern-id">
         <img class="modal-smp"