diff --git a/resources/assets/less/metager/result-page.less b/resources/assets/less/metager/result-page.less
index 027c53ed9cf9d284120eb01a7988af7efc1a1666..a0bf3344bc1db3f98f3271a96cf138c0838c7211 100644
--- a/resources/assets/less/metager/result-page.less
+++ b/resources/assets/less/metager/result-page.less
@@ -4,8 +4,6 @@
@import "./result-saver.less";
@import "./result.less";
@import "./product.less";
-@result-width: 700px;
-@quicktip-width: 500px;
@results-margin-left: @resultpage-leftbox-big-screen-margin-left;
//
@result-page-body-background-color: @background-color;
@@ -30,7 +28,7 @@
}
body {
- &#resultBody {
+ &#resultpage-body {
background-image: inherit;
background-color: #FAFAFA;
}
@@ -323,57 +321,174 @@ a {
}
@results-width-min: 500px;
-@quicktip-width-min: 400px;
+@results-width-max: 700px;
+@additions-width-min: 400px;
+@additions-width-max: 500px;
#resultpage-container {
- width: @result-width + @quicktip-width;
- align-self: left;
- display: flex;
- justify-content: left;
- margin-left: @results-margin-left;
+ width: 100%;
+ margin: @padding-small-default;
+ display: grid;
+ grid-template-columns: @results-width-max @additions-width-max;
+ grid-template-areas: "searchbar ." "foki ." "results additions";
+ grid-column-gap: @padding-small-default * 2;
+ grid-row-gap: @padding-small-default;
+ justify-items: stretch;
+ align-items: stretch;
+ /**/
background-color: #FAFAFA;
+ #research-bar {
+ grid-area: searchbar;
+ /**/
+ min-width: @results-width-min;
+ max-width: @results-width-max;
+ }
+ #research-bar-placeholder {
+ grid-area: searchbar;
+ /**/
+ min-width: @results-width-min;
+ max-width: @results-width-max;
+ }
+ #foki {
+ grid-area: foki;
+ /**/
+ min-width: @results-width-min;
+ max-width: @results-width-max;
+ }
#results-container {
- max-width: @result-width;
- width: 100%;
+ grid-area: results;
+ /**/
+ min-width: @results-width-min;
+ max-width: @results-width-max;
.alert {
- margin: 8px 0px;
+ margin: @padding-small-default 0px;
}
}
#additions-container {
- padding-left: 50px;
- width: @quicktip-width;
+ grid-area: additions;
+ /**/
+ min-width: @additions-width-min;
+ max-width: @additions-width-max;
#search-settings {
display: none;
}
}
- @media (max-width: (4 * @padding-small-default + @result-width + @quicktip-width - 1px)) {
- width: 100%;
- margin-left: 0px;
- padding-left: @padding-small-default;
- padding-right: @padding-small-default;
- justify-content: center;
- #results-container {
- min-width: @results-width-min;
+ @media (max-width: (@results-width-max + @additions-width-max + @padding-small-default * 4)) {
+ grid-template-columns: 60fr 40fr;
+ grid-template-areas: "searchbar ." "foki ." "results additions";
+ }
+}
+
+@resultpage-leftbox-max-width: @results-width-max;
+@resultpage-leftbox-min-dist-left-right: @padding-small-default;
+@resultpage-leftbox-min-dist-top-bottom: @padding-small-default;
+@resultpage-leftbox-big-screen-margin-left: 50px;
+#research-bar {
+ position: fixed;
+ z-index: 100;
+ width: @resultpage-leftbox-max-width;
+ background-color: white;
+ border: 1px solid #ccc;
+ border-bottom: 2px solid @metager-orange;
+ box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
+ display: flex;
+ align-items: center;
+ padding: 4px;
+ .resultpage-searchbar {
+ .search-input-submit .search-input input {
+ border-bottom: 1px solid #ccc;
}
- #additions-container {
- width: 100%;
- max-width: 500px;
- min-width: @quicktip-width-min;
- padding-left: 2 * @padding-small-default;
+ @media (max-width: @screen-xs-max) {
+ .search-focus-selector {
+ border-top: none;
+ border-radius: 5px;
+ }
+ .search-input-submit {
+ border-radius: 5px;
+ }
+ >* {
+ border-radius: 5px;
+ min-height: 40px;
+ &:not(:first-child) {
+ border-left: 1px solid #aaa;
+ }
+ }
+ *:not(.search-submit) {
+ width: 100%;
+ }
}
}
- @media (max-width: (@results-width-min + @quicktip-width-min - 1px)) {
- #results-container {
- width: 100%;
- max-width: auto;
- min-width: auto;
- }
- #additions-container {
- display: none;
+}
+
+#foki {
+ display: flex;
+ justify-content: left;
+ /*
+ @media (max-width: (@results-width-min + @additions-width-min - 1px)) {
+ width: 100%;
+ max-width: none;
+ margin: 0px;
+ padding: @padding-small-default;
+ .scrollbox {
+ max-width: none;
+ margin: 0px;
+ #foki-box {
+ max-width: none;
+ margin: 0px;
+ }
}
+ }
+ @media (max-width: (4 * @padding-small-default + @results-width-max + @additions-width-max - 1px)) {
+ padding-left: @padding-small-default;
+ }
+ @media (max-width: (@results-width-min + @additions-width-min - 1px)) {
width: 100%;
- justify-content: center;
+ max-width: 700px;
margin: 0px;
- padding: 0px @resultpage-leftbox-min-dist-left-right; // Verhindert, dass Text bei kleinen Bildschirmen an den Rand ragt
+ padding: @padding-small-default;
+ #research-bar {
+ max-width: none;
+ margin: 0px;
+ }
+ }
+ */
+ #foki-box {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ width: 100%;
+ max-width: @resultpage-leftbox-max-width;
+ background-color: white;
+ border: 1px solid #ccc;
+ -webkit-box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
+ box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
+ overflow-x: visible;
+ padding: 10px;
+ @media (max-width: 700px) {
+ overflow-x: auto;
+ }
+ &>div {
+ padding: 0px 10px;
+ &>a {
+ color: black;
+ }
+ &.active>a {
+ border-bottom: 1px solid @metager-orange;
+ color: @metager-orange;
+ }
+ &:last-child {
+ padding-right: 20px
+ }
+ }
+ .edit-focus {
+ margin-left: 7px;
+ }
+ /* Scrollbar Style */
+ &::-webkit-scrollbar {
+ height: 0px;
+ /* remove scrollbar space */
+ background: transparent;
+ /* optional: just make scrollbar invisible */
+ }
}
}
@@ -390,7 +505,7 @@ footer.resultPageFooter {
max-width: 700px;
margin-left: 50px;
margin-top: 20px;
- @media (max-width: (2 * @results-margin-left + @result-width - 1px)) {
+ @media (max-width: (2 * @results-margin-left + @results-width-max - 1px)) {
margin: 20px 0 0 0;
}
}
\ No newline at end of file
diff --git a/resources/assets/less/metager/result.less b/resources/assets/less/metager/result.less
index c7dc485186eac5a9b68aef583db8ff49edaab2de..0834a6d00ab1282f134792e90140bf79931cab0c 100644
--- a/resources/assets/less/metager/result.less
+++ b/resources/assets/less/metager/result.less
@@ -50,7 +50,7 @@
}
}
}
- .result-body {
+ .resultpage-body {
margin-top: 20px;
.result-description {
margin-bottom: 3px;
diff --git a/resources/assets/less/metager/searchbar.less b/resources/assets/less/metager/searchbar.less
index d6e105e99304eda6e695b92bd2ac940ff615dce2..0fb81b6c41ac10d1721236303c957db12fd4966a 100644
--- a/resources/assets/less/metager/searchbar.less
+++ b/resources/assets/less/metager/searchbar.less
@@ -104,189 +104,19 @@
}
}
-.resultpage-searchbar {
- padding: 5px;
- .search-input-submit .search-input input {
- border-bottom: 1px solid #ccc;
- }
- @media (max-width: @screen-xs-max) {
- .search-focus-selector {
- border-top: none;
- border-radius: 5px;
- }
- .search-input-submit {
- border-radius: 5px;
- }
- >* {
- border-radius: 5px;
- min-height: 40px;
- &:not(:first-child) {
- border-left: 1px solid #aaa;
- }
- }
- *:not(.search-submit) {
- width: 100%;
- }
- }
-}
-
-@resultpage-leftbox-max-width: @result-width;
-@resultpage-leftbox-min-dist-left-right: @padding-small-default;
-@resultpage-leftbox-min-dist-top-bottom: @padding-small-default;
-@resultpage-leftbox-big-screen-margin-left: 50px;
-header {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- position: fixed;
- z-index: 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: 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;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- }*/
- #research-bar {
- width: 100%;
- max-width: @resultpage-leftbox-max-width;
- margin-top: @resultpage-leftbox-min-dist-top-bottom;
- padding: 0px 30px 0px 10px;
- background-color: white;
- border: 1px solid #ccc;
- border-bottom: 2px solid @metager-orange;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
- 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 @resultpage-leftbox-min-dist-left-right;
- }
- }
- @media (max-width: (4 * @padding-small-default + @result-width + @quicktip-width - 1px)) {
- padding-left: @padding-small-default;
- }
- @media (max-width: (@results-width-min + @quicktip-width-min - 1px)) {
- width: 100%;
- max-width: 700px;
- margin: 0px;
- padding: @padding-small-default;
- #research-bar {
- max-width: none;
- margin: 0px;
- }
- }
-}
-
header:nth-child(1) {
@media (max-width: 1400px) {
position: relative;
}
}
-#foki {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: left;
- -ms-flex-pack: left;
- justify-content: left;
- margin-left: @resultpage-leftbox-big-screen-margin-left;
- padding-top: 8px;
- width: @resultpage-leftbox-max-width;
- @media (max-width: (4 * @padding-small-default + @result-width + @quicktip-width - 1px)) {
- margin-left: @padding-small-default;
- }
- @media (max-width: (@results-width-min + @quicktip-width-min - 1px)) {
- width: 100%;
- max-width: none;
- margin: 0px;
- padding: @padding-small-default;
- .scrollbox {
- max-width: none;
- margin: 0px;
- #foki-box {
- max-width: none;
- margin: 0px;
- }
- }
- }
- /*@media (max-width: 799px) {
- width: 100%;
- margin: 0px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- padding: @resultpage-leftbox-min-dist-top-bottom @resultpage-leftbox-min-dist-left-right 0px @resultpage-leftbox-min-dist-left-right;
- }*/
- #foki-box {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- width: 100%;
- max-width: @resultpage-leftbox-max-width;
- background-color: white;
- border: 1px solid #ccc;
- -webkit-box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
- box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
- overflow-x: visible;
- padding: 10px;
- @media (max-width: 700px) {
- overflow-x: auto;
- }
- &>div {
- padding: 0px 10px;
- &>a {
- color: black;
- }
- &.active>a {
- border-bottom: 1px solid @metager-orange;
- color: @metager-orange;
- }
- &:last-child {
- padding-right: 20px
- }
- }
- .edit-focus {
- margin-left: 7px;
- }
- /* Scrollbar Style */
- &::-webkit-scrollbar {
- height: 0px;
- /* remove scrollbar space */
- background: transparent;
- /* optional: just make scrollbar invisible */
- }
- }
-}
-
/* Scrollbar Style */
@scrollfade-color: white;
.scrollbox {
position: relative;
width: 100%;
- max-width: @result-width;
+ max-width: @results-width-max;
.foki-scrollfade {
&-left,
&-right {
diff --git a/resources/views/layouts/ad.blade.php b/resources/views/layouts/ad.blade.php
index 09476d1adfe406b1dc6e527f4621b205d88a200e..3ad6119e7d72d917d2c93e450eed3d56fdad9427 100644
--- a/resources/views/layouts/ad.blade.php
+++ b/resources/views/layouts/ad.blade.php
@@ -14,7 +14,7 @@
{{ $ad->anzeigeLink }}
</a>
</div>
- <div class="result-body">
+ <div class="resultpage-body">
<div class="result-description">
{{ $ad->descr }}
</div>
diff --git a/resources/views/layouts/researchandtabs.blade.php b/resources/views/layouts/researchandtabs.blade.php
index a84bea27ac0b54d27531e16bfc268607d436dabb..04a2515999bd0a1b73c82a3c2c41a0e846ba4e9b 100644
--- a/resources/views/layouts/researchandtabs.blade.php
+++ b/resources/views/layouts/researchandtabs.blade.php
@@ -1,4 +1,4 @@
-<header>
+<div id="resultpage-container">
<div id="research-bar">
<div id="header-logo">
<a class="hidden-xs" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">
@@ -12,18 +12,17 @@
@include('parts.searchbar', ['class' => 'resultpage-searchbar', 'request' => Request::method()])
</div>
</div>
-</header>
-<div id="research-bar-placeholder"></div>
-<div id="foki">
- <div class="scrollbox">
- <div class="foki-scrollfade-left"></div>
- <div id="foki-box">
- @include('parts.foki')
+ <div id="research-bar-placeholder">
+ </div>
+ <div id="foki">
+ <div class="scrollbox">
+ <div class="foki-scrollfade-left"></div>
+ <div id="foki-box">
+ @include('parts.foki')
+ </div>
+ <div class="foki-scrollfade-right"></div>
</div>
- <div class="foki-scrollfade-right"></div>
</div>
-</div>
-<div id="resultpage-container">
<div id="results-container">
@yield('results')
</div>
diff --git a/resources/views/layouts/result.blade.php b/resources/views/layouts/result.blade.php
index 9e69a0e5c6b157d33c3c3856e37e247a8f5b4a7b..02696df74b3c614e1e93485e1d73750839a198a1 100644
--- a/resources/views/layouts/result.blade.php
+++ b/resources/views/layouts/result.blade.php
@@ -21,7 +21,7 @@
</span>
@endif
</div>
- <div class="result-body">
+ <div class="resultpage-body">
@if( isset($result->logo) )
<div class="result-logo">
<a href="{{ $result->link }}" target="{{ $metager->getNewtab() }}" rel="noopener">
diff --git a/resources/views/layouts/resultPage.blade.php b/resources/views/layouts/resultPage.blade.php
index b6cd09a7e592fc3ad3d1eccb31ee1a2a1164df2d..877ae045d8a5cb9eea48325291408f3592a7b2a0 100644
--- a/resources/views/layouts/resultPage.blade.php
+++ b/resources/views/layouts/resultPage.blade.php
@@ -21,7 +21,7 @@
<meta name="referrer" content="origin">
@include('parts.utility')
</head>
- <body id="resultBody">
+ <body id="resultpage-body">
@if(Request::getHttpHost() === "metager3.de")
<div class="alert alert-info" style="text-align: center; position: fixed; bottom: 0;">
Sie befinden sich auf einer MetaGer Testversion. Hier werden Features vor der Veröffentlichung getestet. Unter Umständen funktioniert hier nicht alles wie gewohnt.
diff --git a/resources/views/parts/fake-result.blade.php b/resources/views/parts/fake-result.blade.php
index 952b300d6052e52f72f01911323f0fad499cfaba..bd09696b7441d6fc031c7b76a9473ec19bc52d6a 100644
--- a/resources/views/parts/fake-result.blade.php
+++ b/resources/views/parts/fake-result.blade.php
@@ -12,7 +12,7 @@
de.wikipedia.org
</a>
</div>
- <div class="result-body">
+ <div class="resultpage-body">
<div class="result-description" data-tooltip="{{ trans('fake-result.description') }}">
Wikipedia ist ein Projekt zum Aufbau einer Enzyklopädie aus freien Inhalten, zu denen du sehr gern beitragen kannst. Seit Mai 2001 sind 2.150.918 Artikel in ...
</div>