Skip to content
Snippets Groups Projects
Commit 96f0cdcc authored by Karl Hasselbring's avatar Karl Hasselbring
Browse files

Der Sidebar Knopf ist jetzt auf der mobilen Version leichter anzuklicken

parent 9e0ab46d
No related branches found
No related tags found
1 merge request!1329Resolve "Mobile Ansicht optimieren"
...@@ -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;
...@@ -435,7 +435,7 @@ a { ...@@ -435,7 +435,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;
...@@ -547,17 +547,17 @@ footer.resultPageFooter { ...@@ -547,17 +547,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;
padding: @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>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment