lfk
/
selfservice
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix accessibility in Profile component

This commit is contained in:
Philipp Dormann 2021-03-05 19:27:44 +01:00
parent b668c50eac
commit 3351092859
1 changed files with 21 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/Profile.vue
View File

@ -3,10 +3,10 @@
<section class="text-white body-font">
<div class="container mx-auto flex items-center md:flex-row flex-col">
<div
class="flex flex-col md:pr-10 md:mb-0 mb-6 pr-0 w-full md:w-auto md:text-left text-center"
class="flex flex-col md:pr-10 md:mb-0 mb-6 pr-0 w-full md:w-auto md:text-left text-center text-black dark:text-gray-200"
>
<p class="text-3xl font-bold whitespace-nowrap">Max Mustermann</p>
<p class="text-md text-gray-200 whitespace-nowrap">Musterfirma > PR</p>
<p class="text-md whitespace-nowrap">Musterfirma > PR</p>
</div>
<div class="inline-flex md:ml-auto md:mr-0 mx-auto items-center space-x-4">
<button
@ -125,39 +125,38 @@
</div>
<div v-if="(activetab === 'laptimes')" class="tab-content block">
<div class="py-4 w-full">
<section class="text-gray-400 bg-gray-900 body-font">
<section class="text-gray-400 dark:bg-gray-900 body-font">
<div class="container mx-auto">
<div class="lg:w-2/3 w-full mx-auto overflow-auto">
<table class="table-auto w-full text-left whitespace-no-wrap">
<thead>
<thead
class="text-black bg-gray-300 dark:text-white text-sm dark:bg-gray-800"
>
<tr>
<th
class="px-4 py-3 title-font tracking-wider font-medium text-white text-sm bg-gray-800 rounded-tl rounded-bl"
class="px-4 py-3 title-font tracking-wider font-medium"
>{{ $t('distance') }}</th>
<th
class="px-4 py-3 title-font tracking-wider font-medium text-white text-sm bg-gray-800"
class="px-4 py-3 title-font tracking-wider font-medium"
>{{ $t('lap_time') }}</th>
<th
class="w-10 title-font tracking-wider font-medium text-white text-sm bg-gray-800 rounded-tr rounded-br"
></th>
</tr>
</thead>
<tbody>
<tr>
<td class="border-t-2 border-gray-800 px-4 py-3">400m</td>
<td class="border-t-2 border-gray-800 px-4 py-3">0min 57s</td>
<tbody class="text-gray-900 dark:text-gray-50">
<tr class="border-t-2 border-gray-800">
<td class="px-4 py-3">400m</td>
<td class="px-4 py-3">0min 57s</td>
</tr>
<tr>
<td class="border-t-2 border-gray-800 px-4 py-3">400m</td>
<td class="border-t-2 border-gray-800 px-4 py-3">1min 15s</td>
<tr class="border-t-2 border-gray-800">
<td class="px-4 py-3">400m</td>
<td class="px-4 py-3">1min 15s</td>
</tr>
<tr>
<td class="border-t-2 border-gray-800 px-4 py-3">1km</td>
<td class="border-t-2 border-gray-800 px-4 py-3">2min 50s</td>
<tr class="border-t-2 border-gray-800">
<td class="px-4 py-3">1km</td>
<td class="px-4 py-3">2min 50s</td>
</tr>
<tr>
<td class="border-t-2 border-gray-800 px-4 py-3">1km</td>
<td class="border-t-2 border-gray-800 px-4 py-3">3min 00s</td>
<tr class="border-t-2 border-gray-800">
<td class="px-4 py-3">1km</td>
<td class="px-4 py-3">3min 00s</td>
</tr>
</tbody>
</table>