Skip to content

Commit f8a9740

Browse files
gantoinegantoine
committed
rejig styles
1 parent 0c18c25 commit f8a9740

File tree

1 file changed

+28
-57
lines changed

1 file changed

+28
-57
lines changed

‎frontend/src/components/Settings/ServerStats/PlatformsStats.vue‎

Lines changed: 28 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -129,12 +129,12 @@ function getCoveragePercent(matched: number, total: number): string {
129129
<v-sheet
130130
v-for="platform in sortedPlatforms"
131131
:key="platform.slug"
132-
class="platform-card mb-3"
132+
class="overflow-hidden mb-3"
133133
rounded
134134
>
135135
<div class="pa-3">
136-
<div class="platform-grid">
137-
<div class="platform-icon">
136+
<div class="platform-layout grid gap-3">
137+
<div class="flex items-start pt-1">
138138
<PlatformIcon
139139
:slug="platform.slug"
140140
:name="platform.name"
@@ -168,7 +168,7 @@ function getCoveragePercent(matched: number, total: number): string {
168168
</span>
169169
</div>
170170
</div>
171-
<div class="text-right flex-shrink-0 ml-4">
171+
<div class="text-right shrink-0 ml-4">
172172
<div class="text-subtitle-2 font-weight-bold text-primary">
173173
{{ formatBytes(Number(platform.fs_size_bytes)) }}
174174
</div>
@@ -184,17 +184,23 @@ function getCoveragePercent(matched: number, total: number): string {
184184
</div>
185185

186186
<!-- Detail table: label | value -->
187-
<div class="detail-table mt-2">
188-
<div class="detail-row">
189-
<span class="detail-label">{{ t("setup.games") }}</span>
187+
<div class="detail-table mt-2 flex flex-col gap-2">
188+
<div class="detail-row grid items-baseline gap-2">
189+
<span
190+
class="detail-label whitespace-nowrap font-semibold uppercase opacity-50"
191+
>
192+
{{ t("setup.games") }}
193+
</span>
190194
<div>
191195
<v-chip size="x-small" label>
192196
{{ platform.rom_count }}
193197
</v-chip>
194198
</div>
195199
</div>
196-
<div class="detail-row">
197-
<span class="detail-label">
200+
<div class="detail-row grid items-baseline gap-2">
201+
<span
202+
class="detail-label whitespace-nowrap font-semibold uppercase opacity-50"
203+
>
198204
{{ t("rom.metadata") }}
199205
</span>
200206
<div
@@ -210,7 +216,7 @@ function getCoveragePercent(matched: number, total: number): string {
210216
]"
211217
:key="item.source"
212218
:title="`${sourceInfo[item.source]?.name ?? item.source}: ${item.matched} / ${platform.rom_count}`"
213-
class="chip-fixed"
219+
class="min-w-13 justify-center"
214220
size="x-small"
215221
label
216222
variant="tonal"
@@ -228,10 +234,12 @@ function getCoveragePercent(matched: number, total: number): string {
228234
}}%
229235
</v-chip>
230236
</div>
231-
<span v-else class="empty-state">—</span>
237+
<span v-else class="text-xs opacity-25">—</span>
232238
</div>
233-
<div class="detail-row">
234-
<span class="detail-label">
239+
<div class="detail-row grid items-baseline gap-2">
240+
<span
241+
class="detail-label whitespace-nowrap font-semibold uppercase opacity-50"
242+
>
235243
{{ t("platform.region") }}
236244
</span>
237245
<div
@@ -242,7 +250,7 @@ function getCoveragePercent(matched: number, total: number): string {
242250
v-for="item in getVisibleRegions(platform.id)"
243251
:key="item.region"
244252
:title="`${item.region}: ${item.count}`"
245-
class="chip-fixed"
253+
class="min-w-13 justify-center"
246254
size="x-small"
247255
label
248256
variant="tonal"
@@ -270,15 +278,15 @@ function getCoveragePercent(matched: number, total: number): string {
270278
}}
271279
</v-chip>
272280
</div>
273-
<span v-else class="empty-state">—</span>
281+
<span v-else class="text-xs opacity-25">—</span>
274282
</div>
275283
</div>
276284
</div>
277285
</div>
278286
</div>
279-
<div class="size-bar-track">
287+
<div class="size-bar-track h-0.75">
280288
<div
281-
class="size-bar-fill"
289+
class="size-bar-fill h-full min-w-0 rounded-r-xs duration-300 ease-in-out"
282290
:style="{
283291
width:
284292
getPlatformPercentage(
@@ -295,67 +303,30 @@ function getCoveragePercent(matched: number, total: number): string {
295303
</template>
296304

297305
<style scoped>
298-
.platform-card {
299-
overflow: hidden;
300-
}
301-
302-
.platform-grid {
303-
display: grid;
306+
.platform-layout {
304307
grid-template-columns: 36px 1fr;
305-
column-gap: 12px;
306-
}
307-
308-
.platform-icon {
309-
display: flex;
310-
align-items: flex-start;
311-
padding-top: 6px;
312308
}
313309
314310
.detail-table {
315-
display: flex;
316-
flex-direction: column;
317-
gap: 6px;
318-
padding-top: 8px;
319311
border-top: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
320312
}
321313
322314
.detail-row {
323-
display: grid;
324315
grid-template-columns: 120px 1fr;
325-
align-items: baseline;
326-
gap: 8px;
327316
}
328317
329318
.detail-label {
330319
font-size: 0.625rem;
331-
font-weight: 600;
332-
text-transform: uppercase;
333-
letter-spacing: 0.04em;
334-
opacity: 0.5;
335320
line-height: 1.8;
336-
white-space: nowrap;
337-
}
338-
339-
.chip-fixed {
340-
min-width: 52px;
341-
justify-content: center;
342-
}
343-
344-
.empty-state {
345-
font-size: 0.75rem;
346-
opacity: 0.25;
321+
letter-spacing: 0.04em;
347322
}
348323
349324
.size-bar-track {
350-
height: 3px;
351325
background: rgba(var(--v-border-color), var(--v-border-opacity));
352326
}
353327
354328
.size-bar-fill {
355-
height: 100%;
356-
min-width: 0;
357329
background: rgb(var(--v-theme-primary));
358-
border-radius: 0 2px 2px 0;
359-
transition: width 0.3s ease;
330+
transition-property: width;
360331
}
361332
</style>

0 commit comments

Comments
 (0)