From 6062e559c3196b3c4814cd00adb860a993df2cf8 Mon Sep 17 00:00:00 2001 From: Benjamin Auder <benjamin.auder@somewhere> Date: Wed, 29 Apr 2020 23:28:58 +0200 Subject: [PATCH] Better footer + 'Code' translations could be useful later --- client/src/App.vue | 91 +++++++++++++++++++++-------------- client/src/translations/en.js | 1 + client/src/translations/es.js | 1 + client/src/translations/fr.js | 1 + 4 files changed, 57 insertions(+), 37 deletions(-) diff --git a/client/src/App.vue b/client/src/App.vue index db6170b5..8badb733 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -32,18 +32,20 @@ .row .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 footer - router-link.menuitem(to="/about") {{ st.tr["About"] }} - router-link.menuitem(to="/faq") F.A.Q. - a.menuitem(href="https://discord.gg/a9ZFKBe") - img.first(src="/images/icons/discord.svg") - a.menuitem(href="https://github.com/yagu0/vchess") - img(src="/images/icons/github.svg") - a.menuitem(href="https://www.facebook.com/Variants-Chess-Club-112565840437886") - img(src="/images/icons/facebook.svg") - a.menuitem(href="https://twitter.com/VchessC") - img.last(src="/images/icons/twitter.svg") - p.clickable(onClick="window.doClick('modalContact')") - | {{ st.tr["Contact"] }} + .left-part + router-link.menuitem(to="/about") {{ st.tr["About"] }} + router-link.menuitem(to="/faq") F.A.Q. + p.menuitem.clickable(onClick="window.doClick('modalContact')") + | {{ st.tr["Contact"] }} + .right-part + a.menuitem(href="https://discord.gg/a9ZFKBe") + img.first(src="/images/icons/discord.svg") + a.menuitem(href="https://github.com/yagu0/vchess") + img(src="/images/icons/github.svg") + a.menuitem(href="https://www.facebook.com/Variants-Chess-Club-112565840437886") + img(src="/images/icons/facebook.svg") + a.menuitem(href="https://twitter.com/VchessC") + img(src="/images/icons/twitter.svg") </template> <script> @@ -245,6 +247,26 @@ nav border-top: 0 footer + .left-part + display: inline-flex + justify-content: flex-end + width: 50% + & > p + display: inline-block + margin: 0 12px + @media screen and (max-width: 420px) + display: block + width: 100% + margin-bottom: 10px + text-align: center + .right-part + display: inline-flex + justify-content: flex-start + width: 50% + @media screen and (max-width: 420px) + display: block + width: 100% + text-align: center height: 45px border: 1px solid #ddd box-sizing: border-box @@ -254,31 +276,26 @@ footer padding: 0 display: inline-flex align-items: center - justify-content: center - & > .router-link-exact-active + & > .left-part > .router-link-exact-active color: #388e3c !important text-decoration: none - & > .menuitem - margin: 0 12px - display: inline-flex; - align-self: center; - &:link - color: #2c3e50 - text-decoration: none - &:visited, &:hover - color: #2c3e50 - text-decoration: none - & > img - height: 1.5em - display: inline-block - margin: 0 - &.first - margin-left: 5px - &.last - margin-right: 5px - & > p - display: inline-block - margin: 0 12px +footer .menuitem + margin: 0 12px + display: inline-flex + align-self: center + &:link + color: #2c3e50 + text-decoration: none + &:visited, &:hover + color: #2c3e50 + text-decoration: none +footer > .right-part > a.menuitem > img + height: 1.5em + display: inline-block + margin: 0 + &.first + @media screen and (min-width: 421px) + margin-left: 5px @media screen and (max-width: 767px) footer @@ -286,9 +303,9 @@ footer @media screen and (max-width: 420px) .container - min-height: calc(100vh - 55px) + min-height: calc(100vh - 70px) footer - height: 55px + height: 70px display: block padding: 5px 0 </style> diff --git a/client/src/translations/en.js b/client/src/translations/en.js index b80bc282..909a3e35 100644 --- a/client/src/translations/en.js +++ b/client/src/translations/en.js @@ -28,6 +28,7 @@ export const translations = { "Challenge declined": "Challenge declined", "Chat here": "Chat here", "Clear history": "Clear history", + Code: "Code", "Connection token sent. Check your emails!": "Connection token sent. Check your emails!", Contact: "Contact", "Correspondance challenges": "Correspondance challenges", diff --git a/client/src/translations/es.js b/client/src/translations/es.js index 5c308d9a..08aa2449 100644 --- a/client/src/translations/es.js +++ b/client/src/translations/es.js @@ -28,6 +28,7 @@ export const translations = { "Challenge declined": "DesafÃo rechazado", "Chat here": "Chat aquÃ", "Clear history": "Clara historia", + Code: "Código", "Connection token sent. Check your emails!": "Token de conexión enviado. ¡Revisa tus correos!", Contact: "Contacto", "Correspondance challenges": "DesafÃos por correspondencia", diff --git a/client/src/translations/fr.js b/client/src/translations/fr.js index e10a9f58..f14632e3 100644 --- a/client/src/translations/fr.js +++ b/client/src/translations/fr.js @@ -28,6 +28,7 @@ export const translations = { "Challenge declined": "Défi refusé", "Chat here": "Chattez ici", "Clear history": "Effacer l'historique", + Code: "Code", "Connection token sent. Check your emails!": "Token de connection envoyé. Allez voir vos emails !", Contact: "Contact", "Correspondance challenges": "Défis par correspondance", -- 2.44.0