ben/brouter-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Make modals fullscreen on mobile

Browse source
This commit is contained in:
Gautier P 2021-03-09 15:03:04 +01:00
parent b0d4c281e9
commit dac4a419a9
2 changed files with 140 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

133
css/style.css
View file

@ -788,3 +788,136 @@ table.dataTable.display tbody tr:hover.selected {
.leaflet-control-layers-selector[disabled] ~ span {
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
View file

@ -140,7 +140,7 @@
aria-labelledby="Credits window"
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-header">
<h4 class="modal-title" data-i18n="credits.title">Credits</h4>
@ -194,7 +194,7 @@
aria-labelledby="Layers window"
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-header">
<h4 class="modal-title" data-i18n="layers.customize">Customize layers</h4>
@ -261,7 +261,7 @@
aria-labelledby="About window"
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-header">
<h4 class="modal-title" data-i18n="about.title">About</h4>
@ -368,7 +368,7 @@
aria-labelledby="What's new window"
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-header">
<h4 class="modal-title" data-i18n="whatsnew.title">What's new?</h4>
@ -397,7 +397,7 @@
aria-labelledby="Load nogos window"
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-header">
<h4 class="modal-title" data-i18n="loadNogos.title">Load no-go areas</h4>
@ -474,7 +474,7 @@
aria-labelledby="Export route window"
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-header">
<h4 class="modal-title" data-i18n="export.title">Export route</h4>
@ -598,7 +598,7 @@
aria-labelledby="Load Track as route"
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-header">
<h4 class="modal-title" data-i18n="trackasroute.title">Load Track as Route</h4>