Simon/romm
1
0
Fork 0
mirror of https://github.com/rommapp/romm.git synced 2026-06-28 14:56:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(v2): right-align list-view cover in its column

Browse Source 
Cover hugs the title side of its fixed-width column (and the skeleton
matches), so the empty space sits on the left and the cover reads as
attached to its title.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Georges-Antoine Assi
2026-06-21 21:43:59 -04:00
parent 41ec6f4de6
commit e7d383b285
2 changed files with 15 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/v2/components/Gallery/GameListRow.vue
View File

@@ -579,11 +579,13 @@ onBeforeUnmount(() => {
justify-content: flex-end;
}
/* Cover sits in its own fixed-width column (left-aligned, vertically
centred) so the title/meta column starts at the same x on every row. */
/* Cover sits in its own fixed-width column (right-aligned, vertically
centred) so the title/meta column starts at the same x on every row and
the cover hugs the title side. */
.game-list-row__cover {
display: flex;
align-items: center;
justify-content: flex-end;
}
.game-list-row__title {

12
frontend/src/v2/components/Gallery/GameListSkeletonRow.vue
View File

@@ -43,7 +43,10 @@ const gridStyle = computed(() => ({
<div class="r-glr-skel" :style="gridStyle">
<template v-for="col in columns" :key="String(col.key)">
<div v-if="col.key === 'select'" class="r-glr-skel__cell" />
<div v-else-if="col.key === 'cover'" class="r-glr-skel__cell">
<div
v-else-if="col.key === 'cover'"
class="r-glr-skel__cell r-glr-skel__cover"
>
<RSkeletonBlock
:width="LIST_COVER_WIDTH_PX"
:height="LIST_COVER_HEIGHT_PX"
@@ -109,6 +112,13 @@ const gridStyle = computed(() => ({
justify-content: flex-end;
}
/* Right-align the cover block to match the real row. */
.r-glr-skel__cover {
display: flex;
align-items: center;
justify-content: flex-end;
}
.r-glr-skel__title {
display: flex;
align-items: center;