danvics/ytptube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

refactor: minor ui update

Browse source
This commit is contained in:
arabcoders 2026-04-26 20:18:38 +03:00
parent 50253c650a
commit f33dc84c57
6 changed files with 110 additions and 118 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
ui/app/assets/css/tailwind.css
View file

@ -33,6 +33,22 @@
} }
@layer components { @layer components {
.feature-meta-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.5rem;
}
@media (width >= 40rem) {
.feature-meta-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.feature-meta-grid > :last-child:nth-child(odd) {
grid-column: 1 / -1;
}
}
.shell-surface { .shell-surface {
background: background:
radial-gradient(circle at top left, rgb(99 102 241 / 0.1), transparent 28%), radial-gradient(circle at top left, rgb(99 102 241 / 0.1), transparent 28%),

67
ui/app/pages/conditions.vue
View file

@ -309,57 +309,48 @@
</span> </span>
</div> </div>
<button <div class="feature-meta-grid">
type="button" <button
class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left" type="button"
@click="toggleExpand(cond.id, 'filter')" class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
> @click="toggleExpand(cond.id, 'filter')"
<UIcon name="i-lucide-filter" class="mt-0.5 size-4 shrink-0 text-toned" /> >
<div class="min-w-0 flex-1"> <UIcon name="i-lucide-filter" class="mt-0.5 size-4 shrink-0 text-toned" />
<div class="text-xs font-medium text-toned">Filter</div> <div class="min-w-0 flex-1">
<span :class="['block', expandClass(cond.id, 'filter')]">{{ cond.filter }}</span> <div class="text-xs font-medium text-toned">Filter</div>
</div> <span :class="['block', expandClass(cond.id, 'filter')]">{{ cond.filter }}</span>
</button> </div>
</button>
<div v-if="cond.cli || cond.description" class="grid grid-cols-1 gap-2 sm:grid-cols-2">
<button <button
v-if="cond.cli" v-if="cond.cli"
type="button" type="button"
:class="[ class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
'flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left',
!cond.description && 'sm:col-span-2',
]"
@click="toggleExpand(cond.id, 'cli')" @click="toggleExpand(cond.id, 'cli')"
> >
<UIcon name="i-lucide-terminal" class="mt-0.5 size-4 shrink-0 text-toned" /> <UIcon name="i-lucide-terminal" class="mt-0.5 size-4 shrink-0 text-toned" />
<div class="min-w-0 flex-1"> <div class="min-w-0 flex-1">
<div class="text-xs font-medium text-toned">CLI</div> <div class="text-xs font-medium text-toned">CLI options</div>
<span :class="['block', expandClass(cond.id, 'cli')]">{{ cond.cli }}</span> <span :class="['block', expandClass(cond.id, 'cli')]">{{ cond.cli }}</span>
</div> </div>
</button> </button>
<button
v-if="cond.description"
type="button"
:class="[
'flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left',
!cond.cli && 'sm:col-span-2',
]"
@click="toggleExpand(cond.id, 'description')"
>
<UIcon
name="i-lucide-message-square-text"
class="mt-0.5 size-4 shrink-0 text-toned"
/>
<div class="min-w-0 flex-1">
<div class="text-xs font-medium text-toned">Description</div>
<span :class="['block', expandClass(cond.id, 'description')]">{{
cond.description
}}</span>
</div>
</button>
</div> </div>
<button
v-if="cond.description"
type="button"
class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
@click="toggleExpand(cond.id, 'description')"
>
<UIcon name="i-lucide-align-left" class="mt-0.5 size-4 shrink-0 text-toned" />
<div class="min-w-0 flex-1">
<div class="text-xs font-medium text-toned">Description</div>
<span :class="['block', expandClass(cond.id, 'description')]">{{
cond.description
}}</span>
</div>
</button>
<div <div
v-if="extrasEntries(cond.extras).length > 0" v-if="extrasEntries(cond.extras).length > 0"
class="rounded-md border border-default bg-muted/20 px-3 py-2" class="rounded-md border border-default bg-muted/20 px-3 py-2"

7
ui/app/pages/dl_fields.vue
View file

@ -300,13 +300,10 @@
</span> </span>
</div> </div>
<div class="grid grid-cols-1 gap-2 sm:grid-cols-2"> <div class="feature-meta-grid">
<button <button
type="button" type="button"
:class="[ class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
'flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left',
!field.description && 'sm:col-span-2',
]"
@click="toggleExpand(field.id, 'field')" @click="toggleExpand(field.id, 'field')"
> >
<UIcon name="i-lucide-terminal" class="mt-0.5 size-4 shrink-0 text-toned" /> <UIcon name="i-lucide-terminal" class="mt-0.5 size-4 shrink-0 text-toned" />

74
ui/app/pages/notifications.vue
View file

