vict3459
/
Ekapp
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

v0.10.12 - Localstorage saving for the admin menu

This commit is contained in:
frederikpyt 2020-08-21 08:45:39 +02:00
parent a0566360e0
commit 3d61c20a5a
3 changed files with 63 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
skolehjem/public/css/admin.css vendored
View File

@ -6657,11 +6657,10 @@ main {
width: 15%;
height: 100%;
min-width: calc(1.5em + 4rem);
transition: width 0.5s;
}
.segment.active {
border-right: 2px solid aqua;
background-color: #00788A;
}
.segment > h3 {

8
skolehjem/resources/sass/admin/nav/nav.scss vendored
View File

@ -2,11 +2,15 @@
width: 15%;
height: 100%;
min-width: calc(1.5em + 4rem);
transition: width .5s;
//transition: width .5s;
}
div.w-85 {
//transition: width .5s;
}
.segment.active {
border-right: 2px solid aqua;
background-color: #00788A;
}
.segment > h3 {

99
skolehjem/resources/views/admin/layout/base.blade.php
View File

@ -10,6 +10,53 @@
<body>
@yield("header")
<main class="row">
<script type="text/javascript">
function openNav() {
var open = document.getElementById("open");
var close = document.getElementById("close");
close.style.display = "block";
open.style.display = "none";
var nav = document.getElementsByClassName("nav")[0];
nav.style.width = "";
var w85 = document.getElementsByClassName("w-85")[0];
$(".w-85").css({ "width": "85%" });
$(".segment > h3").css({"margin-left": "", "width": ""});
$(".segment > h3 > a").css({ "display": ""});
$(".segment > h3 > a > span").css({"display": ""});
$(".segment > div").css({"margin-left": "-1rem", "padding": "1rem 0rem 1rem 2rem", "width": "calc(100% - 3rem)"});
$(".segment > div > a").css({"margin-left": "auto", "margin-right": ""});
localStorage.setItem("collapsed", "false");
}
function closeNav() {
var open = document.getElementById("open");
var close = document.getElementById("close");
close.style.display = "none";
open.style.display = "block";
var nav = document.getElementsByClassName("nav")[0];
nav.style.width = "64px";
var w85 = document.getElementsByClassName("w-85")[0];
$(".w-85").css({ "width": "calc(100% - 64px)"});
$(".segment > h3").css({"margin-left": "0", "width": "100%"});
$(".segment > h3 > a").css({"display": "flex"});
$(".segment > h3 > a > span").css({"display": "none"});
$(".segment > div").css({"margin-left": "0", "padding": "1rem 0", "width": "100%"});
$(".segment > div > a").css({"margin-left": "auto", "margin-right": "auto"});
localStorage.setItem("collapsed", "true");
}
</script>
<div class="col nav" style="background-color: #333333;">
<div class="segment" style="height: 60px;">
<div class="text-white row align-items-center" style="margin-left: -1rem; margin-top: 0; margin-bottom: 0; font-size: 1.15rem; height: calc(100% - 2rem); padding: 1rem 2rem; width: calc(100% - 3rem); background-color: #333333 !important;">
@ -95,7 +142,7 @@
<h3 class="text-white"><a href="{{ route('feedbacks.index') }}" class="text-white"><img src="{{asset("/images/icons/feedback.svg")}}" class="fa"><span style="margin-left: 4px;">Feedback</span></a></h3>
</div>
</div>
<div class="w-85" style="transition: width .5s; background-color: #cccccc;">
<div class="w-85" style="background-color: #cccccc;">
<div class="directorypath text-white">
<a href="{{ route('root.index') }}" class="text-white">Home</a> / @yield("path")
</div>
@ -103,52 +150,18 @@
@yield("content")
</div>
</div>
<script>
if(localStorage.getItem("collapsed") == "true")
closeNav();
</script>
</main>
<script src="{{ mix("/js/app.js") }}"></script>
<script src="{{ asset("/js/jquery.are-you-sure.js") }}"></script>
<script type="text/javascript">
function openNav() {
var open = document.getElementById("open");
var close = document.getElementById("close");
close.style.display = "block";
open.style.display = "none";
var nav = document.getElementsByClassName("nav")[0];
nav.style.width = "";
var w85 = document.getElementsByClassName("w-85")[0];
$(".w-85").css({ "width": "85%"});
$(".segment > h3").css({"margin-left": "", "width": ""});
$(".segment > h3 > a").css({ "display": ""});
$(".segment > h3 > a > span").css({"display": ""});
$(".segment > div").css({"margin-left": "-1rem", "padding": "1rem 0rem 1rem 2rem", "width": "calc(100% - 3rem)"});
$(".segment > div > a").css({"margin-left": "auto", "margin-right": ""});
}
function closeNav() {
var open = document.getElementById("open");
var close = document.getElementById("close");
close.style.display = "none";
open.style.display = "block";
var nav = document.getElementsByClassName("nav")[0];
nav.style.width = "64px";
var w85 = document.getElementsByClassName("w-85")[0];
$(".w-85").css({ "width": "calc(100% - 64px)"});
$(".segment > h3").css({"margin-left": "0", "width": "100%"});
$(".segment > h3 > a").css({"display": "flex"});
$(".segment > h3 > a > span").css({"display": "none"});
$(".segment > div").css({"margin-left": "0", "padding": "1rem 0", "width": "100%"});
$(".segment > div > a").css({"margin-left": "auto", "margin-right": "auto"});
}
<script>
document.getElementsByClassName("nav")[0].style.transition = "width .5s";
document.getElementsByClassName("w-85")[0].style.transition = "width .5s";
</script>
@yield("scripts")
</body>