Add buttons to change language

parent 5dac303d
Pipeline #1501 passed with stage
in 40 seconds
...@@ -10,6 +10,8 @@ ...@@ -10,6 +10,8 @@
"Choisissez votre police": "Choose your font", "Choisissez votre police": "Choose your font",
"Choisissez votre icône": "Choose your icon", "Choisissez votre icône": "Choose your icon",
"Signez votre création ! (optionnel)": "Sign your creation! (optional)", "Signez votre création ! (optionnel)": "Sign your creation! (optional)",
"Français": "French",
"Anglais": "English",
"GÉNÉRER": "GENERATE", "GÉNÉRER": "GENERATE",
"Actualiser": "Update", "Actualiser": "Update",
"Tweet": "Tweet", "Tweet": "Tweet",
......
...@@ -51,6 +51,32 @@ nav > :nth-child(1) > img { ...@@ -51,6 +51,32 @@ nav > :nth-child(1) > img {
margin: 1vw; margin: 1vw;
} }
#langPicker {
display: block;
text-align: right;
height: 7vw;
}
#enButton, #frButton {
display: inline-block;
cursor: pointer;
border: initial;
height: 30px;
}
html[lang="en"] #enButton,
html[lang="fr"] #frButton {
font-weight: bold;
color: black;
background-color: inherit;
}
html[lang="en"] #frButton,
html[lang="fr"] #enButton {
background-color: #497ed5;
color: white;
}
@media (min-width: 992px) { @media (min-width: 992px) {
nav { nav {
flex-direction: column; flex-direction: column;
...@@ -85,6 +111,12 @@ nav > :nth-child(1) > img { ...@@ -85,6 +111,12 @@ nav > :nth-child(1) > img {
} }
} }
@media (max-width: 991px) {
#langPicker {
display: none;
}
}
nav > .active-tab { nav > .active-tab {
background-color: #3b68b0; background-color: #3b68b0;
} }
...@@ -251,7 +283,7 @@ body, form { ...@@ -251,7 +283,7 @@ body, form {
height: 3.5em; height: 3.5em;
} }
main > div:first-child { main > div:nth-child(2) {
margin: auto; margin: auto;
} }
...@@ -267,12 +299,12 @@ body, form { ...@@ -267,12 +299,12 @@ body, form {
@media (max-width: 600px) { @media (max-width: 600px) {
main > div:first-child > a { main > div:nth-child(2) > a {
padding-left: 1.5em; padding-left: 1.5em;
padding-right: 1.5em; padding-right: 1.5em;
} }
main > div:first-child button > .text { main > div:nth-child(2) button > .text {
display: none; display: none;
} }
...@@ -293,16 +325,12 @@ body, form { ...@@ -293,16 +325,12 @@ body, form {
height: 200px; height: 200px;
} }
main > div > #output, noscript > img {
margin-top: 7vw;
}
h2.title-small, main .randomize { h2.title-small, main .randomize {
display: none; display: none;
} }
} }
main > div:nth-child(1) { main > div:nth-child(2) {
text-align: right; text-align: right;
width: 600px; width: 600px;
max-width: 100%; max-width: 100%;
......
...@@ -105,6 +105,11 @@ html(lang=locale) ...@@ -105,6 +105,11 @@ html(lang=locale)
button(type="submit" formtarget="_self" formaction="").blue-button button(type="submit" formtarget="_self" formaction="").blue-button
=_('GÉNÉRER') =_('GÉNÉRER')
main main
div#langPicker
button(type="submit" name="lang" value="fr" formaction="" formtarget="_self")#frButton
=_('Français')
button(type="submit" name="lang" value="en" formaction="" formtarget="_self")#enButton
=_('Anglais')
div div
noscript noscript
img(src=protocol + "://" + host + "/" + subdir + "generate.png?" + imageParams alt="preview" width="600") img(src=protocol + "://" + host + "/" + subdir + "generate.png?" + imageParams alt="preview" width="600")
......
Markdown is supported
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