diff --git a/resources/assets/less/metager/result-page.less b/resources/assets/less/metager/result-page.less
index 80e8e197712a5b76053596ef3782dbf246f61427..89d0cb767d9d539e42eb955f42c2b223aed03bd5 100644
--- a/resources/assets/less/metager/result-page.less
+++ b/resources/assets/less/metager/result-page.less
@@ -407,7 +407,7 @@ a {
#research-bar-container {
margin-left: (@results-margin-left - @padding-small-default);
position: fixed;
- z-index: 100;
+ z-index: 5;
top: 0;
left: 0;
background-color: @resultpage-background-color;
diff --git a/resources/assets/less/metager/searchbar.less b/resources/assets/less/metager/searchbar.less
index 393ab91730c87b9acf31a2ce7bf30838c5ea2ab8..295c9494076e5b4209cc4cb5cf45fc667a28fcd1 100644
--- a/resources/assets/less/metager/searchbar.less
+++ b/resources/assets/less/metager/searchbar.less
@@ -16,10 +16,8 @@
font-size: 16px;
background-color: transparent;
color: #333;
- &>* {
- background-color: white;
- }
.search-input-submit {
+ background-color: @searchbar-background-color;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
@@ -103,6 +101,7 @@
height: 40px;
-webkit-box-shadow: none;
box-shadow: none;
+ background-color: transparent;
&:focus {
outline-color: @metager-orange;
-webkit-box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1);
diff --git a/resources/assets/less/metager/sidebar.less b/resources/assets/less/metager/sidebar.less
index 48ab8331a0937a3a7d6cab2d23d11c305a924295..16728f5268449fd58cd8cc5dfb27509902938df9 100644
--- a/resources/assets/less/metager/sidebar.less
+++ b/resources/assets/less/metager/sidebar.less
@@ -1,75 +1,77 @@
/* 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: 10;
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%;
- }
- #metager-static-nav-list>li {
- width: 100%;
- padding-top: 3%;
- padding-bottom: 3%;
- border-bottom: 1px solid LightGray;
- &:hover {
- background-color: @color-almost-white;
- }
- &>label {
- font-size: 16px;
- font-weight: normal;
- text-decoration: none;
- text-indent: 12px;
- color: black;
- line-height: 20px;
- display: inline-block;
+ .sidebar-logo {
+ margin-bottom: 20px;
+ }
+ .sidebar-list {
+ padding-left: 0;
+ list-style: none;
+ margin-left: -5px;
+ &>li {
width: 100%;
+ padding: 10px 0px;
&:hover {
- color: red;
+ background-color: @color-almost-white;
+ }
+ &>label,
+ &>a {
+ &:focus {
+ outline: none;
+ }
+ &>i.fa {
+ width: 30px;
+ text-align: center;
+ margin-right: 7px;
+ }
+ }
+ &>label {
+ font-size: 16px;
+ font-weight: normal;
+ text-decoration: none;
+ text-indent: 12px;
+ color: black;
+ line-height: 20px;
+ display: inline-block;
+ width: 100%;
+ &:hover {
+ color: red;
+ }
}
}
}
- .metager-dropdown-menu {
+ .metager-dropdown-content {
min-width: 160px;
max-height: 0px;
text-align: left;
list-style-type: none;
- z-index: 1000;
- float: left;
+ z-index: 30;
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;
@@ -77,7 +79,7 @@
}
label:after {
#navbar-static-pages {
- z-index: 4;
+ z-index: 40;
width: 100%;
}
}
@@ -112,12 +114,12 @@
left: 90%;
margin-top: 8px;
}
- input.sideBarCheckbox {
+ input.sidebarCheckbox {
display: none;
&:checked {
- &~.metager-dropdown-menu {
+ &~.metager-dropdown-content {
max-height: 1000px;
- padding: 5px 0;
+ padding: 5px 0px 0px 0px;
}
&~label>.caret {
border-top: 0 solid;
@@ -126,7 +128,7 @@
}
}
&:not(:checked) {
- &~.metager-dropdown-menu {
+ &~.metager-dropdown-content {
padding: 0px 0;
}
}
@@ -134,12 +136,21 @@
input#nav0:checked~& {
border-left: 1px solid LightGray;
}
+ hr {
+ margin: 0px;
+ border-color: #e0e0e0;
+ }
}
-input#sideBarToggle:checked {
- &~.sideBar {
+input#sidebarToggle:checked {
+ &~.sidebar {
right: 0px;
}
+ &~.openSidebar {
+ &:after {
+ content: "×";
+ }
+ }
}
.openSidebar {
@@ -147,13 +158,13 @@ input#sideBarToggle:checked {
position: fixed;
top: 23px;
right: 25px;
- z-index: 998;
+ z-index: 20;
}
font-size: 36px;
line-height: 23px;
border-radius: 5px;
color: grey;
- background-color: transparent;
+ background-color: white;
&:after {
content: "≡";
}
@@ -162,17 +173,31 @@ input#sideBarToggle:checked {
}
}
+.sidebar-opener-placeholder {
+ display: none;
+ width: 45px;
+}
+
@media (max-width: @screen-xs-max) {
- .sideBar {
- right: -90%;
- width: 90%;
- overflow: auto;
- }
- #metager-static-nav-list:target {
- max-height: 1000px;
+ .sidebar {
+ padding-top: 15px;
+ .sidebar-logo {
+ display: none;
+ }
+ .sidebar {
+ right: -90%;
+ width: 90%;
+ overflow: auto;
+ .sidebar-list {
+ max-height: 1000px;
+ }
+ }
+ ul.metager-dropdown-content {
+ position: inherit;
+ width: 100%;
+ }
}
- ul.metager-dropdown-menu {
- position: inherit;
- width: 100%;
+ .sidebar-opener-placeholder {
+ display: initial;
}
}
\ No newline at end of file
diff --git a/resources/assets/less/metager/variables.less b/resources/assets/less/metager/variables.less
index 44974ea0a3d41b1b2653355a72ba7e149ac7d3c7..6a99c619ebed70e80562cb99d8bb8499dc8de660 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;
@@ -54,4 +54,5 @@ sans-serif;
@product-a-color: @color-strong-grey;
@product-price-color: @color-strong-grey;
@product-price-background-color: fade(@color-white, 90%);
-@lsprev-or-lsnext-i-background-color: @color-black;
\ No newline at end of file
+@lsprev-or-lsnext-i-background-color: @color-black;
+@searchbar-background-color: white;
\ No newline at end of file
diff --git a/resources/lang/de/sidebar.php b/resources/lang/de/sidebar.php
index 1e6389afc258e2b01d49837ab1a8f0e662c3f306..dc02cffd5d6e5fe8de35732ec4b94dd04159460a 100644
--- a/resources/lang/de/sidebar.php
+++ b/resources/lang/de/sidebar.php
@@ -15,13 +15,13 @@ return [
'nav14' => 'TOR-Hidden-Service',
'nav15' => 'Dienste',
'nav16' => 'Fördern',
- 'nav17' => 'Einkaufen bei MetaGer-Fördershops',
+ 'nav17' => 'MetaGer-Fördershops',
'nav18' => 'Kontakt',
'nav19' => 'Sprache',
'nav20' => 'Hilfe',
'nav21' => 'FAQ',
'nav22' => 'Zitatsuche',
- 'nav23' => 'Aufnahmeantrag SUMA-EV',
+ 'nav23' => 'Mitglied werden',
'nav24' => 'MetaGer Quellcode',
'nav25' => 'MetaGer App',
'nav26' => 'MetaGer-Fanshop',
diff --git a/resources/views/layouts/researchandtabs.blade.php b/resources/views/layouts/researchandtabs.blade.php
index 142049b56bcb121f01d62b212c31fd3c625f153e..71d7592b9b54278e283e2ff5f6adc44257f0d9da 100644
--- a/resources/views/layouts/researchandtabs.blade.php
+++ b/resources/views/layouts/researchandtabs.blade.php
@@ -12,12 +12,11 @@
<div id="header-searchbar">
@include('parts.searchbar', ['class' => 'resultpage-searchbar', 'request' => Request::method()])
</div>
- @include('parts.sidebar-opener')
+ <div class="sidebar-opener-placeholder"></div>
</div>
</div>
<div id="research-bar-placeholder">
</div>
- @include('parts.sidebar-opener', ['class' => 'fixed'])
<div id="foki">
<div class="scrollbox">
<div class="foki-scrollfade-left"></div>
diff --git a/resources/views/layouts/resultPage.blade.php b/resources/views/layouts/resultPage.blade.php
index 99bf006997652e64f2165a1b275c80aea00621fc..aa93a89927b56a1498ce37f56c9df52f2a56ffbf 100644
--- a/resources/views/layouts/resultPage.blade.php
+++ b/resources/views/layouts/resultPage.blade.php
@@ -26,6 +26,7 @@
</div>
@endif
@include('parts.sidebar', ['id' => 'resultPageSideBar'])
+ @include('parts.sidebar-opener', ['class' => 'fixed'])
@if( !isset($suspendheader) )
@include('modals.create-focus-modal')
@include('layouts.researchandtabs')
diff --git a/resources/views/parts/sidebar-opener.blade.php b/resources/views/parts/sidebar-opener.blade.php
index 560848b66bfe87c6eded7b3ccb8a534f79fd3aad..af5477d7cab9c6e1681c3d5e545c448c0596647e 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 2058f23e2147967b38a83cfdf0d7fd81c7913938..b32363cd0fa1094cec96ecb96eb902a9280325f3 100644
--- a/resources/views/parts/sidebar.blade.php
+++ b/resources/views/parts/sidebar.blade.php
@@ -1,24 +1,92 @@
-<input id="sideBarToggle" style="display: none;" type="checkbox">
-<div class="sideBar">
- <label class="navigation-element" id="closeSidebar" for="sideBarToggle"></label>
- <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">
+<input id="sidebarToggle" class="hidden" type="checkbox">
+<div class="sidebar">
+ <a class="sidebar-logo" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">
<p>MetaGer</p>
</a>
- <ul id="metager-static-nav-list" class="list-inline pull-right">
- <li @if ( !isset($navbarFocus) || $navbarFocus === 'suche') class="active" @endif >
+ <ul class="sidebar-list">
+ <li>
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}" tabindex="200" id="navigationSuche">
<i class="fa fa-search" aria-hidden="true"></i>
- <span> {{ trans('sidebar.nav1') }}</span>
+ <span>{{ trans('sidebar.nav1') }}</span>
</a>
</li>
- <li @if (isset($navbarFocus) && $navbarFocus === 'dienste') class="metager-dropdown active" @else class="metager-dropdown" @endif >
- <input id="servicesToggle" class="sideBarCheckbox" type="checkbox">
+ <hr>
+ <li>
+ <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/datenschutz/") }}" id="navigationPrivacy" tabindex="215">
+ <i class="fa fa-user-secret" aria-hidden="true"></i>
+ <span>{{ trans('sidebar.nav3') }}</span>
+ </a>
+ </li>
+ <hr>
+ <li>
+ <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/hilfe/") }}" tabindex="217">
+ <i class="fa fa-info" aria-hidden="true"></i>
+ <span>{{ trans('sidebar.nav20') }}</span>
+ </a>
+ </li>
+ <li>
+ <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/faq/") }}" tabindex="218">
+ <i class="fa fa-question" aria-hidden="true"></i>
+ <span>{{ trans('sidebar.nav21') }}</span>
+ </a>
+ </li>
+ <hr>
+ <li>
+ <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/spende/") }}" tabindex="202">
+ <i class="fa fa-donate" aria-hidden="true"></i>
+ <span>{{ trans('sidebar.nav2') }}</span>
+ </a>
+ </li>
+ <li>
+ <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/beitritt/") }}" tabindex="203">
+ <i class="fa fa-users" aria-hidden="true"></i>
+ <span>{{ trans('sidebar.nav23') }}</span>
+ </a>
+ </li>
+ <hr>
+ <li>
+ <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/app/") }}" tabindex="229">
+ <i class="fa fa-mobile-alt" aria-hidden="true"></i>
+ <span>@lang('sidebar.nav25')</span>
+ </a>
+ </li>
+ <li>
+ <a class="inlink" href="https://maps.metager.de" target="_blank" tabindex="231">
+ <i class="fa fa-map" aria-hidden="true"></i>
+ <span>Maps.MetaGer.de</span>
+ </a>
+ </li>
+ <hr>
+ <li class="metager-dropdown">
+ <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" aria-hidden="true"></i>
+ <span>{{ trans('sidebar.nav18') }}</span>
+ <span class="caret"></span>
+ </label>
+ <ul class="metager-dropdown-content">
+ <li>
+ <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/kontakt/") }}" tabindex="221">{{ trans('sidebar.nav5') }}</a>
+ </li>
+ <li>
+ <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/team/") }}" tabindex="222">{{ trans('sidebar.nav6') }}</a>
+ </li>
+ <li>
+ <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/about/") }}" tabindex="223">{{ trans('sidebar.nav7') }}</a>
+ </li>
+ <li>
+ <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/impressum/") }}" tabindex="224">{{ trans('sidebar.nav8') }}</a>
+ </li>
+ </ul>
+ </li>
+ <li class="metager-dropdown">
+ <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>
+ <span>{{ trans('sidebar.nav15') }}</span>
<span class="caret"></span>
</label>
- <ul class="metager-dropdown-menu">
+ <ul class="metager-dropdown-content">
<li>
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/widget/") }}" tabindex="226">{{ trans('sidebar.nav10') }}</a>
</li>
@@ -28,59 +96,15 @@
<li>
<a href="{{ action('Assoziator@asso') }}" tabindex="228">{{ trans('sidebar.nav11') }}</a>
</li>
- <li>
- <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/app/") }}" tabindex="229">@lang('sidebar.nav25')</a>
- </li>
<li>
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/tips/") }}" tabindex="230">{{ trans('sidebar.titles.tips') }}</a>
</li>
- <li>
- <a class="inlink" href="https://maps.metager.de" target="_blank" tabindex="231">Maps.MetaGer.de</a>
- </li>
<li>
<a class="outlink" href="https://gitlab.metager3.de/open-source/MetaGer" tabindex="232">{{ trans('sidebar.nav24') }}</a>
</li>
<li>
<a class="outlink" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/tor/") }}" tabindex="234">{{ trans('sidebar.nav14') }}</a>
</li>
- </ul>
- </li>
- <li @if (isset($navbarFocus) && $navbarFocus === 'datenschutz') class="active" @endif >
- <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/datenschutz/") }}" id="navigationPrivacy" tabindex="215">
- <i class="fa fa-user-secret" aria-hidden="true"></i>
- <span> {{ trans('sidebar.nav3') }}</span>
- </a>
- </li>
- <li @if (isset($navbarFocus) && $navbarFocus === 'hilfe') class="metager-dropdown active" @else class="metager-dropdown" @endif >
- <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>
- <span class="caret"></span>
- </label>
- <ul class="metager-dropdown-menu">
- <li>
- <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/hilfe/") }}" tabindex="217">{{ trans('sidebar.nav20') }}</a>
- </li>
- <li>
- <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/faq/") }}" tabindex="218">{{ trans('sidebar.nav21') }}</a>
- </li>
- </ul>
- </li>
- <li @if (isset($navbarFocus) && $navbarFocus === 'foerdern') class="metager-dropdown active" @else class="metager-dropdown" @endif >
- <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>
- <span class="caret"></span>
- </label>
- <ul class="metager-dropdown-menu">
- <li>
- <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/spende/") }}" tabindex="202">{{ trans('sidebar.nav2') }}</a>
- </li>
- <li>
- <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/beitritt/") }}" tabindex="203">{{ trans('sidebar.nav23') }}</a>
- </li>
@if(LaravelLocalization::getCurrentLocale() == "de")
<li>
<a class="outlink" href="https://shop.spreadshirt.de/metager/" rel="noopener" target="_blank">{{ trans('sidebar.nav26') }}</a>
@@ -91,39 +115,14 @@
</li>
</ul>
</li>
- <li @if (isset($navbarFocus) && $navbarFocus === 'kontakt') class="metager-dropdown active" @else class="metager-dropdown" @endif >
- <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>
- <span class="caret"></span>
- </label>
- <ul class="metager-dropdown-menu">
- <li>
- <a class="outlink" href="http://forum.suma-ev.de/" tabindex="220">{{ trans('sidebar.nav4') }}</a>
- </li>
- <li>
- <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/kontakt/") }}" tabindex="221">{{ trans('sidebar.nav5') }}</a>
- </li>
- <li>
- <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/team/") }}" tabindex="222">{{ trans('sidebar.nav6') }}</a>
- </li>
- <li>
- <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/about/") }}" tabindex="223">{{ trans('sidebar.nav7') }}</a>
- </li>
- <li>
- <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/impressum/") }}" tabindex="224">{{ trans('sidebar.nav8') }}</a>
- </li>
- </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>
+ <span>{{ trans('sidebar.nav19') }} ({{ LaravelLocalization::getSupportedLocales()[LaravelLocalization::getCurrentLocale()]['native'] }})</span>
<span class="caret"></span>
</label>
- <ul class="metager-dropdown-menu">
+ <ul class="metager-dropdown-content">
@foreach(LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
<li>
<a rel="alternate" hreflang="{{$localeCode}}" href="{{LaravelLocalization::getLocalizedURL($localeCode) }}" tabindex="{{235 + $loop->index}}">{{{ $properties['native'] }}}</a>