From d7f7c04cc248ac1424e9c0c860e7aff0966f2faa Mon Sep 17 00:00:00 2001
From: Karl Hasselbring <karl@suma-ev.de>
Date: Tue, 2 Oct 2018 08:48:51 +0200
Subject: [PATCH] Die Sidebar hat ein neues einfacheres Design. Die
less-Dateien sind teilweise vereinfacht
---
resources/assets/less/metager/sidebar.less | 73 ++++++++++---------
resources/assets/less/metager/variables.less | 2 +-
.../views/parts/sidebar-opener.blade.php | 2 +-
resources/views/parts/sidebar.blade.php | 17 ++---
4 files changed, 48 insertions(+), 46 deletions(-)
diff --git a/resources/assets/less/metager/sidebar.less b/resources/assets/less/metager/sidebar.less
index 48ab8331a..cff57e4d9 100644
--- a/resources/assets/less/metager/sidebar.less
+++ b/resources/assets/less/metager/sidebar.less
@@ -1,43 +1,43 @@
/* Navigations-Seitenleiste */
-.sideBar {
+.sidebar {
+ border-left: 1px solid #ccc;
+ box-shadow: 0px 1px 1.5px 1px #c0c0c0;
+ /**/
position: fixed;
display: block;
top: 0px;
right: -270px;
width: 270px;
height: 100%;
- padding-top: 70px;
+ padding-top: 55px;
overflow: hidden;
overflow-y: auto;
- z-index: 999;
+ z-index: 1;
background-color: white;
transition: 0.5s;
border-left: none;
- &>label#closeSidebar {
- position: absolute;
- font-size: 36px;
- top: 0px;
- right: 20px;
- color: grey;
- &:after {
- content: "×";
- }
- &:hover {
- color: @metager-orange;
- }
- }
&>ul {
- padding-top: 20%;
+ padding-top: 20px;
+ padding-left: 0;
+ list-style: none;
+ margin-left: -5px;
}
- #metager-static-nav-list>li {
+ .sidebar-list>li {
width: 100%;
- padding-top: 3%;
- padding-bottom: 3%;
- border-bottom: 1px solid LightGray;
+ padding: 10px 0px;
&:hover {
background-color: @color-almost-white;
}
+ &>label,
+ &>a {
+ &:focus {
+ outline: none;
+ }
+ &>i.fa {
+ width: 30px;
+ }
+ }
&>label {
font-size: 16px;
font-weight: normal;
@@ -57,19 +57,17 @@
max-height: 0px;
text-align: left;
list-style-type: none;
- z-index: 1000;
- float: left;
+ z-index: 3;
overflow: hidden;
transition: 0.5s ease;
&>li>a {
display: block;
- font-size: 12px;
- padding: 3px 20px;
+ font-size: 13px;
+ padding: 6px 20px;
width: 100%;
clear: both;
font-weight: normal;
line-height: 1.42857143;
- border-top: 1px solid LightGray;
margin-left: 2px;
&:hover {
text-decoration: none;
@@ -112,12 +110,12 @@
left: 90%;
margin-top: 8px;
}
- input.sideBarCheckbox {
+ input.sidebarCheckbox {
display: none;
&:checked {
&~.metager-dropdown-menu {
max-height: 1000px;
- padding: 5px 0;
+ padding: 5px 0px 0px 0px;
}
&~label>.caret {
border-top: 0 solid;
@@ -136,10 +134,15 @@
}
}
-input#sideBarToggle:checked {
- &~.sideBar {
+input#sidebarToggle:checked {
+ &~.sidebar {
right: 0px;
}
+ &~.openSidebar {
+ &:after {
+ content: "×";
+ }
+ }
}
.openSidebar {
@@ -147,7 +150,7 @@ input#sideBarToggle:checked {
position: fixed;
top: 23px;
right: 25px;
- z-index: 998;
+ z-index: 2;
}
font-size: 36px;
line-height: 23px;
@@ -163,13 +166,13 @@ input#sideBarToggle:checked {
}
@media (max-width: @screen-xs-max) {
- .sideBar {
+ .sidebar {
right: -90%;
width: 90%;
overflow: auto;
- }
- #metager-static-nav-list:target {
- max-height: 1000px;
+ .sidebar-list {
+ max-height: 1000px;
+ }
}
ul.metager-dropdown-menu {
position: inherit;
diff --git a/resources/assets/less/metager/variables.less b/resources/assets/less/metager/variables.less
index 44974ea0a..e0cde9186 100644
--- a/resources/assets/less/metager/variables.less
+++ b/resources/assets/less/metager/variables.less
@@ -9,7 +9,7 @@
@color-almost-black: mix(@color-white, @color-black, 10%);
@color-black: black;
// General Background Color
-@background-color: white;
+@background-color: #FAFAFA;
// Signal Colors
@brand-success: #5cb85c;
@brand-info: #FB0;
diff --git a/resources/views/parts/sidebar-opener.blade.php b/resources/views/parts/sidebar-opener.blade.php
index 560848b66..af5477d7c 100644
--- a/resources/views/parts/sidebar-opener.blade.php
+++ b/resources/views/parts/sidebar-opener.blade.php
@@ -1 +1 @@
-<label class="openSidebar navigation-element {{$class or ''}}" for="sideBarToggle"></label>
\ No newline at end of file
+<label class="openSidebar navigation-element {{$class or ''}}" for="sidebarToggle"></label>
diff --git a/resources/views/parts/sidebar.blade.php b/resources/views/parts/sidebar.blade.php
index 2058f23e2..799ad203c 100644
--- a/resources/views/parts/sidebar.blade.php
+++ b/resources/views/parts/sidebar.blade.php
@@ -1,10 +1,9 @@
-<input id="sideBarToggle" style="display: none;" type="checkbox">
-<div class="sideBar">
- <label class="navigation-element" id="closeSidebar" for="sideBarToggle"></label>
+<input id="sidebarToggle" class="hidden" type="checkbox">
+<div class="sidebar">
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">
<p>MetaGer</p>
</a>
- <ul id="metager-static-nav-list" class="list-inline pull-right">
+ <ul class="sidebar-list">
<li @if ( !isset($navbarFocus) || $navbarFocus === 'suche') class="active" @endif >
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}" tabindex="200" id="navigationSuche">
<i class="fa fa-search" aria-hidden="true"></i>
@@ -12,7 +11,7 @@
</a>
</li>
<li @if (isset($navbarFocus) && $navbarFocus === 'dienste') class="metager-dropdown active" @else class="metager-dropdown" @endif >
- <input id="servicesToggle" class="sideBarCheckbox" type="checkbox">
+ <input id="servicesToggle" class="sidebarCheckbox" type="checkbox">
<label for="servicesToggle" class="metager-dropdown-toggle navigation-element" aria-haspopup="true" tabindex="225">
<i class="fa fa-wrench" aria-hidden="true"></i>
<span> {{ trans('sidebar.nav15') }}</span>
@@ -52,7 +51,7 @@
</a>
</li>
<li @if (isset($navbarFocus) && $navbarFocus === 'hilfe') class="metager-dropdown active" @else class="metager-dropdown" @endif >
- <input id="helpToggle" class="sideBarCheckbox" type="checkbox">
+ <input id="helpToggle" class="sidebarCheckbox" type="checkbox">
<label for="helpToggle" class="metager-dropdown-toggle navigation-element" aria-haspopup="true" id="navigationHilfe" tabindex="216">
<i class="fa fa-info-circle" aria-hidden="true"></i>
<span> {{ trans('sidebar.nav20') }}</span>
@@ -68,7 +67,7 @@
</ul>
</li>
<li @if (isset($navbarFocus) && $navbarFocus === 'foerdern') class="metager-dropdown active" @else class="metager-dropdown" @endif >
- <input id="donationToggle" class="sideBarCheckbox" type="checkbox">
+ <input id="donationToggle" class="sidebarCheckbox" type="checkbox">
<label for="donationToggle" class="metager-dropdown-toggle navigation-element" tabindex="201">
<i class="fa fa-money" aria-hidden="true"></i>
<span> {{ trans('sidebar.nav16') }}</span>
@@ -92,7 +91,7 @@
</ul>
</li>
<li @if (isset($navbarFocus) && $navbarFocus === 'kontakt') class="metager-dropdown active" @else class="metager-dropdown" @endif >
- <input id="contactToggle" class="sideBarCheckbox" type="checkbox">
+ <input id="contactToggle" class="sidebarCheckbox" type="checkbox">
<label for="contactToggle" class="metager-dropdown-toggle navigation-element" aria-haspopup="true" id="navigationKontakt" tabindex="219">
<i class="fa fa-comments-o" aria-hidden="true"></i>
<span> {{ trans('sidebar.nav18') }}</span>
@@ -117,7 +116,7 @@
</ul>
</li>
<li class="metager-dropdown">
- <input id="languagesToggle" class="sideBarCheckbox" type="checkbox">
+ <input id="languagesToggle" class="sidebarCheckbox" type="checkbox">
<label for="languagesToggle" class="metager-dropdown-toggle navigation-element" aria-haspopup="true" id="navigationSprache" tabindex="235">
<i class="fa fa-globe" aria-hidden="true"></i>
<span> {{ trans('sidebar.nav19') }} ({{ LaravelLocalization::getSupportedLocales()[LaravelLocalization::getCurrentLocale()]['native'] }})</span>
--
GitLab