~gitpocket/gitpocket

1

style(org): people sidebar on the right

commit
031943589de35da30d7f64d970c9f0ef6c8245da browse tree
parent
f619b3571b54a7917d29c231eab69db7d526148b
author
obscurejames <354576047+obscurejames@users.noreply.github.com>
signature
Signed by: ~james SHA256:KlzJ0P0gvJcnOYpaxD5yCUw52ImHttTKRjVAEnnYnKg
date
2026-10-18 12:29 UTC

2 files changed, +27 −18

static/style.css modified

@@ -411,16 +411,24 @@ pre.rangediff,pre.body{white-space:pre-wrap;overflow-wrap:anywhere}
411411 .memberlist{list-style:none;margin:0 0 .8rem;padding:0;max-width:32rem}
412412 .memberlist li{display:flex;align-items:center;justify-content:space-between;padding:.35rem 0;border-bottom:1px solid var(--line)}
413413 .memberlist form{margin:0}
414-.orgmark img,.orgmark span{display:flex;width:280px;height:280px;margin-bottom:.9rem;border-radius:6px;object-fit:cover;border:1px solid var(--line)}
415-.orgmark img{background:var(--soft)}
416-.orgmark span{align-items:center;justify-content:center;background:var(--accent);color:#fff;font-size:7rem;font-weight:600;text-transform:uppercase}
417-.people{border-top:1px solid var(--line);padding-top:.8rem;margin-bottom:1rem}
418-.people h4{font-size:.85rem;color:var(--muted);font-weight:600;margin:0 0 .5rem}
414+.people h4{font-size:.85rem;color:var(--muted);font-weight:600;margin:0 0 .5rem;padding-bottom:.3rem;border-bottom:1px solid var(--line)}
415+.people h4~h4{margin-top:1.2rem}
419416 .people h4 .count{font-weight:400;margin-left:.2rem}
420417 .people ul{list-style:none;margin:0;padding:0}
421418 .people li a{display:grid;grid-template-columns:2.2rem 1fr;column-gap:.6rem;align-items:center;padding:.3rem 0;color:var(--fg);text-decoration:none}
422419 .people li img,.people li span{grid-row:1/3;display:flex;width:2.2rem;height:2.2rem;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
423420 .people li b{font-weight:600;font-size:.93rem;line-height:1.2}
424421 .people li small{color:var(--muted);line-height:1.2}
425-@media (max-width:800px){.orgmark img,.orgmark span{width:120px;height:120px;font-size:3rem}}
426422 .people li span,.orglist span{align-items:center;justify-content:center;background:var(--accent);color:#fff;font-weight:600;text-transform:uppercase}
423+.orghead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.3rem;align-items:start;margin:-.4rem 0 1.3rem;padding-bottom:1.2rem;border-bottom:1px solid var(--bar)}
424+.orgmark img,.orgmark span{display:flex;width:6rem;height:6rem;border-radius:10px;object-fit:cover;border:1px solid var(--line);background:var(--soft)}
425+.orgmark span{align-items:center;justify-content:center;background:var(--accent);color:#fff;font-size:2.6rem;font-weight:600;text-transform:uppercase}
426+.orgident h2{font-size:1.6rem;line-height:1.2;margin:0}
427+.orgident .handle{color:var(--muted);margin:.1rem 0 .45rem}
428+.orgident .bio{margin:0 0 .45rem}
429+.orgident .bio p{margin:0}
430+.orgident .facts{display:flex;flex-wrap:wrap;gap:.2rem 1.3rem;margin:0}
431+.orgident .facts li{margin:0}
432+.orgactions{display:flex;gap:.5rem}
433+.columns.orgbody{grid-template-columns:minmax(0,1fr) 280px;gap:2rem}
434+@media(max-width:800px){.orghead{grid-template-columns:auto minmax(0,1fr)}.orgactions{grid-column:1/-1}.orgmark img,.orgmark span{width:4.5rem;height:4.5rem;font-size:2rem}.columns.orgbody{grid-template-columns:1fr}}

templates/org.html modified

@@ -1,29 +1,30 @@
11 {{define "content"}}
22 {{$p := .Data.Profile}}
33 {{$o := .Data.Owner}}
4-<div class="userhead">
5-<h2>~{{$o.Name}}</h2>
6-<nav class="tabs small"><a class="active" href="/~{{$o.Name}}">about</a><a href="/~{{$o.Name}}/feed">feed</a>{{if .Data.Member}}<a href="/~{{$o.Name}}/settings">settings</a>{{end}}</nav>
7-</div>
8-<div class="columns user">
9-<aside class="profile org">
4+<header class="orghead">
105 <div class="orgmark">{{if $p.Avatar}}<img src="/~{{$o.Name}}/avatar?v={{$p.Avatar}}" alt="">{{else}}<span>{{slice $o.Name 0 1}}</span>{{end}}</div>
11-<div class="ident"><p class="name">{{with $p.Display}}{{.}}{{else}}{{$o.Name}}{{end}}</p><p class="handle">~{{$o.Name}}</p></div>
6+<div class="orgident">
7+<h2>{{with $p.Display}}{{.}}{{else}}{{$o.Name}}{{end}}</h2>
8+<p class="handle">~{{$o.Name}}</p>
129 {{with .Data.Bio}}<div class="bio readme">{{.}}</div>{{end}}
1310 <ul class="facts">
1411 {{if $p.Location}}<li><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 15s5-4.6 5-8.5A5 5 0 0 0 3 6.5C3 10.4 8 15 8 15z"/><circle cx="8" cy="6.5" r="1.8"/></svg>{{$p.Location}}</li>{{end}}
1512 {{if $p.Website}}<li><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M6.8 9.2a3 3 0 0 0 4.2 0l2.2-2.2a3 3 0 0 0-4.2-4.2l-.9.9"/><path d="M9.2 6.8a3 3 0 0 0-4.2 0L2.8 9a3 3 0 0 0 4.2 4.2l.9-.9"/></svg><a href="{{$p.Website}}" rel="nofollow me">{{bare $p.Website}}</a></li>{{end}}
1613 <li title="{{date $o.Created}}"><svg viewBox="0 0 16 16" aria-hidden="true"><rect x="2" y="3" width="12" height="11" rx="1.5"/><path d="M2 6.5h12M5.5 1.5v3M10.5 1.5v3"/></svg>Since {{$o.Created.Format "January 2006"}}</li>
1714 </ul>
18-<div class="people">
19-<h4>People <span class="count">{{len .Data.Members}}</span></h4>
20-<ul>{{range .Data.Members}}<li><a href="/~{{.Name}}">{{if .Profile.Avatar}}<img src="/~{{.Name}}/avatar?v={{.Profile.Avatar}}" alt="">{{else}}<span>{{slice .Name 0 1}}</span>{{end}}<b>{{with .Profile.Display}}{{.}}{{else}}~{{.Name}}{{end}}</b><small>~{{.Name}}</small></a></li>{{end}}</ul>
2115 </div>
22-{{if .Data.Member}}<div class="ownactions"><a class="btn primary block" href="/create?owner={{$o.Name}}">New repository</a><a class="btn block" href="/~{{$o.Name}}/settings">Edit organisation</a></div>{{end}}
23-</aside>
16+{{if .Data.Member}}<div class="orgactions"><a class="btn" href="/~{{$o.Name}}/settings">Edit organisation</a><a class="btn primary" href="/create?owner={{$o.Name}}">New repository</a></div>{{end}}
17+</header>
18+<div class="columns orgbody">
2419 <div class="main">
2520 {{with .Data.Activity}}<section class="activity"><div class="heathead"><p class="muted small">{{.Total}} commit{{if ne .Total 1}}s{{end}} across the organisation {{if .Year}}in {{.Year}}{{else}}in the past 12 months{{end}}</p><nav class="years"><a href="?"{{if not .Year}} class="active"{{end}}>past 12 months</a>{{range .Years}}<a href="?year={{.}}"{{if eq . $.Data.Activity.Year}} class="active"{{end}}>{{.}}</a>{{end}}</nav></div>{{.Grid}}<p class="legend muted small">less <i class="h0"></i><i class="h1"></i><i class="h2"></i><i class="h3"></i><i class="h4"></i> more</p></section>{{end}}
2621 {{if .Data.Repos}}<div class="events">{{range .Data.Repos}}<div class="event"><h4><a href="/{{.Path}}">{{.Name}}</a>{{if .Private}} <span class="tag">private</span>{{else if .Unlisted}} <span class="tag">unlisted</span>{{end}}{{if .Stars}}<span class="starcount" title="{{.Stars}} stars">☆ {{.Stars}}</span>{{end}}</h4>{{if .Description}}<p>{{.Description}}</p>{{end}}{{if .Tags}}<p class="tags">{{range .Tags}}<a href="/search?q=tag:{{.}}">#{{.}}</a> {{end}}</p>{{end}}</div>{{end}}</div>{{else}}<p class="info">This organisation does not have any repositories.</p>{{end}}
2722 </div>
23+<aside class="people">
24+<h4>People <span class="count">{{len .Data.Members}}</span></h4>
25+<ul>{{range .Data.Members}}<li><a href="/~{{.Name}}">{{if .Profile.Avatar}}<img src="/~{{.Name}}/avatar?v={{.Profile.Avatar}}" alt="">{{else}}<span>{{slice .Name 0 1}}</span>{{end}}<b>{{with .Profile.Display}}{{.}}{{else}}~{{.Name}}{{end}}</b><small>~{{.Name}}</small></a></li>{{end}}</ul>
26+<h4>Feeds</h4>
27+<p class="small"><a href="/~{{$o.Name}}/feed">Commits across ~{{$o.Name}}</a></p>
28+</aside>
2829 </div>
2930 {{end}}