fmt
Browse files
src/lib/components/Piclets/PicletDetail.svelte
CHANGED
@@ -114,9 +114,14 @@
|
|
114 |
</button>
|
115 |
</div>
|
116 |
|
|
|
|
|
|
|
|
|
|
|
|
|
117 |
<!-- Large Image Section -->
|
118 |
<div class="large-image-section">
|
119 |
-
<div class="piclet-id">#{String(instance.id).padStart(3, '0')}</div>
|
120 |
<div class="large-image-container">
|
121 |
<img
|
122 |
src={instance.imageData || instance.imageUrl}
|
@@ -125,12 +130,6 @@
|
|
125 |
/>
|
126 |
</div>
|
127 |
</div>
|
128 |
-
|
129 |
-
<!-- Card Title -->
|
130 |
-
<div class="card-title-section">
|
131 |
-
<h1 class="card-title">{instance.nickname || instance.typeId}</h1>
|
132 |
-
<div class="tier-badge">{instance.tier.toUpperCase()}</div>
|
133 |
-
</div>
|
134 |
</div>
|
135 |
</div>
|
136 |
|
@@ -324,11 +323,10 @@
|
|
324 |
|
325 |
.logo-background {
|
326 |
position: absolute;
|
327 |
-
|
328 |
-
|
329 |
-
|
330 |
-
|
331 |
-
height: 200px;
|
332 |
background-image: url('/assets/snap_logo.png');
|
333 |
background-size: contain;
|
334 |
background-repeat: no-repeat;
|
@@ -400,20 +398,10 @@
|
|
400 |
display: flex;
|
401 |
flex-direction: column;
|
402 |
align-items: center;
|
403 |
-
margin-bottom: 20px;
|
404 |
position: relative;
|
405 |
z-index: 2;
|
406 |
}
|
407 |
|
408 |
-
.piclet-id {
|
409 |
-
align-self: flex-start;
|
410 |
-
color: white;
|
411 |
-
font-size: 16px;
|
412 |
-
font-weight: 600;
|
413 |
-
margin-bottom: 10px;
|
414 |
-
opacity: 0.9;
|
415 |
-
}
|
416 |
-
|
417 |
.large-image-container {
|
418 |
display: flex;
|
419 |
align-items: center;
|
@@ -433,6 +421,7 @@
|
|
433 |
display: flex;
|
434 |
justify-content: space-between;
|
435 |
align-items: center;
|
|
|
436 |
position: relative;
|
437 |
z-index: 2;
|
438 |
}
|
|
|
114 |
</button>
|
115 |
</div>
|
116 |
|
117 |
+
<!-- Card Title -->
|
118 |
+
<div class="card-title-section">
|
119 |
+
<h1 class="card-title">{instance.nickname || instance.typeId}</h1>
|
120 |
+
<div class="tier-badge">{instance.tier.toUpperCase()}</div>
|
121 |
+
</div>
|
122 |
+
|
123 |
<!-- Large Image Section -->
|
124 |
<div class="large-image-section">
|
|
|
125 |
<div class="large-image-container">
|
126 |
<img
|
127 |
src={instance.imageData || instance.imageUrl}
|
|
|
130 |
/>
|
131 |
</div>
|
132 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
133 |
</div>
|
134 |
</div>
|
135 |
|
|
|
323 |
|
324 |
.logo-background {
|
325 |
position: absolute;
|
326 |
+
bottom: 20px;
|
327 |
+
right: 20px;
|
328 |
+
width: 120px;
|
329 |
+
height: 120px;
|
|
|
330 |
background-image: url('/assets/snap_logo.png');
|
331 |
background-size: contain;
|
332 |
background-repeat: no-repeat;
|
|
|
398 |
display: flex;
|
399 |
flex-direction: column;
|
400 |
align-items: center;
|
|
|
401 |
position: relative;
|
402 |
z-index: 2;
|
403 |
}
|
404 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
405 |
.large-image-container {
|
406 |
display: flex;
|
407 |
align-items: center;
|
|
|
421 |
display: flex;
|
422 |
justify-content: space-between;
|
423 |
align-items: center;
|
424 |
+
margin-bottom: 20px;
|
425 |
position: relative;
|
426 |
z-index: 2;
|
427 |
}
|