Skip to content

refactor: minor fixes for better mobile view. #581

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
arabcoders merged 1 commit into from
Mar 26, 2026
Merged

refactor: minor fixes for better mobile view. #581

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 61 additions & 25 deletions ui/app/components/History.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
{{ selectedElms.length }}
</UBadge>

<UDropdownMenu :items="bulkActionGroups">
<UDropdownMenu :items="bulkActionGroups" :modal="false">
<UButton
color="neutral"
variant="outline"
Expand Down Expand Up @@ -52,7 +52,7 @@
class="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-default bg-default"
>
<div class="w-full max-w-full overflow-x-auto overscroll-x-contain">
<table class="min-w-325 w-full text-sm">
<table class="min-w-325 max-w-455 table-fixed w-full text-sm">
<thead class="bg-muted/40 text-xs uppercase tracking-wide text-toned">
<tr class="text-center [&>th]:px-3 [&>th]:py-3 [&>th]:font-semibold">
<th class="w-[5%]">
Expand All @@ -63,11 +63,11 @@
/>
</button>
</th>
<th class="w-full text-left">Title</th>
<th class="w-[15%]">Status</th>
<th class="w-[15%]">Created</th>
<th class="w-[10%]">Size/Starts</th>
<th class="w-[1%]">Actions</th>
<th class="text-left">Title</th>
<th class="w-[7%]">Status</th>
<th class="w-[7%]">Created</th>
<th class="w-[7%]">Size/Starts</th>
<th class="w-[8%]">Actions</th>
</tr>
</thead>

Expand All @@ -85,8 +85,8 @@
</label>
</td>

<td class="px-3 py-3 align-top">
<div class="flex items-start justify-between gap-3">
<td class="w-0 px-3 py-3 align-top">
<div class="flex min-w-0 items-start justify-between gap-3">
<div class="min-w-0 flex-1">
<UTooltip
:text="
Expand Down Expand Up @@ -159,16 +159,16 @@

<p
v-if="item.error"
class="is-text-overflow mt-2 cursor-pointer text-sm text-error"
@click="toggle_class($event)"
:class="messageClass(item._id, 'error', 'list', 'mt-2')"
@click="toggleMessage(item._id, 'error', 'list')"
>
{{ item.error }}
</p>

<p
v-if="showMessage(item)"
class="is-text-overflow mt-1 cursor-pointer text-sm text-error"
@click="toggle_class($event)"
:class="messageClass(item._id, 'msg', 'list', 'mt-1')"
@click="toggleMessage(item._id, 'msg', 'list')"
>
{{ item.msg }}
</p>
Expand Down Expand Up @@ -244,7 +244,7 @@
@click="() => void removeItem(item)"
/>

<UDropdownMenu v-if="item.url" :items="itemActionGroups(item)">
<UDropdownMenu v-if="item.url" :items="itemActionGroups(item)" :modal="false">
<UButton
color="neutral"
variant="outline"
Expand Down Expand Up @@ -389,7 +389,7 @@
</figure>
</div>

<div class="grid gap-2 text-sm sm:auto-cols-fr sm:grid-flow-col">
<div class="flex flex-wrap gap-2 text-sm *:min-w-32 *:flex-1">
<div
class="rounded-md border border-default bg-muted/20 px-3 py-2 text-center text-default"
>
Expand Down Expand Up @@ -440,7 +440,7 @@
</div>
</div>

<div class="grid gap-2 sm:grid-cols-3">
<div class="flex flex-wrap gap-2 *:min-w-32 *:flex-1">
<UButton
v-if="!item.filename"
color="warning"
Expand Down Expand Up @@ -475,7 +475,7 @@
{{ config.app.remove_files ? 'Remove' : 'Clear' }}
</UButton>

<UDropdownMenu :items="itemActionGroups(item)" class="w-full">
<UDropdownMenu :items="itemActionGroups(item)" :modal="false" class="w-full">
<UButton
color="neutral"
variant="outline"
Expand All @@ -494,16 +494,16 @@
>
<p
v-if="item.error"
class="is-text-overflow cursor-pointer text-sm text-error"
@click="toggle_class($event)"
:class="messageClass(item._id, 'error', 'card')"
@click="toggleMessage(item._id, 'error', 'card')"
>
{{ item.error }}
</p>

<p
v-if="showMessage(item)"
class="is-text-overflow cursor-pointer text-sm text-error"
@click="toggle_class($event)"
:class="messageClass(item._id, 'msg', 'card')"
@click="toggleMessage(item._id, 'msg', 'card')"
>
{{ item.msg }}
</p>
Expand Down Expand Up @@ -652,6 +652,7 @@ const masterSelectAll = ref(false);
const embed_url = ref('');
const video_item = ref<StoreItem | null>(null);
const loadMoreTrigger = ref<HTMLElement | null>(null);
const expandedMessages = reactive<Record<string, Set<string>>>({});

const paginationInfo = computed(() => stateStore.getPagination());

