daan/ledgerrz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

formatting, browser tests

Browse Source
This commit is contained in:
Daan Meijer
2026-06-16 10:53:44 +02:00
parent 9a9a901d46
commit d44bcf6fda
15 changed files with 301 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/pages/Dashboard.vue
+27 -24
View File
@@ -62,7 +62,7 @@ function formatTime(isoString: string): string {
'c-dashboard__badge-type',
entity.type === 'Dynamic'
? 'c-dashboard__badge-type--dynamic'
: 'c-dashboard__badge-type--ledger'
: 'c-dashboard__badge-type--ledger',
]"
>
{{ entity.type }}
@@ -71,7 +71,10 @@ function formatTime(isoString: string): string {
{{ entity.unread_count }} New
</span>
</div>
<Link :href="entity.url" class="c-dashboard__entity-link">
<Link
:href="entity.url"
class="c-dashboard__entity-link"
>
<h3 class="c-dashboard__entity-title">
{{ entity.name }}
</h3>
@@ -103,7 +106,9 @@ function formatTime(isoString: string): string {
v-if="entity.context_activities.length > 0"
class="c-dashboard__divider"
>
<span class="c-dashboard__divider-text">New Activity Below</span>
<span class="c-dashboard__divider-text"
>New Activity Below</span
>
</div>
<!-- New / Unread Activities -->
@@ -131,9 +136,7 @@ function formatTime(isoString: string): string {
<!-- Empty Caught-Up State -->
<div v-else class="c-dashboard__empty-state">
<div class="c-dashboard__empty-icon">
🔒
</div>
<div class="c-dashboard__empty-icon">🔒</div>
<p class="c-dashboard__empty-text">
All chambers are currently quiet.
</p>
@@ -149,7 +152,7 @@ function formatTime(isoString: string): string {
@reference "../../css/app.css";
.c-dashboard {
@apply py-8 px-4 sm:px-6 lg:px-8;
@apply px-4 py-8 sm:px-6 lg:px-8;
}
.c-dashboard__container {
@@ -157,7 +160,7 @@ function formatTime(isoString: string): string {
}
.c-dashboard__title {
@apply text-xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100 mb-6;
@apply mb-6 text-xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100;
}
.c-dashboard__grid {
@@ -169,15 +172,15 @@ function formatTime(isoString: string): string {
}
.c-dashboard__card-header {
@apply p-6 border-b border-neutral-100 dark:border-neutral-800/30;
@apply border-b border-neutral-100 p-6 dark:border-neutral-800/30;
}
.c-dashboard__entity-meta {
@apply flex items-center gap-2 mb-2;
@apply mb-2 flex items-center gap-2;
}
.c-dashboard__badge-type {
@apply text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded;
@apply rounded px-1.5 py-0.5 text-[10px] font-bold tracking-wider uppercase;
}
.c-dashboard__badge-type--dynamic {
@@ -189,7 +192,7 @@ function formatTime(isoString: string): string {
}
.c-dashboard__unread-count {
@apply text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded bg-red-100 text-red-800 dark:bg-red-950/20 dark:text-red-400;
@apply rounded bg-red-100 px-1.5 py-0.5 text-[10px] font-bold tracking-wider text-red-800 uppercase dark:bg-red-950/20 dark:text-red-400;
}
.c-dashboard__entity-link {
@@ -201,23 +204,23 @@ function formatTime(isoString: string): string {
}
.c-dashboard__activity-list {
@apply flex-1 p-6 space-y-4;
@apply flex-1 space-y-4 p-6;
}
.c-dashboard__activity-item {
@apply p-4 rounded-lg border;
@apply rounded-lg border p-4;
}
.c-dashboard__activity-item--read {
@apply bg-neutral-50/50 border-neutral-200 opacity-60 dark:bg-neutral-950/20 dark:border-neutral-800/50;
@apply border-neutral-200 bg-neutral-50/50 opacity-60 dark:border-neutral-800/50 dark:bg-neutral-950/20;
}
.c-dashboard__activity-item--unread {
@apply bg-red-50/10 border-red-200/50 dark:bg-red-950/5 dark:border-red-900/30;
@apply border-red-200/50 bg-red-50/10 dark:border-red-900/30 dark:bg-red-950/5;
}
.c-dashboard__activity-meta {
@apply flex items-center gap-2 mb-1.5 text-xs;
@apply mb-1.5 flex items-center gap-2 text-xs;
}
.c-dashboard__activity-user {
@@ -229,7 +232,7 @@ function formatTime(isoString: string): string {
}
.c-dashboard__new-badge {
@apply ml-auto text-[9px] font-bold text-red-600 bg-red-100 dark:text-red-400 dark:bg-red-950/30 px-1 py-0.5 rounded;
@apply ml-auto rounded bg-red-100 px-1 py-0.5 text-[9px] font-bold text-red-600 dark:bg-red-950/30 dark:text-red-400;
}
.c-dashboard__activity-desc {
@@ -237,11 +240,11 @@ function formatTime(isoString: string): string {
}
.c-dashboard__divider {
@apply relative flex items-center justify-center my-4;
@apply relative my-4 flex items-center justify-center;
}
.c-dashboard__divider-text {
@apply bg-white dark:bg-neutral-900 px-3 text-[10px] font-bold uppercase tracking-widest text-neutral-400 dark:text-neutral-500 z-10;
@apply z-10 bg-white px-3 text-[10px] font-bold tracking-widest text-neutral-400 uppercase dark:bg-neutral-900 dark:text-neutral-500;
}
.c-dashboard__divider::before {
@@ -250,11 +253,11 @@ function formatTime(isoString: string): string {
}
.c-dashboard__empty-state {
@apply flex flex-col items-center justify-center p-12 text-center rounded-2xl border border-dashed border-neutral-200 dark:border-neutral-800 min-h-[300px];
@apply flex min-h-[300px] flex-col items-center justify-center rounded-2xl border border-dashed border-neutral-200 p-12 text-center dark:border-neutral-800;
}
.c-dashboard__empty-icon {
@apply text-4xl mb-4;
@apply mb-4 text-4xl;
}
.c-dashboard__empty-text {
@@ -262,6 +265,6 @@ function formatTime(isoString: string): string {
}
.c-dashboard__empty-subtext {
@apply mt-1 text-sm text-neutral-500 dark:text-neutral-500 max-w-md;
@apply mt-1 max-w-md text-sm text-neutral-500 dark:text-neutral-500;
}
</style>
</style>
resources/js/pages/Dynamics/Create.vue
+9 -8
View File
@@ -30,13 +30,16 @@ function submit() {
<div class="c-dynamics-create__container">
<div class="c-dynamics-create__card">
<div class="c-dynamics-create__body">
<h3 class="c-dynamics-create__title">Create a New Dynamic</h3>
<h3 class="c-dynamics-create__title">
Create a New Dynamic
</h3>
<form @submit.prevent="submit" class="c-dynamics-create__form">
<form
@submit.prevent="submit"
class="c-dynamics-create__form"
>
<div class="c-dynamics-create__field">
<label
for="name"
class="c-dynamics-create__label"
<label for="name" class="c-dynamics-create__label"
>Name</label
>
<input
@@ -54,9 +57,7 @@ function submit() {
</div>
<div class="c-dynamics-create__field">
<label
for="rules"
class="c-dynamics-create__label"
<label for="rules" class="c-dynamics-create__label"
>Rules</label
>
<textarea
resources/js/pages/Dynamics/Index.vue
+3 -1
View File
@@ -51,7 +51,9 @@ const breadcrumbs = [
</div>
</div>
<div v-else>
<p class="c-dynamics-index__empty">You don't have any dynamics yet.</p>
<p class="c-dynamics-index__empty">
You don't have any dynamics yet.
</p>
</div>
</div>
</div>
resources/js/pages/Dynamics/Show.vue
+1
View File
@@ -17,6 +17,7 @@ const props = defineProps<{
id: number;
name: string;
score: number;
alignment: string;
media?: Array<{ id: number; url: string; mime_type: string }>;
}>;
};
resources/js/pages/Ledgers/Show.vue
+7 -9
View File
@@ -188,7 +188,8 @@ function isOwnerUser(userId: number): boolean {
v-else-if="ledger.alignment === 'negative'"
class="c-ledger-show__alignment-badge c-ledger-show__alignment-badge--negative"
>
▼ Negative Alignment — A lower score is better (demerits / infractions).
▼ Negative Alignment — A lower score is better
(demerits / infractions).
</span>
<span
v-else
@@ -254,10 +255,7 @@ function isOwnerUser(userId: number): boolean {
class="c-ledger-show__lightbox"
@click="closeLightbox"
>
<button
@click="closeLightbox"
class="c-ledger-show__lightbox-close"
>
<button @click="closeLightbox" class="c-ledger-show__lightbox-close">
✕
</button>
<div class="c-ledger-show__lightbox-content" @click.stop>
@@ -325,19 +323,19 @@ function isOwnerUser(userId: number): boolean {
}
.c-ledger-show__alignment-badge {
@apply text-xs font-semibold uppercase tracking-wide px-2.5 py-1 rounded;
@apply rounded px-2.5 py-1 text-xs font-semibold tracking-wide uppercase;
}
.c-ledger-show__alignment-badge--positive {
@apply text-green-600 bg-green-50/50 dark:text-green-400 dark:bg-green-950/20;
@apply bg-green-50/50 text-green-600 dark:bg-green-950/20 dark:text-green-400;
}
.c-ledger-show__alignment-badge--negative {
@apply text-red-600 bg-red-50/50 dark:text-red-400 dark:bg-red-950/20;
@apply bg-red-50/50 text-red-600 dark:bg-red-950/20 dark:text-red-400;
}
.c-ledger-show__alignment-badge--neutral {
@apply text-gray-500 bg-gray-50/50 dark:text-gray-400 dark:bg-neutral-800/20;
@apply bg-gray-50/50 text-gray-500 dark:bg-neutral-800/20 dark:text-gray-400;
}
.c-ledger-show__media-list {