Add additional info to store item page

timothyschoen · timothyschoen · commit 34809a8b8d21 · 2024-12-03T17:01:35.000+01:00
diff --git a/store-item.html b/store-item.html
@@ -141,6 +141,46 @@
             .dropdown-item:hover {
                 background-color: #f5f5f5;
             }
+
+            .store-item-details {
+                margin-top: 20px;
+            }
+
+            .info-tile {
+                margin-top: 20px;
+                margin-bottom: 20px;
+                padding: 15px;
+                background-color: #fff;
+                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+                border-radius: 0.75rem;
+                border: 1px solid #e5e7eb;
+                display: flex;
+                justify-content: space-around;
+                align-items: center;
+            }
+
+            .info-item {
+                display: flex;
+                align-items: center;
+                gap: 10px; /* Adds spacing between the icon and the text content */
+            }
+
+            .info-item div {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                gap: 4px; /* Adds spacing between label and value */
+            }
+
+            .info-item strong {
+                font-weight: bold;
+                font-size: 14px;
+            }
+
+            .info-item span {
+                font-size: 12px;
+                color: #555; /* Adjust to your desired color */
+            }
         </style>
     </head>
     <body>
@@ -253,8 +293,8 @@
         <div class="container">
             <div class="header">
                 <div>
-                    <h1 id="item-title">Item Title</h1>
-                    <p class="author" id="item-author">by Author Name</p>
+                    <h1 id="item-title"></h1>
+                    <p class="author" id="item-author"></p>
                 </div>
                 <div class="download-button">
                     <div class="download-main" id="download-main">
@@ -297,9 +337,10 @@ <h1 id="item-title">Item Title</h1>
                 </div>
             </div>
             <div class="description" id="item-description">
-                <p>
-                    Item description goes here. It will be replaced dynamically.
-                </p>
+                <p></p>
+            </div>
+            <div class="store-item-details">
+                <div class="info-tile" id="infoTile"></div>
             </div>
             <div class="screenshot-container">
                 <img
@@ -343,6 +384,50 @@ <h2>More patches</h2>
                             "thumbnails/webp/" + item.StoreThumb + ".webp";
                         document.getElementById("item-thumb").alt = item.Title;
 
+                        const infoTile = document.getElementById("infoTile");
+
+                        // Build content dynamically based on available data
+                        let tileContent = "";
+                        if (item["Release date"]) {
+                            tileContent += `
+                                <div class="info-item">
+                                    <svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M15.25 13.5h-4a.75.75 0 0 1-.75-.75v-6a.75.75 0 0 1 1.5 0V12h3.25a.75.75 0 0 1 0 1.5ZM12 2C6.478 2 2 6.478 2 12s4.478 10 10 10 10-4.478 10-10S17.522 2 12 2Z" fill="#212121"/>
+                                    </svg>
+                                    <div>
+                                        <strong>Release Date</strong>
+                                        <span>${item["Release date"]}</span>
+                                    </div>
+                                </div>`;
+                        }
+                        if (item.Size) {
+                            tileContent += `
+                                <div class="info-item">
+                                    <svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M5 7h14a3 3 0 0 1 2.995 2.824L22 10v4a3 3 0 0 1-2.824 2.995L19 17H5a3 3 0 0 1-2.995-2.824L2 14v-4a3 3 0 0 1 2.824-2.995L5 7h14H5Zm13 3a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-4 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z" fill="#212121"/>
+                                    </svg>
+                                    <div>
+                                        <strong>Size</strong>
+                                        <span>${item.Size}</span>
+                                    </div>
+                                </div>`;
+                        }
+                        if (item.Price) {
+                            tileContent += `
+                                <div class="info-item">
+                                    <svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M2 6.75C2 5.784 2.784 5 3.75 5h13.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 17.25 17H3.75A1.75 1.75 0 0 1 2 15.25v-8.5Zm3-.5v1a.75.75 0 0 1-.75.75h-1v1.5h1A2.25 2.25 0 0 0 6.5 7.25v-1H5Zm5.5 7.25a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5Zm-7.25.5h1a.75.75 0 0 1 .75.75v1h1.5v-1a2.25 2.25 0 0 0-2.25-2.25h-1V14Zm12.75.75a.75.75 0 0 1 .75-.75h1v-1.5h-1a2.25 2.25 0 0 0-2.25 2.25v1H16v-1Zm0-7.5v-1h-1.5v1a2.25 2.25 0 0 0 2.25 2.25h1V8h-1a.75.75 0 0 1-.75-.75Z" fill="#212121"/>
+                                        <path d="M4.401 18.5A2.999 2.999 0 0 0 7 20h10.25A4.75 4.75 0 0 0 22 15.25V10c0-1.11-.603-2.08-1.5-2.599v7.849a3.25 3.25 0 0 1-3.25 3.25H4.401Z" fill="#212121"/>
+                                    </svg>
+                                    <div>
+                                        <strong>Price</strong>
+                                        <span>${item.Price}</span>
+                                    </div>
+                                </div>`;
+                        }
+
+                        infoTile.innerHTML = tileContent;
+
                         let downloadButton =
                             document.getElementById("download-main");
                         const toggleButton =
