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;
front/src/css/main.css
+17 -5
View File
@@ -1,5 +1,10 @@
html {
margin: 100px 50px;
margin: 35px 5px;
}
@media (min-width: 640px) {
html {
margin: 100px 50px;
}
}
body {
margin: 0 auto;
@@ -27,16 +32,23 @@ h1 {
margin-top: 2em;
}
.resultsMenu .menuItem {
font-size: 0.8em;
display: inline-block;
margin: 1em;
width: 8em;
width: 7em;
height: 7em;
color: #fff;
border: 2px solid #fff;
border-radius: 0.5em;
cursor: pointer;
text-decoration: none;
}
@media (min-width: 640px) {
.resultsMenu .menuItem {
font-size: 1em;
margin: 1em;
width: 8em;
border: 2px solid #fff;
border-radius: 0.5em;
}
}
.resultsMenu .menuItem svg {
fill: #fff;
}
front/src/css/rule.css
+23 -14
View File
@@ -2,7 +2,6 @@
text-align: center;
}
.rule .ruleTable {
display: table;
border-spacing: 1em;
width: 90%;
margin: 2em auto;
@@ -10,16 +9,20 @@
border: 1px dashed #666;
border-radius: 0.5em;
}
.rule .ruleTable > div {
display: table-cell;
vertical-align: middle;
}
.rule .ruleTable .left {
width: 33%;
font-weight: bold;
}
.rule .ruleTable .right {
width: 67%;
@media (min-width: 820px) {
.rule .ruleTable {
display: table;
}
.rule .ruleTable > div {
display: table-cell;
vertical-align: middle;
}
.rule .ruleTable .left {
width: 33%;
}
.rule .ruleTable .right {
width: 67%;
}
}
.rule .score {
font-size: 2.5em;
@@ -27,7 +30,7 @@
height: 2em;
width: 2em;
border-radius: 0.5em;
margin: 0 auto 0.5em;
margin: 0 auto 0.25em;
}
.rule h3 {
margin-bottom: 0em;
@@ -67,7 +70,13 @@
border-spacing: 0 0.25em;
margin: 0 auto;
min-width: 10%;
max-width: 90%;
font-size: 0.875em;
}
@media (min-width: 820px) {
.rule .offendersTable {
max-width: 90%;
font-size: 1em;
}
}
.rule .offendersTable > div {
display: table-row;
@@ -75,7 +84,7 @@
.rule .offendersTable > div > div {
display: table-cell;
background: #f2f2f2;
padding: 0 1em;
padding: 0 0.25em;
word-wrap: break-word;
word-break: break-all;
}
front/src/css/screenshot.css
+11 -1
View File
@@ -2,6 +2,16 @@
text-align: center;
}
.screenshot .screenshotWrapper {
font-size: 2.08333333em;
font-size: 1.2em;
margin-bottom: 0.5em;
}
@media (min-width: 420px) {
.screenshot .screenshotWrapper {
font-size: 1.6em;
}
}
@media (min-width: 640px) {
.screenshot .screenshotWrapper {
font-size: 2.08333333em;
}
}