Skip to content

Commit fa81f28

Browse files
dutowdutow
committed
Improved profile pages for users and teams
These pages have proper selectors now, and also allow weekly/monthly overviews. Team pages didn't exists at all before, those are the same as user profiles with all members included.
1 parent 449a82b commit fa81f28

24 files changed

Lines changed: 1007 additions & 186 deletions

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

Lines changed: 268 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -212,14 +212,240 @@
212212
text-decoration: underline;
213213
}
214214

215+
.activity-filters {
216+
padding: var(--spacing-4);
217+
background: var(--color-bg-card);
218+
border: var(--border-width) solid var(--color-border);
219+
border-radius: var(--border-radius-md);
220+
margin-bottom: var(--spacing-3);
221+
}
222+
223+
.activity-filters form {
224+
display: flex;
225+
flex-wrap: wrap;
226+
align-items: center;
227+
gap: var(--spacing-3);
228+
}
229+
230+
.activity-filters .filter-label {
231+
font-weight: var(--font-weight-semibold);
232+
color: var(--color-text-muted);
233+
}
234+
235+
.activity-filters .filter-checkbox {
236+
display: inline-flex;
237+
align-items: center;
238+
gap: var(--spacing-2);
239+
cursor: pointer;
240+
font-size: var(--font-size-sm);
241+
color: var(--color-text-primary);
242+
padding: var(--spacing-2) var(--spacing-3);
243+
background: var(--color-bg-hover);
244+
border: var(--border-width) solid var(--color-border);
245+
border-radius: var(--border-radius-md);
246+
transition: background-color 0.15s ease, border-color 0.15s ease;
247+
}
248+
249+
.activity-filters .filter-checkbox:hover {
250+
background: var(--color-bg-icon);
251+
border-color: var(--color-border-strong);
252+
}
253+
254+
.activity-filters .filter-checkbox:has(input:checked) {
255+
background: var(--color-primary-100);
256+
border-color: var(--color-primary-300);
257+
color: var(--color-primary-700);
258+
}
259+
260+
.activity-filters .filter-checkbox input[type="checkbox"] {
261+
width: 16px;
262+
height: 16px;
263+
margin: 0;
264+
padding: 0;
265+
cursor: pointer;
266+
accent-color: var(--color-primary);
267+
}
268+
269+
.activity-summary {
270+
display: flex;
271+
flex-wrap: wrap;
272+
align-items: center;
273+
gap: var(--spacing-3);
274+
padding: var(--spacing-2) var(--spacing-3);
275+
background: var(--color-bg-hover);
276+
border-radius: var(--border-radius-md);
277+
margin-bottom: var(--spacing-3);
278+
font-size: var(--font-size-sm);
279+
}
280+
281+
.activity-summary-total {
282+
font-weight: var(--font-weight-semibold);
283+
}
284+
285+
.activity-summary-item {
286+
display: inline-flex;
287+
align-items: center;
288+
gap: var(--spacing-1);
289+
color: var(--color-text-muted);
290+
}
291+
292+
.activity-summary-item .activity-tag {
293+
min-width: 20px;
294+
justify-content: center;
295+
}
296+
297+
.activity-types {
298+
display: flex;
299+
flex-wrap: wrap;
300+
gap: var(--spacing-1);
301+
}
302+
215303
.activity-tag {
216-
align-self: flex-start;
304+
display: inline-flex;
305+
align-items: center;
217306
padding: 2px 8px;
218307
border-radius: var(--border-radius-full);
219-
background: var(--color-bg-icon-status);
220-
color: var(--color-text-contrast);
221308
font-size: var(--font-size-xs);
222309
font-weight: var(--font-weight-semibold);
310+
white-space: nowrap;
311+
}
312+
313+
.activity-tag.tag-started {
314+
background: var(--color-primary-100);
315+
color: var(--color-primary-700);
316+
}
317+
318+
.activity-tag.tag-replied {
319+
background: var(--color-bg-icon);
320+
color: var(--color-text-primary);
321+
}
322+
323+
.activity-tag.tag-patch {
324+
background: var(--color-success-bg);
325+
color: var(--color-success-text);
326+
}
327+
328+
.team-list {
329+
display: flex;
330+
flex-direction: column;
331+
gap: var(--spacing-2);
332+
}
333+
334+
.team-row {
335+
display: flex;
336+
align-items: center;
337+
justify-content: space-between;
338+
gap: var(--spacing-2);
339+
padding: var(--spacing-2) var(--spacing-3);
340+
border: var(--border-width) solid var(--color-border);
341+
border-radius: var(--border-radius-md);
342+
background: var(--color-bg-card);
343+
}
344+
345+
.team-row-name {
346+
color: var(--color-text-link);
347+
text-decoration: none;
348+
font-weight: var(--font-weight-semibold);
349+
}
350+
351+
.team-row-name:hover {
352+
text-decoration: underline;
353+
}
354+
355+
.team-badge {
356+
padding: 2px 8px;
357+
border-radius: var(--border-radius-full);
358+
font-size: var(--font-size-xs);
359+
font-weight: var(--font-weight-semibold);
360+
}
361+
362+
.team-badge.badge-private {
363+
background: var(--color-bg-hover);
364+
color: var(--color-text-muted);
365+
}
366+
367+
.team-badge.badge-visible {
368+
background: var(--color-primary-100);
369+
color: var(--color-primary-700);
370+
}
371+
372+
.team-badge.badge-open {
373+
background: var(--color-success-bg);
374+
color: var(--color-success-text);
375+
}
376+
377+
.team-profile {
378+
display: flex;
379+
flex-direction: column;
380+
gap: var(--spacing-6);
381+
}
382+
383+
.team-profile .profile-header {
384+
grid-template-columns: 1fr;
385+
}
386+
387+
.team-visibility {
388+
margin-bottom: var(--spacing-2);
389+
}
390+
391+
.profile-meta {
392+
color: var(--color-text-muted);
393+
margin: 0;
394+
}
395+
396+
.member-list {
397+
display: flex;
398+
flex-direction: column;
399+
gap: var(--spacing-2);
400+
}
401+
402+
.member-row {
403+
display: flex;
404+
align-items: center;
405+
gap: var(--spacing-2);
406+
padding: var(--spacing-2);
407+
border: var(--border-width) solid var(--color-border);
408+
border-radius: var(--border-radius-md);
409+
background: var(--color-bg-card);
410+
}
411+
412+
.member-row-avatar {
413+
width: 32px;
414+
height: 32px;
415+
border-radius: var(--border-radius-full);
416+
border: 2px solid var(--color-border);
417+
flex-shrink: 0;
418+
}
419+
420+
.member-row-details {
421+
display: flex;
422+
align-items: center;
423+
gap: var(--spacing-2);
424+
min-width: 0;
425+
flex: 1;
426+
}
427+
428+
.member-row-name {
429+
color: var(--color-text-link);
430+
text-decoration: none;
431+
font-weight: var(--font-weight-semibold);
432+
overflow: hidden;
433+
text-overflow: ellipsis;
434+
white-space: nowrap;
435+
}
436+
437+
.member-row-name:hover {
438+
text-decoration: underline;
439+
}
440+
441+
.member-badge {
442+
padding: 2px 8px;
443+
border-radius: var(--border-radius-full);
444+
font-size: var(--font-size-xs);
445+
font-weight: var(--font-weight-semibold);
446+
background: var(--color-primary-100);
447+
color: var(--color-primary-700);
448+
flex-shrink: 0;
223449
}
224450

225451
.contrib-calendar {
@@ -247,6 +473,45 @@
247473
text-align: left;
248474
}
249475

476+
.contrib-month-link {
477+
color: var(--color-text-muted);
478+
text-decoration: none;
479+
}
480+
481+
.contrib-month-link:hover {
482+
color: var(--color-text-link);
483+
text-decoration: underline;
484+
}
485+
486+
.week-header th {
487+
font-size: 9px;
488+
color: var(--color-text-muted);
489+
text-align: center;
490+
padding-bottom: var(--spacing-1);
491+
}
492+
493+
.contrib-week {
494+
width: 12px;
495+
text-align: center;
496+
}
497+
498+
.contrib-week-link {
499+
color: var(--color-text-muted);
500+
text-decoration: none;
501+
font-size: 9px;
502+
}
503+
504+
.contrib-week-link:hover {
505+
color: var(--color-text-link);
506+
text-decoration: underline;
507+
}
508+
509+
.contrib-week-empty {
510+
color: var(--color-text-muted);
511+
opacity: 0.5;
512+
font-size: 9px;
513+
}
514+
250515
.contrib-day {
251516
width: 12px;
252517
height: 12px;

0 commit comments

Comments
 (0)