WEBDIENSTE/YellowLabTools
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Responsive design for mobile (finally)

Browse Source
This commit is contained in:
Gaël Métais
2020-10-05 12:49:26 +02:00
parent 93b81493c0
commit e2eacbc051
10 changed files with 249 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/src/css/dashboard.css
+81 -29
View File
@@ -5,15 +5,8 @@
text-align: center;
}
.summary .globalScore {
display: table;
width: 60%;
margin: 3em auto;
}
.summary .globalScore > div {
display: table-cell;
width: 50%;
vertical-align: middle;
}
.summary .globalScore .globalGrade {
margin: 0.5 auto;
width: 2.5em;
@@ -21,12 +14,10 @@
line-height: 2.5em;
border-radius: 0.5em;
font-size: 3em;
font-weight: bold;
vertical-align: middle;
}
.summary .globalScore .on100 {
font-size: 1.2em;
font-weight: bold;
margin: 0.5em 0 1em;
}
.summary .globalScore .screenshotWrapper:hover {
@@ -54,28 +45,63 @@
top: 1.5em;
left: 0.9em;
}
@media (min-width: 820px) {
.summary .globalScore {
width: 65%;
display: table;
}
.summary .globalScore > div {
display: table-cell;
width: 50%;
vertical-align: middle;
}
}
.summary .notations {
width: 100%;
display: table;
width: 80%;
margin: 0 10% 1.5em;
border-spacing: 1em;
margin: 0 0 1.5em;
border-spacing: 0 1em;
}
@media (min-width: 820px) {
.summary .notations {
width: 80%;
margin: 0 10% 1.5em;
border-spacing: 1em;
}
}
.summary .notations > div {
display: table-row;
}
.summary .notations > div > div {
display: table-cell;
height: 2.5em;
vertical-align: middle;
}
@media (min-width: 820px) {
.summary .notations > div > div {
display: table-cell;
height: 2.5em;
}
}
.summary .notations .category {
font-weight: bold;
text-align: center;
width: 20%;
width: 50%;
float: left;
text-align: left;
margin: 1em 0.25em;
}
@media (min-width: 820px) {
.summary .notations .category {
width: 20%;
text-align: center;
float: none;
}
}
.summary .notations .criteria {
font-weight: normal;
width: 75%;
}
@media (min-width: 820px) {
.summary .notations .criteria {
width: 75%;
}
}
.summary .notations .A.categoryScore,
.summary .notations .B.categoryScore,
@@ -87,10 +113,23 @@
width: 2.5em;
max-width: 2.5em;
min-width: 2.5em;
font-size: 2em;
margin: 0.2em;
font-size: 1.5em;
text-align: center;
border-radius: 0.5em;
font-weight: bold;
float: right;
}
@media (min-width: 820px) {
.summary .notations .A.categoryScore,
.summary .notations .B.categoryScore,
.summary .notations .C.categoryScore,
.summary .notations .D.categoryScore,
.summary .notations .E.categoryScore,
.summary .notations .F.categoryScore,
.summary .notations .NA.categoryScore {
float: none;
font-size: 2em;
}
}
.summary .notations .grade .A,
.summary .notations .grade .B,
@@ -134,7 +173,6 @@
}
.summary .notations .criteria .result {
width: 18%;
font-weight: bold;
white-space: nowrap;
text-align: center;
vertical-align: middle;
@@ -148,12 +186,18 @@
margin: -2px 0;
}
.summary .notations .criteria .info {
width: 2%;
text-align: center;
vertical-align: middle;
background: #FFF;
padding-left: 0.1em;
padding-right: 0.1em;
display: none;
}
@media (min-width: 820px) {
.summary .notations .criteria .info {
display: table-cell;
width: 2%;
text-align: center;
vertical-align: middle;
background: #FFF;
padding-left: 0.1em;
padding-right: 0.1em;
}
}
.summary .notations .criteria .info svg {
fill: transparent;
@@ -161,8 +205,16 @@
.summary .fromShare {
margin-bottom: 3em;
}
.summary .tweet {
display: none;
}
@media (min-width: 820px) {
.summary .tweet {
display: block;
}
}
.summary .tweet .tweetText {
color: #413;
color: #212240;
background: #F2F2F2;
border: none;
width: 25em;
@@ -172,7 +224,7 @@
}
.summary .tweet .tweetButton,
.summary .tweet .linkedinButton {
color: #413;
color: #212240;
background: #F2F2F2;
margin-right: 0;
}
@@ -187,7 +239,7 @@
.summary .sponsor {
font-size: 0.9em;
margin-bottom: 4em;
color: #413;
color: #ffa319;
}
.summary .sponsor a {
color: inherit;