From f7ac43c488765628427f63ebac5fabe73c9f3af0 Mon Sep 17 00:00:00 2001
From: Karl Hasselbring <Karl Hasselbring>
Date: Fri, 27 Apr 2018 10:19:16 +0200
Subject: [PATCH] Der Style der Ergebnisseite ist aktuell sauber, die
Suchleiste Scrollt jedoch nicht mit.
---
.../assets/less/metager/result-page.less | 50 ++++++++++++++++++-
resources/assets/less/metager/sidebar.less | 12 +++--
.../views/layouts/researchandtabs.blade.php | 26 ++++++----
.../views/parts/sidebar-opener.blade.php | 1 +
resources/views/parts/sidebar.blade.php | 1 -
5 files changed, 71 insertions(+), 19 deletions(-)
create mode 100644 resources/views/parts/sidebar-opener.blade.php
diff --git a/resources/assets/less/metager/result-page.less b/resources/assets/less/metager/result-page.less
index a0bf3344b..07412e6e4 100644
--- a/resources/assets/less/metager/result-page.less
+++ b/resources/assets/less/metager/result-page.less
@@ -325,7 +325,6 @@ a {
@additions-width-min: 400px;
@additions-width-max: 500px;
#resultpage-container {
- width: 100%;
margin: @padding-small-default;
display: grid;
grid-template-columns: @results-width-max @additions-width-max;
@@ -336,12 +335,16 @@ a {
align-items: stretch;
/**/
background-color: #FAFAFA;
- #research-bar {
+ #research-bar-anchor {
grid-area: searchbar;
+ transform: translate(0, 0); // Makes the fixed research-bar inside set its width relative to the width of this element
/**/
min-width: @results-width-min;
max-width: @results-width-max;
}
+ #research-bar {
+ width: 100%;
+ }
#research-bar-placeholder {
grid-area: searchbar;
/**/
@@ -376,6 +379,32 @@ a {
grid-template-columns: 60fr 40fr;
grid-template-areas: "searchbar ." "foki ." "results additions";
}
+ @media (max-width: (@results-width-min + @additions-width-min + @padding-small-default * 4)) {
+ grid-template-columns: 100fr;
+ grid-template-areas: "searchbar" "foki" "results";
+ #additions-container {
+ display: none;
+ }
+ }
+ @media (max-width: (@results-width-min + @padding-small-default * 2)) {
+ // Fixes the width on very small displays
+ // Without a set min-width the width is just set to fit the content
+ #research-bar-anchor {
+ min-width: 0px;
+ }
+ #research-bar-placeholder {
+ min-width: 0px;
+ }
+ #foki {
+ min-width: 0px;
+ }
+ #results-container {
+ min-width: 0px;
+ }
+ #additions-container {
+ min-width: 0px;
+ }
+ }
}
@resultpage-leftbox-max-width: @results-width-max;
@@ -508,4 +537,21 @@ footer.resultPageFooter {
@media (max-width: (2 * @results-margin-left + @results-width-max - 1px)) {
margin: 20px 0 0 0;
}
+}
+
+/* Searchbar Opener */
+
+#research-bar>.openSidebar {
+ display: none;
+ margin-right: 10px;
+ margin-left: 20px;
+}
+
+@media(max-width: (@results-width-max + @padding-small-default * 2 + 60px)) {
+ #resultpage-container>.openSidebar {
+ display: none;
+ }
+ #research-bar>.openSidebar {
+ display: initial;
+ }
}
\ No newline at end of file
diff --git a/resources/assets/less/metager/sidebar.less b/resources/assets/less/metager/sidebar.less
index 95eac30aa..a51384c34 100644
--- a/resources/assets/less/metager/sidebar.less
+++ b/resources/assets/less/metager/sidebar.less
@@ -142,11 +142,13 @@ input#sideBarToggle:checked {
}
}
-label#openSidebar {
- position: fixed;
- top: 23px;
- right: 25px;
- z-index: 998;
+.openSidebar {
+ &.fixed {
+ position: fixed;
+ top: 23px;
+ right: 25px;
+ z-index: 998;
+ }
font-size: 36px;
line-height: 23px;
border-radius: 5px;
diff --git a/resources/views/layouts/researchandtabs.blade.php b/resources/views/layouts/researchandtabs.blade.php
index 04a251599..b547013bf 100644
--- a/resources/views/layouts/researchandtabs.blade.php
+++ b/resources/views/layouts/researchandtabs.blade.php
@@ -1,19 +1,23 @@
<div id="resultpage-container">
- <div id="research-bar">
- <div id="header-logo">
- <a class="hidden-xs" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">
- <h1>MetaGer</h1>
- </a>
- <a class="visible-xs" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">
- <h1>M</h1>
- </a>
- </div>
- <div id="header-searchbar">
- @include('parts.searchbar', ['class' => 'resultpage-searchbar', 'request' => Request::method()])
+ <div id="research-bar-anchor">
+ <div id="research-bar">
+ <div id="header-logo">
+ <a class="hidden-xs" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">
+ <h1>MetaGer</h1>
+ </a>
+ <a class="visible-xs" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">
+ <h1>M</h1>
+ </a>
+ </div>
+ <div id="header-searchbar">
+ @include('parts.searchbar', ['class' => 'resultpage-searchbar', 'request' => Request::method()])
+ </div>
+ @include('parts.sidebar-opener')
</div>
</div>
<div id="research-bar-placeholder">
</div>
+ @include('parts.sidebar-opener', ['class' => 'fixed'])
<div id="foki">
<div class="scrollbox">
<div class="foki-scrollfade-left"></div>
diff --git a/resources/views/parts/sidebar-opener.blade.php b/resources/views/parts/sidebar-opener.blade.php
new file mode 100644
index 000000000..9836ef0c7
--- /dev/null
+++ b/resources/views/parts/sidebar-opener.blade.php
@@ -0,0 +1 @@
+<label class="openSidebar {{$class or ''}}" role="button" for="sideBarToggle"></label>
\ No newline at end of file
diff --git a/resources/views/parts/sidebar.blade.php b/resources/views/parts/sidebar.blade.php
index 4ce31dff1..a8771e504 100644
--- a/resources/views/parts/sidebar.blade.php
+++ b/resources/views/parts/sidebar.blade.php
@@ -1,5 +1,4 @@
<input id="sideBarToggle" style="display: none;" type="checkbox">
-<label id="openSidebar" role="button" for="sideBarToggle"></label>
<div class="sideBar">
<label id="closeSidebar" role="button" for="sideBarToggle"></label>
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">
--
GitLab