diff --git a/resources/assets/less/metager/result-page.less b/resources/assets/less/metager/result-page.less index a0bf3344bc1db3f98f3271a96cf138c0838c7211..07412e6e4c5ac7742c9a8afd6ec74c4bf430f54e 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 95eac30aae3027460dcfc508466ed0a9d69e43d9..a51384c347abeb0d5e20a27072c9e2847c06731e 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 04a2515999bd0a1b73c82a3c2c41a0e846ba4e9b..b547013bf44e156cae48239c8a2f000c50eb2bcc 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 0000000000000000000000000000000000000000..9836ef0c7d56b5565d5b1bd748844096f4179dd0 --- /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 4ce31dff1e4bc63cb10ab0195dc7cc81e54c306d..a8771e5049a14e7b60cd039863d442a8510d4679 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(), "/") }}">