diff options
| author | Rasmus Fuhse <fuhse@data-quest.de> | 2026-01-23 10:37:38 +0100 |
|---|---|---|
| committer | Rasmus Fuhse <fuhse@data-quest.de> | 2026-01-23 10:37:38 +0100 |
| commit | 9f073498e102580f92c4c4b76d59fd0856950fa2 (patch) | |
| tree | b1357cf46c19aedc32f3b897b48b7af517253042 | |
| parent | 549b9856e966ed711fa1260616c3fa48899a63ce (diff) | |
re #6185 adress accessability issue
| -rw-r--r-- | resources/assets/stylesheets/scss/runningprocesses.scss | 4 | ||||
| -rw-r--r-- | resources/vue/apps/RunningProcesses.vue | 17 |
2 files changed, 13 insertions, 8 deletions
diff --git a/resources/assets/stylesheets/scss/runningprocesses.scss b/resources/assets/stylesheets/scss/runningprocesses.scss index 23dcbf4..d045952 100644 --- a/resources/assets/stylesheets/scss/runningprocesses.scss +++ b/resources/assets/stylesheets/scss/runningprocesses.scss @@ -8,10 +8,10 @@ margin-bottom: 10px; font-size: $font-size-h3; } - ul.processes { + .processes { list-style: none; padding-left: 35px; - li.running_process { + .running_process { display: flex; align-items: center; diff --git a/resources/vue/apps/RunningProcesses.vue b/resources/vue/apps/RunningProcesses.vue index 852aacd..e6c10c0 100644 --- a/resources/vue/apps/RunningProcesses.vue +++ b/resources/vue/apps/RunningProcesses.vue @@ -12,8 +12,8 @@ :style="'background-image: url(' + context.avatar + ')'"></span> {{ context.name }} </a> - <ul class="processes"> - <li v-for="process in getProcessesForContext(context)" :key="process.id" class="running_process"> + <div class="processes"> + <div v-for="process in getProcessesForContext(context)" :key="process.id" class="running_process"> <a :href="process.url" :data-dialog="process.dialog ? 'size=auto' : null"> @@ -38,15 +38,19 @@ </div> </div> <div class="progressbar_container"> - <div class="progress_bar"> + <div class="progress_bar" + role="progressbar" + :aria-valuenow="Math.floor(((currentTime / 1000) - process.begin) / (process.end - process.begin) * 100)" + aria-valuemax="100" + aria-valuemin="0"> <div :class="process.end - (currentTime / 1000) <= 86400 ? 'progress alerted' : 'progress'" :style="'width: ' + getProcessPercentage(process) + '%;'"></div> </div> </div> </div> - </li> - </ul> + </div> + </div> </li> </ul> </section> @@ -58,6 +62,7 @@ import { ref, computed, onMounted, onBeforeUnmount } from 'vue'; import { $ngettext } from "../../assets/javascripts/lib/gettext"; import { getRemainingTime as calculateRemainingTime } from "../utils/getRemainingTime"; +import { datetime } from "../../assets/javascripts/lib/datetime"; const props = defineProps({ contexts: { @@ -114,7 +119,7 @@ function getRemainingTime(process) { } function getDatetimeInfo(process) { - return STUDIP.DateTime.getStudipDate(new Date(process.end * 1000)); + return datetime.getStudipDate(new Date(process.end * 1000)); } onMounted(() => { |