From 0ed0750623f31c38efe5d5cfa138e9ef12aac80c Mon Sep 17 00:00:00 2001
From: Ankita Sahu <71656941+SAHU-01@users.noreply.github.com>
Date: Mon, 19 Aug 2024 17:15:06 +0530
Subject: [PATCH 1/2] feat(UI): Meshery extension catalog modal image height
 fix

Signed-off-by: Ankita Sahu <71656941+SAHU-01@users.noreply.github.com>
---
 _sass/catalog.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/_sass/catalog.scss b/_sass/catalog.scss
index a3cbf19447..237e301215 100644
--- a/_sass/catalog.scss
+++ b/_sass/catalog.scss
@@ -412,6 +412,7 @@ input[type="checkbox"] {
   max-width: 80%;
   margin: 36px 0;
   cursor: pointer;
+  height:100%;
 }
 
 ::-webkit-scrollbar {

From 087f914592cb3758c778cac62e794c90b64582b3 Mon Sep 17 00:00:00 2001
From: Ankita Sahu <71656941+SAHU-01@users.noreply.github.com>
Date: Mon, 26 Aug 2024 14:51:53 +0530
Subject: [PATCH 2/2] feat(UI):Fixing issue with snapshot image being streched

Signed-off-by: Ankita Sahu <71656941+SAHU-01@users.noreply.github.com>
---
 _includes/extensions/modal.html |  80 ++++++++---------
 _sass/catalog.scss              | 147 ++++++++++++++++++++++++++++----
 2 files changed, 170 insertions(+), 57 deletions(-)

diff --git a/_includes/extensions/modal.html b/_includes/extensions/modal.html
index 1457a422c9..0f9fbe28b9 100644
--- 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>
\ No newline at end of file
diff --git a/_sass/catalog.scss b/_sass/catalog.scss
index 237e301215..453eaf1662 100644
--- a/_sass/catalog.scss
+++ b/_sass/catalog.scss
@@ -3,15 +3,18 @@
   margin: 2.5rem 0 1rem 0;
   word-spacing: 5px;
 }
+
 .catalog-subtext {
   text-align: center;
   color: var(--color-secondary-dark);
   font-size: 18px;
   font-weight: 400;
 }
+
 .tabcontent h3 {
   color: var(--color-secondary-dark);
 }
+
 /* CARD-STYLES */
 .card {
   position: relative;
@@ -71,6 +74,7 @@
   //   // background: rgba(182, 215, 168, 0.4);
   // }
 }
