Skip to content

Commit d2091de

Browse files
themightychristhemightychris
committed
feat: style project details page
1 parent d52d69a commit d2091de

File tree

1 file changed

+97
-87
lines changed

1 file changed

+97
-87
lines changed

‎pages/projects/[handle].vue‎

Lines changed: 97 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,119 @@
11
<template>
2-
<div v-if="project" class="container py-5">
3-
<div class="d-flex justify-content-between align-items-center mb-5">
4-
<h1 class="mb-0 fw-bold">{{ project.title }}</h1>
5-
<button class="btn btn-info px-4">
6-
<i class="bi bi-pencil-square me-2"></i>
7-
Edit Project
8-
</button>
9-
</div>
2+
<div class="min-h-screen bg-gray-50">
3+
<div v-if="project" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
4+
<div class="flex justify-between items-center mb-8">
5+
<h1 class="text-3xl font-bold text-gray-900">{{ project.title }}</h1>
6+
<button class="inline-flex items-center px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
7+
<i class="bi bi-pencil-square mr-2"></i>
8+
Edit Project
9+
</button>
10+
</div>
1011

11-
<div class="row g-4">
12-
<!-- Main content -->
13-
<div class="col-md-8">
14-
<section class="mb-5">
15-
<h2 class="h4 mb-3">Stage</h2>
16-
<div class="bg-primary text-white p-3 rounded-3 d-inline-block">
17-
<i class="bi bi-flag-fill me-2"></i>
18-
{{ project.stage }}
19-
</div>
20-
</section>
12+
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
13+
<!-- Main content -->
14+
<div class="lg:col-span-2 space-y-8">
15+
<section>
16+
<h2 class="text-xl font-semibold text-gray-900 mb-4">Stage</h2>
17+
<div class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg">
18+
<i class="bi bi-flag-fill mr-2"></i>
19+
{{ project.stage }}
20+
</div>
21+
</section>
2122

22-
<section class="mb-5">
23-
<h2 class="h4 mb-3">README</h2>
24-
<div class="card border-0 shadow-sm">
25-
<div class="card-body p-4">
26-
<h3 class="h5 mb-4">Overview</h3>
27-
<div v-if="project.readme" class="readme-content" v-html="renderedReadme"></div>
28-
<div v-else class="text-muted fst-italic">No README content available.</div>
23+
<section>
24+
<h2 class="text-xl font-semibold text-gray-900 mb-4">README</h2>
25+
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
26+
<div class="p-6">
27+
<h3 class="text-lg font-medium text-gray-900 mb-4">Overview</h3>
28+
<div v-if="project.readme" class="readme-content prose max-w-none" v-html="renderedReadme"></div>
29+
<div v-else class="text-gray-500 italic">No README content available.</div>
30+
</div>
2931
</div>
30-
</div>
31-
</section>
32+
</section>
3233

33-
<section v-if="project.tags?.length" class="mb-5">
34-
<h2 class="h4 mb-3">Tags</h2>
35-
<div class="d-flex flex-wrap gap-2">
36-
<span v-for="tag in project.tags" :key="tag.id"
37-
class="badge rounded-pill"
38-
:class="{
39-
'bg-primary': tag.class === 'tech',
40-
'bg-success': tag.class === 'topic',
41-
'bg-info': tag.class === 'event'
42-
}">
43-
<i :class="{
44-
'bi-code-slash': tag.class === 'tech',
45-
'bi-bookmark-fill': tag.class === 'topic',
46-
'bi-calendar-event': tag.class === 'event'
47-
}" class="bi me-1"></i>
48-
{{ tag.title }}
49-
</span>
50-
</div>
51-
</section>
52-
</div>
34+
<section v-if="project.tags?.length">
35+
<h2 class="text-xl font-semibold text-gray-900 mb-4">Tags</h2>
36+
<div class="flex flex-wrap gap-2">
37+
<span v-for="tag in project.tags" :key="tag.id"
38+
class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium"
39+
:class="{
40+
'bg-blue-100 text-blue-800': tag.class === 'tech',
41+
'bg-green-100 text-green-800': tag.class === 'topic',
42+
'bg-purple-100 text-purple-800': tag.class === 'event'
43+
}">
44+
<i :class="{
45+
'bi-code-slash': tag.class === 'tech',
46+
'bi-bookmark-fill': tag.class === 'topic',
47+
'bi-calendar-event': tag.class === 'event'
48+
}" class="bi mr-1.5"></i>
49+
{{ tag.title }}
50+
</span>
51+
</div>
52+
</section>
53+
</div>
5354

