From 3aa8b8a0371255792098f0315e279be1a7561458 Mon Sep 17 00:00:00 2001
From: Dominik Hebeler <dominik@suma-ev.de>
Date: Tue, 12 Feb 2019 15:22:33 +0100
Subject: [PATCH] Changed Style according to user feedback
---
resources/less/metager/general/cards.less | 3 +-
resources/less/metager/general/general.less | 6 +++-
.../metager/pages/resultpage/result-page.less | 31 +++++++++++--------
.../less/metager/pages/resultpage/result.less | 24 +++++++++-----
resources/less/metager/variables.less | 3 +-
resources/views/layouts/result.blade.php | 1 +
6 files changed, 43 insertions(+), 25 deletions(-)
diff --git a/resources/less/metager/general/cards.less b/resources/less/metager/general/cards.less
index 8fd4cbd8c..984e0baea 100644
--- a/resources/less/metager/general/cards.less
+++ b/resources/less/metager/general/cards.less
@@ -3,8 +3,7 @@
border: 1px solid #ccc;
background-color: white;
box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
- margin: 8px;
- padding: 15px;
+ padding: 8px;
}
.card-heavy {
diff --git a/resources/less/metager/general/general.less b/resources/less/metager/general/general.less
index 264b01a52..56b8dad84 100644
--- a/resources/less/metager/general/general.less
+++ b/resources/less/metager/general/general.less
@@ -2,6 +2,7 @@
@modal-content-box-shadow-color: fade(@color-black, 30%);
@body-background-color: @background-color;
+@body-background-color-mobile: @background-color-mobile;
@a-hover-color: red;
body {
font-family: @metager-font;
@@ -31,6 +32,9 @@ body {
display: flex;
flex-direction: column;
margin: 0;
+ @media(max-width: @screen-mobile){
+ background-color: @body-background-color-mobile
+ }
}
.wrapper {
@@ -65,7 +69,7 @@ body {
&right {
position: absolute;
width: 20px;
- height: 40px;
+ height: 95%;
top: 1px;
pointer-events: none;
}
diff --git a/resources/less/metager/pages/resultpage/result-page.less b/resources/less/metager/pages/resultpage/result-page.less
index 197d3e997..876a33261 100644
--- a/resources/less/metager/pages/resultpage/result-page.less
+++ b/resources/less/metager/pages/resultpage/result-page.less
@@ -6,8 +6,8 @@
@results-margin-left: 16px;
// Min and max widths of the 2 resultpage columns
@results-width-min: 500px;
-@results-width-max: 700px;
-@additions-width-min: 400px;
+@results-width-max: 800px;
+@additions-width-min: 300px;
@additions-width-max: 500px;
// Breakpoints for the 2 resultpage columns
@resultpage-breakpoint-max: (@results-width-max + @additions-width-max + @padding-small-default * 4);
@@ -25,7 +25,8 @@
#header-logo {
z-index: 0;
- padding-right: 10px;
+ padding-right: 8px;
+ padding-left: 8px;
h1 {
.logo;
margin: 0px;
@@ -218,7 +219,8 @@ a {
display: inline-block;
background-color: white;
text-align: center;
- box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+ .card;
+ padding: 4px;
> img {
max-width: 150px;
}
@@ -230,6 +232,7 @@ a {
> div {
font-size: 12px;
color: #777;
+ margin-top: 4px;
}
}
@@ -407,7 +410,7 @@ a {
#research-bar {
background-color: white;
border: 1px solid #ccc;
- border-bottom: 2px solid @metager-orange;
+ border-bottom: 1px 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;
@@ -446,13 +449,11 @@ a {
width: 100%;
max-width: @results-width-max;
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;
+ overflow-x: auto;
padding: 8px;
- @media (max-width: 700px) {
- overflow-x: auto;
+ border-bottom: 1px solid #ccc;
+ @media (max-width: @screen-mobile) {
+ .card;
}
&>div {
padding: 0px 10px;
@@ -501,8 +502,10 @@ a {
width: 100%;
max-width: 700px;
background-color: white;
- border: 1px solid #ccc;
- box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
+ border-bottom: 1px solid #ccc;
+ @media(max-width: @screen-mobile){
+ .card;
+ }
overflow: hidden;
overflow-x: auto;
padding: 8px;
@@ -516,8 +519,10 @@ a {
margin: 0 8px;
justify-content: center;
align-items: center;
+ font-size: 12px;
label {
margin-bottom: 0;
+ font-weight: normal;
}
select {
background-color: white;
diff --git a/resources/less/metager/pages/resultpage/result.less b/resources/less/metager/pages/resultpage/result.less
index 74154aa85..aa2c3502b 100644
--- a/resources/less/metager/pages/resultpage/result.less
+++ b/resources/less/metager/pages/resultpage/result.less
@@ -10,7 +10,9 @@
&:nth-child(1) {
margin-top: 0;
}
- .card;
+ @media(max-width: @screen-mobile){
+ .card;
+ }
margin: @padding-small-default 0px;
padding: 8px 15px 5px 15px;
width: 100%;
@@ -222,13 +224,19 @@
overflow: initial;
opacity: 1;
}
- li {
- font-size: @result-font-small;
- text-transform: uppercase;
- margin: 10px 0;
- }
- li>a {
- color: black;
+ ul {
+ display: flex;
+ li {
+ font-size: @result-font-small;
+ margin: 8px;
+ }
+ li:nth-child(1){
+ margin-left: 0;
+ }
+ li>a {
+ color: @link-color;
+ }
}
+
}
}
\ No newline at end of file
diff --git a/resources/less/metager/variables.less b/resources/less/metager/variables.less
index c66a306b4..77d098e19 100644
--- a/resources/less/metager/variables.less
+++ b/resources/less/metager/variables.less
@@ -9,7 +9,8 @@
@color-almost-black: mix(@color-white, @color-black, 10%);
@color-black: black;
// Default Background Color
-@background-color: #FAFAFA;
+@background-color: white;
+@background-color-mobile: #FAFAFA;
// Default Font
@metager-font: Arimo,
"Liberation Sans",
diff --git a/resources/views/layouts/result.blade.php b/resources/views/layouts/result.blade.php
index 6b1604e6f..8ab790357 100644
--- a/resources/views/layouts/result.blade.php
+++ b/resources/views/layouts/result.blade.php
@@ -67,6 +67,7 @@
<div class="result-options">
<input type="checkbox" id="result-toggle-{{$result->number}}" class="result-toggle" style="display: none">
<div class="options">
+ <div>
<ul class="option-list list-unstyled small">
<li class="js-only">
<a href="javascript:resultSaver({{ $result->number }});" class="saver">
--
GitLab