Andreas/mtg_python_deckbuilder
1
0
Fork 0
mirror of https://github.com/mwisnowski/mtg_python_deckbuilder.git synced 2025-12-16 23:50:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(ui): add debounce helper and skeleton polish

Browse source
This commit is contained in:
matt 2025-10-07 11:35:43 -07:00
parent bf40be41fb
commit b7bfc4ca09
9 changed files with 449 additions and 719 deletions
Download patch file Download diff file Expand all files Collapse all files

23
code/web/static/styles.css
View file

@ -246,6 +246,23 @@ small, .muted{ color: var(--muted); }
display: none;
}
[data-skeleton].is-loading::after{ display:block; }
[data-skeleton].is-loading::before{
content: attr(data-skeleton-label);
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
color: var(--muted);
font-size:.85rem;
text-align:center;
line-height:1.4;
max-width:min(92%, 360px);
padding:.3rem .5rem;
pointer-events:none;
z-index:1;
filter: drop-shadow(0 2px 4px rgba(15,23,42,.45));
}
[data-skeleton][data-skeleton-label=""]::before{ content:''; }
@keyframes shimmer{ 0%{ background-position: 200% 0; } 100%{ background-position: -200% 0; } }
/* Banner */
@ -268,6 +285,9 @@ small, .muted{ color: var(--muted); }
justify-content: start; /* pack as many as possible per row */
/* Prevent scroll chaining bounce that can cause flicker near bottom */
overscroll-behavior: contain;
content-visibility: auto;
contain: layout paint;
contain-intrinsic-size: 640px 420px;
}
@media (max-width: 420px){
.card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@ -293,6 +313,9 @@ small, .muted{ color: var(--muted); }
.card-tile .name{ font-weight:600; margin-top:.25rem; font-size:.92rem; }
.card-tile .reason{ color:var(--muted); font-size:.85rem; margin-top:.15rem; }
.group-grid{ content-visibility: auto; contain: layout paint; contain-intrinsic-size: 540px 360px; }
.alt-list{ list-style:none; padding:0; margin:0; display:grid; gap:.25rem; content-visibility: auto; contain: layout paint; contain-intrinsic-size: 320px 220px; }
/* Shared ownership badge for card tiles and stacked images */
.owned-badge{
position:absolute;