jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Fix various accessibility issues in the app grid

Browse Source
This commit is contained in:
Johannes Zellner
2025-05-14 14:47:54 +02:00
parent c0ef2eb559
commit 87fd1a5f38
3 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
dashboard/src/views/AppsView.vue
View File

@@ -259,14 +259,14 @@ onUnmounted(() => {
<div v-show="ready">
<TransitionGroup name="grid-animation" tag="div" class="grid" v-if="viewType === VIEW_TYPE.GRID">
<a v-for="app in filteredApps" :key="app.id" class="grid-item" @click="onOpenApp(app, $event)" :href="'https://' + app.fqdn" target="_blank">
<img :src="app.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'"/>
<img :alt="app.label || app.subdomain || app.fqdn" :src="app.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'"/>
<div class="grid-item-label">{{ app.label || app.subdomain || app.fqdn }}</div>
<div class="grid-item-task-label">{{ installationStateLabel(app) }}</div>
<div class="apps-progress" v-show="app.progress && isOperator(app)">
<div class="apps-progress-filled" :style="{ width: app.progress+'%' }"></div>
</div>
<a class="config" v-show="isOperator(app)" @click="openAppEdit(app, $event)" :href="`#/app/${app.id}/info`"><Icon icon="fa-solid fa-cog" /></a>
<a class="update-indicator" v-if="app.updateAvailable" :href="isOperator(app) ? `#/app/${app.id}/updates` : null" v-tooltip="$t('app.updateAvailableTooltip')"><i class="fa-fw fa-solid fa-arrow-up"/></a>
<a class="config" v-show="isOperator(app)" @click="openAppEdit(app, $event)" :href="`#/app/${app.id}/info`" :title="$t('app.configureTooltip')"><Icon icon="fa-solid fa-cog" /></a>
<a class="update-indicator" v-if="app.updateAvailable" :href="isOperator(app) ? `#/app/${app.id}/updates` : null" :title="$t('app.updateAvailableTooltip')" v-tooltip="$t('app.updateAvailableTooltip')"><i class="fa-fw fa-solid fa-arrow-up"/></a>
</a>
</TransitionGroup>
@@ -274,7 +274,7 @@ onUnmounted(() => {
<TableView :columns="listColumns" :model="filteredApps">
<template #icon="app">
<a :href="'https://' + app.fqdn" target="_blank">
<img class="list-icon" :src="app.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'"/>
<img :alt="app.label || app.subdomain || app.fqdn" class="list-icon" :src="app.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'"/>
</a>
</template>
<template #label="app">