Make modals fullscreen on mobile
This commit is contained in:
Gautier P
parent
b0d4c281e9
commit
dac4a419a9
2 changed files with 140 additions and 7 deletions
133
css/style.css
133
css/style.css
|
|
@ -788,3 +788,136 @@ table.dataTable.display tbody tr:hover.selected {
|
||||||
.leaflet-control-layers-selector[disabled] ~ span {
|
.leaflet-control-layers-selector[disabled] ~ span {
|
||||||
color: #777;
|
color: #777;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* make modals fullscreen on small devices (code from bootstrap 5) */
|
||||||
|
.modal-fullscreen {
|
||||||
|
width: 100vw;
|
||||||
|
max-width: none;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.modal-fullscreen .modal-content {
|
||||||
|
height: 100%;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.modal-fullscreen .modal-header {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.modal-fullscreen .modal-body {
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.modal-fullscreen .modal-footer {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 575.98px) {
|
||||||
|
.modal-fullscreen-sm-down {
|
||||||
|
width: 100vw;
|
||||||
|
max-width: none;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.modal-fullscreen-sm-down .modal-content {
|
||||||
|
height: 100%;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.modal-fullscreen-sm-down .modal-header {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.modal-fullscreen-sm-down .modal-body {
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.modal-fullscreen-sm-down .modal-footer {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 767.98px) {
|
||||||
|
.modal-fullscreen-md-down {
|
||||||
|
width: 100vw;
|
||||||
|
max-width: none;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.modal-fullscreen-md-down .modal-content {
|
||||||
|
height: 100%;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.modal-fullscreen-md-down .modal-header {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.modal-fullscreen-md-down .modal-body {
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.modal-fullscreen-md-down .modal-footer {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 991.98px) {
|
||||||
|
.modal-fullscreen-lg-down {
|
||||||
|
width: 100vw;
|
||||||
|
max-width: none;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.modal-fullscreen-lg-down .modal-content {
|
||||||
|
height: 100%;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.modal-fullscreen-lg-down .modal-header {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.modal-fullscreen-lg-down .modal-body {
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.modal-fullscreen-lg-down .modal-footer {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 1199.98px) {
|
||||||
|
.modal-fullscreen-xl-down {
|
||||||
|
width: 100vw;
|
||||||
|
max-width: none;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.modal-fullscreen-xl-down .modal-content {
|
||||||
|
height: 100%;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.modal-fullscreen-xl-down .modal-header {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.modal-fullscreen-xl-down .modal-body {
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.modal-fullscreen-xl-down .modal-footer {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 1399.98px) {
|
||||||
|
.modal-fullscreen-xxl-down {
|
||||||
|
width: 100vw;
|
||||||
|
max-width: none;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.modal-fullscreen-xxl-down .modal-content {
|
||||||
|
height: 100%;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.modal-fullscreen-xxl-down .modal-header {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.modal-fullscreen-xxl-down .modal-body {
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.modal-fullscreen-xxl-down .modal-footer {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
14
index.html
14
index.html
|
|
@ -140,7 +140,7 @@
|
||||||
aria-labelledby="Credits window"
|
aria-labelledby="Credits window"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
>
|
>
|
||||||
<div class="modal-dialog" role="document">
|
<div class="modal-dialog modal-fullscreen-md-down" role="document">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h4 class="modal-title" data-i18n="credits.title">Credits</h4>
|
<h4 class="modal-title" data-i18n="credits.title">Credits</h4>
|
||||||
|
|
@ -194,7 +194,7 @@
|
||||||
aria-labelledby="Layers window"
|
aria-labelledby="Layers window"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
>
|
>
|
||||||
<div class="modal-dialog modal-lg" role="document">
|
<div class="modal-dialog modal-lg modal-fullscreen-md-down" role="document">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h4 class="modal-title" data-i18n="layers.customize">Customize layers</h4>
|
<h4 class="modal-title" data-i18n="layers.customize">Customize layers</h4>
|
||||||
|
|
@ -261,7 +261,7 @@
|
||||||
aria-labelledby="About window"
|
aria-labelledby="About window"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
>
|
>
|
||||||
<div class="modal-dialog" role="document">
|
<div class="modal-dialog modal-fullscreen-md-down" role="document">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h4 class="modal-title" data-i18n="about.title">About</h4>
|
<h4 class="modal-title" data-i18n="about.title">About</h4>
|
||||||
|
|
@ -368,7 +368,7 @@
|
||||||
aria-labelledby="What's new window"
|
aria-labelledby="What's new window"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
>
|
>
|
||||||
<div class="modal-dialog modal-lg" role="document">
|
<div class="modal-dialog modal-lg modal-fullscreen-md-down" role="document">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h4 class="modal-title" data-i18n="whatsnew.title">What's new?</h4>
|
<h4 class="modal-title" data-i18n="whatsnew.title">What's new?</h4>
|
||||||
|
|
@ -397,7 +397,7 @@
|
||||||
aria-labelledby="Load nogos window"
|
aria-labelledby="Load nogos window"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
>
|
>
|
||||||
<div class="modal-dialog" role="document">
|
<div class="modal-dialog modal-fullscreen-md-down" role="document">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h4 class="modal-title" data-i18n="loadNogos.title">Load no-go areas</h4>
|
<h4 class="modal-title" data-i18n="loadNogos.title">Load no-go areas</h4>
|
||||||
|
|
@ -474,7 +474,7 @@
|
||||||
aria-labelledby="Export route window"
|
aria-labelledby="Export route window"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
>
|
>
|
||||||
<div class="modal-dialog" role="document">
|
<div class="modal-dialog modal-fullscreen-md-down" role="document">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h4 class="modal-title" data-i18n="export.title">Export route</h4>
|
<h4 class="modal-title" data-i18n="export.title">Export route</h4>
|
||||||
|
|
@ -598,7 +598,7 @@
|
||||||
aria-labelledby="Load Track as route"
|
aria-labelledby="Load Track as route"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
>
|
>
|
||||||
<div class="modal-dialog" role="document">
|
<div class="modal-dialog modal-fullscreen-md-down" role="document">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h4 class="modal-title" data-i18n="trackasroute.title">Load Track as Route</h4>
|
<h4 class="modal-title" data-i18n="trackasroute.title">Load Track as Route</h4>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue