diff --git a/resources/assets/less/metager/result-page.less b/resources/assets/less/metager/result-page.less
index 80783264c2368ca720d1d80eb3aa74954bc93c17..820fe0bdc0148959f2f6d810330d936f235c1939 100644
--- 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;
diff --git a/resources/assets/less/metager/result.less b/resources/assets/less/metager/result.less
index aed1a93204b83c39622a02b6e8da6f021534cfa3..32903b05aecd02bce9a23bca6234359c353a4031 100644
--- 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;
diff --git a/resources/assets/less/metager/searchbar.less b/resources/assets/less/metager/searchbar.less
index 5f7e9c977e276d014ab91400dbb71889fe8ae141..b3fafa25b86836652246e55056d4a37cb2770c7f 100644
--- 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
diff --git a/resources/assets/less/metager/specific.less b/resources/assets/less/metager/specific.less
index 2cced2661b78c9e8bf5f681790297f32ac4a970f..e78314b6a29a801d63c2437caf1450c53c84fc12 100644
--- 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;
}
diff --git a/resources/views/layouts/researchandtabs.blade.php b/resources/views/layouts/researchandtabs.blade.php
index a0a888404b19efd330df8fa803bda10267871d16..dea887f0edff4b24aecd3e5dbd5e0047248c1cf1 100644
--- 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">