v0.10.14h - Added tooltips to navbar
This commit is contained in:
@@ -20,11 +20,19 @@
|
||||
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 > h3").css({"margin-left": "", "width": ""});
|
||||
$(".segment > div > h3 > a").css({ "display": ""});
|
||||
$(".segment > div > h3 > a > span").css({"display": ""});
|
||||
|
||||
$(".segment > div").css({"margin-left": "-1rem", "padding": "1rem 0rem 1rem 2rem", "width": "calc(100% - 3rem)"});
|
||||
$(document).on({
|
||||
mouseenter: function() {
|
||||
$(this).find('.tooltiptext').css("visibility", "hidden");
|
||||
},
|
||||
mouseleave: function() {
|
||||
$(this).find('.tooltiptext').css("visibility", "hidden");
|
||||
}
|
||||
}, ".tooltip");
|
||||
$(".segment .hamburger > div").css({"margin-left": "-1rem", "width": "calc(100% - 3rem)"});
|
||||
$(".segment > div > a").css({"margin-left": "auto", "margin-right": ""});
|
||||
|
||||
localStorage.setItem("collapsed", "false");
|
||||
@@ -46,11 +54,20 @@
|
||||
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 > h3").css({"margin-left": "0", "width": "100%"});
|
||||
$(".segment > div > h3 > a").css({"display": "flex"});
|
||||
$(".segment > div > h3 > a > span").css({"display": "none"});
|
||||
|
||||
$(".segment > div").css({"margin-left": "0", "padding": "1rem 0", "width": "100%"});
|
||||
$(document).on({
|
||||
mouseenter: function() {
|
||||
$(this).find('.tooltiptext').css("visibility", "visible");
|
||||
},
|
||||
mouseleave: function() {
|
||||
$(this).find('.tooltiptext').css("visibility", "hidden");
|
||||
}
|
||||
}, ".tooltip");
|
||||
|
||||
$(".segment.hamburger > div").css({"margin-left": "0", "width": "calc(100% - 4rem)"});
|
||||
$(".segment > div > a").css({"margin-left": "auto", "margin-right": "auto"});
|
||||
|
||||
localStorage.setItem("collapsed", "true");
|
||||
@@ -66,102 +83,80 @@
|
||||
<link type="text/css" rel="stylesheet" href="{{ mix("/css/admin.css") }}">
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
display: flex;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
background-color: #333333;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-bottom-right-radius: 3px;
|
||||
margin-top: auto;
|
||||
padding: 0 1rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: auto;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0px;
|
||||
left: 100%;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext {
|
||||
/*visibility: visible;*/
|
||||
}
|
||||
</style>
|
||||
@yield("header")
|
||||
<main class="row">
|
||||
<div class="col nav" style="background-color: #333333;">
|
||||
<div class="segment" style="height: 60px;">
|
||||
<div class="segment hamburger" 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;">
|
||||
<a href="javascript:void(0)" id="open" style="padding: 0; margin-left: auto; display: none;" onclick="openNav()" class="open-btn text-white"><i class="fa fa-bars"></i></a>
|
||||
<a href="javascript:void(0)" id="close" style="padding: 0; margin-left: auto;" onclick="closeNav()" class="close-btn text-white"><i class="fa fa-times"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
@if(\Illuminate\Support\Facades\Request::route()->getName() == "users.index")
|
||||
<div class="segment active">
|
||||
<h3 class="text-white"><a href="#" class="text-white"><img src="{{asset("/images/icons/users-hvid.svg")}}" class="fa"><span style="margin-left: 4px;">Brugere</span></a></h3>
|
||||
@else
|
||||
<div class="segment">
|
||||
<h3 class="text-white"><a href="{{ route('users.index') }}" class="text-white"><img src="{{asset("/images/icons/users-hvid.svg")}}" class="fa"><span style="margin-left: 4px;">Brugere</span></a></h3>
|
||||
@endif
|
||||
|
||||
<div class="segment @if(\Illuminate\Support\Facades\Request::route()->getName() == "users.index") active @endif">
|
||||
<div class="tooltip"><h3 class="text-white"><a href="{{ route('users.index') }}" class="text-white"><img src="{{asset("/images/icons/users-hvid.svg")}}" class="fa"><span style="margin-left: 4px;">Brugere</span></a></h3><span class="tooltiptext">Brugere</span></div>
|
||||
</div>
|
||||
@if(\Illuminate\Support\Facades\Request::route()->getName() == "roles.index")
|
||||
<div class="segment active">
|
||||
<h3 class="text-white"><a href="#" class="text-white"><img src="{{asset("/images/icons/role.svg")}}" class="fa"><span style="margin-left: 4px;">Roller</span></a></h3>
|
||||
@else
|
||||
<div class="segment">
|
||||
<h3 class="text-white"><a href="{{ route("roles.index") }}" class="text-white"><img src="{{asset("/images/icons/role.svg")}}" class="fa"><span style="margin-left: 4px;">Roller</span></a></h3>
|
||||
@endif
|
||||
<div class="segment @if(\Illuminate\Support\Facades\Request::route()->getName() == "roles.index") active @endif">
|
||||
<div class="tooltip"><h3 class="text-white"><a href="{{ route('roles.index') }}" class="text-white"><img src="{{asset("/images/icons/role.svg")}}" class="fa"><span style="margin-left: 4px;">Roller</span></a></h3><span class="tooltiptext">Roller</span></div>
|
||||
</div>
|
||||
@if(\Illuminate\Support\Facades\Request::route()->getName() == "news.index")
|
||||
<div class="segment active">
|
||||
<h3 class="text-white"><a href="#" class="text-white"><img src="{{asset("/images/icons/news.svg")}}" class="fa"><span style="margin-left: 4px;">Nyheder</span></a></h3>
|
||||
@else
|
||||
<div class="segment">
|
||||
<h3 class="text-white"><a href="{{ route("news.index")}}" class="text-white"><img src="{{asset("/images/icons/news.svg")}}" class="fa"><span style="margin-left: 4px;">Nyheder</span></a></h3>
|
||||
@endif
|
||||
<div class="segment @if(\Illuminate\Support\Facades\Request::route()->getName() == "news.index") active @endif">
|
||||
<div class="tooltip"><h3 class="text-white"><a href="{{ route('news.index') }}" class="text-white"><img src="{{asset("/images/icons/news.svg")}}" class="fa"><span style="margin-left: 4px;">Nyheder</span></a></h3><span class="tooltiptext">Nyheder</span></div>
|
||||
</div>
|
||||
@if(\Illuminate\Support\Facades\Request::route()->getName() == "menu-plans.index")
|
||||
<div class="segment active">
|
||||
<h3 class="text-white"><a href="#" class="text-white"><img src="{{asset("/images/icons/Menuplan.svg")}}" class="fa"><span style="margin-left: 4px;">Menuplan</span></a></h3>
|
||||
@else
|
||||
<div class="segment">
|
||||
<h3 class="text-white"><a href="{{ route("menu-plans.index")}}" class="text-white"><img src="{{asset("/images/icons/Menuplan.svg")}}" class="fa"><span style="margin-left: 4px;">Menuplan</span></a></h3>
|
||||
@endif
|
||||
<div class="segment @if(\Illuminate\Support\Facades\Request::route()->getName() == "menu-plans.index") active @endif">
|
||||
<div class="tooltip"><h3 class="text-white"><a href="{{ route('menu-plans.index') }}" class="text-white"><img src="{{asset("/images/icons/Menuplan.svg")}}" class="fa"><span style="margin-left: 4px;">Menuplan</span></a></h3><span class="tooltiptext">Menuplan</span></div>
|
||||
</div>
|
||||
@if(\Illuminate\Support\Facades\Request::route()->getName() == "events.index")
|
||||
<div class="segment active">
|
||||
<h3 class="text-white"><a href="#" class="text-white"><img src="{{asset("/images/icons/Aktiviteter.svg")}}" class="fa"><span style="margin-left: 4px;">Aktiviteter</span></a></h3>
|
||||
@else
|
||||
<div class="segment">
|
||||
<h3 class="text-white"><a href="{{ route("events.index") }}" class="text-white"><img src="{{asset("/images/icons/Aktiviteter.svg")}}" class="fa"><span style="margin-left: 4px;">Aktiviteter</span></a></h3>
|
||||
@endif
|
||||
<div class="segment @if(\Illuminate\Support\Facades\Request::route()->getName() == "events.index") active @endif">
|
||||
<div class="tooltip"><h3 class="text-white"><a href="{{ route('events.index') }}" class="text-white"><img src="{{asset("/images/icons/Aktiviteter.svg")}}" class="fa"><span style="margin-left: 4px;">Aktiviteter</span></a></h3><span class="tooltiptext">Aktiviteter</span></div>
|
||||
</div>
|
||||
@if(\Illuminate\Support\Facades\Request::route()->getName() == "locations.index")
|
||||
<div class="segment active">
|
||||
<h3 class="text-white"><a href="#" class="text-white"><img src="{{asset("/images/icons/location.svg")}}" class="fa"><span style="margin-left: 4px;">Lokationer</span></a></h3>
|
||||
@else
|
||||
<div class="segment">
|
||||
<h3 class="text-white"><a href="{{ route("locations.index") }}" class="text-white"><img src="{{asset("/images/icons/location.svg")}}" class="fa"><span style="margin-left: 4px;">Lokationer</span></a></h3>
|
||||
@endif
|
||||
<div class="segment @if(\Illuminate\Support\Facades\Request::route()->getName() == "locations.index") active @endif">
|
||||
<div class="tooltip"><h3 class="text-white"><a href="{{ route('locations.index') }}" class="text-white"><img src="{{asset("/images/icons/location.svg")}}" class="fa"><span style="margin-left: 4px;">Lokationer</span></a></h3><span class="tooltiptext">Lokationer</span></div>
|
||||
</div>
|
||||
@if(\Illuminate\Support\Facades\Request::route()->getName() == "washing-machines.index")
|
||||
<div class="segment active">
|
||||
<h3 class="text-white"><a href="#" class="text-white"><img src="{{asset("/images/icons/wash.svg")}}" class="fa"><span style="margin-left: 4px;">Vaskemaskiner</span></a></h3>
|
||||
@else
|
||||
<div class="segment">
|
||||
<h3 class="text-white"><a href="{{ route("washing-machines.index") }}" class="text-white"><img src="{{asset("/images/icons/wash.svg")}}" class="fa"><span style="margin-left: 4px;">Vaskemaskiner</span></a></h3>
|
||||
@endif
|
||||
<div class="segment @if(\Illuminate\Support\Facades\Request::route()->getName() == "washing-machines.index") active @endif">
|
||||
<div class="tooltip"><h3 class="text-white"><a href="{{ route('washing-machines.index') }}" class="text-white"><img src="{{asset("/images/icons/wash.svg")}}" class="fa"><span style="margin-left: 4px;">Vaskemaskiner</span></a></h3><span class="tooltiptext">Vaskemaskiner</span></div>
|
||||
</div>
|
||||
@if(\Illuminate\Support\Facades\Request::route()->getName() == "washing-reservations.index")
|
||||
<div class="segment active">
|
||||
<h3 class="text-white"><a href="#" class="text-white"><img src="{{asset("/images/icons/wash_res.svg")}}" class="fa"><span style="margin-left: 4px;">Reservationer</span></a></h3>
|
||||
@else
|
||||
<div class="segment">
|
||||
<h3 class="text-white"><a href="{{ route("washing-reservations.index") }}" class="text-white"><img src="{{asset("/images/icons/wash_res.svg")}}" class="fa"><span style="margin-left: 4px;">Reservationer</span></a></h3>
|
||||
@endif
|
||||
<div class="segment @if(\Illuminate\Support\Facades\Request::route()->getName() == "washing-reservations.index") active @endif">
|
||||
<div class="tooltip"><h3 class="text-white"><a href="{{ route('washing-reservations.index') }}" class="text-white"><img src="{{asset("/images/icons/wash_res.svg")}}" class="fa"><span style="margin-left: 4px;">Reservationer</span></a></h3><span class="tooltiptext">Reservationer</span></div>
|
||||
</div>
|
||||
@if(\Illuminate\Support\Facades\Request::route()->getName() == "contacts.index")
|
||||
<div class="segment active">
|
||||
<h3 class="text-white"><a href="#" class="text-white"><img src="{{asset("/images/icons/phone.svg")}}" class="fa"><span style="margin-left: 4px;">Kontakter</span></a></h3>
|
||||
@else
|
||||
<div class="segment">
|
||||
<h3 class="text-white"><a href="{{ route("contacts.index") }}" class="text-white"><img src="{{asset("/images/icons/phone.svg")}}" class="fa"><span style="margin-left: 4px;">Kontakter</span></a></h3>
|
||||
@endif
|
||||
<div class="segment @if(\Illuminate\Support\Facades\Request::route()->getName() == "contacts.index") active @endif">
|
||||
<div class="tooltip"><h3 class="text-white"><a href="{{ route('contacts.index') }}" class="text-white"><img src="{{asset("/images/icons/phone.svg")}}" class="fa"><span style="margin-left: 4px;">Kontakter</span></a></h3><span class="tooltiptext">Kontakter</span></div>
|
||||
</div>
|
||||
@if(\Illuminate\Support\Facades\Request::route()->getName() == "guides.index")
|
||||
<div class="segment active">
|
||||
<h3 class="text-white"><a href="#" class="text-white"><img src="{{asset("/images/icons/Vejledninger.svg")}}" class="fa"><span style="margin-left: 4px;">Vejledning</span></a></h3>
|
||||
@else
|
||||
<div class="segment">
|
||||
<h3 class="text-white"><a href="{{ route('guides.index') }}" class="text-white"><img src="{{asset("/images/icons/Vejledninger.svg")}}" class="fa"><span style="margin-left: 4px;">Vejledning</span></a></h3>
|
||||
@endif
|
||||
<div class="segment @if(\Illuminate\Support\Facades\Request::route()->getName() == "guides.index") active @endif">
|
||||
<div class="tooltip"><h3 class="text-white"><a href="{{ route('guides.index') }}" class="text-white"><img src="{{asset("/images/icons/Vejledninger.svg")}}" class="fa"><span style="margin-left: 4px;">Vejledning</span></a></h3><span class="tooltiptext">Vejledning</span></div>
|
||||
</div>
|
||||
@if(\Illuminate\Support\Facades\Request::route()->getName() == "feedbacks.index")
|
||||
<div class="segment active">
|
||||
<h3 class="text-white"><a href="#" class="text-white"><img src="{{asset("/images/icons/feedback.svg")}}" class="fa"><span style="margin-left: 4px;">Feedback</span></a></h3>
|
||||
@else
|
||||
<div class="segment">
|
||||
<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>
|
||||
@endif
|
||||
<div class="segment @if(\Illuminate\Support\Facades\Request::route()->getName() == "feedbacks.index") active @endif">
|
||||
<div class="tooltip"><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><span class="tooltiptext">Feedback</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-85" style="background-color: #cccccc;">
|
||||
@@ -172,11 +167,14 @@
|
||||
@yield("content")
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
if(localStorage.getItem("collapsed") == "true")
|
||||
closeNav();
|
||||
|
||||
<script>
|
||||
if(localStorage.getItem("collapsed") == "true")
|
||||
closeNav();
|
||||
</script>
|
||||
$('.segment.active > .tooltip > h3 > a').click(function (e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
</script>
|
||||
</main>
|
||||
|
||||
<script src="{{ mix("/js/app.js") }}"></script>
|
||||
|
||||
Reference in New Issue
Block a user