(style) unified styling for example buttons and tooltips for accessibility

This commit is contained in:
Valentyne Stigloher 2024-04-30 22:05:36 +02:00
parent a80dc8ca32
commit 7eb1a88faf
33 changed files with 106 additions and 49 deletions

View File

@ -21,7 +21,8 @@ body[data-theme="dark"] {
/* BUTTONS */
.btn-link { color: #fff; }
.btn-link { color: $primary-dark; }
.btn-link:hover { color: lighten($primary-dark, 10%); }
.btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.btn-dark { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; }
.btn-dark:hover { color: #000; background-color: #f9fafb; border-color: #f9fafb; }

View File

@ -1,6 +1,7 @@
<template>
<li v-if="pronoun">
<Example :example="example" :pronoun="pronoun" :counter="counter" :link="link" :pronunciation="pronunciation" />
<Tooltip :text="tooltipText">
<button
v-if="hasDifferentExample"
type="button"
@ -9,6 +10,7 @@
>
<Icon v="random" />
</button>
</Tooltip>
</li>
</template>
@ -42,6 +44,12 @@ export default Vue.extend({
hasDifferentExample(): boolean {
return this.pronounsChoice.length > 1 || this.suitableExamples.length > 1;
},
tooltipText(): string {
if (this.exampleCategory.name) {
return this.$t('pronouns.examples.shuffleNamed', { category: this.exampleCategory.name });
}
return this.$t('pronouns.examples.shuffle');
},
},
created() {
this.selectPronounForExample(false);

View File

@ -1,6 +1,7 @@
<template>
<Tooltip :text="$t('pronunciation.play')">
<a
:class="['mr-2', !pronunciation ? 'disabled' : '']"
:class="['btn', 'btn-sm', 'btn-link', 'p-1', !pronunciation ? 'disabled' : '']"
dir="ltr"
:href="pronunciationLink"
target="_blank"
@ -8,6 +9,7 @@
>
<Icon :v="icon" /><sub v-if="name">{{ name }}</sub>
</a>
</Tooltip>
</template>

View File

@ -63,7 +63,10 @@ home:
pronouns:
header: 'Pronouns'
headerLong: 'Pronouns'
examples: 'Example usage in sentences'
examples:
header: 'Example usage in sentences'
shuffle: 'Show different example'
shuffleNamed: 'Show different example for %category%'
plural: 'Plural'
intro: 'My pronouns are'
normative: 'Normative'
@ -91,6 +94,9 @@ pronouns:
or: 'or'
grammarTable: 'Table'
pronunciation:
play: 'Play audio sample'
sources:
header: 'Sources'
headerLong: 'Examples from cultural texts'

View File

@ -58,7 +58,8 @@ home:
pronouns:
header: 'الضمائر'
headerLong: 'الضمائر'
examples: 'تُستعمل في الجمل كالآتي'
examples:
header: 'تُستعمل في الجمل كالآتي'
plural: 'صيغة الجمع'
intro: 'ضمائري هي'
normative: 'المعياريه '

View File

@ -61,7 +61,10 @@ home:
pronouns:
header: 'Pronomen'
headerLong: 'Pronomen'
examples: 'Beispielsätze'
examples:
header: 'Beispielsätze'
shuffle: 'Anderen Beispielsatz anzeigen'
shuffleNamed: 'Anderen Beispielsatz für %category% anzeigen'
plural: 'Plural'
intro: 'Meine Pronomen sind'
normative: 'Normativ'
@ -94,6 +97,9 @@ pronouns:
or: 'oder'
grammarTable: 'Tabelle'
pronunciation:
play: 'Hörbeispiel abspielen'
sources:
header: 'Quellen'
headerLong: 'Beispiele aus Kulturtexten'

View File

@ -63,7 +63,10 @@ home:
pronouns:
header: 'Pronouns'
headerLong: 'Pronouns'
examples: 'Example usage in sentences'
examples:
header: 'Example usage in sentences'
shuffle: 'Show different example'
shuffleNamed: 'Show different example for %category%'
plural: 'Plural'
intro: 'My pronouns are'
normative: 'Normative'
@ -89,6 +92,9 @@ pronouns:
sentence: >
You can modify the default links so that the URL reads like a sentence; for example:
pronunciation:
play: 'Play audio sample'
sources:
header: 'Sources'
headerLong: 'Examples from cultural texts'

View File

@ -50,7 +50,8 @@ home:
pronouns:
header: 'Pronomoj'
headerLong: 'Pronomoj'
examples: 'Ekzempla uzado en frazoj'
examples:
header: 'Ekzempla uzado en frazoj'
plural: 'Pluralo'
intro: 'Miaj pronomoj estas'
normative: 'Norma'

View File

@ -61,7 +61,8 @@ home:
pronouns:
header: 'Pronombres'
headerLong: 'Pronombres'
examples: 'Ejemplos de uso en oraciones'
examples:
header: 'Ejemplos de uso en oraciones'
plural: 'Plural'
intro: 'Mis pronombres son'
normative: 'Normativo'

View File

@ -56,7 +56,8 @@ home:
pronouns:
header: 'Asesõnad'
headerLong: 'Asesõnad'
examples: 'Kasutuse näide lausetes'
examples:
header: 'Kasutuse näide lausetes'
plural: 'Mitmus'
intro: 'Minu asesõnad on'
normative: 'Normatiivne'

View File

@ -58,7 +58,8 @@ home:
pronouns:
header: 'Pronoms'
headerLong: 'Pronoms'
examples: 'Exemple dusage dans des phrases'
examples:
header: 'Exemple dusage dans des phrases'
plural: 'Pluriel'
intro: 'Mes pronoms sont'
normative: 'Normatif'

View File

@ -60,7 +60,8 @@ home:
pronouns:
header: 'Pronomes'
headerLong: 'Pronomes'
examples: 'Exemplos de uso em frases'
examples:
header: 'Exemplos de uso em frases'
plural: 'Plural'
intro: 'Meus pronomes são'
normative: 'Normativo'

View File

@ -62,7 +62,8 @@ home:
pronouns:
header: 'Pronouns'
headerLong: 'Pronouns'
examples: 'Example usage in sentences'
examples:
header: 'Example usage in sentences'
plural: 'Plural'
intro: 'My pronouns are'
normative: 'Normative'

View File

@ -60,7 +60,8 @@ home:
pronouns:
header: 'Pronomi'
headerLong: 'Pronomi'
examples: 'Esempi pratici di utilizzo'
examples:
header: 'Esempi pratici di utilizzo'
plural: 'Plurale'
intro: 'I miei pronomi sono'
normative: 'Normative'

View File

@ -44,7 +44,8 @@ home:
pronouns:
header: '三人称代名詞'
headerLong: '三人称代名詞'
examples: '文章での使い方の例'
examples:
header: '文章での使い方の例'
plural: '複数形'
intro: '私の三人称代名詞は'
normative: '規範的'

View File

@ -61,7 +61,8 @@ home:
pronouns:
header: '대명사'
headerLong: '대명사'
examples: '문장안에 예'
examples:
header: '문장안에 예'
plural: '복유의'
intro: '나의 대명사는'
normative: '규범적'

View File

@ -61,7 +61,8 @@ home:
pronouns:
header: 'Pronombres'
headerLong: 'Pronombres'
examples: 'Enshemplos de uzo en frazas'
examples:
header: 'Enshemplos de uzo en frazas'
plural: 'Plural'
intro: 'Mis pronombres son'
normative: 'Normativo'

View File

@ -59,7 +59,8 @@ home:
pronouns:
header: 'Voornaamwoorden'
headerLong: 'Voornaamwoorden'
examples: 'Gebruiksvoorbeelden in zinnen'
examples:
header: 'Gebruiksvoorbeelden in zinnen'
plural: 'Meervoud'
intro: 'Mijn voornaamwoorden zijn'
normative: 'Normatief'

View File

@ -53,7 +53,8 @@ home:
pronouns:
header: 'Pronomen'
headerLong: 'Pronomen'
examples: 'Eksempler i setninger'
examples:
header: 'Eksempler i setninger'
plural: 'Flertall'
intro: 'Mine pronomen er'
normative: 'Normativ'

View File

@ -74,7 +74,8 @@ home:
pronouns:
header: 'Zaimki'
headerLong: 'Niebinarne zaimki<br/> i inne formy'
examples: 'Przykłady użycia w zdaniu'
examples:
header: 'Przykłady użycia w zdaniu'
plural: 'Liczba mnoga'
intro: 'Moje zaimki to'
normative: 'Normatywne'
@ -282,7 +283,8 @@ nouns:
Słownik Neutratywów podaje odmianę pasującą do {/ono=„ono/jego”},
lecz możliwa jest też odmiana zgodna z pozostałymi opcjami:
examples: 'Przykłady'
examples:
header: 'Przykłady'
dictionary: 'Słownik Neutratywów'
approved: 'wpisów zatwierdzonych'

View File

@ -65,7 +65,8 @@ home:
pronouns:
header: 'Pronomes'
headerLong: 'Pronomes'
examples: 'Exemplos de uso em frases'
examples:
header: 'Exemplos de uso em frases'
plural: 'Plural'
intro: 'Meu conjunto é'
normative: 'Normativo'

View File

@ -61,7 +61,8 @@ home:
pronouns:
header: 'Pronume'
headerLong: 'Listă cu pronume'
examples: 'Utilizarea pronumelor în propoziții'
examples:
header: 'Utilizarea pronumelor în propoziții'
plural: 'Plural'
intro: 'Pronumele mele sunt'
normative: 'Normativ'

View File

@ -54,7 +54,8 @@ home:
pronouns:
header: 'Местоимения'
headerLong: 'Местоимения и другие формы'
examples: 'Примеры употребления в предложениях'
examples:
header: 'Примеры употребления в предложениях'
plural: 'Множественное число'
intro: 'Мои местоимения'
normative: 'Нормативное'

View File

@ -63,7 +63,8 @@ home:
pronouns:
header: 'Pronomen'
headerLong: 'Pronomen'
examples: 'Exempel på användningar i meningar'
examples:
header: 'Exempel på användningar i meningar'
plural: 'Plural'
intro: 'Mina pronomen är'
normative: 'Normativ'

View File

@ -50,7 +50,8 @@ home:
pronouns:
header: 'Zamirler'
headerLong: 'Zamirler'
examples: 'Cumlede nasil gözükeceğini anlamak icin örnek kullanım'
examples:
header: 'Cumlede nasil gözükeceğini anlamak icin örnek kullanım'
plural: 'Birden Çok'
intro: 'Benim zamirlerim'
normative: 'Genel Zamirler'

View File

@ -54,7 +54,8 @@ home:
pronouns:
header: 'Займенники'
headerLong: 'Займенники та інші форми'
examples: 'Приклади використання у реченнях'
examples:
header: 'Приклади використання у реченнях'
plural: 'Множина'
intro: 'Мої займенники'
normative: 'Нормативне'

View File

@ -63,7 +63,8 @@ home:
pronouns:
header: 'Các danh xưng'
headerLong: 'Các danh xưng'
examples: 'Ví dụ trong câu'
examples:
header: 'Ví dụ trong câu'
plural: 'Số nhiều'
intro: 'Tôi dùng các danh xưng'
normative: 'Chuẩn mực'

View File

@ -60,7 +60,8 @@ home:
pronouns:
header: 'פּראָנאָמען'
headerLong: 'פּראָנאָמען'
examples: 'Example usage in sentences'
examples:
header: 'Example usage in sentences'
plural: 'מערצאָל'
intro: 'מײַנע פּראָנאָמען זענען'
normative: 'נאָרמאַטיװ'

View File

@ -62,7 +62,8 @@ home:
pronouns:
header: '代詞'
headerLong: '代詞'
examples: '例句用法'
examples:
header: '例句用法'
plural: '複數'
intro: '我的代詞是'
normative: '規範'

View File

@ -29,7 +29,7 @@
<section>
<h2 class="h4">
<Icon v="file-signature" />
<T>pronouns.examples</T><T>quotation.colon</T>
<T>pronouns.examples.header</T><T>quotation.colon</T>
</h2>
<ul>

View File

@ -55,7 +55,7 @@
<section>
<h2 class="h4">
<Icon v="file-signature" />
<T>pronouns.examples</T><T>quotation.colon</T>
<T>pronouns.examples.header</T><T>quotation.colon</T>
</h2>
<ul>
@ -164,7 +164,7 @@ export default {
? head({
title: `${this.$t('pronouns.intro')}: ${this.selectedPronoun.name(this.glue)}`,
description: [
this.$t('pronouns.examples', {}, false),
this.$t('pronouns.examples.header', {}, false),
this.$t('pronouns.grammarTable', {}, false),
this.$t('sources.headerLong', {}, false),
].filter((x) => !!x).join(', '),

View File

@ -85,7 +85,7 @@
</p>
</div>
<p>
<T>pronouns.examples</T><T>quotation.colon</T>
<T>pronouns.examples.header</T><T>quotation.colon</T>
</p>
<template v-for="{ examples, isHonorific } in examplesByHonorific">
<ul>

View File

@ -82,6 +82,10 @@ export function listMissingTranslations(
return false;
}
if (!config.pronouns.exampleCategories && keyMatches('pronouns.examples.shuffleNamed')) {
return false;
}
if (!config.pronouns.slashes && keyMatches('pronouns.slashes.')) {
return false;
}