Expand Down Expand Up @@ -1277,10 +1278,45 @@ const downloadSelected = async () => {
}
};

const toggle_class = (e: Event) =>
['is-text-overflow', 'is-word-break'].forEach((c) =>
(e.currentTarget as HTMLElement).classList.toggle(c),
);
const toggleMessage = (itemId: string, field: 'error' | 'msg', view: 'list' | 'card') => {
const key = `${itemId}:${view}`;

if (!expandedMessages[key]) {
expandedMessages[key] = new Set();
}

if (expandedMessages[key].has(field)) {
expandedMessages[key].delete(field);
return;
}

expandedMessages[key].add(field);
};

const isMessageExpanded = (itemId: string, field: 'error' | 'msg', view: 'list' | 'card') =>
expandedMessages[`${itemId}:${view}`]?.has(field) ?? false;

const messageClass = (
itemId: string,
field: 'error' | 'msg',
view: 'list' | 'card',
spacingClass = '',
) => {
const expanded = isMessageExpanded(itemId, field, view);
const base = ['cursor-pointer', 'text-sm', 'text-error'];

if (spacingClass) {
base.push(spacingClass);
}

if ('card' === view) {
base.push(expanded ? 'whitespace-pre-wrap break-words' : 'line-clamp-2 break-words');
return base;
}

base.push(expanded ? 'whitespace-pre-wrap break-words' : 'block max-w-full truncate');
return base;
};

const removeFromArchiveDialog = async (item: StoreItem): Promise<void> => {
const options = [
Expand Down
2 changes: 1 addition & 1 deletion ui/app/components/NewDownload.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -375,7 +375,7 @@
<div
class="flex flex-wrap items-center justify-between gap-2 border-t border-default pt-4"
>
<UDropdownMenu class="sm:hidden" :items="mobileActionGroups">
<UDropdownMenu class="sm:hidden" :items="mobileActionGroups" :modal="false">
<UButton
color="neutral"
variant="outline"
Expand Down
10 changes: 5 additions & 5 deletions ui/app/components/Queue.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
{{ selectedElms.length }}
</UBadge>

<UDropdownMenu :items="bulkActionGroups">
<UDropdownMenu :items="bulkActionGroups" :modal="false">
<UButton
color="neutral"
variant="outline"
Expand Down Expand Up @@ -225,7 +225,7 @@
@click="() => void pauseItem(item)"
/>

<UDropdownMenu :items="itemActionGroups(item)">
<UDropdownMenu :items="itemActionGroups(item)" :modal="false">
<UButton
color="neutral"
variant="outline"
Expand Down Expand Up @@ -380,7 +380,7 @@
</div>
</div>

<div class="grid gap-2 text-sm sm:auto-cols-fr sm:grid-flow-col">
<div class="flex flex-wrap gap-2 text-sm *:min-w-32 *:flex-1">
<div
class="rounded-md border border-default bg-muted/20 px-3 py-2 text-center text-default"
>
Expand Down Expand Up @@ -417,7 +417,7 @@
</div>
</div>

<div class="grid gap-2 sm:auto-cols-fr sm:grid-flow-col">
<div class="flex flex-wrap gap-2 *:min-w-32 *:flex-1">
<UButton
color="warning"
variant="outline"
Expand Down Expand Up @@ -450,7 +450,7 @@
Pause
</UButton>

<UDropdownMenu :items="itemActionGroups(item)" class="w-full">
<UDropdownMenu :items="itemActionGroups(item)" :modal="false" class="w-full">
<UButton
color="neutral"
variant="outline"
Expand Down
16 changes: 13 additions & 3 deletions ui/app/components/SettingsPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,21 @@
@update:open="(open) => !open && emitter('close')"
>
<template #header>
<div class="flex items-center justify-between gap-3">
<div>
<div class="flex w-full items-start gap-3">
<div class="min-w-0 flex-1">
<p class="text-base font-semibold text-highlighted">WebUI Settings</p>
<p class="text-sm text-toned">Adjust interface behavior and download defaults.</p>
<p class="text-sm text-toned">Adjust interface behavior.</p>
</div>

<UButton
color="neutral"
variant="ghost"
size="sm"
square
icon="i-lucide-x"
class="ml-auto shrink-0 sm:hidden"
@click="emitter('close')"
/>
</div>
</template>

Expand Down
3 changes: 2 additions & 1 deletion ui/app/composables/useDocs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const DOCS_ENTRIES: DocsEntry[] = [
{
id: 'faq',
title: 'FAQ',
description: 'Answers for setup details, task handlers, and common issues.',
description: 'Frequently asked questions about the project and troubleshooting.',
file: 'FAQ.md',
route: '/docs/faq',
slug: ['faq'],
Expand Down Expand Up @@ -77,6 +77,7 @@ const getDocsNavigationEntries = () =>
DOCS_ENTRIES.map((entry) => ({
id: entry.id,
label: entry.navLabel,
description: entry.description,
icon: entry.icon,
to: entry.route,
}));
Expand Down
Loading
Loading