mirrors/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2024-11-28 12:51:04 +00:00
Code Issues Projects Releases Wiki Activity

Improve tab layout and add hover effect (#4431)

Browse source
This commit is contained in:
Robert Kaussow 2024-11-22 19:30:09 +01:00 committed by GitHub
parent 53d6421940
commit 4003df4626
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 12 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
web/src/components/layout/scaffold/Tabs.vue
View file

@ -1,18 +1,25 @@
<template>
<div class="flex flex-wrap">
<div class="flex flex-wrap mt-2 md:gap-4">
<router-link
v-for="tab in tabs"
:key="tab.title"
v-slot="{ isActive, isExactActive }"
:to="tab.to"
class="border-transparent w-full py-1 md:py-2 md:w-auto md:px-6 flex cursor-pointer md:border-b-2 text-wp-text-100 hover:text-wp-text-200 items-center"
class="border-transparent w-full py-1 md:w-auto flex cursor-pointer md:border-b-2 text-wp-text-100 items-center"
:active-class="tab.matchChildren ? '!border-wp-text-100' : ''"
:exact-active-class="tab.matchChildren ? '' : '!border-wp-text-100'"
>
<Icon v-if="isExactActive || (isActive && tab.matchChildren)" name="chevron-right" class="md:hidden" />
<Icon
v-if="isExactActive || (isActive && tab.matchChildren)"
name="chevron-right"
class="md:hidden flex-shrink-0"
size="20"
/>
<Icon v-else name="blank" class="md:hidden" />
<span class="flex gap-2 items-center flex-row">
<Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" />
<span
class="flex gap-2 items-center md:justify-center flex-row py-1 px-2 w-full min-w-20 hover:bg-wp-background-200 rounded-md"
>
<Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" class="flex-shrink-0" size="20" />
<span>{{ tab.title }}</span>
<CountBadge v-if="tab.count" :value="tab.count" />
</span>