Skip to content

Commit c2faf78

Browse files
dutowdutow
committed
Introducing profile pages
These look similar to github profiles, with a clickable activity-calendar, and by default simply displaying threads with recent activity in it. Most of the places where we display a gravatar or a name badge link to the profile page properly.
1 parent 6893798 commit c2faf78

18 files changed

Lines changed: 662 additions & 7 deletions

‎app/assets/stylesheets/application.postcss.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,4 @@
1616
@import "components/messages.css";
1717
@import "components/notes.css";
1818
@import "components/activities.css";
19+
@import "components/profile.css";

‎app/assets/stylesheets/components/participants.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,19 @@
3939
}
4040
}
4141

42+
.participant-avatar-link {
43+
display: inline-block;
44+
}
45+
46+
.participant-name-link {
47+
color: inherit;
48+
text-decoration: none;
49+
}
50+
51+
.participant-name-link:hover {
52+
text-decoration: underline;
53+
}
54+
4255
.participant-avatar.is-core-team {
4356
border-color: #ff0080;
4457
border-width: 3px;

‎app/assets/stylesheets/components/profile.css‎

Lines changed: 333 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,333 @@
1+
.person-profile {
2+
display: flex;
3+
flex-direction: column;
4+
gap: var(--spacing-6);
5+
}
6+
7+
.profile-header {
8+
display: grid;
9+
grid-template-columns: auto 1fr;
10+
gap: var(--spacing-5);
11+
align-items: center;
12+
padding: var(--spacing-5);
13+
background: var(--color-bg-card);
14+
border: var(--border-width) solid var(--color-border);
15+
border-radius: var(--border-radius-lg);
16+
}
17+
18+
.profile-avatar-image {
19+
width: 120px;
20+
height: 120px;
21+
border-radius: var(--border-radius-full);
22+
border: 3px solid var(--color-border);
23+
object-fit: cover;
24+
}
25+
26+
.profile-name {
27+
font-size: var(--font-size-2xl);
28+
margin: 0 0 var(--spacing-2);
29+
}
30+
31+
.profile-email {
32+
color: var(--color-text-muted);
33+
margin: 0 0 var(--spacing-2);
34+
}
35+
36+
.profile-badge {
37+
display: inline-flex;
38+
align-items: center;
39+
padding: 4px 10px;
40+
border-radius: var(--border-radius-full);
41+
background: var(--color-bg-icon);
42+
color: var(--color-text-primary);
43+
font-size: var(--font-size-sm);
44+
font-weight: var(--font-weight-semibold);
45+
}
46+
47+
.profile-section {
48+
display: flex;
49+
flex-direction: column;
50+
gap: var(--spacing-3);
51+
}
52+
53+
.activity-span {
54+
display: flex;
55+
flex-wrap: wrap;
56+
align-items: center;
57+
gap: var(--spacing-2);
58+
color: var(--color-text-muted);
59+
}
60+
61+
.activity-span-label {
62+
font-weight: var(--font-weight-semibold);
63+
color: var(--color-text-primary);
64+
}
65+
66+
.activity-span-separator {
67+
color: var(--color-text-muted);
68+
}
69+
70+
.activity-span-date {
71+
font-variant-numeric: tabular-nums;
72+
}
73+
74+
.alias-grid {
75+
display: grid;
76+
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
77+
gap: var(--spacing-3);
78+
}
79+
80+
.alias-card {
81+
display: flex;
82+
gap: var(--spacing-3);
83+
align-items: center;
84+
padding: var(--spacing-3);
85+
background: var(--color-bg-card);
86+
border: var(--border-width) solid var(--color-border);
87+
border-radius: var(--border-radius-md);
88+
}
89+
90+
.alias-avatar {
91+
width: 48px;
92+
height: 48px;
93+
border-radius: var(--border-radius-full);
94+
border: 2px solid var(--color-border);
95+
}
96+
97+
.alias-info {
98+
display: flex;
99+
flex-direction: column;
100+
gap: 2px;
101+
}
102+
103+
.alias-name {
104+
font-weight: var(--font-weight-semibold);
105+
}
106+
107+
.alias-email {
108+
color: var(--color-text-muted);
109+
font-size: var(--font-size-sm);
110+
}
111+
112+
.alias-list {
113+
display: flex;
114+
flex-direction: column;
115+
gap: var(--spacing-2);
116+
}
117+
118+
.alias-row {
119+
display: flex;
120+
align-items: center;
121+
gap: var(--spacing-2);
122+
padding: var(--spacing-2);
123+
border: var(--border-width) solid var(--color-border);
124+
border-radius: var(--border-radius-md);
125+
background: var(--color-bg-card);
126+
}
127+
128+
.alias-row-avatar {
129+
width: 32px;
130+
height: 32px;
131+
border-radius: var(--border-radius-full);
132+
border: 2px solid var(--color-border);
133+
}
134+
135+
.alias-row-details {
136+
display: flex;
137+
flex-direction: column;
138+
gap: 2px;
139+
min-width: 0;
140+
}
141+
142+
.alias-row-name {
143+
font-weight: var(--font-weight-semibold);
144+
}
145+
146+
.alias-row-email {
147+
color: var(--color-text-muted);
148+
font-size: var(--font-size-sm);
149+
word-break: break-all;
150+
}
151+
152+
.activity-list {
153+
list-style: none;
154+
margin: 0;
155+
padding: 0;
156+
display: flex;
157+
flex-direction: column;
158+
gap: var(--spacing-3);
159+
}
160+
161+
.activity-item {
162+
padding: var(--spacing-3);
163+
border: var(--border-width) solid var(--color-border);
164+
border-radius: var(--border-radius-md);
165+
background: var(--color-bg-card);
166+
display: flex;
167+
flex-direction: column;
168+
gap: var(--spacing-2);
169+
}
170+
171+
.activity-type {
172+
font-weight: var(--font-weight-semibold);
173+
}
174+
175+
.activity-meta {
176+
display: flex;
177+
flex-wrap: wrap;
178+
gap: var(--spacing-2);
179+
color: var(--color-text-muted);
180+
}
181+
182+
.activity-table {
183+
width: 100%;
184+
border-collapse: collapse;
185+
}
186+
187+
.activity-table th,
188+
.activity-table td {
189+
padding: var(--spacing-2) var(--spacing-3);
190+
border-bottom: var(--border-width) solid var(--color-border);
191+
text-align: left;
192+
vertical-align: middle;
193+
}
194+
195+
.activity-table th {
196+
color: var(--color-text-muted);
197+
font-weight: var(--font-weight-semibold);
198+
font-size: var(--font-size-sm);
199+
}
200+
201+
.activity-table td:last-child {
202+
width: 1%;
203+
white-space: nowrap;
204+
}
205+
206+
.activity-topic {
207+
color: var(--color-text-link);
208+
text-decoration: none;
209+
}
210+
211+
.activity-topic:hover {
212+
text-decoration: underline;
213+
}
214+
215+
.activity-tag {
216+
align-self: flex-start;
217+
padding: 2px 8px;
218+
border-radius: var(--border-radius-full);
219+
background: var(--color-bg-icon-status);
220+
color: var(--color-text-contrast);
221+
font-size: var(--font-size-xs);
222+
font-weight: var(--font-weight-semibold);
223+
}
224+
225+
.contrib-calendar {
226+
border-collapse: separate;
227+
border-spacing: 4px;
228+
width: 100%;
229+
}
230+
231+
.contrib-calendar th,
232+
.contrib-calendar td {
233+
padding: 0;
234+
}
235+
236+
.contrib-label {
237+
font-size: var(--font-size-xs);
238+
color: var(--color-text-muted);
239+
text-align: left;
240+
padding-right: var(--spacing-2);
241+
white-space: nowrap;
242+
}
243+
244+
.contrib-month {
245+
font-size: var(--font-size-xs);
246+
color: var(--color-text-muted);
247+
text-align: left;
248+
}
249+
250+
.contrib-day {
251+
width: 12px;
252+
height: 12px;
253+
border-radius: 3px;
254+
background: var(--color-bg-hover);
255+
display: inline-block;
256+
}
257+
258+
.contrib-day.level-0 {
259+
background: var(--color-bg-hover);
260+
}
261+
262+
.contrib-day.level-1 {
263+
background: color-mix(in srgb, var(--color-success) 30%, var(--color-bg-hover));
264+
}
265+
266+
.contrib-day.level-2 {
267+
background: color-mix(in srgb, var(--color-success) 55%, var(--color-bg-hover));
268+
}
269+
270+
.contrib-day.level-3 {
271+
background: color-mix(in srgb, var(--color-success) 75%, var(--color-bg-hover));
272+
}
273+
274+
.contrib-day.level-4 {
275+
background: var(--color-success);
276+
}
277+
278+
.contrib-day-link {
279+
display: inline-flex;
280+
}
281+
282+
.contrib-day-link .contrib-day {
283+
cursor: pointer;
284+
}
285+
286+
.contrib-legend {
287+
display: flex;
288+
align-items: center;
289+
gap: var(--spacing-2);
290+
color: var(--color-text-muted);
291+
font-size: var(--font-size-sm);
292+
}
293+
294+
.legend-boxes {
295+
display: flex;
296+
gap: 4px;
297+
}
298+
299+
.year-selector {
300+
display: flex;
301+
flex-wrap: wrap;
302+
gap: var(--spacing-2);
303+
}
304+
305+
.year-button {
306+
display: inline-flex;
307+
align-items: center;
308+
justify-content: center;
309+
padding: 4px 10px;
310+
border-radius: var(--border-radius-full);
311+
border: var(--border-width) solid var(--color-border);
312+
color: var(--color-text-primary);
313+
text-decoration: none;
314+
font-size: var(--font-size-sm);
315+
background: var(--color-bg-card);
316+
}
317+
318+
.year-button.is-active {
319+
background: var(--color-bg-icon);
320+
border-color: var(--color-border-strong);
321+
font-weight: var(--font-weight-semibold);
322+
}
323+
324+
@media (max-width: 720px) {
325+
.profile-header {
326+
grid-template-columns: 1fr;
327+
text-align: center;
328+
}
329+
330+
.profile-avatar {
331+
justify-self: center;
332+
}
333+
}

‎app/assets/stylesheets/layouts/topic-view.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,11 @@
248248
gap: 6px;
249249
}
250250

251+
.outline-avatar-link {
252+
display: inline-flex;
253+
text-decoration: none;
254+
}
255+
251256
.outline-avatar {
252257
width: 24px;
253258
height: 24px;

0 commit comments

Comments
 (0)