OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-05-30 18:39:15 +00:00
Code Issues Actions 11 Packages Projects Releases Wiki Activity

refac: styling

Browse Source
This commit is contained in:
Timothy J. Baek 2024-10-21 01:54:43 -07:00
parent fc6dc43a19
commit f1b0d7eb41
2 changed files with 33 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/components/common/Pagination.svelte
View File

@ -14,7 +14,7 @@
<Pagination.Root bind:page {count} {perPage} let:pages> <Pagination.Root bind:page {count} {perPage} let:pages>
<div class="my-2 flex items-center"> <div class="my-2 flex items-center">
<Pagination.PrevButton <Pagination.PrevButton
class="mr-[25px] inline-flex size-8 items-center justify-center rounded-[9px] bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 active:scale-98 disabled:cursor-not-allowed disabled:text-gray-400 dark:disabled:text-gray-700 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent" class="mr-[25px] inline-flex size-8 items-center justify-center rounded-[9px] bg-transparent hover:bg-gray-50 dark:hover:bg-gray-850 active:scale-98 disabled:cursor-not-allowed disabled:text-gray-400 dark:disabled:text-gray-700 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent"
> >
<ChevronLeft className="size-4" strokeWidth="2" /> <ChevronLeft className="size-4" strokeWidth="2" />
</Pagination.PrevButton> </Pagination.PrevButton>
@ -25,7 +25,7 @@
{:else} {:else}
<Pagination.Page <Pagination.Page
{page} {page}
class="inline-flex size-8 items-center justify-center rounded-[9px] bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 text-sm font-medium hover:bg-dark-10 active:scale-98 disabled:cursor-not-allowed disabled:opacity-50 hover:disabled:bg-transparent data-[selected]:bg-black data-[selected]:text-gray-100 data-[selected]:hover:bg-black dark:data-[selected]:bg-white dark:data-[selected]:text-gray-900 dark:data-[selected]:hover:bg-white" class="inline-flex size-8 items-center justify-center rounded-[9px] bg-transparent hover:bg-gray-50 dark:hover:bg-gray-850 text-sm font-medium hover:bg-dark-10 active:scale-98 disabled:cursor-not-allowed disabled:opacity-50 hover:disabled:bg-transparent data-[selected]:bg-gray-50 data-[selected]:text-gray-700 data-[selected]:hover:bg-gray-100 dark:data-[selected]:bg-gray-850 dark:data-[selected]:text-gray-50 dark:data-[selected]:hover:bg-gray-800 transition"
> >
{page.value} {page.value}
</Pagination.Page> </Pagination.Page>
@ -33,7 +33,7 @@
{/each} {/each}
</div> </div>
<Pagination.NextButton <Pagination.NextButton
class="ml-[25px] inline-flex size-8 items-center justify-center rounded-[9px] bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 active:scale-98 disabled:cursor-not-allowed disabled:text-gray-400 dark:disabled:text-gray-700 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent" class="ml-[25px] inline-flex size-8 items-center justify-center rounded-[9px] bg-transparent hover:bg-gray-50 dark:hover:bg-gray-850 active:scale-98 disabled:cursor-not-allowed disabled:text-gray-400 dark:disabled:text-gray-700 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent"
> >
<ChevronRight className="size-4" strokeWidth="2" /> <ChevronRight className="size-4" strokeWidth="2" />
</Pagination.NextButton> </Pagination.NextButton>

62
src/routes/(app)/admin/+page.svelte
View File

