diff --git a/resources/assets/less/metager/result-page.less b/resources/assets/less/metager/result-page.less index 1be27b7cabf5813f16c71b43d723311eb75aa300..109a472a075ee5c7a2f3bc070b3e1c6d553de766 100644 --- a/resources/assets/less/metager/result-page.less +++ b/resources/assets/less/metager/result-page.less @@ -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; } } diff --git a/resources/assets/less/metager/sidebar.less b/resources/assets/less/metager/sidebar.less index 16728f5268449fd58cd8cc5dfb27509902938df9..dd7aec9d495210706b2b1d223c1c736962ed5fbd 100644 --- a/resources/assets/less/metager/sidebar.less +++ b/resources/assets/less/metager/sidebar.less @@ -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; } diff --git a/resources/views/parts/sidebar-opener.blade.php b/resources/views/parts/sidebar-opener.blade.php index af5477d7cab9c6e1681c3d5e545c448c0596647e..94848a95a72b66d43a4b1c894d8a31d3b5d8c4ea 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> +<label class="sidebar-opener navigation-element {{$class or ''}}" for="sidebarToggle"></label>