adds more logic to modal adds hover state to use case circle, fixes responsiveness

assets/js/modal.js

@@ -1,4 +1,15 @@
 $(document).ready(() => {
+  const logos = {
+    infrastructure: [
+      "XRP-Ledger.png",
+      "towoLabs.png",
+      "xrpscan.png",
+      "xrp-toolkit.png",
+      "bithomp.png",
+      "onthedex.png",
+    ],
+    // "developer_tooling": ['logo3.png'],
+  };
   // Add two new constiables for arrow buttons
   const leftArrow = document.getElementById("leftArrow");
   const rightArrow = document.getElementById("rightArrow");
@@ -51,11 +62,27 @@ $(document).ready(() => {
   function updateModalContent({ id, title, number, src, description, index }) {
     const arrowContainer = document.getElementById("arrows-container");
     modalImage.src = src;
-    modalImage.id = id
+    modalImage.id = id;
     modalImage.alt = title + " logo";
     modalTextDescription.textContent = description;
     modalTextTitle.textContent = title;
-    modalLogos.textContent = "Group of logos for " + title + " here...";
+    modalLogos.innerHTML = "";
+    const logoArray = logos[id] || [];
+    // Set grid layout based on the number of logos
+    if (logoArray.length >= 3) {
+      modalLogos.style.display = "grid";
+      modalLogos.style.gridTemplateColumns = "repeat(2, 1fr)";
+    } else {
+      modalLogos.style.display = "flex";
+      modalLogos.style.justifyContent = "center";
+    }
+    logoArray.forEach((logoSrc) => {
+      const logoElem = document.createElement('img');
+      logoElem.src = `assets/img/uses/infrastructure/${logoSrc}`;
+      logoElem.alt = `${title} logo`;
+      logoElem.classList.add('logo-item');
+      modalLogos.appendChild(logoElem);
+    });
     if (id === "infrastructure") {
       arrowContainer.style.justifyContent = "end";
     } else {
@@ -76,7 +103,6 @@ $(document).ready(() => {
       modalImage.alt = title + " logo";
       modalTextDescription.textContent = description;
       modalTextTitle.textContent = title;
-      modalLogos.textContent = "Group of logos for " + title + " here...";
 
       // Set the data index on the modal
       modal.setAttribute("data-index", index);
@@ -91,7 +117,7 @@ $(document).ready(() => {
 
       modal.style.display = "block";
 
-      if (id === 'infrastructure') {
+      if (id === "infrastructure") {
         arrowContainer.style.justifyContent = "end";
       } else {
         arrowContainer.style.justifyContent = "space-between";

styles/_use-cases.scss

@@ -174,10 +174,13 @@
   border-top: 1px solid #ccc;
 }
 
-.section-logos {
-  font-size: 16px;
+.logo-item {
+  width: 50px;
+  height: 50px;
+  margin: 10px;
 }
 
+
 .close {
   color: #aaaaaa;
   float: right;
@@ -197,20 +200,28 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 185px;
-  height: 185px;
+  width: calc(20vw - 20px); /* Adjust as needed */
+  height: calc(47vw - 20px); /* Adjust as needed */
+  min-width: 100px; /* Minimum size */
+  min-height: 100px; /* Minimum size */
   border: 1px solid #343437;
   border-radius: 50%;
   margin-bottom: 30px;
   cursor: pointer;
   @include media-breakpoint-up(md) {
     width: 230px;
-    height: 230px;
+    height: 266px;
   }
   @include media-breakpoint-up(lg) {
     margin-bottom: 0;
+    height: 230px;
+
   }
 }
+.use-case-circle:hover{
+  border-color: #ee5555;
+
+}
 
 .circle-content {
   display: flex;

styles/package.json

@@ -4,9 +4,9 @@
     "node-sass": "^7.0.0"
   },
   "scripts": {
-    "build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2022-v18.css --output-style compressed",
-    "build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2022-v18.css --output-style compressed --source-map true",
-    "build-css-watch-out": "node-sass --recursive --watch  --include-path scss xrpl.scss ../out/assets/css/devportal2022-v18.css --output-style compressed --source-map true"
+    "build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2022-v24.css --output-style compressed",
+    "build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2022-v24.css --output-style compressed --source-map true",
+    "build-css-watch-out": "node-sass --recursive --watch  --include-path scss xrpl.scss ../out/assets/css/devportal2022-v24.css --output-style compressed --source-map true"
   },
   "dependencies": {
     "sass": "^1.26.10"

template/base.html.jinja

@@ -52,7 +52,7 @@
     {% if target.lang=="ja" %}
     <link href="{{currentpage.prefix}}assets/css/fonts-ja.css" rel="stylesheet" />
     {% endif %}
-    <link href="{{currentpage.prefix}}assets/css/devportal2022-v18.css" rel="stylesheet" />
+    <link href="{{currentpage.prefix}}assets/css/devportal2022-v24.css" rel="stylesheet" />
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
 

template/page-uses.html.jinja

@@ -477,7 +477,7 @@
       <hr class="section-separator">
     </div>
     <div class="content-section">
-      <p class="section-logos">Group of logos here...</p>
+      <div class="section-logos">Group of logos here...</div>
     </div>
   </div>
 </div>