improve piclets view
Browse files
src/lib/components/Pages/Pictuary.svelte
CHANGED
@@ -226,14 +226,9 @@
|
|
226 |
<!-- Discovered Section -->
|
227 |
{#if discoveredPiclets.length > 0}
|
228 |
<section class="discovered-section">
|
229 |
-
<
|
230 |
-
|
231 |
-
{#
|
232 |
-
<button class="view-all-btn">View All</button>
|
233 |
-
{/if}
|
234 |
-
</div>
|
235 |
-
<div class="horizontal-scroll">
|
236 |
-
{#each discoveredPiclets.slice(0, 10) as piclet}
|
237 |
<PicletCard
|
238 |
piclet={piclet}
|
239 |
size={100}
|
@@ -397,6 +392,12 @@
|
|
397 |
border-radius: 2px;
|
398 |
}
|
399 |
|
|
|
|
|
|
|
|
|
|
|
|
|
400 |
@keyframes spin {
|
401 |
to { transform: rotate(360deg); }
|
402 |
}
|
|
|
226 |
<!-- Discovered Section -->
|
227 |
{#if discoveredPiclets.length > 0}
|
228 |
<section class="discovered-section">
|
229 |
+
<h2>Discovered ({discoveredPiclets.length})</h2>
|
230 |
+
<div class="discovered-grid">
|
231 |
+
{#each discoveredPiclets as piclet}
|
|
|
|
|
|
|
|
|
|
|
232 |
<PicletCard
|
233 |
piclet={piclet}
|
234 |
size={100}
|
|
|
392 |
border-radius: 2px;
|
393 |
}
|
394 |
|
395 |
+
.discovered-grid {
|
396 |
+
display: grid;
|
397 |
+
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
398 |
+
gap: 12px;
|
399 |
+
}
|
400 |
+
|
401 |
@keyframes spin {
|
402 |
to { transform: rotate(360deg); }
|
403 |
}
|