+
 .pattern-image-overlay {
   opacity: 0.2;
   width: 60%;
@@ -82,6 +86,7 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
 .card-overlay {
   position: relative;
   width: 220px;
@@ -93,6 +98,7 @@
   box-shadow: 2px 2px 6px 0px #00d3a9;
   margin-bottom: 20px;
 }
+
 .overlay-text {
   position: absolute;
   top: 40%;
@@ -103,6 +109,7 @@
   z-index: 2;
   white-space: wrap;
 }
+
 .pattern-id-overlay {
   position: absolute;
   bottom: 0.5rem;
@@ -111,6 +118,7 @@
   margin-right: 14px;
   opacity: 0.7;
 }
+
 .catalog {
   padding-top: 5rem;
   padding-bottom: 2rem;
@@ -137,20 +145,24 @@ p {
   -webkit-font-smoothing: antialiased;
   font-size: 1.1rem;
 }
+
 .inner-span {
   font-size: 16px;
   position: relative;
   color: black;
 }
+
 .column {
   display: none;
 }
+
 .column:has(.card) {
   // float: left;
   // padding: 0 10px;
   display: block;
   // margin: 0 1rem;
 }
+
 .smp-overlay {
   width: 16px;
   bottom: 0;
@@ -159,6 +171,7 @@ p {
   vertical-align: middle;
   padding-right: 1px;
 }
+
 .smp {
   width: 16px;
   bottom: 0;
@@ -175,6 +188,7 @@ p {
   padding: 10px;
   cursor: pointer;
 }
+
 .import-disabled {
   background-color: #aaa;
   color: white;
@@ -182,14 +196,16 @@ p {
   border: none;
   padding: 10px;
 }
+
 .import-secondary {
   background-color: inherit;
-  border:1px solid #00b39f;
+  border: 1px solid #00b39f;
   color: white;
   border-radius: 4px;
   cursor: pointer;
   padding: 10px;
 }
+
 .btn-tooltip-grp {
   display: flex;
   flex-direction: row;
@@ -200,6 +216,7 @@ p {
   // -ms-transform: translateY(-60%);
   // transform: translateY(25%) translateX(0%);
 }
+
 /* Clear floats after the columns */
 
 .disabled-label {
@@ -223,6 +240,7 @@ p {
   padding-right: 12px;
   color: var(--color-primary-light-tbase);
 }
+
 .chip {
   display: inline-flex;
   flex-direction: row-reverse;
@@ -292,16 +310,19 @@ p {
   color: var(--color-secondary-light);
   // margin: 0 3px 3px 0;
 }
+
 .pattern-image-container {
   display: flex;
   justify-content: center;
 }
+
 .pattern-image {
   width: 60%;
   margin-top: 24px;
   object-fit: contain;
   position: absolute;
 }
+
 .patterns-coming-soon {
   max-width: 70%;
   position: relative;
@@ -323,19 +344,23 @@ p {
 .external-link {
   display: inline-block;
   width: 1rem;
+
   img {
     margin-bottom: 3px;
+
     &:hover {
       opacity: 0.7;
     }
   }
 }
+
 .internal-link {
   height: 1.25rem;
   margin-left: 0.5rem;
   margin-bottom: 4px;
   vertical-align: middle;
   filter: var(--image-filter-light);
+
   &:hover {
     opacity: 0.7;
   }
@@ -350,11 +375,14 @@ p {
   border-radius: 15px;
   // margin-top: 5rem;
   // backgroud:var(--background-grey);
-  height: fit-content; /* height needs to be increased with regarding to the total no. of patterns */
+  height: fit-content;
+
+  /* height needs to be increased with regarding to the total no. of patterns */
   .load-more {
     display: none;
   }
 }
+
 label {
   display: block;
   padding-left: 15px;
@@ -371,6 +399,7 @@ input {
   top: -1px;
   display: inline;
 }
+
 input[type="checkbox"] {
   margin: 0;
 }
@@ -388,11 +417,13 @@ input[type="checkbox"] {
   pointer-events: none;
   transition: all 0.3s;
 }
+
 .modal-section {
   display: flex;
   flex-direction: column;
   gap: 0.625rem;
 }
+
 .modal-image {
   display: flex;
   flex-direction: column;
@@ -402,6 +433,7 @@ input[type="checkbox"] {
   padding: 2rem;
   min-height: fit-content;
   background: (var(--color-primary-light-dark));
+
   img {
     max-width: 80%;
     // margin-top: 25px;
@@ -412,7 +444,6 @@ input[type="checkbox"] {
   max-width: 80%;
   margin: 36px 0;
   cursor: pointer;
-  height:100%;
 }
 
 ::-webkit-scrollbar {
@@ -422,6 +453,7 @@ input[type="checkbox"] {
 .modal-content {
   display: flex;
   flex-direction: row;
+
   code {
     padding: 1rem;
     border-radius: 0.5rem;
@@ -433,15 +465,18 @@ input[type="checkbox"] {
     display: block;
     // & p ul {
     text-align: left;
+
     // }
     a {
       color: white;
     }
   }
+
   p {
     color: var(--color-secondary-dark);
   }
 }
+
 .modal-h2 {
   color: var(--color-secondary-dark);
   font-size: 1.5rem;
@@ -469,7 +504,7 @@ input[type="checkbox"] {
   gap: 1rem;
 }
 
-.modal-window > div {
+.modal-window>div {
   position: absolute;
   display: flex;
   flex-direction: row;
@@ -481,23 +516,24 @@ input[type="checkbox"] {
   left: 50%;
   transform: translate(-50%, -50%);
   border-radius: 15px;
-  background: linear-gradient(
-    45deg,
-    var(--color-primary-dark),
-    var(--color-primary-light)
-  );
+  background: linear-gradient(45deg,
+      var(--color-primary-dark),
+      var(--color-primary-light));
   // padding: 1.5rem 2.5rem 1.5rem 3rem;
 
   .modal-info {
     overflow-y: auto;
   }
 }
-.modal-window > div::-webkit-scrollbar {
+
+.modal-window>div::-webkit-scrollbar {
   display: none;
 }
+
 .modal-info::-webkit-scrollbar {
   display: none;
 }
+
 .catalog-info {
   text-align: center;
 }
@@ -516,6 +552,7 @@ input[type="checkbox"] {
   height: 50px;
   width: 50px;
 }
+
 .modal-close {
   display: flex;
   justify-content: space-between;
@@ -525,11 +562,13 @@ input[type="checkbox"] {
   display: flex;
   text-align: center;
   text-decoration: none;
+
   img {
     width: 1rem;
     vertical-align: middle;
   }
 }
+
 .modal-pattern-name {
   color: var(--color-secondary-dark);
   text-align: center;
@@ -540,6 +579,7 @@ input[type="checkbox"] {
   text-overflow: ellipsis;
   overflow: hidden;
 }
+
 .modal-chip {
   display: inline-flex;
   flex-direction: row-reverse;
@@ -562,6 +602,7 @@ input[type="checkbox"] {
   top: 0px;
   right: 0px;
 }
+
 .modal-card {
   overflow: hidden;
   position: relative;
@@ -574,6 +615,7 @@ input[type="checkbox"] {
   transition: 0.4s ease-out;
   box-shadow: 2px 2px 6px 0px #00d3a9;
 }
+
 .modal-smp {
   width: 20px;
   bottom: 0;
@@ -581,12 +623,14 @@ input[type="checkbox"] {
   vertical-align: middle;
   padding-right: 2px;
 }
+
 .modal-pattern-image {
   width: 60%;
   object-fit: contain;
   position: absolute;
   margin-top: 16px;
 }
+
 .modal-pattern-id {
   color: var(--color-secondary-dark);
   position: absolute;
@@ -600,9 +644,11 @@ input[type="checkbox"] {
   padding: 20px 40px 40px;
   max-width: 600px;
 }
+
 .modal-text {
   display: inline;
 }
+
 .image-container {
   flex-basis: 70%;
 }
@@ -635,6 +681,7 @@ input[type="checkbox"] {
   padding: 0px;
   cursor: pointer;
 }
+
 .close:hover {
   color: #00d3a9 !important;
   opacity: 0.8 !important;
@@ -645,12 +692,14 @@ open-modal-btn {
   display: block;
   margin: 0 auto;
 }
+
 .btn-grp {
   margin-top: 1rem;
   display: flex;
   gap: 1.5rem;
   font-size: 1rem;
 }
+
 .tooltip-modal:hover {
   text-decoration: none;
 }
@@ -658,6 +707,7 @@ open-modal-btn {
 .catalog-details li span {
   font-size: 0.25rem;
 }
+
 .catalog-item-detail {
   color: var(--color-secondary-dark);
 }
@@ -678,6 +728,7 @@ open-modal-btn {
   padding-right: 2px;
   padding-bottom: 3px;
 }
+
 label {
   white-space: nowrap;
   color: var(--color-secondary-dark);
@@ -696,6 +747,7 @@ label {
   vertical-align: middle;
   padding-right: 2px;
 }
+
 // .modal-pattern-id {.
 //   position: absolute;
 //   bottom: 0;
@@ -711,9 +763,11 @@ label {
   padding: 20px 40px 40px;
   max-width: 600px;
 }
+
 .modal-text {
   display: inline;
 }
+
 .image-container {
   flex-basis: 70%;
 }
@@ -733,6 +787,7 @@ label {
   margin-left: 5%;
   border-radius: 15px;
 }
+
 .modal-card-overlay {
   position: relative;
   width: 150px;
@@ -744,6 +799,7 @@ label {
   box-shadow: $catalog_box_shadow_color;
   margin-bottom: 20px;
 }
+
 .modal-smp-overlay {
   width: 20px;
   bottom: 0;
@@ -752,6 +808,7 @@ label {
   vertical-align: middle;
   padding-right: 2px;
 }
+
 .modal-pattern-id-overlay {
   position: absolute;
   bottom: 0.5rem;
@@ -762,6 +819,7 @@ label {
   color: white;
   opacity: 0.7;
 }
+
 .modal-overlay-text {
   position: absolute;
   top: 40%;
@@ -784,12 +842,15 @@ label {
     margin-top: 3rem;
   }
 }
+
 .catalog-load-more {
   display: none;
 }
+
 .dropbtn {
   display: none;
 }
+
 .contentdata {
   margin: 0;
   padding: 0;
@@ -810,16 +871,22 @@ label {
 }
 
 .visible-content {
-  display: inline; /* Initially show the visible content */
+  display: inline;
+  /* Initially show the visible content */
 }
 
 .hidden-content {
-  display: none; /* Initially hide the hidden content */
-  max-height: none; /* Remove the max-height limit to allow it to expand */
-  opacity: 1; /* Set opacity to fully visible */
-  overflow: visible; /* Allow the content to be fully visible */
+  display: none;
+  /* Initially hide the hidden content */
+  max-height: none;
+  /* Remove the max-height limit to allow it to expand */
+  opacity: 1;
+  /* Set opacity to fully visible */
+  overflow: visible;
+  /* Allow the content to be fully visible */
   transition: max-height 0.5s, opacity 0.5s;
 }
+
 .hide-by-default {
   display: none;
 }
@@ -830,35 +897,41 @@ label {
     height: 100%;
     align-items: center;
   }
+
   .btn-tooltip-grp {
     justify-content: center;
   }
 }
 
 @media screen and (max-width: 1150px) {
+
   // .modal-info {
   //   overflow-y: auto;
   // }
-  .modal-window > div {
+  .modal-window>div {
     height: 80%;
     overflow-y: initial;
     flex-direction: column;
     left: 50%;
     padding: 0 28px;
     text-align: center;
+
     .modal-info {
       padding-top: 0;
       overflow-y: initial;
     }
   }
+
   .modal-content {
     display: flex;
     flex-direction: column;
     align-items: center;
+
     code {
       margin: auto auto;
     }
   }
+
   .modal-smp {
     width: 20px;
     bottom: 0;
@@ -866,6 +939,7 @@ label {
     vertical-align: middle;
     padding-right: 2px;
   }
+
   // .modal-pattern-id {
   //   position: absolute;
   //   bottom: 0;
@@ -878,9 +952,11 @@ label {
     padding: 20px 40px 40px;
     max-width: 600px;
   }
+
   .modal-text {
     display: inline;
   }
+
   .image-container {
     flex-basis: 70%;
   }
@@ -894,6 +970,7 @@ label {
     margin-left: 5%;
     border-radius: 15px;
   }
+
   .modal-card-overlay {
     position: relative;
     width: 150px;
@@ -905,6 +982,7 @@ label {
     box-shadow: 2px 2px 6px 0px #00d3a9;
     margin-bottom: 20px;
   }
+
   .modal-smp-overlay {
     width: 20px;
     bottom: 0;
@@ -914,6 +992,7 @@ label {
     padding-right: 2px;
     padding-bottom: 3px;
   }
+
   .modal-pattern-id-overlay {
     position: absolute;
     bottom: 0;
@@ -923,6 +1002,7 @@ label {
     color: white;
     opacity: 0.7;
   }
+
   .modal-overlay-text {
     position: absolute;
     top: 40%;
@@ -934,6 +1014,7 @@ label {
     z-index: 2;
     white-space: nowrap;
   }
+
   .close {
     display: flex;
     justify-content: space-between;
@@ -946,6 +1027,7 @@ label {
     padding: 0px;
     cursor: pointer;
   }
+
   .catalog-info {
     text-align: center;
   }
@@ -960,6 +1042,7 @@ label {
 
   .tooltip-modal {
     position: relative;
+
     & .tooltiptext-modal {
       position: absolute;
       top: 50%;
@@ -968,9 +1051,11 @@ label {
       transition: all 0.5s;
     }
   }
+
   .related-patterns-img {
     display: none;
   }
+
   .hide-by-default {
     display: flex;
   }
@@ -979,6 +1064,7 @@ label {
     width: 100%;
     // padding: 4px 32px;
   }
+
   .modal-image {
     padding-bottom: 0;
     padding-top: 2.5rem;
@@ -994,6 +1080,7 @@ label {
       max-width: 30%;
     }
   }
+
   .modal-info {
     text-align: left;
   }
@@ -1004,11 +1091,13 @@ label {
     margin-top: 0;
   }
 }
+
 .viewall {
   display: flex;
   padding: 5px;
   margin: 5px;
 }
+
 .viewallbtn {
   cursor: pointer;
   border: none;
@@ -1026,32 +1115,39 @@ label {
     width: 100%;
     height: 100%;
   }
-  .modal-window > div {
+
+  .modal-window>div {
     overflow-y: initial;
+
     .modal-info {
       padding-top: 0;
       overflow-y: initial;
     }
   }
 }
+
 @media screen and (min-width: 770px) {
   .viewallbtn {
     position: relative;
   }
 }
+
 @media screen and (max-width: 770px) {
   .catalog-load-more {
     display: unset;
   }
+
   .dropbtn {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 0.5rem;
   }
+
   .viewall {
     justify-content: center;
   }
+
   .catalog {
     .row {
       display: flex;
@@ -1068,6 +1164,7 @@ label {
     .column-lg:has(.card) {
       display: block;
     }
+
     .mobile_column_sm {
       display: unset;
     }
@@ -1081,26 +1178,33 @@ label {
     gap: 1rem;
     padding-bottom: 3rem;
     margin-bottom: 1.5rem;
+
     .dropdown {
       align-self: center;
       margin-bottom: 7rem;
     }
+
     .category-div {
       padding-left: 15px;
     }
+
     .category-div,
     .compatibility-div,
     .tech-div {
       display: grid;
+
       label {
         margin: 0;
       }
+
       column-gap: 2rem;
+
       .open-service-mesh {
         grid-row: 4/5;
         grid-column: 1/3;
       }
     }
+
     .category-para,
     .category-div,
     .compatibility-div,
@@ -1109,13 +1213,16 @@ label {
     .tech-para {
       display: none;
     }
+
     .load-more {
       display: block;
       align-self: center;
     }
   }
 }
+
 @media screen and (max-width: 770px) and (min-width: 450px) {
+
   .category-div,
   .compatibility-div,
   .tech-div {
@@ -1123,7 +1230,9 @@ label {
     grid-template-columns: 1fr 1fr;
   }
 }
+
 @media screen and (max-width: 450px) {
+
   .category-div,
   .compatibility-div,
   .tech-div {
@@ -1141,12 +1250,14 @@ label {
       max-width: 40%;
     }
   }
+
   .modal-h1,
   .related-patterns {
     display: none;
   }
+
   .btn-grp {
     // flex-direction: column;
     align-items: center;
   }
-}
+}
\ No newline at end of file