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

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