oversu/Globinours
oversu/Globinours
Watch
1
0
Fork
You've already forked Globinours
 0
Code Issues 2 Pull requests Projects Releases 13 Packages Wiki Activity

Fiabilise les médias et la navigation mobile

Browse source
This commit is contained in:
Alexandre NOEL 2026-09-08 22:28:01 +02:00
commit 5909f55aba
12 changed files with 266 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

223
public/assets/mobile.css
View file

@ -1,5 +1,218 @@
html{scroll-padding-top:1rem}img{max-width:100%}.table-responsive{overscroll-behavior-inline:contain}.nav-tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.nav-tabs .nav-link{white-space:nowrap}.modal-dialog-scrollable{max-height:calc(100dvh - 1rem)}
@media(max-width:991.98px){.page>.navbar{padding:.5rem}.topbar-surface{height:auto;min-height:72px;padding:.55rem;gap:.5rem}.topbar-surface>.navbar-brand{flex:0 0 auto}.topbar-surface>.navbar-nav{min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;padding-bottom:.2rem}.topbar-surface>.navbar-nav>.btn,.topbar-surface>.navbar-nav>.dropdown{flex:0 0 auto}.page-header{padding-top:.5rem}.page-body{margin-top:.75rem}.settings-section-nav{flex-wrap:nowrap!important;overflow-x:auto;padding-bottom:.35rem}.footer-surface{align-items:flex-start!important}.page-title{font-size:1.15rem}}
@media(max-width:767.98px){body,.page{background-attachment:scroll}.container-xl{padding-left:.75rem;padding-right:.75rem}.topbar-surface .navbar-brand img{width:42px;height:44px}.topbar-surface .navbar-brand span span:last-child{display:none}.topbar-surface>.navbar-nav{gap:.25rem}.topbar-surface>.navbar-nav>.btn{min-width:44px;height:46px;padding:.45rem;white-space:nowrap;margin-right:.25rem!important}.settings-trigger{width:46px;height:46px;margin-right:0!important}.settings-dropdown .dropdown-menu{position:fixed!important;inset:auto .75rem .75rem .75rem!important;width:auto!important;max-height:75dvh;overflow-y:auto;transform:none!important}.settings-menu-columns{grid-template-columns:1fr}.settings-menu-column{padding:.15rem .35rem}.settings-menu-column+.settings-menu-column{border-left:0;border-top:1px solid rgba(98,105,118,.16);margin-top:.65rem;padding-top:.65rem;padding-left:.35rem}.card-header,.card-body,.card-footer{padding-left:.85rem;padding-right:.85rem}.btn{min-height:44px}.btn-sm{min-height:40px}input.form-control,select.form-select,textarea.form-control{font-size:16px}.modal-dialog{margin:.5rem}.modal-content{max-height:calc(100dvh - 1rem)}.modal-body{overflow-y:auto}.footer-meta{gap:.65rem!important}.paw-footer{height:80px;flex-basis:80px}}
@media(max-width:420px){.topbar-surface .navbar-brand span{display:none}.topbar-surface .navbar-brand img{margin-right:0!important}.footer-surface{font-size:.9rem}}
@media(display-mode:standalone){body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.page>.navbar{position:sticky;top:env(safe-area-inset-top);background:#f7f3eb;z-index:1050}}
html {
scroll-padding-top: 1rem;
}
img {
max-width: 100%;
}
.table-responsive {
overscroll-behavior-inline: contain;
}
.nav-tabs {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.nav-tabs .nav-link {
white-space: nowrap;
}
.modal-dialog-scrollable {
max-height: calc(100dvh - 1rem);
}
@media (max-width: 991.98px) {
.page > .navbar {
padding: .5rem;
}
.topbar-surface {
flex-wrap: wrap;
height: auto;
min-height: 72px;
padding: .55rem;
gap: .5rem;
}
.topbar-surface > .navbar-brand {
flex: 0 0 auto;
}
.topbar-menu {
flex-basis: 100%;
width: 100%;
}
.topbar-menu > .navbar-nav {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
gap: .5rem;
padding-top: .5rem;
}
.topbar-menu .btn {
justify-content: flex-start;
width: 100%;
margin-right: 0 !important;
white-space: normal;
}
.topbar-menu .search-trigger-wrap,
.topbar-menu .settings-dropdown {
min-width: 0;
}
.topbar-menu .search-trigger,
.topbar-menu .settings-trigger {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 44px;
margin: 0 !important;
}
.page-header {
padding-top: .5rem;
}
.page-body {
margin-top: .75rem;
}
.settings-section-nav {
flex-wrap: nowrap !important;
overflow-x: auto;
padding-bottom: .35rem;
}
.footer-surface {
align-items: flex-start !important;
}
.page-title {
font-size: 1.15rem;
}
}
@media (max-width: 767.98px) {
body,
.page {
background-attachment: scroll;
}
.container-xl {
padding-left: .75rem;
padding-right: .75rem;
}
.topbar-surface .navbar-brand img {
width: 42px;
height: 44px;
}
.topbar-surface .navbar-brand span span:last-child {
display: none;
}
.settings-dropdown .dropdown-menu {
position: fixed !important;
inset: auto .75rem .75rem .75rem !important;
width: auto !important;
max-height: 75dvh;
overflow-y: auto;
transform: none !important;
}
.settings-menu-columns {
grid-template-columns: 1fr;
}
.settings-menu-column {
padding: .15rem .35rem;
}
.settings-menu-column + .settings-menu-column {
margin-top: .65rem;
padding-top: .65rem;
padding-left: .35rem;
border-top: 1px solid rgba(98, 105, 118, .16);
border-left: 0;
}
.card-header,
.card-body,
.card-footer {
padding-left: .85rem;
padding-right: .85rem;
}
.btn {
min-height: 44px;
}
.btn-sm {
min-height: 40px;
}
input.form-control,
select.form-select,
textarea.form-control {
font-size: 16px;
}
.modal-dialog {
margin: .5rem;
}
.modal-content {
max-height: calc(100dvh - 1rem);
}
.modal-body {
overflow-y: auto;
}
.footer-meta {
gap: .65rem !important;
}
.paw-footer {
height: 80px;
flex-basis: 80px;
}
}
@media (max-width: 420px) {
.topbar-surface .navbar-brand span {
display: none;
}
.topbar-surface .navbar-brand img {
margin-right: 0 !important;
}
.footer-surface {
font-size: .9rem;
}
}
@media (display-mode: standalone) {
body {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
.page > .navbar {
position: sticky;
top: env(safe-area-inset-top);
z-index: 1050;
background: #f7f3eb;
}
}