Skip to content

Commit 531c18b

Browse files
timothyschoentimothyschoen
committed
Add missing thumbnails
1 parent ef3437d commit 531c18b

17 files changed

+99
-21
lines changed

‎store-item.html‎

Lines changed: 99 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -66,39 +66,75 @@
6666
}
6767

6868
.header .download-button {
69-
display: flex;
70-
align-items: center;
71-
gap: 8px;
72-
background-color: #2196f3; /* Blue background */
69+
display: inline-flex;
70+
position: relative;
71+
background-color: #2196f3;
7372
color: white;
7473
border: none;
75-
bottom: 3px;
76-
right: 3px;
7774
border-radius: 8px;
78-
padding: 10px 14px;
79-
padding-right: 22px;
80-
font-size: 15px;
81-
font-weight: bold;
8275
cursor: pointer;
76+
overflow: visible;
77+
font-weight: bold;
78+
position: relative;
79+
}
80+
81+
.header .download-main {
82+
display: flex;
83+
align-items: center;
84+
gap: 8px;
85+
border-radius: 8px 0px 0px 8px;
86+
padding: 10px 14px;
87+
flex-grow: 1;
8388
transition:
8489
background-color 0.3s ease,
8590
transform 0.2s ease;
8691
}
87-
.header .download-button:hover {
92+
93+
.header .download-main:hover {
8894
background-color: #1976d2; /* Darker blue on hover */
8995
}
9096

91-
.header .download-button:active {
97+
.header .download-main:active {
9298
transform: scale(0.95); /* Slight scale-down effect */
9399
}
94100

95-
.header .download-button svg {
96-
width: 20px;
97-
height: 20px;
101+
.header .dropdown-toggle {
102+
display: flex;
103+
align-items: center;
104+
justify-content: center;
105+
width: 40px;
106+
background-color: #1e88e5;
107+
border-radius: 0px 8px 8px 0px;
108+
transition: background-color 0.3s ease;
109+
position: relative;
110+
}
111+
112+
.header .dropdown-toggle:hover {
113+
background-color: #1565c0; /* Darker shade of blue */
114+
}
115+
116+
.dropdown-menu {
117+
display: none; /* Initially hidden */
118+
position: absolute; /* Position relative to .download-button */
119+
background-color: white;
120+
top: 120%;
121+
border: 1px solid #ccc;
122+
border-radius: 4px;
123+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
124+
z-index: 10;
125+
min-width: 230px;
126+
padding: 4px 0;
127+
}
128+
129+
.dropdown-item {
130+
display: block;
131+
padding: 8px 12px;
132+
color: #333;
133+
text-decoration: none;
98134
}
99135

100-
.header .download-button span {
101-
line-height: 24px;
136+
.dropdown-item:hover {
137+
background-color: #f5f5f5;
102138
}
103139
</style>
104140
</head>
@@ -202,9 +238,32 @@
202238
<h1 id="item-title">Item Title</h1>
203239
<p class="author" id="item-author">by Author Name</p>
204240
</div>
205-
<a href="#" class="download-button" id="item-download"
206-
>Download</a
207-
>
241+
<div class="download-button">
242+
<div class="download-main" id="download-main">
243+
<svg
244+
width="24"
245+
height="24"
246+
fill="none"
247+
viewBox="0 0 24 24"
248+
xmlns="http://www.w3.org/2000/svg"
249+
>
250+
<path
251+
d="M5.25 20.5h13.498a.75.75 0 0 1 .101 1.493l-.101.007H5.25a.75.75 0 0 1-.102-1.494l.102-.006h13.498H5.25Zm6.633-18.498L12 1.995a1 1 0 0 1 .993.883l.007.117v12.59l3.294-3.293a1 1 0 0 1 1.32-.083l.094.084a1 1 0 0 1 .083 1.32l-.083.094-4.997 4.996a1 1 0 0 1-1.32.084l-.094-.083-5.004-4.997a1 1 0 0 1 1.32-1.498l.094.083L11 15.58V2.995a1 1 0 0 1 .883-.993L12 1.995l-.117.007Z"
252+
fill="#ffffff"
253+
/>
254+
</svg>
255+
<span>Download</span>
256+
</div>
257+
<div class="dropdown-toggle" id="dropdown-toggle">▼</div>
258+
<div class="dropdown-menu" id="dropdown-menu">
259+
<a href="#" class="dropdown-item" id="download-plugdata"
260+
>Download as .plugdata</a
261+
>
262+
<a href="#" class="dropdown-item" id="download-zip"
263+
>Download as .zip</a
264+
>
265+
</div>
266+
</div>
208267
</div>
209268
<div class="description" id="item-description">
210269
<p>
@@ -254,13 +313,18 @@ <h2>More patches</h2>
254313
document.getElementById("item-thumb").alt = item.Title;
255314

256315
let downloadButton =
257-
document.getElementById("item-download");
316+
document.getElementById("download-main");
317+
const toggleButton =
318+
document.getElementById("dropdown-toggle");
258319
if (item.Price === "Free") {
259320
downloadButton.innerHTML = `
260321
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.25 20.5h13.498a.75.75 0 0 1 .101 1.493l-.101.007H5.25a.75.75 0 0 1-.102-1.494l.102-.006h13.498H5.25Zm6.633-18.498L12 1.995a1 1 0 0 1 .993.883l.007.117v12.59l3.294-3.293a1 1 0 0 1 1.32-.083l.094.084a1 1 0 0 1 .083 1.32l-.083.094-4.997 4.996a1 1 0 0 1-1.32.084l-.094-.083-5.004-4.997a1 1 0 0 1 1.32-1.498l.094.083L11 15.58V2.995a1 1 0 0 1 .883-.993L12 1.995l-.117.007Z" fill="#ffffff"/></svg>
261322
<span>Download</span>
262323
`;
263324
} else {
325+
toggleButton.style.visibility = "hidden";
326+
toggleButton.style.display = "none";
327+
downloadButton.style.borderRadius = "8px";
264328
downloadButton.innerHTML = `
265329
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10.495 14.501v7.498H7.498v-7.498h2.996Zm6.76-1.5h-3.502a.75.75 0 0 0-.75.75v3.502c0 .414.336.75.75.75h3.502a.75.75 0 0 0 .75-.75v-3.502a.75.75 0 0 0-.75-.75Zm-.751 1.5v2.002h-2.001v-2.002h2ZM8.166 7.002H3.5v1.165c0 1.18.878 2.157 2.016 2.311l.157.016.16.005c1.234 0 2.245-.959 2.327-2.173l.005-.16V7.003Zm6.165 0H9.666v1.165c0 1.18.878 2.157 2.016 2.311l.157.016.16.005c1.234 0 2.245-.959 2.327-2.173l.005-.16V7.003Zm6.167 0h-4.665v1.165c0 1.18.878 2.157 2.017 2.311l.156.016.16.005c1.235 0 2.245-.959 2.327-2.173l.006-.16-.001-1.164ZM9.06 3.5H6.326L4.469 5.502h3.977L9.06 3.5Zm4.307 0H10.63l-.616 2.002h3.97L13.369 3.5Zm4.305 0h-2.734l.614 2.002h3.977L17.673 3.5ZM2.2 5.742l3.25-3.502a.75.75 0 0 1 .446-.233L6 2h12a.75.75 0 0 1 .474.169l.076.07 3.272 3.53.03.038c.102.136.148.29.148.44L22 8.168c0 .994-.379 1.9-1 2.58V21.25a.75.75 0 0 1-.649.743L20.25 22l-8.254-.001v-8.248a.75.75 0 0 0-.75-.75H6.75a.75.75 0 0 0-.75.75v8.248L3.75 22a.75.75 0 0 1-.743-.648l-.007-.102V10.748a3.818 3.818 0 0 1-.995-2.384l-.005-.197V6.29a.728.728 0 0 1 .096-.408l.05-.076.054-.065Z" fill="#ffffff"/></svg>
266330
<span>Go to store</span>
@@ -355,6 +419,20 @@ <h2>More patches</h2>
355419
.catch((error) =>
356420
console.error("Error loading item data:", error),
357421
);
422+
423+
const toggleButton = document.getElementById("dropdown-toggle");
424+
const dropdownMenu = document.getElementById("dropdown-menu");
425+
426+
toggleButton.addEventListener("click", (event) => {
427+
event.stopPropagation(); // Prevent event from bubbling up
428+
dropdownMenu.style.display =
429+
dropdownMenu.style.display === "block"
430+
? "none"
431+
: "block";
432+
});
433+
document.addEventListener("click", () => {
434+
dropdownMenu.style.display = "none";
435+
});
358436
});
359437
</script>
360438
</body>

‎thumbnails/.DS_Store‎

2 KB
Binary file not shown.

‎thumbnails/png/.DS_Store‎

8 KB
Binary file not shown.

‎thumbnails/png/Disperse-X.png‎

220 KB
Loading

‎thumbnails/png/HOLO-106-Lite.png‎

98.3 KB
Loading

‎thumbnails/png/HOLO-106.png‎

144 KB
Loading

‎thumbnails/png/T4-PE-Lite.png‎

116 KB
Loading

‎thumbnails/png/T4-PE.png‎

193 KB
Loading

‎thumbnails/png/pureclip.png‎

-261 KB
Loading

‎thumbnails/webp/.DS_Store‎

2 KB
Binary file not shown.

0 commit comments

Comments
 (0)