trent_larson/crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 20 Releases 5 Wiki Activity

refactor: convert entity display to list style

Browse Source 
- Switch from grid display to list layout for persons and projects
- Re-styled special entities (unnamed, You) to match
- Added max-height limit to list in preparation for scrolling and displaying more items
This commit is contained in:
Jose Olarte III
2025-10-24 13:26:36 +08:00
parent 2049c9b6ec
commit e647af0777
6 changed files with 55 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/styles/tailwind.css
View File

@@ -38,7 +38,7 @@
}
.dialog {
@apply bg-white p-4 rounded-lg w-full max-w-lg;
@apply bg-white p-4 rounded-lg w-full max-w-lg max-h-[calc(100vh-3rem)] overflow-y-auto;
}
/* Markdown content styling to restore list elements */

17
src/components/EntityGrid.vue
View File

@@ -2,7 +2,7 @@
GiftedDialog.vue to provide a reusable grid layout * for displaying people,
projects, and special entities with selection. * * @author Matthew Raymer */
<template>
<ul :class="gridClasses">
<ul class="border-t border-slate-300 mb-4 max-h-[60vh] overflow-y-auto">
<!-- Special entities (You, Unnamed) for people grids -->
<template v-if="entityType === 'people'">
<!-- "You" entity -->
@@ -205,19 +205,6 @@ export default class EntityGrid extends Vue {
return "text-xs text-slate-500 italic col-span-full";
}
/**
* Computed CSS classes for the grid layout
*/
get gridClasses(): string {
const baseClasses = "grid gap-x-2 gap-y-4 text-center mb-4";
if (this.entityType === "projects") {
return `${baseClasses} grid-cols-3 md:grid-cols-4`;
} else {
return `${baseClasses} grid-cols-4 sm:grid-cols-5 md:grid-cols-6`;
}
}
/**
* Computed entities to display - uses function prop if provided, otherwise defaults
*/
@@ -231,7 +218,7 @@ export default class EntityGrid extends Vue {
}
// Default implementation for backward compatibility
const maxDisplay = this.entityType === "projects" ? 7 : this.maxItems;
const maxDisplay = this.entityType === "projects" ? 10 : this.maxItems;
return this.entities.slice(0, maxDisplay);
}

38
src/components/PersonCard.vue
View File

