shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add persistent gallery zoom and proportional card layout
All checks were successful
Deploy Sokko G / deploy (push) Successful in 18s
Details

Browse source
This commit is contained in:
Shinuwa 2026-09-28 09:02:10 +02:00
parent 386212041f
commit 273bc5d528
11 changed files with 158 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

7
website/src/styles/_responsive.scss
View file

@ -265,13 +265,8 @@
}
.image-viewer-gallery {
grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
gap: var(--space-3);
}
.image-viewer-gallery-frame {
min-height: 180px;
height: min(42vh, 260px);
padding: var(--space-3);
}
.module-column {

41
website/src/styles/overlays/_image-viewer.scss
View file

@ -70,6 +70,17 @@
gap: var(--space-2);
}
.image-viewer-gallery-zoom {
display: inline-flex;
gap: 4px;
}
.image-viewer-gallery-zoom-button > span {
font-size: 20px;
font-weight: 800;
line-height: 1;
}
.image-viewer-button {
flex: 0 0 40px;
}
@ -196,25 +207,39 @@
}
.image-viewer.is-gallery {
min-width: 0;
overflow: hidden;
height: min(860px, calc(100vh - 48px));
grid-template-rows: auto minmax(0, 1fr);
}
.image-viewer-gallery {
display: grid;
--image-gallery-thumbnail-width: 260px;
display: flex;
width: 100%;
max-width: 100%;
min-height: 0;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
min-width: 0;
flex-wrap: wrap;
align-content: start;
gap: var(--space-4);
justify-content: center;
gap: 12px;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
padding: 2px 6px 2px 2px;
padding: 20px 28px 28px;
}
.image-viewer-gallery-item {
display: grid;
width: min(100%, var(--image-gallery-thumbnail-width));
max-width: 100%;
min-width: 0;
gap: 10px;
aspect-ratio: 4 / 3;
flex: 0 1 var(--image-gallery-thumbnail-width);
grid-template-rows: minmax(0, 1fr) auto;
align-self: flex-start;
gap: 8px;
padding: 10px;
color: var(--color-text);
text-align: left;
@ -228,8 +253,9 @@
.image-viewer-gallery-frame {
display: grid;
min-height: 200px;
height: clamp(200px, 24vh, 280px);
width: 100%;
height: 100%;
min-height: 0;
place-items: center;
overflow: hidden;
border-radius: var(--radius-md);
@ -245,6 +271,7 @@
.image-viewer-gallery-caption {
display: grid;
width: 100%;
min-width: 0;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;