style(org): header row with compact mark and people sidebar on the right
2 files changed, +27 −18
- static/style.css modified +14 −6
- templates/org.html modified +13 −12
static/style.css modified
| @@ -411,16 +411,24 @@ pre.rangediff,pre.body{white-space:pre-wrap;overflow-wrap:anywhere} | ||
| 411 | 411 | .memberlist{list-style:none;margin:0 0 .8rem;padding:0;max-width:32rem} |
| 412 | 412 | .memberlist li{display:flex;align-items:center;justify-content:space-between;padding:.35rem 0;border-bottom:1px solid var(--line)} |
| 413 | 413 | .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} | |
| 419 | 416 | .people h4 .count{font-weight:400;margin-left:.2rem} |
| 420 | 417 | .people ul{list-style:none;margin:0;padding:0} |
| 421 | 418 | .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} |
| 422 | 419 | .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)} |
| 423 | 420 | .people li b{font-weight:600;font-size:.93rem;line-height:1.2} |
| 424 | 421 | .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}} | |
| 426 | 422 | .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 @@ | ||
| 1 | 1 | {{define "content"}} |
| 2 | 2 | {{$p := .Data.Profile}} |
| 3 | 3 | {{$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"> | |
| 10 | 5 | <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> | |
| 12 | 9 | {{with .Data.Bio}}<div class="bio readme">{{.}}</div>{{end}} |
| 13 | 10 | <ul class="facts"> |
| 14 | 11 | {{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}} |
| 15 | 12 | {{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}} |
| 16 | 13 | <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> |
| 17 | 14 | </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> | |
| 21 | 15 | </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"> | |
| 24 | 19 | <div class="main"> |
| 25 | 20 | {{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}} |
| 26 | 21 | {{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}} |
| 27 | 22 | </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> | |
| 28 | 29 | </div> |
| 29 | 30 | {{end}} |