Commit cce378a7 authored by Phil Höfer's avatar Phil Höfer

Merge branch '816-mobile-ansicht-optimieren' into 'development'

Resolve "Mobile Ansicht optimieren"

Closes #816

See merge request !1329
parents ce02b1be 246c453f
......@@ -32,7 +32,7 @@
//
@logo-size-breakpoint: (@results-width-min + @padding-small-default * 2);
//
@openSidebar-breakpoint: (@results-width-max + @padding-small-default * 2 + 60px);
@sidebar-opener-breakpoint: (@results-width-max + @padding-small-default * 2 + 60px);
//
#header-logo {
z-index: 0;
......@@ -438,7 +438,7 @@ a {
.search-input-submit .search-input input {
border-bottom: 1px solid #ccc;
}
@media (max-width: @openSidebar-breakpoint) {
@media (max-width: @sidebar-opener-breakpoint) {
.search-focus-selector {
border-top: none;
border-radius: 5px;
......@@ -550,17 +550,17 @@ footer.resultPageFooter {
/* Searchbar Opener */
#research-bar>.openSidebar {
#research-bar>.sidebar-opener {
display: none;
margin-right: 10px;
margin-left: 20px;
}
@media(max-width: @openSidebar-breakpoint) {
#resultpage-container>.openSidebar {
@media(max-width: @sidebar-opener-breakpoint) {
#resultpage-container>.sidebar-opener {
display: none;
}
#research-bar>.openSidebar {
#research-bar>.sidebar-opener {
display: initial;
}
}
......
......@@ -146,20 +146,22 @@ input#sidebarToggle:checked {
&~.sidebar {
right: 0px;
}
&~.openSidebar {
&~.sidebar-opener {
&:after {
content: "×";
}
}
}
.openSidebar {
&.fixed {
position: fixed;
top: 23px;
right: 25px;
z-index: 20;
}
// Top right starting position of the sidebar icon
@sidebar-opener-top: 23px;
@sidebar-opener-right: 25px;
.sidebar-opener {
position: fixed;
top: @sidebar-opener-top;
right: @sidebar-opener-right;
margin: 0px;
z-index: 20;
font-size: 36px;
line-height: 23px;
border-radius: 5px;
......@@ -181,22 +183,27 @@ input#sidebarToggle:checked {
@media (max-width: @screen-xs-max) {
.sidebar {
padding-top: 15px;
right: -90%;
width: 90%;
overflow: auto;
.sidebar-list {
max-height: 1000px;
}
.sidebar-logo {
display: none;
}
.sidebar {
right: -90%;
width: 90%;
overflow: auto;
.sidebar-list {
max-height: 1000px;
}
}
ul.metager-dropdown-content {
position: inherit;
width: 100%;
}
}
.sidebar-opener {
// Make the open and close button bigger, so it is easier to hit
@sidebar-opener-mobile-magnification: 10px;
margin: @sidebar-opener-mobile-magnification;
top: (@sidebar-opener-top - @sidebar-opener-mobile-magnification);
right: (@sidebar-opener-right - @sidebar-opener-mobile-magnification);
}
.sidebar-opener-placeholder {
display: initial;
}
......
<label class="openSidebar navigation-element {{$class or ''}}" for="sidebarToggle"></label>
<label class="sidebar-opener navigation-element {{$class or ''}}" for="sidebarToggle"></label>
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