Skip to content
Snippets Groups Projects
Commit 723d1ce8 authored by Karl Hasselbring's avatar Karl Hasselbring
Browse files

Suchleiste scrollt mit

parent 1f0fc851
No related branches found
No related tags found
2 merge requests!1262WIP: Resolve "Spendenseite Texte anpassen",!1202Resolve "Style der Ergebnisseite neu aufbauen"
Hide whitespace changes
Inline Side-by-side
resources/assets/less/metager/result-page.less
+ 83
− 73
View file @ 723d1ce8
...@@ -4,6 +4,9 @@ ...@@ -4,6 +4,9 @@
@import "./result-saver.less"; @import "./result-saver.less";
@import "./result.less"; @import "./result.less";
@import "./product.less"; @import "./product.less";
//
@resultpage-background-color: #FAFAFA;
//
@results-margin-left: @resultpage-leftbox-big-screen-margin-left; @results-margin-left: @resultpage-leftbox-big-screen-margin-left;
// //
@result-page-body-background-color: @background-color; @result-page-body-background-color: @background-color;
...@@ -16,6 +19,24 @@ ...@@ -16,6 +19,24 @@
@a-hover-color: @result-page-a-hover-color; @a-hover-color: @result-page-a-hover-color;
@a-donation-hover-color: @result-page-a-hover-color; @a-donation-hover-color: @result-page-a-hover-color;
@product-shop-color: @result-page-product-shop-color; @product-shop-color: @result-page-product-shop-color;
//
@results-width-min: 500px;
@results-width-max: 700px;
@additions-width-min: 400px;
@additions-width-max: 500px;
//
@resultpage-breakpoint-large: (@results-width-max + @additions-width-max + @padding-small-default * 4);
@resultpage-breakpoint-small: (@results-width-min + @additions-width-min + @padding-small-default * 4);
//
@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;
//
@logo-size-breakpoint: (@results-width-min + @padding-small-default * 2);
//
@openSidebar-breakpoint: (@results-width-max + @padding-small-default * 2 + 60px);
//
#header-logo { #header-logo {
z-index: 0; z-index: 0;
padding-right: 10px; padding-right: 10px;
...@@ -25,12 +46,24 @@ ...@@ -25,12 +46,24 @@
font-size: 22px; font-size: 22px;
display: inline-block; display: inline-block;
} }
.screen-small {
display: none;
}
.screen-large {}
@media (max-width: @logo-size-breakpoint) {
.screen-large {
display: none;
}
.screen-small {
display: initial;
}
}
} }
body { body {
&#resultpage-body { &#resultpage-body {
background-image: inherit; background-image: inherit;
background-color: #FAFAFA; background-color: @resultpage-background-color;
} }
&.quicktips { &.quicktips {
background-color: @quicktip-background-color; background-color: @quicktip-background-color;
...@@ -320,10 +353,6 @@ a { ...@@ -320,10 +353,6 @@ a {
flex-direction: column; flex-direction: column;
} }
@results-width-min: 500px;
@results-width-max: 700px;
@additions-width-min: 400px;
@additions-width-max: 500px;
#resultpage-container { #resultpage-container {
margin: @padding-small-default; margin: @padding-small-default;
display: grid; display: grid;
...@@ -334,33 +363,26 @@ a { ...@@ -334,33 +363,26 @@ a {
justify-items: stretch; justify-items: stretch;
align-items: stretch; align-items: stretch;
/**/ /**/
background-color: #FAFAFA; background-color: @resultpage-background-color;
#research-bar-anchor { #research-bar-container {
grid-area: searchbar; 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; width: @results-width-max + @padding-small-default * 2;
max-width: @results-width-max; max-width: @results-width-max + @padding-small-default * 2;
}
#research-bar {
width: 100%;
} }
#research-bar-placeholder { #research-bar-placeholder {
grid-area: searchbar; grid-area: searchbar;
/**/ /**/
min-width: @results-width-min;
max-width: @results-width-max; max-width: @results-width-max;
} }
#foki { #foki {
grid-area: foki; grid-area: foki;
/**/ /**/
min-width: @results-width-min;
max-width: @results-width-max; max-width: @results-width-max;
} }
#results-container { #results-container {
grid-area: results; grid-area: results;
/**/ /**/
min-width: @results-width-min;
max-width: @results-width-max; max-width: @results-width-max;
.alert { .alert {
margin: @padding-small-default 0px; margin: @padding-small-default 0px;
...@@ -369,80 +391,68 @@ a { ...@@ -369,80 +391,68 @@ a {
#additions-container { #additions-container {
grid-area: additions; grid-area: additions;
/**/ /**/
min-width: @additions-width-min; //min-width: @additions-width-min;
max-width: @additions-width-max; max-width: @additions-width-max;
#search-settings { #search-settings {
display: none; display: none;
} }
} }
@media (max-width: (@results-width-max + @additions-width-max + @padding-small-default * 4)) { @media (max-width: @resultpage-breakpoint-large) {
grid-template-columns: 60fr 40fr; #research-bar-container {
width: ~"calc(60% - 1px)";
}
grid-template-columns:~"calc(60% - 8px)"~"calc(40% - 8px)";
grid-template-areas: "searchbar ." "foki ." "results additions"; grid-template-areas: "searchbar ." "foki ." "results additions";
} }
@media (max-width: (@results-width-min + @additions-width-min + @padding-small-default * 4)) { @media (max-width: @resultpage-breakpoint-small) {
grid-template-columns: 100fr; #research-bar-container {
width: 100%;
}
grid-template-columns: 100%;
grid-template-areas: "searchbar" "foki" "results"; grid-template-areas: "searchbar" "foki" "results";
#additions-container { #additions-container {
display: none; 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; #research-bar-container {
@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; position: fixed;
z-index: 100; z-index: 100;
width: @resultpage-leftbox-max-width; top: 0;
background-color: white; left: 0;
border: 1px solid #ccc; background-color: @resultpage-background-color;
border-bottom: 2px solid @metager-orange; padding: 8px 8px 0px 8px;
box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24); #research-bar {
display: flex; background-color: white;
align-items: center; border: 1px solid #ccc;
padding: 4px; border-bottom: 2px solid @metager-orange;
.resultpage-searchbar { box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
.search-input-submit .search-input input { display: flex;
border-bottom: 1px solid #ccc; align-items: center;
} padding: 4px;
@media (max-width: @screen-xs-max) { .resultpage-searchbar {
.search-focus-selector { .search-input-submit .search-input input {
border-top: none; border-bottom: 1px solid #ccc;
border-radius: 5px;
}
.search-input-submit {
border-radius: 5px;
} }
>* { @media (max-width: @openSidebar-breakpoint) {
border-radius: 5px; .search-focus-selector {
min-height: 40px; border-top: none;
&:not(:first-child) { border-radius: 5px;
border-left: 1px solid #aaa; }
.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%;
} }
}
*:not(.search-submit) {
width: 100%;
} }
} }
} }
...@@ -547,7 +557,7 @@ footer.resultPageFooter { ...@@ -547,7 +557,7 @@ footer.resultPageFooter {
margin-left: 20px; margin-left: 20px;
} }
@media(max-width: (@results-width-max + @padding-small-default * 2 + 60px)) { @media(max-width: @openSidebar-breakpoint) {
#resultpage-container>.openSidebar { #resultpage-container>.openSidebar {
display: none; display: none;
} }
......
resources/assets/less/metager/searchbar.less
+ 3
− 3
View file @ 723d1ce8
...@@ -24,9 +24,6 @@ ...@@ -24,9 +24,6 @@
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
max-width: 600px; max-width: 600px;
@media (max-width: @screen-xs-max) {
max-width: initial;
}
} }
.search-input { .search-input {
-webkit-box-flex: 1; -webkit-box-flex: 1;
...@@ -79,6 +76,9 @@ ...@@ -79,6 +76,9 @@
} }
.search-input-submit { .search-input-submit {
border-radius: 5px; border-radius: 5px;
@media (max-width: @screen-xs-max) {
max-width: initial;
}
} }
.search-submit { .search-submit {
border-left: 1px solid #aaa; border-left: 1px solid #aaa;
......
resources/views/layouts/researchandtabs.blade.php
+ 3
− 3
View file @ 723d1ce8
<div id="resultpage-container"> <div id="resultpage-container">
<div id="research-bar-anchor"> <div id="research-bar-container">
<div id="research-bar"> <div id="research-bar">
<div id="header-logo"> <div id="header-logo">
<a class="hidden-xs" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}"> <a class="screen-large" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">
<h1>MetaGer</h1> <h1>MetaGer</h1>
</a> </a>
<a class="visible-xs" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}"> <a class="screen-small" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">
<h1>M</h1> <h1>M</h1>
</a> </a>
</div> </div>
......
webpack.mix.js
+ 9
− 3
View file @ 723d1ce8
...@@ -12,9 +12,15 @@ let mix = require('laravel-mix'); ...@@ -12,9 +12,15 @@ let mix = require('laravel-mix');
*/ */
mix mix
.less('resources/assets/less/default.less', 'public/css/themes/default.css') .less('resources/assets/less/default.less', 'public/css/themes/default.css', {
.less('resources/assets/less/metager/beitritt.less', 'public/css/beitritt.css') strictMath: true
.less('resources/assets/less/utility.less', 'public/css/utility.css') })
.less('resources/assets/less/metager/beitritt.less', 'public/css/beitritt.css', {
strictMath: true
})
.less('resources/assets/less/utility.less', 'public/css/utility.css', {
strictMath: true
})
// js // js
.babel(['resources/assets/js/lib/jquery.js', 'resources/assets/js/lib/jquery-ui.min.js', 'resources/assets/js/lib/bootstrap.js', 'resources/assets/js/lib/lightslider.js', .babel(['resources/assets/js/lib/jquery.js', 'resources/assets/js/lib/jquery-ui.min.js', 'resources/assets/js/lib/bootstrap.js', 'resources/assets/js/lib/lightslider.js',
'resources/assets/js/lib/masonry.js', 'resources/assets/js/lib/imagesloaded.js', 'resources/assets/js/lib/openpgp.min.js', 'resources/assets/js/lib/iframeResizer.min.js', 'resources/assets/js/lib/masonry.js', 'resources/assets/js/lib/imagesloaded.js', 'resources/assets/js/lib/openpgp.min.js', 'resources/assets/js/lib/iframeResizer.min.js',
......
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