canastack-admin
/
sw-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update frontend

This commit is contained in:
Your Name 2025-12-20 23:22:34 -05:00
parent 04dc5f695c
commit acee536d8b
1 changed files with 17 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/styles/map.css
View File

@ -76,6 +76,7 @@
left:50%; left:50%;
transform:translateX(-50%); transform:translateX(-50%);
max-width: min(980px, calc(100vw - 24px)); max-width: min(980px, calc(100vw - 24px));
width:100%;
} }
/* Left / right: filtres */ /* Left / right: filtres */
@ -242,6 +243,7 @@
box-shadow: 0 5px 12px rgba(0,0,0,.70), 0 0 14px rgba(56,189,248,.22); box-shadow: 0 5px 12px rgba(0,0,0,.70), 0 0 14px rgba(56,189,248,.22);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
min-height: 38px; min-height: 38px;
width:100%;
} }
.sw-searchbar:focus-within{ .sw-searchbar:focus-within{
@ -261,8 +263,9 @@
color: #e5e7eb; color: #e5e7eb;
font-size: 0.80rem; font-size: 0.80rem;
font-weight: 800; font-weight: 800;
width: min(52vw, 360px); width: 100%;
min-width: 160px; max-width: 100%;
min-width: 0;
} }
.sw-search-input::placeholder{ .sw-search-input::placeholder{
@ -305,14 +308,6 @@ body[data-theme="light"] .sw-search-clear{
border-color: rgba(148,163,184,.55); border-color: rgba(148,163,184,.55);
} }
/* Tight phones: keep it clean */
@media (max-width: 420px){
.sw-search-input{
width: min(72vw, 320px);
min-width: 120px;
}
}
/* ===== TOP ROW: search + 2 icônes ===== */ /* ===== TOP ROW: search + 2 icônes ===== */
.sw-top-row{ .sw-top-row{
@ -320,18 +315,23 @@ body[data-theme="light"] .sw-search-clear{
align-items:center; align-items:center;
justify-content:space-between; justify-content:space-between;
gap:0.75rem; gap:0.75rem;
width:100%;
} }
/* search = prend la place à gauche */ /* search = 50% à gauche */
.sw-top-search{ .sw-top-search{
flex:1 1 auto; flex:0 0 50%;
max-width:50%;
} }
/* bloc des 2 boutons à droite */ /* bloc des 2 boutons = 50% à droite */
.map-top-actions{ .map-top-actions{
flex:0 0 50%;
max-width:50%;
display:flex; display:flex;
flex-direction:row; flex-direction:row;
align-items:center; align-items:center;
justify-content:flex-end;
gap:0.5rem; gap:0.5rem;
} }
@ -369,49 +369,12 @@ body[data-theme="light"] .sw-search-clear{
letter-spacing:0.04em; letter-spacing:0.04em;
} }
.map-top-actions .map-action-btn i{ /* petits écrans : on laisse 50/50 mais on compresse un peu les boutons */
display:block; @media (max-width:480px){
font-size:1.05rem; .sw-top-row{
margin-bottom:0.15rem;
}
.map-top-actions .map-action-btn span{
font-size:0.65rem;
font-weight:600;
letter-spacing:0.03em;
}
/* TOP layout: 75% search / 25% boutons */
.map-overlay-top .sw-top-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:0.75rem;
}
.map-overlay-top .sw-searchbar{
flex:0 0 75%;
max-width:75%;
}
.map-overlay-top .map-top-actions{
flex:0 0 25%;
max-width:25%;
display:flex;
justify-content:flex-end;
gap:0.5rem; gap:0.5rem;
} }
.map-action-btn{
/* petits écrans */
@media (max-width:480px){
.map-overlay-top .sw-top-row{
gap:0.4rem;
}
.map-top-actions .map-action-btn{
padding:0.3rem 0.45rem; padding:0.3rem 0.45rem;
} }
.map-overlay-top .sw-searchbar{
flex:1 1 auto;
max-width:100%;
}
} }