From fa606bd89fb44fd23168ef427e88ff49af79057d Mon Sep 17 00:00:00 2001
From: Neerholt <vict3459@edu.sde.dk>
Date: Tue, 25 Aug 2020 12:00:10 +0200
Subject: [PATCH] v0.10.14h - Added tooltips to navbar

---
 skolehjem/public/css/admin.css                |   8 +-
 skolehjem/resources/sass/admin/nav/nav.scss   |  12 +-
 .../views/admin/layout/base.blade.php         | 178 +++++++++---------
 3 files changed, 96 insertions(+), 102 deletions(-)

diff --git a/skolehjem/public/css/admin.css b/skolehjem/public/css/admin.css
index ee7f16d..7803f31 100644
--- a/skolehjem/public/css/admin.css
+++ b/skolehjem/public/css/admin.css
@@ -6667,7 +6667,7 @@ main {
   background-color: #00788A;
 }
 
-.segment > h3 {
+.segment > div > h3 {
   margin-left: -1rem;
   margin-top: 0;
   width: calc(100% + 1rem);
@@ -6675,12 +6675,12 @@ main {
   font-size: 1.15em;
 }
 
-.segment > h3 > a {
+.segment > div > h3 > a {
   padding: 1rem 2rem;
   display: flex;
 }
 
-.segment > h3 > a > img {
+.segment > div > h3 > a > img {
   width: 1.5em;
 }
 
@@ -6691,7 +6691,7 @@ main {
   margin-bottom: .5rem;*/
 }
 
-.segment > h3:hover {
+.segment > div > h3:hover {
   background-color: rgba(0, 0, 0, 0.2);
 }
 
diff --git a/skolehjem/resources/sass/admin/nav/nav.scss b/skolehjem/resources/sass/admin/nav/nav.scss
index be2c737..44a326e 100644
--- a/skolehjem/resources/sass/admin/nav/nav.scss
+++ b/skolehjem/resources/sass/admin/nav/nav.scss
@@ -13,7 +13,7 @@ div.w-85 {
     background-color: #00788A;
 }
 
-.segment > h3 {
+.segment > div > h3 {
     margin-left: -1rem;
     margin-top: 0;
     width: calc(100% + 1rem);
@@ -21,12 +21,12 @@ div.w-85 {
     font-size: 1.15em;
 }
 
-.segment > h3 > a {
+.segment > div > h3 > a {
     padding: 1rem 2rem;
     display: flex;
 }
 
-.segment > h3 > a > img {
+.segment > div > h3 > a > img {
     width: 1.5em;
 }
 
@@ -37,7 +37,7 @@ div.w-85 {
     margin-bottom: .5rem;*/
 }
 
-.segment > h3:hover {
+.segment > div > h3:hover {
     background-color: rgba(0,0,0, 0.2);
 }
 
@@ -46,10 +46,6 @@ div.w-85 {
     padding-right: 8px;
 }
 
-.segment > div > a {
-
-}
-
 .btn-inline {
     display: inline-flex;
     align-items: center;
diff --git a/skolehjem/resources/views/admin/layout/base.blade.php b/skolehjem/resources/views/admin/layout/base.blade.php
index b34963c..85bb23a 100644
--- a/skolehjem/resources/views/admin/layout/base.blade.php
+++ b/skolehjem/resources/views/admin/layout/base.blade.php
@@ -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>