Upstream/Plan
1
0
Fork 0
mirror of https://github.com/plan-player-analytics/Plan.git synced 2025-01-23 00:21:43 +01:00
Code Issues Projects Releases Wiki Activity

Mobile navigation closing modal

Browse Source 
- Increased sidebar hiding to 1350px (Tested on laptop)
- Added an overlay that closes the sidebar (Better for mobile)
This commit is contained in:
Rsl1122 2019-08-16 14:02:46 +03:00
parent b1c4416d78
commit 2afc139741
7 changed files with 46 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
Plan/common/src/main/resources/assets/plan/web/css/sb-admin-2.css
View File

@ -36,7 +36,7 @@
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 1100px;
--breakpoint-xl: 1200px;
--breakpoint-xl: 1400px;
--font-family-sans-serif: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
@ -578,7 +578,7 @@ pre code {
}
}
@media (min-width: 1200px) {
@media (min-width: 1400px) {
.container {
max-width: 1140px;
}
@ -1583,7 +1583,7 @@ pre code {
}
}
@media (min-width: 1200px) {
@media (min-width: 1400px) {
.col-xl {
-ms-flex-preferred-size: 0;
flex-basis: 0;
@ -3498,7 +3498,7 @@ p.collapsing {
}
}
@media (min-width: 1200px) {
@media (min-width: 1400px) {
.dropdown-menu-xl-right {
right: 0;
left: auto;
@ -3531,7 +3531,7 @@ p.collapsing {
}
}
@media (min-width: 1200px) {
@media (min-width: 1400px) {
.dropdown-menu-xl-left {
right: auto;
left: 0;
@ -4888,7 +4888,7 @@ p.collapsing {
}
}
@media (min-width: 1200px) {
@media (min-width: 1400px) {
.navbar-expand-xl {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
@ -6369,7 +6369,7 @@ a.close.disabled {
}
}
@media (min-width: 1200px) {
@media (min-width: 1400px) {
.modal-xl {
max-width: 1140px;
}
@ -7351,7 +7351,7 @@ button.bg-dark:focus {
}
}
@media (min-width: 1200px) {
@media (min-width: 1400px) {
.d-xl-none {
display: none !important;
}
@ -8244,7 +8244,7 @@ button.bg-dark:focus {
}
}
@media (min-width: 1200px) {
@media (min-width: 1400px) {
.flex-xl-row {
-webkit-box-orient: horizontal !important;
-webkit-box-direction: normal !important;
@ -8490,7 +8490,7 @@ button.bg-dark:focus {
}
}
@media (min-width: 1200px) {
@media (min-width: 1400px) {
.float-xl-left {
float: left !important;
}
@ -10400,7 +10400,7 @@ button.bg-dark:focus {
}
}
@media (min-width: 1200px) {
@media (min-width: 1400px) {
.m-xl-0 {
margin: 0 !important;
}
@ -10910,7 +10910,7 @@ button.bg-dark:focus {
}
}
@media (min-width: 1200px) {
@media (min-width: 1400px) {
.text-xl-left {
text-align: left !important;
}
@ -11688,6 +11688,17 @@ a:focus {
cursor: pointer;
}
.sidebar-close-modal {
position: absolute;
opacity: 0.7;
background-color: #000;
width: 100%;
height: 100%;
top: 0;
z-index: 1;
cursor: pointer;
}
.hidden {
width: 0 !important;
}
@ -11696,7 +11707,7 @@ a:focus {
display: none;
}
@media (min-width: 1200px) {
@media (min-width: 1400px) {
.sidebar-toggler {
display: none !important;
}

4
Plan/common/src/main/resources/assets/plan/web/error.html
View File

@ -59,15 +59,13 @@
<button class="btn bg-white col-plan" data-target="#updateModal" data-toggle="modal" type="button">
<b><i class="fa fa-fw fa-download"></i> v4.6.2</b>
</button>
<button class="btn bg-plan sidebar-toggler" type="button"><i class="fas fa-fw fa-times-circle"></i>
Close
</button>
</div>
</ul>
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<div class="d-flex flex-column" id="content-wrapper">
<div class="sidebar-close-modal hidden"></div>
<!-- Main Content -->
<div id="content" style="display: flex;">

24
Plan/common/src/main/resources/assets/plan/web/js/sb-admin-2.js
View File

@ -9,13 +9,16 @@
return;
}
if ($(window).width() < 978) {
if (!$('.sidebar').hasClass('hidden')) {
$('.sidebar').addClass('hidden')
}
var $sidebar = $('.sidebar');
var closeModal = $('.sidebar-close-modal');
if ($(window).width() < 1350) {
if (!$sidebar.hasClass('hidden')) $sidebar.addClass('hidden');
if (!closeModal.hasClass('hidden')) closeModal.addClass('hidden');
$('.sidebar .collapse').collapse('hide');
} else if ($(window).width() > 1200 && $('.sidebar').hasClass('hidden')) {
$('.sidebar').removeClass('hidden')
} else if ($(window).width() > 1400 && $sidebar.hasClass('hidden')) {
$sidebar.removeClass('hidden');
if (!closeModal.hasClass('hidden')) closeModal.addClass('hidden');
}
oldWidth = newWidth;
}
@ -25,9 +28,16 @@
function toggleSidebar() {
$('.sidebar').toggleClass('hidden');
$('.sidebar .collapse').collapse('hide');
var closeModal = $('.sidebar-close-modal');
if ($(window).width() < 900) {
closeModal.toggleClass('hidden');
} else {
if (!closeModal.hasClass('hidden')) closeModal.addClass('hidden');
}
}
$('.sidebar-toggler').on('click', toggleSidebar);
$('.sidebar-toggler,.sidebar-close-modal').on('click', toggleSidebar);
// Close any open menu accordions when window is resized below 924px
$(window).resize(reduceSidebar);

4
Plan/common/src/main/resources/assets/plan/web/network.html
View File

@ -129,15 +129,13 @@
<button class="btn bg-white col-plan" data-target="#updateModal" data-toggle="modal" type="button">
<b><i class="fa fa-fw fa-download"></i> v4.6.2</b>
</button>
<button class="btn bg-plan sidebar-toggler" type="button"><i class="fas fa-fw fa-times-circle"></i>
Close
</button>
</div>
</ul>
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<div class="d-flex flex-column" id="content-wrapper">
<div class="sidebar-close-modal hidden"></div>
<!-- Main Content -->
<div id="content" style="display: flex;">

2
Plan/common/src/main/resources/assets/plan/web/old/plugins/materialize-css/css/materialize.css vendored
View File

@ -4312,7 +4312,7 @@ html {
}
}
@media only screen and (min-width: 1200px) {
@media only screen and (min-width: 1400px) {
html {
font-size: 15px;
}

4
Plan/common/src/main/resources/assets/plan/web/player.html
View File

@ -111,15 +111,13 @@
<button class="btn bg-white col-plan" data-target="#updateModal" data-toggle="modal" type="button">
<b><i class="fa fa-fw fa-download"></i> v4.6.2</b>
</button>
<button class="btn bg-plan sidebar-toggler" type="button"><i class="fas fa-fw fa-times-circle"></i>
Close
</button>
</div>
</ul>
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<div class="d-flex flex-column" id="content-wrapper">
<div class="sidebar-close-modal hidden"></div>
<!-- Main Content -->
<div id="content" style="display: flex;">

4
Plan/common/src/main/resources/assets/plan/web/server.html
View File

@ -130,15 +130,13 @@
<button class="btn bg-white col-plan" data-target="#updateModal" data-toggle="modal" type="button">
<b><i class="fa fa-fw fa-download"></i> v4.6.2</b>
</button>
<button class="btn bg-plan sidebar-toggler" type="button"><i class="fas fa-fw fa-times-circle"></i>
Close
</button>
</div>
</ul>
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<div class="d-flex flex-column" id="content-wrapper">
<div class="sidebar-close-modal hidden"></div>
<!-- Main Content -->
<div id="content" style="display: flex;">