Siehe letzter commit

resources/assets/less/metager/result-page.less

@@ -360,7 +360,7 @@ p.mg-logo {
 
 @result-width: 700px;
 @quicktip-width: 500px;
-@results-margin-left: 50px;
+@results-margin-left: @resultpage-leftbox-big-screen-margin-left;
 #resultpage-container {
     width: @result-width + @quicktip-width;
     align-self: left;
@@ -379,7 +379,7 @@ p.mg-logo {
         width: 100%;
         justify-content: center;
         margin: 0px;
-        padding: 0px 8px;
+        padding: 0px @resultpage-leftbox-min-dist-left-right; // Verhindert, dass Text bei kleinen Bildschirmen an den Rand ragt
     }
     #results-container {
         max-width: @result-width;

resources/assets/less/metager/result.less

@@ -4,7 +4,7 @@
 @result-font-medium: 16px;
 @result-font-small: 14px;
 .result {
-    margin: 8px 0px 8px 0px;
+    margin: @resultpage-leftbox-min-dist-top-bottom 0px @resultpage-leftbox-min-dist-top-bottom 0px;
     padding: 15px;
     width: 100%;
     border: 1px solid #ccc;

resources/assets/less/metager/searchbar.less

@@ -278,25 +278,32 @@ div:hover>.searchbar-tooltip {
     }
 }
 
+@resultpage-leftbox-max-width: @result-width;
+@resultpage-leftbox-min-dist-left-right: 8px;
+@resultpage-leftbox-min-dist-top-bottom: 8px;
+@resultpage-leftbox-big-screen-margin-left: 50px;
+
 header {
-    padding-left: 50px;
-    padding-top: 10px;
-    padding: 10px 10px 0px 50px;
+    padding-top: @resultpage-leftbox-min-dist-top-bottom;
     display: flex;
     flex-direction: column;
     position: fixed;
     z-index: 100;
-    max-width: 760px;
-    width: 100%;
+    // Makes the header larger, so it correctly covers the non scrolling parts below
+    width: @resultpage-leftbox-max-width + @resultpage-leftbox-big-screen-margin-left + 10;
+    padding-left: @resultpage-leftbox-big-screen-margin-left;
     background-color: inherit;
-    @media (max-width: 1070px) {
-        margin-left: 0px;
+    @media (max-width: 799px) {
+        width: 100%;
+        max-width: 799px;
+        margin: 0px;
+        padding: @resultpage-leftbox-min-dist-top-bottom @resultpage-leftbox-min-dist-left-right 0px @resultpage-leftbox-min-dist-left-right;
         -webkit-box-pack: center;
-        max-width: 1070px;
+        align-items: center;
     }
     #research-bar {
-        max-width: 700px;
-        width: auto;
+        width: 100%;
+        max-width: @resultpage-leftbox-max-width;
         padding: 0px 30px 0px 10px;
         background-color: white;
         border: 1px solid #ccc;
@@ -306,7 +313,7 @@ header {
         justify-content: center;
         box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
         @media (max-width: 799px) {
-            margin: 0px 8px;
+            margin: 0px @resultpage-leftbox-min-dist-left-right;
         }
     }
 }
@@ -319,40 +326,51 @@ header:nth-child(1) {
 
 #foki {
     display: flex;
-    width: auto;
-    max-width: 700px;
-    background-color: white;
-    border: 1px solid #ccc;
-    margin-top: 10px;
-    padding: 10px;
-    margin-left: 50px;
-    overflow-x: auto;
-    box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
-    &::-webkit-scrollbar {
-        height: 0px;
-        /* remove scrollbar space */
-        background: transparent;
-        /* optional: just make scrollbar invisible */
-    }
+    justify-content: left;
+    margin-left: @resultpage-leftbox-big-screen-margin-left;
+    padding-top: 8px;
+    width: @resultpage-leftbox-max-width;
     @media (max-width: 799px) {
-        margin: 10px 8px 0px 8px;
+        width: 100%;
+        margin: 0px;
+        display: flex;
+        justify-content: center;
+        padding: @resultpage-leftbox-min-dist-top-bottom @resultpage-leftbox-min-dist-left-right 0px @resultpage-leftbox-min-dist-left-right;
     }
-    &>div {
-        padding: 0px 10px;
-        &>a {
-            color: black;
+    #foki-box {
+        display: flex;
+        width: 100%;
+        max-width: @resultpage-leftbox-max-width;
+        background-color: white;
+        border: 1px solid #ccc;
+        padding: 10px;
+        overflow-x: auto;
+        box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
+        &::-webkit-scrollbar {
+            height: 0px;
+            /* remove scrollbar space */
+            background: transparent;
+            /* optional: just make scrollbar invisible */
         }
-        &.active>a {
-            border-bottom: 1px solid rgb(255, 128, 0);
-            color: rgb(255, 128, 0);
+        &>div {
+            padding: 0px 10px;
+            &>a {
+                color: black;
+            }
+            &.active>a {
+                border-bottom: 1px solid rgb(255, 128, 0);
+                color: rgb(255, 128, 0);
+            }
+        }
+        .edit-focus {
+            margin-left: 7px;
         }
-    }
-    .edit-focus {
-        margin-left: 7px;
     }
 }
 
 #research-bar-placeholder {
+    margin: @resultpage-leftbox-min-dist-top-bottom 0px 0px 50px;
     width: 100%;
-    height: 60px;
+    max-width: 700px;
+    height: 53px;
 }
\ No newline at end of file

resources/assets/less/metager/specific.less

@@ -203,10 +203,6 @@ main {
     ul li:not(.lslide) {
         margin: 0 10px;
     }
-    div#foki {
-        margin: 5px 0;
-        text-align: center;
-    }
     fieldset {
         border: 0;
     }

resources/views/layouts/researchandtabs.blade.php

@@ -21,7 +21,9 @@
 </header>
 <div id="research-bar-placeholder"></div>
 <div id="foki">
-	@include('parts.foki')
+	<div id="foki-box">
+		@include('parts.foki')
+	</div>
 </div>
 <div id="resultpage-container">
 	<div id="results-container">