@@ -3,30 +3,25 @@ GiftedDialog.vue to handle person entity display * with selection states and
conflict detection. * * @author Matthew Raymer */
<template>
<li :class="cardClasses" @click="handleClick">
<div class="relative w-fit mx-auto">
<div>
<EntityIcon
v-if="person.did"
:contact="person"
class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
class="!size-[2rem] border border-slate-300 bg-white overflow-hidden rounded-full"
/>
<font-awesome
v-else
icon="circle-question"
class="text-slate-400 text-5xl mb-1"
/>
<!-- Time icon overlay for contacts -->
<div
v-if="person.did && showTimeIcon"
class="rounded-full bg-slate-400 absolute bottom-0 right-0 p-1 translate-x-1/3"
>
<font-awesome icon="clock" class="block text-white text-xs w-[1em]" />
</div>
</div>
<h3 :class="nameClasses">
{{ displayName }}
</h3>
<div class="overflow-hidden">
<h3 :class="nameClasses">
{{ displayName }}
</h3>
<p class="text-xs text-slate-500 truncate">{{ person.did }}</p>
</div>
</li>
</template>
@@ -81,29 +76,32 @@ export default class PersonCard extends Vue {
* Computed CSS classes for the card
*/
get cardClasses(): string {
const baseCardClasses =
"flex items-center gap-2 px-2 py-1.5 border-b border-slate-300";
if (!this.selectable || this.conflicted) {
return "opacity-50 cursor-not-allowed";
return `${baseCardClasses} *:opacity-50 cursor-not-allowed`;
}
return "cursor-pointer hover:bg-slate-50";
return `${baseCardClasses} cursor-pointer hover:bg-slate-50`;
}
/**
* Computed CSS classes for the person name
*/
get nameClasses(): string {
const baseClasses =
"text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden";
const baseNameClasses = "text-sm font-semibold truncate";
if (this.conflicted) {
return `${baseClasses} text-slate-400`;
return `${baseNameClasses} text-slate-500`;
}
// Add italic styling for entities without set names
if (!this.person.name) {
return `${baseClasses} italic text-slate-500`;
return `${baseNameClasses} italic text-slate-500`;
}
return baseClasses;
return baseNameClasses;
}
/**

35
src/components/ProjectCard.vue
View File

@@ -2,25 +2,26 @@
GiftedDialog.vue to handle project entity display * with selection states and
issuer information. * * @author Matthew Raymer */
<template>
<li class="cursor-pointer" @click="handleClick">
<div class="relative w-fit mx-auto">
<ProjectIcon
:entity-id="project.handleId"
:icon-size="48"
:image-url="project.image"
class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
/>
</div>
<li
class="flex items-center gap-2 px-2 py-1.5 border-b border-slate-300 hover:bg-slate-50 cursor-pointer"
@click="handleClick"
>
<ProjectIcon
:entity-id="project.handleId"
:icon-size="48"
:image-url="project.image"
class="!size-[2rem] border border-slate-300 bg-white overflow-hidden rounded-full"
/>
<h3
class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
>
{{ project.name || unnamedProject }}
</h3>
<div class="overflow-hidden">
<h3 class="text-sm font-semibold truncate">
{{ project.name || unnamedProject }}
</h3>
<div class="text-xs text-slate-500 truncate">
<font-awesome icon="user" class="fa-fw text-slate-400" />
{{ issuerDisplayName }}
<div class="text-xs text-slate-500 truncate">
<font-awesome icon="user" class="text-slate-400" />
{{ issuerDisplayName }}
</div>
</div>
</li>
</template>

20
src/components/ShowAllCard.vue
View File

@@ -2,14 +2,17 @@
GiftedDialog.vue to handle "Show All" navigation * for both people and projects
entity types. * * @author Matthew Raymer */
<template>
<li class="cursor-pointer">
<router-link :to="navigationRoute" class="block text-center">
<font-awesome icon="circle-right" class="text-blue-500 text-5xl mb-1" />
<h3
class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
<li class="border-b border-slate-300 hover:bg-slate-50">
<router-link
:to="navigationRoute"
class="flex items-center gap-2 px-2 py-1.5 w-full cursor-pointer"
>
<font-awesome icon="circle-right" class="text-blue-500 text-[2rem]" />
<p
class="text-sm font-semibold text-ellipsis whitespace-nowrap overflow-hidden"
>
Show All
</h3>
</p>
</router-link>
</li>
</template>
@@ -58,9 +61,4 @@ export default class ShowAllCard extends Vue {
a {
text-decoration: none;
}
a:hover .fa-circle-right {
transform: scale(1.1);
transition: transform 0.2s ease;
}
</style>

13
src/components/SpecialEntityCard.vue
View File

@@ -63,23 +63,24 @@ export default class SpecialEntityCard extends Vue {
conflictContext!: string;
/**
* Computed CSS classes for the card container
* Computed CSS classes for the card
*/
get cardClasses(): string {
const baseClasses = "block";
const baseCardClasses =
"flex items-center gap-2 px-2 py-1.5 border-b border-slate-300";
if (!this.selectable || this.conflicted) {
return `${baseClasses} cursor-not-allowed opacity-50`;
return `${baseCardClasses} *:opacity-50 cursor-not-allowed`;
}
return `${baseClasses} cursor-pointer`;
return `${baseCardClasses} cursor-pointer hover:bg-slate-50`;
}
/**
* Computed CSS classes for the icon
*/
get iconClasses(): string {
const baseClasses = "text-5xl mb-1";
const baseClasses = "text-[2rem]";
if (this.conflicted) {
return `${baseClasses} text-slate-400`;
@@ -101,7 +102,7 @@ export default class SpecialEntityCard extends Vue {
*/
get nameClasses(): string {
const baseClasses =
"text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden";
"text-sm font-semibold text-ellipsis whitespace-nowrap overflow-hidden";
if (this.conflicted) {
return `${baseClasses} text-slate-400`;