Commit 1f752832 authored by Dominik Hebeler's avatar Dominik Hebeler

Merge branch '810-sidebar-design-anpassen' into 'development'

Resolve "Sidebar Design anpassen"

Closes #810

See merge request !1326
parents 09386127 ebb6774b
......@@ -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;
......
......@@ -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);
......
/* 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
......@@ -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
......@@ -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',
......
......@@ -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>
......
......@@ -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')
......
<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>
<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>&nbsp;{{ 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>&nbsp;{{ 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>&nbsp;{{ 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>&nbsp;{{ 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>&nbsp;{{ 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>&nbsp;{{ 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>&nbsp;{{ 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>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment