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

Resolve "Mobile Ansicht optimieren"

Closes #816

See merge request !1329

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;
     }
 }

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;
     }

resources/views/parts/sidebar-opener.blade.php

-<label class="openSidebar navigation-element {{$class or ''}}" for="sidebarToggle"></label>
+<label class="sidebar-opener navigation-element {{$class or ''}}" for="sidebarToggle"></label>