style(org): use the profile layout for org pages with a people section
2 files changed, +28 −33
- static/style.css modified +14 −19
- templates/org.html modified +14 −14
static/style.css modified
| @@ -402,30 +402,25 @@ pre.rangediff,pre.body{white-space:pre-wrap;overflow-wrap:anywhere} | ||
| 402 | 402 | .dashhead{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);margin-bottom:.6rem;padding-bottom:.3rem} |
| 403 | 403 | .dashhead h3{border:0;margin:0;padding:0} |
| 404 | 404 | @media(max-width:800px){.dash{grid-template-columns:1fr}} |
| 405 | -.orghead{display:flex;align-items:flex-start;gap:1.4rem;margin:-1rem 0 1.6rem;padding:1.4rem 1.5rem;background:var(--accentsoft);border-left:4px solid var(--accent)} | |
| 406 | -.orgactions{margin-left:auto;flex:none;display:flex;flex-direction:column;gap:.45rem}.orgactions .btn{text-align:center} | |
| 407 | -.orgmark img,.orgmark span{display:flex;width:5.5rem;height:5.5rem;border-radius:2px;object-fit:cover} | |
| 408 | -.orgmark span,.people li span,.orglist span{align-items:center;justify-content:center;background:var(--accent);color:#fff;font-weight:600;text-transform:uppercase} | |
| 409 | -.orgmark span{font-size:2.4rem} | |
| 410 | -.orgident{min-width:0} | |
| 411 | -.orgident h2{font-size:1.7rem;margin:0} | |
| 412 | -.orgident .handle{color:var(--muted);margin:.1rem 0 .5rem} | |
| 413 | -.orgident .bio{margin:0 0 .5rem;max-width:44rem} | |
| 414 | -.orgident .bio p{margin:0} | |
| 415 | -.facts.inline{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem;margin:0} | |
| 416 | -.columns.org{grid-template-columns:minmax(0,1fr) 220px;gap:2rem} | |
| 417 | -.columns.org h3 .count,.people h3 .count{color:var(--muted);font-weight:400;font-size:.9rem;margin-left:.3rem} | |
| 418 | -.people ul{list-style:none;margin:0;padding:0} | |
| 419 | -.people li a{display:grid;grid-template-columns:2.4rem 1fr;grid-template-rows:auto auto;column-gap:.6rem;align-items:center;padding:.35rem 0;color:var(--fg);text-decoration:none} | |
| 420 | -.people li img,.people li span{grid-row:1/3;display:flex;width:2.4rem;height:2.4rem;border-radius:50%;object-fit:cover} | |
| 421 | -.people li b{font-weight:600;font-size:.95rem} | |
| 422 | -.people li small{color:var(--muted)} | |
| 405 | + | |
| 423 | 406 | .orglist{margin:0 0 1rem} |
| 424 | 407 | .orglist h4{font-size:.85rem;color:var(--muted);margin:0 0 .4rem;font-weight:600} |
| 425 | 408 | .orglist a{display:flex;align-items:center;gap:.5rem;color:var(--fg);margin:.3rem 0} |
| 426 | 409 | .orglist img,.orglist span{display:flex;width:1.6rem;height:1.6rem;border-radius:2px;object-fit:cover;font-size:.8rem} |
| 427 | 410 | .hit.org .hitavatar span{background:var(--accent);color:#fff;border-radius:2px} |
| 428 | -@media (max-width:800px){.orghead{flex-wrap:wrap;padding:1rem}.orgactions{margin-left:0;flex-direction:row}.columns.org{grid-template-columns:1fr}} | |
| 429 | 411 | .memberlist{list-style:none;margin:0 0 .8rem;padding:0;max-width:32rem} |
| 430 | 412 | .memberlist li{display:flex;align-items:center;justify-content:space-between;padding:.35rem 0;border-bottom:1px solid var(--line)} |
| 431 | 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} | |
| 419 | +.people h4 .count{font-weight:400;margin-left:.2rem} | |
| 420 | +.people ul{list-style:none;margin:0;padding:0} | |
| 421 | +.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 | +.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 | +.people li b{font-weight:600;font-size:.93rem;line-height:1.2} | |
| 424 | +.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 | +.people li span,.orglist span{align-items:center;justify-content:center;background:var(--accent);color:#fff;font-weight:600;text-transform:uppercase} | |
templates/org.html modified
| @@ -1,29 +1,29 @@ | ||
| 1 | 1 | {{define "content"}} |
| 2 | 2 | {{$p := .Data.Profile}} |
| 3 | 3 | {{$o := .Data.Owner}} |
| 4 | -<header class="orghead"> | |
| 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"> | |
| 5 | 10 | <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> |
| 6 | -<div class="orgident"> | |
| 7 | -<h2>{{with $p.Display}}{{.}}{{else}}{{$o.Name}}{{end}}</h2> | |
| 8 | -<p class="handle">~{{$o.Name}}</p> | |
| 11 | +<div class="ident"><p class="name">{{with $p.Display}}{{.}}{{else}}{{$o.Name}}{{end}}</p><p class="handle">~{{$o.Name}}</p></div> | |
| 9 | 12 | {{with .Data.Bio}}<div class="bio readme">{{.}}</div>{{end}} |
| 10 | -<ul class="facts inline"> | |
| 13 | +<ul class="facts"> | |
| 11 | 14 | {{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}} |
| 12 | 15 | {{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}} |
| 13 | 16 | <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> |
| 14 | 17 | </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> | |
| 15 | 21 | </div> |
| 16 | -{{if .Data.Member}}<div class="orgactions"><a class="btn primary" href="/create?owner={{$o.Name}}">New repository</a><a class="btn" href="/~{{$o.Name}}/settings">Edit organisation</a></div>{{end}} | |
| 17 | -</header> | |
| 18 | -<div class="columns org"> | |
| 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> | |
| 19 | 24 | <div class="main"> |
| 20 | -<h3 class="plain">Repositories <span class="count">{{len .Data.Repos}}</span></h3> | |
| 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}} | |
| 22 | 25 | {{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 | +{{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}} | |
| 23 | 27 | </div> |
| 24 | -<aside class="people"> | |
| 25 | -<h3 class="plain">People <span class="count">{{len .Data.Members}}</span></h3> | |
| 26 | -<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> | |
| 27 | -</aside> | |
| 28 | 28 | </div> |
| 29 | 29 | {{end}} |