Ryan/drop
1
0
Fork 0
mirror of https://github.com/Drop-OSS/drop.git synced 2025-11-13 16:22:39 +10:00
Code Issues Packages Projects Releases Wiki Activity

Many new improvments and features to the UI (#76)

Browse Source 
* feat(general): many new improvments and features to the UI

* fix: fix lints and run preetier

* fix: furthermore fixes

* chore: fix preetier eslint issue

* stlye: reposition mark all as read button for better placement

* fix: fix inccorect positioning on the mark all as read buton, again

* fix: fix account related issue with predefined types and styling

* fix: fix notification button dissapearance & type definition

* fix: fix auth page styling

* stlye: fixed styling on users list

* fix: fix lint dead code collector

* fix: please the prettier gods

* fix(notifications): seriously serialising

* chore: please the prettier gods once again, o holy one

* fix: remove eslint thing, im blaming eslint for that one

---------

Co-authored-by: Aden <aden@adenmgb.com>
This commit is contained in:
Aden Lindsay
2025-06-04 13:26:23 +09:30
committed by GitHub
parent 4f8ea3e4ff
commit c7fab132ab
11 changed files with 682 additions and 371 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
pages/admin/users/auth/index.vue
View File

@ -21,20 +21,24 @@
<li
v-for="authMech in authenticationMechanisms"
:key="authMech.name"
class="overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900"
class="group overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900 shadow-sm transition-all duration-200 hover:shadow-lg hover:shadow-zinc-900/50 hover:scale-[1.02] hover:border-zinc-700"
>
<div class="flex items-center gap-x-4 border-b border-zinc-800 p-6">
<component
:is="authMech.icon"
:alt="`${authMech.name} icon`"
class="h-8 w-8 flex-none rounded-lg text-zinc-100 object-cover"
/>
<div
class="flex h-10 w-10 flex-none items-center justify-center rounded-lg bg-zinc-800/50 ring-1 ring-zinc-700/50 transition-all duration-200 group-hover:bg-zinc-800 group-hover:ring-zinc-600/50"
>
<component
:is="authMech.icon"
:alt="`${authMech.name} icon`"
class="h-6 w-6 text-zinc-100 transition-all duration-200 group-hover:scale-110"
/>
</div>
<div class="text-sm/6 font-medium text-zinc-100">
{{ authMech.name }}
</div>
<Menu v-if="authMech.route" as="div" class="relative ml-auto">
<MenuButton
class="-m-2.5 block p-2.5 text-gray-400 hover:text-gray-500"
class="-m-2.5 block p-2.5 text-zinc-400 hover:text-zinc-300 transition-colors duration-200"
>
<span class="sr-only">Open options</span>
<EllipsisHorizontalIcon class="h-5 w-5" aria-hidden="true" />
@ -55,7 +59,7 @@
:href="authMech.route"
:class="[
active ? 'bg-zinc-800 outline-none' : '',
'block px-3 py-1 text-sm/6 text-zinc-100',
'block px-3 py-1 text-sm/6 text-zinc-100 transition-colors duration-200',
]"
>Configure<span class="sr-only"
>, {{ authMech.name }}</span
@ -70,11 +74,18 @@
<div class="flex justify-between gap-x-4 py-3">
<dt class="text-zinc-400">Enabled</dt>
<dd class="flex items-center">
<CheckIcon
v-if="authMech.enabled"
class="w-4 h-4 text-green-600"
/>
<XMarkIcon v-else class="w-4 h-4 text-red-600" />
<span
:class="[
'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset',
authMech.enabled
? 'bg-green-400/10 text-green-400 ring-green-400/20'
: 'bg-red-400/10 text-red-400 ring-red-400/20',
]"
>
<CheckIcon v-if="authMech.enabled" class="w-4 h-4 mr-1" />
<XMarkIcon v-else class="w-4 h-4 mr-1" />
{{ authMech.enabled ? "Enabled" : "Disabled" }}
</span>
</dd>
</div>
<div v-if="authMech.settings">
@ -84,7 +95,7 @@
class="flex flex-nowrap justify-between gap-x-4 py-2"
>
<dt class="text-zinc-400">{{ key }}</dt>
<dd class="text-gray-500 truncate">
<dd class="text-zinc-300 truncate">
{{ value }}
</dd>
</div>