Use html landmark elements (#1361)

Co-authored-by: Anbraten <anton@ju60.de>
This commit is contained in:
Lukas 2022-10-31 15:04:19 +01:00 committed by GitHub
parent b15ca52a63
commit 8593b756b8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 13 additions and 11 deletions

View file

@ -3,14 +3,14 @@
<router-view v-if="blank" />
<template v-else>
<Navbar />
<div class="relative flex min-h-0 h-full">
<main class="relative flex min-h-0 h-full">
<div class="flex flex-col overflow-y-auto flex-grow">
<router-view />
</div>
<transition name="slide-right">
<PipelineFeedSidebar class="shadow-md border-l w-full absolute top-0 right-0 bottom-0 max-w-80 xl:max-w-96" />
</transition>
</div>
</main>
</template>
<notifications position="bottom right" />
</div>

View file

@ -14,6 +14,7 @@
"color_scheme_dark": "Switch to light mode",
"unknown_error": "An unknown error occurred",
"documentation_for": "Documentation for \"{topic}\"",
"pipeline_feed": "Pipeline feed",
"not_found": {
"not_found": "Whoa 404, either we broke something or you had a typing mishap :-/",
"back_home": "Back to home"

View file

@ -1,5 +1,5 @@
<template>
<NavbarIcon :title="$t('repo.pipeline.tasks')" class="!p-1.5 relative" @click="toggle">
<NavbarIcon :title="$t('pipeline_feed')" class="!p-1.5 relative" @click="toggle">
<div v-if="activePipelines.length > 0" class="spinner">
<div class="spinner-ring ring1" />
<div class="spinner-ring ring2" />

View file

@ -1,6 +1,6 @@
<template>
<!-- Navbar -->
<div class="flex bg-lime-600 text-neutral-content p-4 dark:bg-dark-gray-800 dark:border-b dark:border-gray-700">
<nav class="flex bg-lime-600 text-neutral-content p-4 dark:bg-dark-gray-800 dark:border-b dark:border-gray-700">
<!-- Left Links Box -->
<div class="flex text-white dark:text-gray-400 items-center space-x-2">
<!-- Logo -->
@ -51,7 +51,7 @@
<!-- Login Button -->
<Button v-else :text="$t('login')" @click="doLogin" />
</div>
</div>
</nav>
</template>
<script lang="ts">

View file

@ -1,5 +1,5 @@
<template>
<div class="bg-white dark:bg-dark-gray-900 border-b dark:border-gray-700">
<header class="bg-white dark:bg-dark-gray-900 border-b dark:border-gray-700">
<FluidContainer class="!py-0">
<div class="flex flex-wrap items-center justify-between py-4 <md:flex-row <md:gap-y-4">
<div
@ -42,7 +42,7 @@
</div>
</div>
</FluidContainer>
</div>
</header>
</template>
<script setup lang="ts">

View file

@ -1,7 +1,8 @@
<template>
<div
<aside
v-if="isPipelineFeedOpen"
class="flex flex-col z-50 overflow-y-auto items-center bg-white dark:bg-dark-gray-800 dark:border-dark-500"
:aria-label="$t('pipeline_feed')"
>
<router-link
v-for="pipeline in sortedPipelineFeed"
@ -16,7 +17,7 @@
</router-link>
<span v-if="sortedPipelineFeed.length === 0" class="text-color m-4">{{ $t('repo.pipeline.no_pipelines') }}</span>
</div>
</aside>
</template>
<script lang="ts">

View file

@ -1,5 +1,5 @@
<template>
<div class="flex flex-col w-full h-full justify-center items-center">
<main class="flex flex-col w-full h-full justify-center items-center">
<div v-if="errorMessage" class="bg-red-400 text-white dark:text-gray-500 p-4 rounded-md text-lg">
{{ errorMessage }}
</div>
@ -15,7 +15,7 @@
<Button class="mt-4" @click="doLogin">{{ $t('login') }}</Button>
</div>
</div>
</div>
</main>
</template>
<script lang="ts">