Skip to content

Commit c244f21

Browse files
steverstever
committed
Improving project cards with respect to stars
1 parent ae89dc5 commit c244f21

3 files changed

Lines changed: 59 additions & 40 deletions

File tree

‎apps/web/src/components/ActivityFeed.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,10 @@ export default function ActivityFeed() {
113113
border: "none",
114114
}}
115115
>
116-
<div className="flex flex-column h-full relative">
116+
<div
117+
className="flex flex-column h-full relative"
118+
style={{ minHeight: "160px" }}
119+
>
117120
<ProjectThumbnail
118121
projectId={project.project_id}
119122
updatedAt={project.updated_at}

‎apps/web/src/components/ProjectThumbnail.jsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,16 @@ export default function ProjectThumbnail({ projectId, updatedAt }) {
2020
<div
2121
className="absolute"
2222
style={{
23-
top: "-5px",
23+
// Vertically centred so the padding around the (tilted) screenshot stays
24+
// balanced regardless of card height, keeping cards of differing content
25+
// lengths visually consistent.
26+
top: "50%",
2427
right: "-5px",
2528
width: "160px",
2629
height: "120px",
2730
background: "#000",
2831
borderRadius: "20px",
29-
transform: "rotate(12deg)",
32+
transform: "translateY(-50%) rotate(12deg)",
3033
overflow: "hidden",
3134
// Screenshots are the real content, so show them opaque; the cartridge
3235
// fallback keeps its original faded decoration look.

‎apps/web/src/components/PublicUserProfile.jsx‎

Lines changed: 50 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -247,13 +247,24 @@ function SortableProjectCard({ project, projectUrl, isDragging, onStarToggle })
247247
style={{ fontSize: "12px", color: "#aaa" }}
248248
/>
249249
</div>
250-
<div className="flex flex-column h-full relative">
250+
<div
251+
className="flex flex-column h-full relative"
252+
style={{ minHeight: "160px" }}
253+
>
251254
<ProjectThumbnail
252255
projectId={project.project_id}
253256
updatedAt={project.updated_at}
254257
/>
255258

256-
<div className="absolute" style={{ top: "-0.5rem", left: 0, zIndex: 2 }}>
259+
<div
260+
className="flex align-items-stretch gap-2 mb-2 align-self-start relative z-1"
261+
style={{ marginTop: "-0.5rem" }}
262+
>
263+
<Tag
264+
value={getLanguageLabel(project.lang)}
265+
severity={getLanguageColor(project.lang)}
266+
className="lang-tag"
267+
/>
257268
<StarButton
258269
projectId={project.project_id}
259270
onToggle={onStarToggle}
@@ -262,13 +273,7 @@ function SortableProjectCard({ project, projectUrl, isDragging, onStarToggle })
262273

263274
<h3 className="mb-2 text-white relative z-1">{project.title}</h3>
264275

265-
<Tag
266-
value={getLanguageLabel(project.lang)}
267-
severity={getLanguageColor(project.lang)}
268-
className="lang-tag align-self-start mb-3 relative z-1"
269-
/>
270-
271-
<div className="mt-auto text-400 text-sm relative z-1">
276+
<div className="text-400 text-sm relative z-1">
272277
{t("feed.updated")}{" "}
273278
{formatDistanceToNow(new Date(project.updated_at), {
274279
addSuffix: true,
@@ -765,7 +770,7 @@ export default function PublicUserProfile() {
765770
items={projects.map((p) => p.project_id)}
766771
strategy={rectSortingStrategy}
767772
>
768-
<div className="flex flex-wrap gap-3">
773+
<div className="flex flex-wrap gap-3 align-items-start">
769774
{projects.map((project) => {
770775
const projectUrl = project.slug
771776
? `/u/${user.slug}/${project.slug}`
@@ -784,7 +789,7 @@ export default function PublicUserProfile() {
784789
</SortableContext>
785790
</DndContext>
786791
) : (
787-
<div className="flex flex-wrap gap-3">
792+
<div className="flex flex-wrap gap-3 align-items-start">
788793
{projects.map((project) => {
789794
const projectUrl = project.slug
790795
? `/u/${user.slug}/${project.slug}`
@@ -806,27 +811,32 @@ export default function PublicUserProfile() {
806811
border: "none",
807812
}}
808813
>
809-
<div className="flex flex-column h-full relative">
814+
<div
815+
className="flex flex-column h-full relative"
816+
style={{ minHeight: "160px" }}
817+
>
810818
<ProjectThumbnail
811819
projectId={project.project_id}
812820
updatedAt={project.updated_at}
813821
/>
814822

815-
<div className="absolute" style={{ top: "-0.5rem", left: 0, zIndex: 2 }}>
823+
<div
824+
className="flex align-items-stretch gap-2 mb-2 align-self-start relative z-1"
825+
style={{ marginTop: "-0.5rem" }}
826+
>
827+
<Tag
828+
value={getLanguageLabel(project.lang)}
829+
severity={getLanguageColor(project.lang)}
830+
className="lang-tag"
831+
/>
816832
<StarButton projectId={project.project_id} />
817833
</div>
818834

819835
<h3 className="mb-2 text-white relative z-1">
820836
{project.title}
821837
</h3>
822838

823-
<Tag
824-
value={getLanguageLabel(project.lang)}
825-
severity={getLanguageColor(project.lang)}
826-
className="lang-tag align-self-start mb-3 relative z-1"
827-
/>
828-
829-
<div className="mt-auto text-400 text-sm relative z-1">
839+
<div className="text-400 text-sm relative z-1">
830840
{t("feed.updated")}{" "}
831841
{formatDistanceToNow(
832842
new Date(project.updated_at),
@@ -861,7 +871,7 @@ export default function PublicUserProfile() {
861871
})}
862872
>
863873
{starredProjects && starredProjects.length > 0 ? (
864-
<div className="flex flex-wrap gap-3">
874+
<div className="flex flex-wrap gap-3 align-items-start">
865875
{starredProjects.map((project) => {
866876
const ownerSlug = project.user?.slug;
867877
const projectUrl =
@@ -883,13 +893,24 @@ export default function PublicUserProfile() {
883893
className="h-full hover:shadow-5 transition-all transition-duration-200 cursor-pointer overflow-hidden card-bg-dark"
884894
style={{ border: "none" }}
885895
>
886-
<div className="flex flex-column h-full relative">
896+
<div
897+
className="flex flex-column h-full relative"
898+
style={{ minHeight: "160px" }}
899+
>
887900
<ProjectThumbnail
888901
projectId={project.project_id}
889902
updatedAt={project.updated_at}
890903
/>
891904

892-
<div className="absolute" style={{ top: "-0.5rem", left: 0, zIndex: 2 }}>
905+
<div
906+
className="flex align-items-stretch gap-2 mb-2 align-self-start relative z-1"
907+
style={{ marginTop: "-0.5rem" }}
908+
>
909+
<Tag
910+
value={getLanguageLabel(project.lang)}
911+
severity={getLanguageColor(project.lang)}
912+
className="lang-tag"
913+
/>
893914
<StarButton
894915
projectId={project.project_id}
895916
onToggle={handleStarToggle}
@@ -900,21 +921,13 @@ export default function PublicUserProfile() {
900921
{project.title}
901922
</h3>
902923

903-
<div className="flex align-items-center gap-2 mb-3 relative z-1">
904-
<Tag
905-
value={getLanguageLabel(project.lang)}
906-
severity={getLanguageColor(project.lang)}
907-
className="lang-tag"
908-
/>
909-
{project.user?.greeting_name && (
910-
<span className="text-400 text-sm">
911-
{t("feed.by")}{" "}
912-
{project.user.greeting_name}
913-
</span>
914-
)}
915-
</div>
924+
{project.user?.greeting_name && (
925+
<div className="mb-3 text-400 text-sm relative z-1">
926+
{t("feed.by")} {project.user.greeting_name}
927+
</div>
928+
)}
916929

917-
<div className="mt-auto text-400 text-sm relative z-1">
930+
<div className="text-400 text-sm relative z-1">
918931
{t("feed.updated")}{" "}
919932
{formatDistanceToNow(
920933
new Date(project.updated_at),

0 commit comments

Comments
 (0)