chore: use bulma sr-only styles instead of tailwind's
This commit is contained in:
parent
ac2321fa21
commit
5a406b2ecc
|
|
@ -30,7 +30,7 @@
|
|||
:to="{ name: 'project.info', params: { projectId: currentProject.id } }"
|
||||
class="project-title-button"
|
||||
>
|
||||
<span class="tw-sr-only">{{ $t('project.description') }}</span>
|
||||
<span class="is-sr-only">{{ $t('project.description') }}</span>
|
||||
<Icon icon="circle-info" />
|
||||
</BaseButton>
|
||||
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
class="project-title-button"
|
||||
@click="toggleOpen"
|
||||
>
|
||||
<span class="tw-sr-only">{{ $t('project.openSettingsMenu') }}</span>
|
||||
<span class="is-sr-only">{{ $t('project.openSettingsMenu') }}</span>
|
||||
<Icon
|
||||
icon="ellipsis-h"
|
||||
class="icon"
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
:class="{'is-favorite': project.isFavorite}"
|
||||
@click="projectStore.toggleProjectFavorite(project)"
|
||||
>
|
||||
<span class="tw-sr-only">{{ project.isFavorite ? $t('project.unfavorite') : $t('project.favorite') }}</span>
|
||||
<span class="is-sr-only">{{ project.isFavorite ? $t('project.unfavorite') : $t('project.favorite') }}</span>
|
||||
<Icon :icon="project.isFavorite ? 'star' : ['far', 'star']" />
|
||||
</BaseButton>
|
||||
<ProjectSettingsDropdown
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
class="menu-list-dropdown-trigger"
|
||||
@click="toggleOpen"
|
||||
>
|
||||
<span class="tw-sr-only">{{ $t('project.openSettingsMenu') }}</span>
|
||||
<span class="is-sr-only">{{ $t('project.openSettingsMenu') }}</span>
|
||||
<Icon
|
||||
icon="ellipsis-h"
|
||||
class="icon"
|
||||
|
|
|
|||
|
|
@ -155,7 +155,7 @@ async function toggleReaction(value: string) {
|
|||
class="reaction-button"
|
||||
@click.stop="toggleEmojiPicker"
|
||||
>
|
||||
<span class="tw-sr-only">{{ $t('reaction.add') }}</span>
|
||||
<span class="is-sr-only">{{ $t('reaction.add') }}</span>
|
||||
<Icon :icon="['far', 'face-laugh']" />
|
||||
</BaseButton>
|
||||
<CustomTransition name="fade">
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
aria-hidden="true"
|
||||
>1</span>
|
||||
</span>
|
||||
<span class="tw-sr-only">{{ $t('input.editor.heading1') }}</span>
|
||||
<span class="is-sr-only">{{ $t('input.editor.heading1') }}</span>
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
v-tooltip="$t('input.editor.heading2')"
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
aria-hidden="true"
|
||||
>2</span>
|
||||
</span>
|
||||
<span class="tw-sr-only">{{ $t('input.editor.heading2') }}</span>
|
||||
<span class="is-sr-only">{{ $t('input.editor.heading2') }}</span>
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
v-tooltip="$t('input.editor.heading3')"
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
aria-hidden="true"
|
||||
>3</span>
|
||||
</span>
|
||||
<span class="tw-sr-only">{{ $t('input.editor.heading3') }}</span>
|
||||
<span class="is-sr-only">{{ $t('input.editor.heading3') }}</span>
|
||||
</BaseButton>
|
||||
</div>
|
||||
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
<span class="icon">
|
||||
<Icon :icon="['fa', 'fa-bold']" />
|
||||
</span>
|
||||
<span class="tw-sr-only">{{ $t('input.editor.bold') }}</span>
|
||||
<span class="is-sr-only">{{ $t('input.editor.bold') }}</span>
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
v-tooltip="$t('input.editor.italic')"
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
<span class="icon">
|
||||
<Icon :icon="['fa', 'fa-italic']" />
|
||||
</span>
|
||||
<span class="tw-sr-only">{{ $t('input.editor.italic') }}</span>
|
||||
<span class="is-sr-only">{{ $t('input.editor.italic') }}</span>
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
v-tooltip="$t('input.editor.underline')"
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
<span class="icon">
|
||||
<Icon :icon="['fa', 'fa-underline']" />
|
||||
</span>
|
||||
<span class="tw-sr-only">{{ $t('input.editor.underline') }}</span>
|
||||
<span class="is-sr-only">{{ $t('input.editor.underline') }}</span>
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
v-tooltip="$t('input.editor.strikethrough')"
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
<span class="icon">
|
||||
<Icon :icon="['fa', 'fa-strikethrough']" />
|
||||
</span>
|
||||
<span class="tw-sr-only">{{ $t('input.editor.strikethrough') }}</span>
|
||||
<span class="is-sr-only">{{ $t('input.editor.strikethrough') }}</span>
|
||||
</BaseButton>
|
||||
</div>
|
||||
|
||||
|
|
@ -105,7 +105,7 @@
|
|||
<span class="icon">
|
||||
<Icon :icon="['fa', 'fa-code']" />
|
||||
</span>
|
||||
<span class="tw-sr-only">{{ $t('input.editor.code') }}</span>
|
||||
<span class="is-sr-only">{{ $t('input.editor.code') }}</span>
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
v-tooltip="$t('input.editor.quote')"
|
||||
|
|
@ -116,7 +116,7 @@
|
|||
<span class="icon">
|
||||
<Icon :icon="['fa', 'fa-quote-right']" />
|
||||
</span>
|
||||
<span class="tw-sr-only">{{ $t('input.editor.quote') }}</span>
|
||||
<span class="is-sr-only">{{ $t('input.editor.quote') }}</span>
|
||||
</BaseButton>
|
||||
</div>
|
||||
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
<span class="icon">
|
||||
<Icon :icon="['fa', 'fa-list-ul']" />
|
||||
</span>
|
||||
<span class="tw-sr-only">{{ $t('input.editor.bulletList') }}</span>
|
||||
<span class="is-sr-only">{{ $t('input.editor.bulletList') }}</span>
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
v-tooltip="$t('input.editor.orderedList')"
|
||||
|
|
@ -141,7 +141,7 @@
|
|||
<span class="icon">
|
||||
<Icon :icon="['fa', 'fa-list-ol']" />
|
||||
</span>
|
||||
<span class="tw-sr-only">{{ $t('input.editor.orderedList') }}</span>
|
||||
<span class="is-sr-only">{{ $t('input.editor.orderedList') }}</span>
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
v-tooltip="$t('input.editor.taskList')"
|
||||
|
|
@ -152,7 +152,7 @@
|
|||
<span class="icon">
|
||||
<Icon icon="fa-list-check" />
|
||||
</span>
|
||||
<span class="tw-sr-only">{{ $t('input.editor.taskList') }}</span>
|
||||
<span class="is-sr-only">{{ $t('input.editor.taskList') }}</span>
|
||||
</BaseButton>
|
||||
</div>
|
||||
|
||||
|
|
@ -165,7 +165,7 @@
|
|||
<span class="icon">
|
||||
<Icon icon="fa-image" />
|
||||
</span>
|
||||
<span class="tw-sr-only">{{ $t('input.editor.image') }}</span>
|
||||
<span class="is-sr-only">{{ $t('input.editor.image') }}</span>
|
||||
</BaseButton>
|
||||
</div>
|
||||
|
||||
|
|
@ -180,7 +180,7 @@
|
|||
<span class="icon">
|
||||
<Icon :icon="['fa', 'fa-link']" />
|
||||
</span>
|
||||
<span class="tw-sr-only">{{ $t('input.editor.link') }}</span>
|
||||
<span class="is-sr-only">{{ $t('input.editor.link') }}</span>
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
v-tooltip="$t('input.editor.text')"
|
||||
|
|
@ -192,7 +192,7 @@
|
|||
<span class="icon">
|
||||
<Icon :icon="['fa', 'fa-paragraph']" />
|
||||
</span>
|
||||
<span class="tw-sr-only">{{ $t('input.editor.text') }}</span>
|
||||
<span class="is-sr-only">{{ $t('input.editor.text') }}</span>
|
||||
</BaseButton>
|
||||
|
||||
<BaseButton
|
||||
|
|
@ -203,7 +203,7 @@
|
|||
<span class="icon">
|
||||
<Icon :icon="['fa', 'fa-ruler-horizontal']" />
|
||||
</span>
|
||||
<span class="tw-sr-only">{{ $t('input.editor.horizontalRule') }}</span>
|
||||
<span class="is-sr-only">{{ $t('input.editor.horizontalRule') }}</span>
|
||||
</BaseButton>
|
||||
</div>
|
||||
|
||||
|
|
@ -216,7 +216,7 @@
|
|||
<span class="icon">
|
||||
<Icon :icon="['fa', 'fa-undo']" />
|
||||
</span>
|
||||
<span class="tw-sr-only">{{ $t('input.editor.undo') }}</span>
|
||||
<span class="is-sr-only">{{ $t('input.editor.undo') }}</span>
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
v-tooltip="$t('input.editor.redo')"
|
||||
|
|
@ -226,7 +226,7 @@
|
|||
<span class="icon">
|
||||
<Icon :icon="['fa', 'fa-redo']" />
|
||||
</span>
|
||||
<span class="tw-sr-only">{{ $t('input.editor.redo') }}</span>
|
||||
<span class="is-sr-only">{{ $t('input.editor.redo') }}</span>
|
||||
</BaseButton>
|
||||
</div>
|
||||
|
||||
|
|
@ -241,7 +241,7 @@
|
|||
<span class="icon">
|
||||
<Icon :icon="['fa', 'fa-table']" />
|
||||
</span>
|
||||
<span class="tw-sr-only">{{ $t('input.editor.table.title') }}</span>
|
||||
<span class="is-sr-only">{{ $t('input.editor.table.title') }}</span>
|
||||
</BaseButton>
|
||||
<div
|
||||
v-if="tableMode"
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
class="dropdown-trigger"
|
||||
@click="triggerProps.toggleOpen"
|
||||
>
|
||||
<span class="tw-sr-only">{{ $t('project.openSettingsMenu') }}</span>
|
||||
<span class="is-sr-only">{{ $t('project.openSettingsMenu') }}</span>
|
||||
<Icon
|
||||
icon="ellipsis-h"
|
||||
class="icon"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<div class="add-task__field field is-grouped">
|
||||
<p class="control has-icons-left has-icons-right is-expanded">
|
||||
<label
|
||||
class="tw-sr-only"
|
||||
class="is-sr-only"
|
||||
:for="textareaId"
|
||||
>
|
||||
{{ $t('project.list.addPlaceholder') }}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
height="48"
|
||||
width="48"
|
||||
>
|
||||
<figcaption class="tw-sr-only">
|
||||
<figcaption class="is-sr-only">
|
||||
{{ $t('misc.avatarOfUser', {user: getDisplayName(c.author)}) }}
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
:title="$t('task.comment.permalink')"
|
||||
@click.prevent.stop="copy(getCommentUrl(`${c.id}`))"
|
||||
>
|
||||
<span class="tw-sr-only">{{ $t('task.comment.permalink') }}</span>
|
||||
<span class="is-sr-only">{{ $t('task.comment.permalink') }}</span>
|
||||
<Icon icon="link" />
|
||||
</a>
|
||||
<CustomTransition name="fade">
|
||||
|
|
@ -142,7 +142,7 @@
|
|||
height="48"
|
||||
width="48"
|
||||
>
|
||||
<figcaption class="tw-sr-only">
|
||||
<figcaption class="is-sr-only">
|
||||
{{ $t('misc.avatarOfUser', {user: getDisplayName(authStore.info)}) }}
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
|
|
|||
|
|
@ -152,7 +152,7 @@
|
|||
class="favorite"
|
||||
@click.stop="toggleFavorite"
|
||||
>
|
||||
<span class="tw-sr-only">{{ task.isFavorite ? $t('task.detail.actions.unfavorite') : $t('task.detail.actions.favorite') }}</span>
|
||||
<span class="is-sr-only">{{ task.isFavorite ? $t('task.detail.actions.unfavorite') : $t('task.detail.actions.favorite') }}</span>
|
||||
<Icon
|
||||
v-if="task.isFavorite"
|
||||
icon="star"
|
||||
|
|
|
|||
Loading…
Reference in New Issue