alpinux.cedrica5l/alpinux-static
1
0
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

style: responsive mobile/tablette/PC (2 breakpoints)

Browse source 
Tablette ≤ 768px : nav scrollable horizontalement, date masquée,
  stat boxes 2 par ligne, padding réduit, footer réorganisé.
Mobile ≤ 480px : colonnes taille/hits/origin masquées, stat boxes
  empilées, grille dossiers 2 colonnes, header compact,
  preview-meta en colonne, chips resize plus petits.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Alpinux 2026-05-06 10:59:54 +02:00
parent 9ffb055e92
commit 1280af1af8
1 changed files with 78 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
app/static/app.css
View file

@ -251,15 +251,87 @@ main { max-width: 1100px; margin: 2rem auto; padding: 0 1.5rem 3rem; display: fl
.resize-list--err li { color: #b91c1c; }
.resize-list--err code { background: #fef2f2; border-radius: 3px; padding: .1rem .3rem; }
/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 700px) {
.header-inner { flex-wrap: wrap; }
.header-nav { order: 3; width: 100%; }
/* ── Responsive — tablette (≤ 768 px) ───────────────────────────── */
@media (max-width: 768px) {
/* Header */
.header-inner { flex-wrap: wrap; gap: .6rem; padding: .65rem 1rem; }
.brand { flex: 1; }
.header-user { order: 2; margin-left: 0; }
.header-nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: .15rem;
scrollbar-width: none; }
.header-nav::-webkit-scrollbar { display: none; }
.header-search { order: 4; width: 100%; }
.header-search input { width: 100%; }
.header-user { order: 2; }
/* Layout */
main { padding: 0 1rem 2rem; margin: 1.2rem auto; gap: 1rem; }
.card { padding: 1.2rem 1.4rem; }
/* Tableau : cacher la date */
.col-date { display: none; }
.stat-box .value { font-size: 1.4rem; }
/* Stat boxes : 2 par ligne */
.stat-box { min-width: calc(50% - .5rem); }
.stat-box .value { font-size: 1.5rem; }
/* Aperçu */
.preview-meta { gap: .8rem; font-size: .82rem; }
/* Footer */
.footer-inner { flex-wrap: wrap; gap: .7rem; padding: .9rem 1rem; }
.footer-nav { flex-wrap: wrap; gap: .7rem 1.2rem; }
.footer-version { margin-left: 0; }
}
/* ── Responsive — mobile (≤ 480 px) ─────────────────────────────── */
@media (max-width: 480px) {
/* Header */
.header-inner { gap: .5rem; padding: .6rem .75rem; }
.brand-sub { display: none; }
.header-nav a { padding: .35rem .5rem; font-size: .82rem; }
/* Layout */
main { padding: 0 .75rem 1.5rem; margin: .75rem auto; gap: .75rem; }
.card { padding: .9rem 1rem; border-radius: 8px; }
/* Tableau : ne garder que icône + nom + actions */
.col-size, .col-hits, .col-origin { display: none; }
.file-table th, .file-table td { padding: .4rem .5rem; }
.thumb-sm { width: 32px; height: 32px; }
.type-badge { display: none; }
/* Stat boxes : empilées */
.stat-row { flex-direction: column; }
.stat-box { min-width: 0; }
.stat-box .value { font-size: 1.35rem; }
/* Grille dossiers */
.folder-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.folder-card { padding: .9rem 1rem; }
.folder-card .icon { font-size: 1.4rem; }
/* Aperçu */
.preview-header { gap: .6rem; }
.preview-header h1 { font-size: .95rem; }
.preview-meta { flex-direction: column; align-items: flex-start; gap: .4rem; }
.preview-meta .btn { margin-left: 0 !important; width: 100%; justify-content: center; }
.preview-image-wrap { padding: .75rem; }
/* Resize */
.chip span { padding: .25rem .55rem; font-size: .8rem; }
.resize-custom-row { gap: .35rem; }
.custom-dim { width: 4.5rem; }
/* Corbeille */
.trash-header { flex-direction: column; align-items: flex-start; }
/* Recherche */
.search-row { flex-direction: column; }
.content-match { max-width: 100%; }
/* Footer */
.footer-inner { flex-direction: column; align-items: flex-start; gap: .6rem; padding: .8rem .75rem; }
.footer-nav { gap: .5rem .9rem; }
}
/* ── Footer ─────────────────────────────────────────────────────────── */