54-
<!-- Sidebar -->
55-
<div class="col-md-4">
56-
<div class="card border-0 shadow-sm mb-4">
57-
<div class="card-header bg-light border-0 py-3">
58-
<h2 class="h5 mb-0">Project Info</h2>
59-
</div>
60-
<div class="card-body p-4">
61-
<div v-if="project.users_url" class="mb-3">
62-
<a :href="project.users_url" class="btn btn-primary w-100 py-2" target="_blank">
63-
<i class="bi bi-people-fill me-2"></i>Users' Site
64-
</a>
55+
<!-- Sidebar -->
56+
<div class="space-y-6">
57+
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
58+
<div class="border-b border-gray-200 bg-gray-50 px-4 py-3">
59+
<h2 class="text-lg font-medium text-gray-900">Project Info</h2>
6560
</div>
61+
<div class="p-4 space-y-3">
62+
<a v-if="project.users_url"
63+
:href="project.users_url"
64+
class="inline-flex w-full items-center justify-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
65+
target="_blank">
66+
<i class="bi bi-people-fill mr-2"></i>
67+
Users' Site
68+
</a>
6669

67-
<div v-if="project.developers_url" class="mb-3">
68-
<a :href="project.developers_url" class="btn btn-success w-100 py-2" target="_blank">
69-
<i class="bi bi-code-square me-2"></i>Developers' Site
70+
<a v-if="project.developers_url"
71+
:href="project.developers_url"
72+
class="inline-flex w-full items-center justify-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
73+
target="_blank">
74+
<i class="bi bi-code-square mr-2"></i>
75+
Developers' Site
7076
</a>
71-
</div>
7277

73-
<div v-if="project.chat_channel" class="mb-3">
74-
<a :href="'https://chat.codeforphilly.org/channel/' + project.chat_channel"
75-
class="btn btn-success w-100 py-2" target="_blank">
76-
<i class="bi bi-chat-dots-fill me-2"></i>Chat Channel
77-
<small class="d-block text-white-50 mt-1">#{{ project.chat_channel }}</small>
78+
<a v-if="project.chat_channel"
79+
:href="'https://chat.codeforphilly.org/channel/' + project.chat_channel"
80+
class="inline-flex w-full items-center justify-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
81+
target="_blank">
82+
<div>
83+
<i class="bi bi-chat-dots-fill mr-2"></i>
84+
Chat Channel
85+
<div class="text-sm opacity-75 mt-1">#{{ project.chat_channel }}</div>
86+
</div>
7887
</a>
7988
</div>
8089
</div>
81-
</div>
8290

83-
<div class="card border-0 shadow-sm">
84-
<div class="card-header bg-light border-0 py-3">
85-
<h2 class="h5 mb-0">Members</h2>
86-
</div>
87-
<div class="card-body p-4">
88-
<!-- TODO: Add members list once we have the data structure -->
89-
<button class="btn btn-success w-100 py-2">
90-
<i class="bi bi-plus-circle me-2"></i>Add
91-
</button>
91+
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
92+
<div class="border-b border-gray-200 bg-gray-50 px-4 py-3">
93+
<h2 class="text-lg font-medium text-gray-900">Members</h2>
94+
</div>
95+
<div class="p-4">
96+
<!-- TODO: Add members list once we have the data structure -->
97+
<button class="inline-flex w-full items-center justify-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
98+
<i class="bi bi-plus-circle mr-2"></i>
99+
Add
100+
</button>
101+
</div>
92102
</div>
93103
</div>
94104
</div>
95105
</div>
96-
</div>
97-
<div v-else-if="error" class="container py-5">
98-
<div class="alert alert-danger shadow-sm">
99-
<i class="bi bi-exclamation-triangle-fill me-2"></i>
100-
{{ error }}
106+
107+
<div v-else-if="error" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
108+
<div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
109+
<i class="bi bi-exclamation-triangle-fill mr-2"></i>
110+
{{ error }}
111+
</div>
101112
</div>
102-
</div>
103-
<div v-else class="container py-5">
104-
<div class="d-flex justify-content-center">
105-
<div class="spinner-border text-primary" role="status">
106-
<span class="visually-hidden">Loading...</span>
113+
114+
<div v-else class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
115+
<div class="flex justify-center">
116+
<div class="animate-spin rounded-full h-8 w-8 border-4 border-gray-300 border-t-blue-600"></div>
107117
</div>
108118
</div>
109119
</div>

0 commit comments

Comments
 (0)