@ -363,29 +363,44 @@
</span> </span>
</div> </div>
<button <div class="feature-meta-grid">
type="button" <button
class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left" type="button"
@click="toggleExpand(item.id, 'url')" class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
> @click="toggleExpand(item.id, 'url')"
<UIcon name="i-lucide-link" class="mt-0.5 size-4 shrink-0 text-toned" /> >
<div class="min-w-0 flex-1"> <UIcon name="i-lucide-link" class="mt-0.5 size-4 shrink-0 text-toned" />
<div class="text-xs font-medium text-toned">Target URL</div> <div class="min-w-0 flex-1">
<a <div class="text-xs font-medium text-toned">Target URL</div>
:href="item.request.url" <a
target="_blank" :href="item.request.url"
rel="noreferrer" target="_blank"
class="block text-highlighted hover:underline" rel="noreferrer"
@click.stop class="block text-highlighted hover:underline"
> @click.stop
<span :class="['block', expandClass(item.id, 'url')]"> >
{{ item.request.url }} <span :class="['block', expandClass(item.id, 'url')]">
</span> {{ item.request.url }}
</a> </span>
</div> </a>
</button> </div>
</button>
<button
v-if="headerKeys(item).length > 0"
type="button"
class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
@click="toggleExpand(item.id, 'headers')"
>
<UIcon name="i-lucide-key" class="mt-0.5 size-4 shrink-0 text-toned" />
<div class="min-w-0 flex-1">
<div class="text-xs font-medium text-toned">Headers</div>
<span :class="['block', expandClass(item.id, 'headers')]">
{{ headerKeys(item).join(', ') }}
</span>
</div>
</button>
<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
<button <button
type="button" type="button"
class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left" class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
@ -417,21 +432,6 @@
</div> </div>
</button> </button>
</div> </div>
<button
v-if="headerKeys(item).length > 0"
type="button"
class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
@click="toggleExpand(item.id, 'headers')"
>
<UIcon name="i-lucide-key" class="mt-0.5 size-4 shrink-0 text-toned" />
<div class="min-w-0 flex-1">
<div class="text-xs font-medium text-toned">Headers</div>
<span :class="['block', expandClass(item.id, 'headers')]">
{{ headerKeys(item).join(', ') }}
</span>
</div>
</button>
</div> </div>
<template #footer> <template #footer>

40
ui/app/pages/presets.vue
View file

@ -306,29 +306,26 @@
</span> </span>
</div> </div>
<button <div v-if="item.folder || item.template || item.cli" class="feature-meta-grid">
v-if="item.folder" <button
type="button" v-if="item.folder"
class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left" type="button"
@click="toggleExpand(item.id, 'folder')" class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
> @click="toggleExpand(item.id, 'folder')"
<UIcon name="i-lucide-folder-output" class="mt-0.5 size-4 shrink-0 text-toned" /> >
<div class="min-w-0 flex-1"> <UIcon name="i-lucide-folder-output" class="mt-0.5 size-4 shrink-0 text-toned" />
<div class="text-xs font-medium text-toned">Download path</div> <div class="min-w-0 flex-1">
<span :class="['block', expandClass(item.id, 'folder')]">{{ <div class="text-xs font-medium text-toned">Download path</div>
calcPath(item.folder) <span :class="['block', expandClass(item.id, 'folder')]">{{
}}</span> calcPath(item.folder)
</div> }}</span>
</button> </div>
</button>
<div v-if="item.template || item.cli" class="grid grid-cols-1 gap-2 sm:grid-cols-2">
<button <button
v-if="item.template" v-if="item.template"
type="button" type="button"
:class="[ class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
'flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left',
!item.cli && 'sm:col-span-2',
]"
@click="toggleExpand(item.id, 'template')" @click="toggleExpand(item.id, 'template')"
> >
<UIcon name="i-lucide-file-code-2" class="mt-0.5 size-4 shrink-0 text-toned" /> <UIcon name="i-lucide-file-code-2" class="mt-0.5 size-4 shrink-0 text-toned" />
@ -343,10 +340,7 @@
<button <button
v-if="item.cli" v-if="item.cli"
type="button" type="button"
:class="[ class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
'flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left',
!item.template && 'sm:col-span-2',
]"
@click="toggleExpand(item.id, 'cli')" @click="toggleExpand(item.id, 'cli')"
> >
<UIcon name="i-lucide-terminal" class="mt-0.5 size-4 shrink-0 text-toned" /> <UIcon name="i-lucide-terminal" class="mt-0.5 size-4 shrink-0 text-toned" />

24
ui/app/pages/tasks.vue
View file

@ -470,13 +470,15 @@
</button> </button>
</div> </div>
<div class="grid grid-cols-1 gap-2 sm:grid-cols-2"> <div
v-if="
item.timer || item.folder || item.template || item.cli || willTaskBeProcessed(item)
"
class="feature-meta-grid"
>
<button <button
type="button" type="button"
:class="[ class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
'flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left',
!item.folder && 'sm:col-span-2',
]"
@click="toggleExpand(item.id, 'schedule')" @click="toggleExpand(item.id, 'schedule')"
> >
<UIcon <UIcon
@ -532,16 +534,11 @@
</span> </span>
</div> </div>
</button> </button>
</div>
<div v-if="item.template || item.cli" class="grid grid-cols-1 gap-2 sm:grid-cols-2">
<button <button
v-if="item.template" v-if="item.template"
type="button" type="button"
:class="[ class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
'flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left',
!item.cli && 'sm:col-span-2',
]"
@click="toggleExpand(item.id, 'template')" @click="toggleExpand(item.id, 'template')"
> >
<UIcon name="i-lucide-file-code-2" class="mt-0.5 size-4 shrink-0 text-toned" /> <UIcon name="i-lucide-file-code-2" class="mt-0.5 size-4 shrink-0 text-toned" />
@ -556,10 +553,7 @@
<button <button
v-if="item.cli" v-if="item.cli"
type="button" type="button"
:class="[ class="flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left"
'flex min-w-0 w-full items-start gap-2 rounded-md border border-default bg-muted/20 px-3 py-2 text-left',
!item.template && 'sm:col-span-2',
]"
@click="toggleExpand(item.id, 'cli')" @click="toggleExpand(item.id, 'cli')"
> >
<UIcon name="i-lucide-terminal" class="mt-0.5 size-4 shrink-0 text-toned" /> <UIcon name="i-lucide-terminal" class="mt-0.5 size-4 shrink-0 text-toned" />