Siehe letzter commit

beebc885 · Karl Hasselbring · f219c449 · beebc885 · beebc885 · beebc885
Commit beebc885 authored Feb 12, 2018 by Karl Hasselbring
5 changed files
--- a/resources/assets/less/metager/result-page.less
+++ b/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;

--- a/resources/assets/less/metager/result.less
+++ b/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;

--- a/resources/assets/less/metager/searchbar.less
+++ b/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
--- a/resources/assets/less/metager/specific.less
+++ b/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;
    }

--- a/resources/views/layouts/researchandtabs.blade.php
+++ b/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">