Skip to content
GitLab
Commit 70875eee authored by Thibaut Broggi's avatar Thibaut Broggi
Browse files

Merge branch '5-make-it-responsive' into 'master' 

Resolve "Make it responsive"

Closes #5

See merge request !4
parents 60f283e5 5bbabead
Pipeline #1383 passed with stage
in 36 seconds
Expand all Hide whitespace changes
Inline Side-by-side
static/bootstrap-grid.min.css deleted 100644 → 0
View file @ 60f283e5
This diff is collapsed.
static/canvas.js
View file @ 70875eee
......@@ -171,16 +171,19 @@ let randomElement = function(selector) {
return elems[Math.trunc(Math.random() * elems.length)];
}
document.getElementById('randomize').onclick = function(e) {
randomElement('input[name="bg-color"]').checked = true;
do {
randomElement('input[name="fg-color"]').checked = true;
} while (document.querySelector('.colorpicker input[type="radio"][name="bg-color"]:checked').value
== document.querySelector('.colorpicker input[type="radio"][name="fg-color"]:checked').value);
randomElement('input[name="font"]').checked = true;
randomElement('input[name="icon"]').checked = true;
document.getElementById('step2value').value = document.getElementById('step2value').innerText = sampleTexts[Math.trunc(Math.random() * sampleTexts.length)];
if (document.getElementById('signature').value.match(/(\t$|^$)/))
document.getElementById('signature').value = sampleSignatures[Math.trunc(Math.random() * sampleSignatures.length)];
draw();
let randomButtons = document.querySelectorAll('.randomize');
for (let i = 0; i < randomButtons.length; ++i) {
randomButtons[i].onclick = function(e) {
randomElement('input[name="bg-color"]').checked = true;
do {
randomElement('input[name="fg-color"]').checked = true;
} while (document.querySelector('.colorpicker input[type="radio"][name="bg-color"]:checked').value
== document.querySelector('.colorpicker input[type="radio"][name="fg-color"]:checked').value);
randomElement('input[name="font"]').checked = true;
randomElement('input[name="icon"]').checked = true;
document.getElementById('step2value').value = document.getElementById('step2value').innerText = sampleTexts[Math.trunc(Math.random() * sampleTexts.length)];
if (document.getElementById('signature').value.match(/(\t$|^$)/))
document.getElementById('signature').value = sampleSignatures[Math.trunc(Math.random() * sampleSignatures.length)];
draw();
}
}
static/style.css
View file @ 70875eee
html {
box-sizing: border-box;
}
*, ::after, ::before {
box-sizing: inherit;
}
body {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
color: #497ed5;
min-height: 100vh;
font-family: 'FiraSans';
background-color: #ebf3ff;
}
h2 {
......@@ -14,21 +19,49 @@ h2 {
}
nav {
width: 7vw;
background-color: #2f5188;
color: white;
text-align: center;
font-size: 3vw;
min-height: 100vh;
position: fixed;
top: 0;
left: 0;
height: 12vw;
z-index: 2;
font-size: 8vw;
display: flex;
flex-direction: row;
}
nav > * {
display: inline-block;
width: 7vw;
height: 7vw;
width: 16.66vw;
padding-top: 2vw;
cursor: pointer;
border-bottom: 1px solid #3b68b0;
}
nav > *:not(:nth-child(1)) {
border-left: 1px solid #3b68b0;
}
@media (min-width: 992px) {
nav {
flex-direction: column;
width: 7vw;
min-height: 100vh;
font-size: 3vw;
}
nav > * {
width: 7vw;
height: 7vw;
border-bottom: 1px solid #3b68b0;
border-left: initial !important;
}
#inputs {
width: 50%;
margin-left: 7vw;
}
}
nav > .active-tab {
......@@ -40,21 +73,41 @@ a {
color: white;
}
.white-button, .blue-button {
display: inline-block;
cursor: pointer;
height: 50px;
text-align: center;
padding-left: 2em;
padding-right: 2em;
font-weight: normal;
line-height: 50px;
}
.blue-button {
background-color: #497ed5;
color: white;
border: 1px solid transparent;
}
.white-button {
background-color: white;
color: #497ed5;
border: 1px solid #497ed5;
}
div#inputs {
position: absolute;
top: 0;
left: 7vw;
width: 30vw;
height: 100%;
background-color: white;
}
.colorpicker input[type="radio"] {
display: none;
.colorpicker {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.colorpicker > div > div {
margin-bottom: 1em;
.colorpicker input[type="radio"] {
display: none;
}
.colorpicker input[type="radio"] + label {
......@@ -86,6 +139,22 @@ div#inputs {
border: 3px solid transparent;
}
@media (max-width: 991px) {
.colorpicker, .iconpicker {
flex-wrap: nowrap !important;
overflow-x: auto;
}
.colorpicker label, .iconpicker label {
flex-shrink: 0;
}
.iconpicker {
height: 110px;
overflow-y: hidden !important;
}
}
div[id^="step"] {
display: none;
}
......@@ -102,7 +171,7 @@ div#inputs > div:first-child {
border-bottom: 1px solid #dde5f1;
}
div#inputs > div:first-child > button#randomize {
div#inputs > div:first-child > button.randomize {
width: 60%;
}
......@@ -112,48 +181,90 @@ div.navButtons {
margin-top: 2em;
}
div.navButtons > a, a#save-image, a#tweet-button, button {
display: inline-block;
cursor: pointer;
height: 50px;
line-height: 50px;
text-align: center;
background-color: white;
color: inherit;
font-size: inherit;
border: 1px solid #497ed5;
body {
display: flex;
flex-direction: row;
}
a.nextButton, a#tweet-button {
color: white !important;
background-color: #497ed5 !important;
width: 200px;
}
@media (max-width: 991px) {
#credits {
display: none;
}
a#tweet-button {
width: auto;
padding-left: 1em;
padding-right: 1em;
font-weight: normal;
body {
flex-direction: column;
}
#inputs {
margin-top: 12vw;
padding-bottom: 20px;
}
#inputs > div:nth-child(1) {
display: none !important;
}
.navButtons {
display: none;
}
textarea, input[type="text"] {
width: 90% !important;
margin-left: 5% !important;
}
textarea {
height: 3.5em;
}
main > div:first-child {
margin: auto;
}
h2.title-big {
display: none;
}
div#step3 > div {
max-height: 150px;
overflow-x: auto;
}
}
a.prevButton {
width: 50px;
@media (max-width: 600px) {
main > div:first-child > a > .text {
display: none;
}
}
main {
position: absolute;
top: 0;
left: 37vw;
right: 0;
background-color: #ebf3ff;
min-height: 100%;
padding-left: 40px;
@media (min-width: 992px) {
main {
min-height: 100vh;
padding-left: 40px;
}
input#step2value {
height: 200px;
}
main > div > #output {
margin-top: 7vw;
}
h2.title-small, main .randomize {
display: none;
}
}
main > div:nth-child(1) {
text-align: right;
width: 600px;
max-width: 100%;
}
main #output {
max-width: 100%;
}
main a {
......@@ -161,65 +272,43 @@ main a {
font-weight: bold;
}
main > div > #output {
margin-top: 7vw;
display: block;
}
a#save-image {
padding-left: 2em;
padding-right: 2em;
margin-top: 2em;
}
main > #credits {
margin-top: 50px;
}
div#step2 > textarea {
margin-left: 10%;
width: 80%;
padding: 20px;
}
div#step3 > div:nth-of-type(1),
div#step4 > div:nth-of-type(1) {
margin-left: 10%;
width: 80%;
background-color: #ebf3ff;
}
div#step4 > div:nth-of-type(1) {
max-height: 600px;
overflow-y: scroll;
}
div#step4 > div:nth-of-type(1) .row > label {
background: #ebf3ff url('./imgs/icon_select.svg') no-repeat;
background-size: 400%;
height: 25vw;
}
@media (min-width: 992px) {
div#step3 > div:nth-of-type(1),
div#step4 > div:nth-of-type(1) {
margin-left: 10%;
width: 80%;
}
@media (min-width: 576px) {
div#step4 > div:nth-of-type(1) .row > label {
height: 12.5vw;
a#save-image {
margin-top: 2em;
}
}
@media (min-width: 992px) {
div#step4 > div:nth-of-type(1) .row > label {
height: 8.33vw;
}
div#step4 > div:nth-of-type(1) {
max-height: 500px;
overflow-y: scroll;
}
@media (min-width: 1200px) {
div#step4 > div:nth-of-type(1) .row > label {
height: 6.25vw;
}
.iconpicker {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
div#step4 > div:nth-of-type(1) .row > label:nth-type(2) {
background: -100px 0 important!;
.iconpicker > label {
background: #ebf3ff url('./imgs/icon_select.svg') no-repeat;
background-size: 400%;
height: 100px;
width: 100px;
}
div#step3 > div:nth-of-type(1) > input[type="radio"],
......@@ -241,14 +330,11 @@ div#step4 input[type="radio"]:checked + label {
background-color: #497ed5;
}
div#step5 > input[type="text"]#signature {
textarea, input[type="text"] {
display: block;
width: 80%;
margin-left: 10%;
padding: 1em;
}
textarea, input[type="text"] {
background-color: #ebf3ff;
color: inherit;
font-size: 16px;
......
views/index.ejs
View file @ 70875eee
This diff is collapsed.
Supports Markdown
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