Commit c947b4f3 authored by Karl Hasselbring's avatar Karl Hasselbring
Browse files

Der Style der Ergebnisseite ist aktuell sauber, die Suchleiste Scrollt jedoch nicht mit.

parent 8da67a13
......@@ -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
......@@ -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;
......
<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>
......
<label class="openSidebar {{$class or ''}}" role="button" for="sideBarToggle"></label>
\ No newline at end of file
<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(), "/") }}">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment