KayFaraday
/
Zaimki
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[design] redesign footer

This commit is contained in:
Avris 2021-12-08 17:21:27 +01:00
parent e0336f26ad
commit 08718d65dc
23 changed files with 211 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
assets/style.scss
View File

@ -50,17 +50,26 @@ html {
}
body {
margin: 2rem;
background-image: linear-gradient(74deg, rgba(236, 236, 236,0.02) 0%, rgba(236, 236, 236,0.02) 13%,transparent 13%, transparent 64%,rgba(55, 55, 55,0.02) 64%, rgba(55, 55, 55,0.02) 71%,rgba(239, 239, 239,0.02) 71%, rgba(239, 239, 239,0.02) 100%),linear-gradient(170deg, rgba(8, 8, 8,0.02) 0%, rgba(8, 8, 8,0.02) 1%,transparent 1%, transparent 60%,rgba(9, 9, 9,0.02) 60%, rgba(9, 9, 9,0.02) 80%,rgba(198, 198, 198,0.02) 80%, rgba(198, 198, 198,0.02) 100%),linear-gradient(118deg, rgba(134, 134, 134,0.02) 0%, rgba(134, 134, 134,0.02) 30%,transparent 30%, transparent 43%,rgba(85, 85, 85,0.02) 43%, rgba(85, 85, 85,0.02) 47%,rgba(103, 103, 103,0.02) 47%, rgba(103, 103, 103,0.02) 100%),linear-gradient(249deg, rgba(178, 178, 178,0.02) 0%, rgba(178, 178, 178,0.02) 8%,transparent 8%, transparent 47%,rgba(161, 161, 161,0.02) 47%, rgba(161, 161, 161,0.02) 61%,rgba(19, 19, 19,0.02) 61%, rgba(19, 19, 19,0.02) 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
min-height: 100vh;
}
main {
margin: 2rem;
}
.container {
margin: 0 auto;
width: 100%;
max-width: min(90vw, 920px);
}
.container-wide {
margin: 0 auto;
width: 100%;
max-width: min(90vw, 1300px);
}
section {
margin: 2*$spacer 0;
}

2
components/Authors.vue
View File

@ -5,6 +5,8 @@
<Icon v="collective-logo.svg" :class="['invertible', bigteam ? 'hover-invertible' : '']"/>
<T>contact.team.name</T>
</nuxt-link>
<br/>
<small><T>contact.team.description</T></small>
</li>
<li v-if="authors === undefined">
<Spinner/>

2
components/EasterEgg.vue
View File

@ -44,7 +44,7 @@ export default {
async keypressed(e) {
this.lastCharacters = [...this.lastCharacters.slice(-9), e.key];
if (this.lastCharacters.join(',') === konami.join(',')) {
await this.$alert('Gratulacje! Udało Ći śę odblokować easter egga!<br/>Szczeguły w stopce strony!');
await this.$alert('Gratulacje! Udało Ći śę odblokować easter egga!<br/>Szczeguły w stopce strony, u samego dołu!');
this.setSpelling('futurysci');
}
},

176
components/Footer.vue
View File

@ -1,93 +1,115 @@
<template>
<footer v-if="config.header">
<Separator icon="user-friends"/>
<div class="d-flex flex-column flex-md-row justify-content-around mt-4 mb-5">
<div class="small text-center d-flex flex-column justify-content-center">
<p class="mb-2">
<footer v-if="config.header" class="bg-light border-top shadow mt-5">
<div class="container-wide py-5">
<div class="row">
<div class="col-12 col-md-6 col-lg-4 small">
<p class="h6 mb-2">
<T>contact.authors</T><T>quotation.colon</T>
</p>
<Authors/>
<p>
<T>footer.license</T>
</p>
</div>
<div class="text-center d-flex flex-column justify-content-center">
<div class="my-2">
<p class="small mb-0">
<Icon v="users"/>
<T>footer.links</T><T>quotation.colon</T>
</p>
<div class="mb-3" :class="['d-flex', config.links.socials.length > 2 ? 'flex-column' : 'flex-row', 'justify-content-center', 'align-items-center']">
<span>
<SquareButton
v-for="link in [...config.contact.contacts, ...config.links.socials]" :key="link.url"
:link="link.url"
:aria-label="link.icon"
>
<Icon :v="link.icon" :set="link.iconSet || 'l'"/>
</SquareButton>
</span>
<span>
<SquareButton link="https://avris.it" aria-label="avris.it">
<img src="~assets/avris.svg" alt="Avris"/>
</SquareButton>
<SquareButton v-for="s in config.support.links" :key="s.url" :link="s.url" :aria-label="s.headline">
<Icon :v="s.icon" :set="s.iconSet || 'l'"/>
</SquareButton>
<SquareButton link="https://gitlab.com/Avris/Zaimki" aria-label="GitLab">
<Icon v="gitlab" set="b"/>
</SquareButton>
</span>
</div>
</div>
<div class="my-2">
<ul v-if="config.user.enabled" class="list-inline small">
<li v-if="config.faq.enabled && config.links.split" class="list-inline-item">
<nuxt-link :to="`/${config.faq.route}`">
<Icon v="map-marker-question"/>
<T>faq.header</T>
</nuxt-link>
</li>
<li class="list-inline-item">
<nuxt-link v-if="config.api !== null" to="/api">
<Icon v="laptop-code"/>
<T>api.header</T>
</nuxt-link>
<LocaleLink v-else locale="en" link="/api">
<Icon v="laptop-code"/>
<T>api.header</T>
</LocaleLink>
</li>
</ul>
<ul v-if="config.user.enabled" class="list-inline small">
<li class="list-inline-item">
<nuxt-link :to="`/${config.user.termsRoute}`">
<Icon v="gavel"/>
<T>terms.header</T>
</nuxt-link>
</li>
<li class="list-inline-item">
<nuxt-link :to="`/license`">
<Icon v="gavel"/>
OQL
</nuxt-link>
</li>
</ul>
<p class="small">
<div class="col-12 col-md-6 col-lg-4 small">
<p class="h6 mb-2">
<T>footer.links</T><T>quotation.colon</T>
</p>
<ul class="list-unstyled mb-4">
<li v-if="config.faq.enabled" class="mb-2">
<nuxt-link :to="`/${config.faq.route}`">
<Icon v="map-marker-question"/>
<T>faq.headerLong</T>
</nuxt-link>
</li>
<li v-for="link in [...config.contact.contacts, ...config.links.socials]" :key="link.url" class="mb-2">
<a :href="link.url">
<Icon :v="link.icon" :set="link.iconSet || 'l'"/>
{{link.headline}}
</a>
</li>
</ul>
<p class="h6 mb-2">
<T>support.header</T><T>quotation.colon</T>
</p>
<ul class="list-unstyled mb-4">
<li v-for="link in supportLinks()" :key="link.url" class="mb-2">
<a :href="link.url">
<Icon :v="link.icon" :set="link.iconSet || 'l'"/>
{{link.headline}}
</a>
</li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-4 small">
<p class="h6 mb-2">
<T>footer.legal</T><T>quotation.colon</T>
</p>
<ul class="list-unstyled mb-4">
<li class="mb-2">
<nuxt-link :to="`/${config.user.termsRoute}`">
<Icon v="gavel"/>
<T>terms.header</T>
</nuxt-link>
</li>
<li class="mb-2">
<Icon v="gavel"/>
<T>footer.license</T>
</li>
<li class="mb-2">
<Icon v="tools"/>
Using <a href="https://www.gradientmagic.com/" target="_blank" rel="noopener">gradientmagic.com</a>
and <a href="https://twemoji.twitter.com/" target="_blank" rel="noopener">Twemoji</a>
</p>
</div>
</li>
</ul>
<p class="h6 mb-2">
<T>footer.technical</T><T>quotation.colon</T>
</p>
<ul class="list-unstyled mb-4">
<li class="mb-2">
<nuxt-link v-if="config.api !== null" to="/api">
<Icon v="laptop-code"/>
<T>api.header</T>
</nuxt-link>
<LocaleLink v-else locale="en" link="/api">
<Icon v="laptop-code"/>
<T>api.header</T>
</LocaleLink>
</li>
<li class="mb-2">
<a href="https://gitlab.com/Avris/Zaimki" target="_blank" rel="noopener">
<Icon v="gitlab" set="b"/>
Source code
</a>
</li>
<li class="mb-2">
<a href="https://avris.it" target="_blank" rel="noopener">
<Icon v="avris.svg"/>
avris.it
</a>
</li>
</ul>
<p class="h6 mb-2">
<T>share</T><T>quotation.colon</T>
</p>
<div class="my-2">
<Share/>
<Share nolabel shareApiSeparate/>
</div>
<div class="my-2">
<ModeSwitch/>
</div>
</div>
</div>
<EasterEgg/>
<EasterEgg/>
</div>
</footer>
</template>
<script>
import support from '../plugins/support';
export default {
mixins: [support],
}
</script>

6
components/Share.vue
View File

@ -1,10 +1,10 @@
<template>
<div>
<p class="small mb-0">
<p class="small mb-0" v-if="!nolabel">
<Icon v="share"/>
<T>share</T><T>quotation.colon</T>
</p>
<button class="btn btn-primary" v-if="hasShareApi" @click="shareApi">
<button :class="['btn btn-primary m-1', shareApiSeparate ? 'd-block' : '']" v-if="hasShareApi" @click="shareApi">
<Icon v="share"/>
<span class="d-none d-md-inline"><T>share</T></span>
</button>
@ -59,6 +59,8 @@
props: {
title: { default: 'Zaimki.pl' },
networks: { default: _ => ['twitter', 'reddit', 'facebook', 'telegram', 'whatsapp', 'messenger'] },
nolabel: { type: Boolean },
shareApiSeparate: { type: Boolean },
},
data() {
return {

13
components/Support.vue
View File

@ -6,7 +6,7 @@
</h3>
<p><T>support.description</T></p>
<p>
<a v-for="link in [...links, ...config.support.links]" :key="link.url"
<a v-for="link in supportLinks()" :key="link.url"
:href="link.url" target="_blank" rel="noopener"
class="btn btn-outline-primary border m-1">
<Icon :v="link.icon" :set="link.iconSet || 'l'"/>
@ -17,14 +17,9 @@
</template>
<script>
import support from '../plugins/support';
export default {
data() {
return {
links: [
{headline: 'Ko-Fi', url: 'https://ko-fi.com/radajezykaneutralnego', icon: 'coffee', },
{headline: 'PayPal', url: 'https://paypal.me/RJNeutralnego', icon: 'paypal', iconSet: 'b'},
]
}
}
mixins: [support],
}
</script>

4
layouts/default.vue
View File

@ -7,9 +7,7 @@
<ScrollButton/>
</main>
</div>
<div class="container">
<Footer/>
</div>
<Footer/>
<DialogueBox ref="dialogue"/>
<Lightbox/>
</div>

4
locale/_base/translations.suml
View File

@ -589,7 +589,9 @@ crud:
footer:
license: >
{https://gitlab.com/Avris/Zaimki=Source code} and content are licensed under {/license=OQL}.
links: 'Contact, social media, support'
links: 'Contact, social media'
legal: 'Legal'
technical: 'Technical'
notFound:
message: 'Page was not found'

8
locale/de/translations.suml
View File

@ -351,6 +351,10 @@ contact:
team:
name: 'Das „Rat für neutrale Sprache“ Kollektiv'
nameShort: 'Kollektiv'
# TODO
# We are a queer collective dedicated to assembling, researching, shaping and promoting
# gender neutral and nonbinary language.
# We also support actions towards equality and social justice.
description:
- >
{https://pronouns.page=Pronouns.page} und damit verbundene Initiativen sind vom Kollektiv „Rat für neutrale Sprache“ erstellt.
@ -481,7 +485,9 @@ crud:
footer:
license: >
{https://gitlab.com/Avris/Zaimki=Der Quellcode} und das Inhalt sind unter der {/license=OQL} Lizenz veröffentlicht.
links: 'Kontakt, Social Media, Support'
links: 'Kontakt, Social Media'
legal: 'Legal' # TODO
technical: 'Technical' # TODO
notFound:
message: 'Seite wurde nicht gefunden'

4
locale/en/translations.suml
View File

@ -590,7 +590,9 @@ crud:
footer:
license: >
{https://gitlab.com/Avris/Zaimki=Source code} and content are licensed under {/license=OQL}.
links: 'Contact, social media, support'
links: 'Contact & social media'
legal: 'Legal'
technical: 'Technical'
notFound:
message: 'Page was not found'

8
locale/es/translations.suml
View File

@ -363,6 +363,10 @@ contact:
team:
name: 'Cooperativa “Consejo de Lenguaje Neutro”'
nameShort: 'Cooperativa'
# TODO
# We are a queer collective dedicated to assembling, researching, shaping and promoting
# gender neutral and nonbinary language.
# We also support actions towards equality and social justice.
description:
- >
{https://pronouns.page=Pronouns.page} e iniciativas relacionadas
@ -494,7 +498,9 @@ crud:
footer:
license: >
{https://gitlab.com/Avris/Zaimki=El código fuente} y el contenido estan publicado bajo la licencia {/license=OQL}.
links: 'Contacto, redes sociales, apoyo'
links: 'Contacto, redes sociales'
legal: 'Legal' # TODO
technical: 'Technical' # TODO
notFound:
message: 'Página no encontrada'

8
locale/fr/translations.suml
View File

@ -356,6 +356,10 @@ contact:
team:
name: 'Le collectif du « Conseil du Langage Neutre »'
nameShort: 'Le collectif'
# TODO
# We are a queer collective dedicated to assembling, researching, shaping and promoting
# gender neutral and nonbinary language.
# We also support actions towards equality and social justice.
description:
- >
{https://pronouns.page=Pronouns.page} et les initiatives liées
@ -487,7 +491,9 @@ crud:
footer:
license: >
{https://gitlab.com/Avris/Zaimki=Kod źródłowy} et le contenu sont sous licence {/license=OQL}.
links: 'Contact, réseaux sociaux, soutien'
links: 'Contact, réseaux sociaux'
legal: 'Legal' # TODO
technical: 'Technical' # TODO
notFound:
message: 'La page demandée n’a pas été trouvée'

8
locale/gl/translations.suml
View File

@ -358,6 +358,10 @@ contact:
team:
name: 'O coletivo "Conselho da Língua Neutra"'
nameShort: 'O coletivo'
# TODO
# We are a queer collective dedicated to assembling, researching, shaping and promoting
# gender neutral and nonbinary language.
# We also support actions towards equality and social justice.
description:
- >
{https://pronouns.page=Pronouns.page} e iniciativas relacionadas
@ -490,7 +494,9 @@ crud:
footer:
license: >
{https://gitlab.com/Avris/Zaimki=O código-fonte} e o conteúdo são licenciados sob a licença {/license=OQL}.
links: 'Contato, redes sociais, apoio'
links: 'Contato, redes sociais'
legal: 'Legal' # TODO
technical: 'Technical' # TODO
notFound:
message: 'Página não encontrada'

4
locale/ja/translations.suml
View File

@ -493,7 +493,9 @@ crud:
footer:
license: >
{https://gitlab.com/Avris/Zaimki=ソースコード}と内容は{/license=OQL}の下でライセンスします。
links: '連絡先、ソーシャルメディア、サポート'
links: '連絡先、ソーシャルメディア'
legal: 'Legal' # TODO
technical: 'Technical' # TODO
notFound:
message: 'このページはありません'

8
locale/nl/translations.suml
View File

@ -339,6 +339,10 @@ contact:
team:
name: 'Het "Raad van Neutrale Taal" collectief'
nameShort: 'Het collectief'
# TODO
# We are a queer collective dedicated to assembling, researching, shaping and promoting
# gender neutral and nonbinary language.
# We also support actions towards equality and social justice.
description:
- >
{https://pronouns.page=Pronouns.page} en gerelateerde initiatieven
@ -472,7 +476,9 @@ crud:
footer:
license: >
{https://gitlab.com/Avris/Zaimki=De broncode} en inhoud vallen onder de {/license=OQL} licentie.
links: 'Contact, sociale media, support'
links: 'Contact, sociale media'
legal: 'Legal' # TODO
technical: 'Technical' # TODO
notFound:
message: 'Pagina niet gevonden'

8
locale/no/translations.suml
View File

@ -350,6 +350,10 @@ contact:
team:
name: 'Det “Neutral Language Council” kollektivet'
nameShort: 'Kollektivet'
# TODO
# We are a queer collective dedicated to assembling, researching, shaping and promoting
# gender neutral and nonbinary language.
# We also support actions towards equality and social justice.
description:
- >
{https://pronouns.page=Pronouns.page} og andre relaterte initiativ
@ -483,7 +487,9 @@ crud:
footer:
license: >
{https://gitlab.com/Avris/Zaimki=Kildekode} og Innholdet er lisensiert under {/license=OQL} lisensen.
links: 'Kontakt, sosiale medier, hjelp'
links: 'Kontakt, sosiale medier'
legal: 'Legal' # TODO
technical: 'Technical' # TODO
notFound:
message: 'Side var ikke funnet'

4
locale/pl/translations.suml
View File

@ -1325,7 +1325,9 @@ crud:
footer:
license: >
{https://gitlab.com/Avris/Zaimki=Kod źródłowy} oraz treści są udostępnione na licencji {/license=OQL}.
links: 'Kontakt, social media, wsparcie'
links: 'Kontakt, social media'
legal: 'Prawne'
technical: 'Techniczne'
notFound:
message: 'Strony nie znaleziono'

8
locale/pt/translations.suml
View File

@ -358,6 +358,10 @@ contact:
team:
name: 'O coletivo "Conselho da Língua Neutra"'
nameShort: 'O coletivo'
# TODO
# We are a queer collective dedicated to assembling, researching, shaping and promoting
# gender neutral and nonbinary language.
# We also support actions towards equality and social justice.
description:
- >
{https://pronouns.page=Pronouns.page} e iniciativas relacionadas
@ -490,7 +494,9 @@ crud:
footer:
license: >
{https://gitlab.com/Avris/Zaimki=O código-fonte} e o conteúdo são licenciados sob a licença {/license=OQL}.
links: 'Contato, redes sociais, apoio'
links: 'Contato, redes sociais'
legal: 'Legal' # TODO
technical: 'Technical' # TODO
notFound:
message: 'Página não encontrada'

4
locale/ru/translations.suml
View File

@ -520,7 +520,9 @@ crud:
footer:
license: >
{https://gitlab.com/Avris/Zaimki=Исходный код} и содержимое лицензированы {/license=OQL}.
links: 'Связаться с нами, социальные сети, поддержка'
links: 'Связаться с нами, социальные сети'
legal: 'Legal' # TODO
technical: 'Technical' # TODO
notFound:
message: 'Страница не найдена'

9
locale/yi/translations.suml
View File

@ -359,8 +359,9 @@ contact:
nameShort: 'Collective'
description: # TODO
- >
{https://pronouns.page=Pronouns.page} and related initiatives
are created by the “Neutral Language Council” collective.
We are a queer collective dedicated to assembling, researching, shaping and promoting
gender neutral and nonbinary language.
We also support actions towards equality and social justice.
logo: 'Logo of the collective is a combination of the transgender symbol and a speech bubble that symbolises language.' # TODO
members: 'Current members' # TODO
member: 'Member of the collective' # TODO
@ -494,7 +495,9 @@ crud:
footer:
license: >
{https://gitlab.com/Avris/Zaimki=Source code} and content are licensed under {/license=OQL}.
links: 'Contact, social media, support'
links: 'Contact, social media'
legal: 'Legal' # TODO
technical: 'Technical' # TODO
notFound:
message: 'Page was not found'

8
locale/zh/translations.suml
View File

@ -323,6 +323,10 @@ contact:
team:
name: '中立語推行委員會'
nameShort: 'Collective' # TODO
# TODO
# We are a queer collective dedicated to assembling, researching, shaping and promoting
# gender neutral and nonbinary language.
# We also support actions towards equality and social justice.
description:
- >
{https://pronouns.page=Pronouns.page} 及相關舉措
@ -456,7 +460,9 @@ crud:
footer:
license: >
{https://gitlab.com/Avris/Zaimki=Source code} and content are licensed under {/license=OQL}.
links: '通訊錄, 社交媒體, 支持'
links: '通訊錄, 社交媒體'
legal: 'Legal' # TODO
technical: 'Technical' # TODO
notFound:
message: '找不到頁面'

11
plugins/support.js Normal file
View File

@ -0,0 +1,11 @@
export default {
methods: {
supportLinks() {
return [
{headline: 'Ko-Fi', url: 'https://ko-fi.com/radajezykaneutralnego', icon: 'coffee',},
{headline: 'PayPal', url: 'https://paypal.me/RJNeutralnego', icon: 'paypal', iconSet: 'b'},
...this.config.support.links,
];
},
}
}

4
assets/avris.svg → static/img/avris.svg
View File

@ -5,11 +5,11 @@
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 120 120"
shape-rendering="geometricPrecision">
<path d="M 120 0
A 120 120 0 0 1 0 120
A 80 80 0 0 1 80 40
A 40 40 0 0 0 40 80
A 80 80 0 0 0 120 0
Z" fill="#fff"/>
Z" fill="#000"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 494 B

After

Width:  |  Height:  |  Size: 490 B