@ -20,6 +20,7 @@
import AddUserModal from '$lib/components/admin/AddUserModal.svelte'; import AddUserModal from '$lib/components/admin/AddUserModal.svelte';
import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte'; import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
import Badge from '$lib/components/common/Badge.svelte'; import Badge from '$lib/components/common/Badge.svelte';
import Plus from '$lib/components/icons/Plus.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
@ -127,7 +128,7 @@
<div class="flex gap-1"> <div class="flex gap-1">
<input <input
class="w-full md:w-60 rounded-xl py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full md:w-60 rounded-xl py-1.5 px-1 text-sm bg-transparent outline-none"
placeholder={$i18n.t('Search')} placeholder={$i18n.t('Search')}
bind:value={search} bind:value={search}
/> />
@ -135,63 +136,60 @@
<div class="flex gap-0.5"> <div class="flex gap-0.5">
<Tooltip content={$i18n.t('Add User')}> <Tooltip content={$i18n.t('Add User')}>
<button <button
class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition font-medium text-sm flex items-center space-x-1" class=" p-2 rounded-xl hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 transition font-medium text-sm flex items-center space-x-1"
on:click={() => { on:click={() => {
showAddUserModal = !showAddUserModal; showAddUserModal = !showAddUserModal;
}} }}
> >
<svg <Plus className="size-3.5" />
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="w-4 h-4"
>
<path
d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
/>
</svg>
</button> </button>
</Tooltip> </Tooltip>
</div> </div>
</div> </div>
</div> </div>
<div class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full"> <div
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full"> class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full rounded pt-0.5"
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400"> >
<tr> <table
class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full rounded"
>
<thead
class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400 -translate-y-0.5"
>
<tr class="">
<th <th
scope="col" scope="col"
class="px-3 py-2 cursor-pointer select-none" class="px-3 py-1.5 cursor-pointer select-none"
on:click={() => setSortKey('role')} on:click={() => setSortKey('role')}
> >
{$i18n.t('Role')} {$i18n.t('Role')}
{#if sortKey === 'role'} {#if sortKey === 'role'}
{sortOrder === 'asc' ? '▲' : '▼'} <span class="font-normal ml-1">{sortOrder === 'asc' ? '▲' : '▼'}</span>
{:else} {:else}
<span class="invisible">▲</span> <span class="invisible">▲</span>
{/if} {/if}
</th> </th>
<th <th
scope="col" scope="col"
class="px-3 py-2 cursor-pointer select-none" class="px-3 py-1.5 cursor-pointer select-none"
on:click={() => setSortKey('name')} on:click={() => setSortKey('name')}
> >
{$i18n.t('Name')} {$i18n.t('Name')}
{#if sortKey === 'name'} {#if sortKey === 'name'}
{sortOrder === 'asc' ? '▲' : '▼'} <span class="font-normal ml-1">{sortOrder === 'asc' ? '▲' : '▼'}</span>
{:else} {:else}
<span class="invisible">▲</span> <span class="invisible">▲</span>
{/if} {/if}
</th> </th>
<th <th
scope="col" scope="col"
class="px-3 py-2 cursor-pointer select-none" class="px-3 py-1.5 cursor-pointer select-none"
on:click={() => setSortKey('email')} on:click={() => setSortKey('email')}
> >
{$i18n.t('Email')} {$i18n.t('Email')}
{#if sortKey === 'email'} {#if sortKey === 'email'}
{sortOrder === 'asc' ? '▲' : '▼'} <span class="font-normal ml-1">{sortOrder === 'asc' ? '▲' : '▼'}</span>
{:else} {:else}
<span class="invisible">▲</span> <span class="invisible">▲</span>
{/if} {/if}
@ -199,24 +197,24 @@
<th <th
scope="col" scope="col"
class="px-3 py-2 cursor-pointer select-none" class="px-3 py-1.5 cursor-pointer select-none"
on:click={() => setSortKey('last_active_at')} on:click={() => setSortKey('last_active_at')}
> >
{$i18n.t('Last Active')} {$i18n.t('Last Active')}
{#if sortKey === 'last_active_at'} {#if sortKey === 'last_active_at'}
{sortOrder === 'asc' ? '▲' : '▼'} <span class="font-normal ml-1">{sortOrder === 'asc' ? '▲' : '▼'}</span>
{:else} {:else}
<span class="invisible">▲</span> <span class="invisible">▲</span>
{/if} {/if}
</th> </th>
<th <th
scope="col" scope="col"
class="px-3 py-2 cursor-pointer select-none" class="px-3 py-1.5 cursor-pointer select-none"
on:click={() => setSortKey('created_at')} on:click={() => setSortKey('created_at')}
> >
{$i18n.t('Created at')} {$i18n.t('Created at')}
{#if sortKey === 'created_at'} {#if sortKey === 'created_at'}
{sortOrder === 'asc' ? '▲' : '▼'} <span class="font-normal ml-1">{sortOrder === 'asc' ? '▲' : '▼'}</span>
{:else} {:else}
<span class="invisible">▲</span> <span class="invisible">▲</span>
{/if} {/if}
@ -224,12 +222,12 @@
<th <th
scope="col" scope="col"
class="px-3 py-2 cursor-pointer select-none" class="px-3 py-1.5 cursor-pointer select-none"
on:click={() => setSortKey('oauth_sub')} on:click={() => setSortKey('oauth_sub')}
> >
{$i18n.t('OAuth ID')} {$i18n.t('OAuth ID')}
{#if sortKey === 'oauth_sub'} {#if sortKey === 'oauth_sub'}
{sortOrder === 'asc' ? '▲' : '▼'} <span class="font-normal ml-1">{sortOrder === 'asc' ? '▲' : '▼'}</span>
{:else} {:else}
<span class="invisible">▲</span> <span class="invisible">▲</span>
{/if} {/if}
@ -238,7 +236,7 @@
<th scope="col" class="px-3 py-2 text-right" /> <th scope="col" class="px-3 py-2 text-right" />
</tr> </tr>
</thead> </thead>
<tbody> <tbody class="">
{#each users {#each users
.filter((user) => { .filter((user) => {
if (search === '') { if (search === '') {
@ -254,8 +252,8 @@
if (a[sortKey] > b[sortKey]) return sortOrder === 'asc' ? 1 : -1; if (a[sortKey] > b[sortKey]) return sortOrder === 'asc' ? 1 : -1;
return 0; return 0;
}) })
.slice((page - 1) * 20, page * 20) as user} .slice((page - 1) * 20, page * 20) as user, userIdx}
<tr class="bg-white border-b dark:bg-gray-900 dark:border-gray-850 text-xs"> <tr class="bg-white dark:bg-gray-900 dark:border-gray-850 text-xs">
<td class="px-3 py-1 min-w-[7rem] w-28"> <td class="px-3 py-1 min-w-[7rem] w-28">
<button <button
on:click={() => { on:click={() => {
@ -376,7 +374,7 @@
</table> </table>
</div> </div>
<div class=" text-gray-500 text-xs mt-2 text-right"> <div class=" text-gray-500 text-xs mt-1.5 text-right">
ⓘ {$i18n.t("Click on the user role button to change a user's role.")} ⓘ {$i18n.t("Click on the user role button to change a user's role.")}
</div> </div>