feat(basin): hub style profile page with larger avatar
2 files changed, +26 −16
- static/style.css modified +14 −6
- templates/user.html modified +12 −10
static/style.css modified
| @@ -61,13 +61,21 @@ main{padding-bottom:3rem} | ||
| 61 | 61 | .repo{border:1px solid var(--line);padding:.4rem .6rem;background:#fff} |
| 62 | 62 | .repo>a{font-size:1.05rem} |
| 63 | 63 | .columns{display:grid;grid-template-columns:minmax(0,1fr) 18rem;gap:2.5rem;align-items:start} |
| 64 | -.columns.user{grid-template-columns:19rem minmax(0,1fr)} | |
| 65 | -.profile{border-left:3px solid var(--line);padding-left:.8rem} | |
| 66 | -.profile .avatar{display:block;width:160px;height:160px;margin-bottom:.6rem} | |
| 67 | -.profile .handle{margin:0 0 .3rem;color:var(--muted)} | |
| 68 | -.profile .links{margin:.2rem 0 .6rem} | |
| 64 | +.columns.user{grid-template-columns:220px minmax(0,1fr);gap:2rem} | |
| 65 | +.userhead{display:flex;align-items:flex-end;gap:1.2rem;border-bottom:1px solid var(--bar);margin:-1rem -1rem 1rem;padding:0 1rem} | |
| 66 | +.userhead h2{font-size:1.7rem;padding-bottom:.2rem} | |
| 67 | +nav.tabs.small{background:#e9ecef;align-self:flex-end;margin-bottom:.3rem} | |
| 68 | +nav.tabs.small a{padding:.1rem .8rem} | |
| 69 | +nav.tabs.small a.active{background:#ddd} | |
| 70 | +.profile .avatar{display:block;width:220px;height:220px;margin-bottom:.6rem} | |
| 71 | +.profile p{margin:.2rem 0} | |
| 72 | +.profile .name{font-weight:600;font-size:1.05rem} | |
| 73 | +.profile .btn.block{display:block;text-align:center;margin-top:.5rem} | |
| 74 | +.repo.soft{background:var(--soft);border-color:var(--line)} | |
| 75 | +.repo.soft>a{display:block;border-bottom:1px solid var(--line);padding-bottom:.2rem;margin-bottom:.2rem} | |
| 76 | +.info{background:#d1ecf1;color:#0c5460;padding:.5rem .6rem;border:1px solid #bee5eb;margin:0} | |
| 69 | 77 | .avatar{object-fit:cover;border:1px solid var(--line);background:var(--soft)} |
| 70 | -.bio{margin-bottom:.6rem} | |
| 78 | +.bio{margin:.5rem 0 .6rem} | |
| 71 | 79 | .bio p{margin:.3rem 0} |
| 72 | 80 | ul.side,ul.files{list-style:none;padding:0;margin:0} |
| 73 | 81 | ul.side li{padding:.15rem 0} |
templates/user.html modified
| @@ -1,20 +1,22 @@ | ||
| 1 | 1 | {{define "content"}} |
| 2 | 2 | {{$p := .Data.Profile}} |
| 3 | +{{$own := and .User (eq .User.ID .Data.Owner.ID)}} | |
| 4 | +<div class="userhead"> | |
| 5 | +<h2>~{{.Data.Owner.Name}}</h2> | |
| 6 | +<nav class="tabs small"><a class="active" href="/~{{.Data.Owner.Name}}">about</a></nav> | |
| 7 | +</div> | |
| 3 | 8 | <div class="columns user"> |
| 4 | -<aside> | |
| 5 | -<div class="profile"> | |
| 9 | +<aside class="profile"> | |
| 6 | 10 | {{if $p.Avatar}}<img class="avatar" src="/~{{.Data.Owner.Name}}/avatar?v={{$p.Avatar}}" alt="">{{end}} |
| 7 | -{{if $p.Display}}<h1>{{$p.Display}}</h1><p class="handle">~{{.Data.Owner.Name}}</p>{{else}}<h1>~{{.Data.Owner.Name}}</h1>{{end}} | |
| 8 | -<p class="links">{{if $p.Website}}<a href="{{$p.Website}}" rel="nofollow me">{{$p.Website}}</a>{{end}}{{if $p.Location}}{{if $p.Website}} | {{end}}{{$p.Location}}{{end}}{{if $p.Workplace}}{{if or $p.Website $p.Location}} | {{end}}{{$p.Workplace}}{{end}}</p> | |
| 11 | +{{if $p.Display}}<p class="name">{{$p.Display}}</p>{{end}} | |
| 12 | +{{if $p.Location}}<p>{{$p.Location}}</p>{{end}} | |
| 13 | +{{if $p.Workplace}}<p>{{$p.Workplace}}</p>{{end}} | |
| 14 | +{{if $p.Website}}<p><a href="{{$p.Website}}" rel="nofollow me">{{$p.Website}}</a></p>{{end}} | |
| 9 | 15 | {{with .Data.Bio}}<div class="bio readme">{{.}}</div>{{end}} |
| 10 | -<p class="muted small">Joined {{ago .Data.Owner.Created}}</p> | |
| 11 | -</div> | |
| 16 | +{{if $own}}<a class="btn primary block" href="/create">Create a new repository ▸</a><a class="btn block" href="/settings">Edit your profile ▸</a>{{end}} | |
| 12 | 17 | </aside> |
| 13 | 18 | <div class="main"> |
| 14 | -{{template "repolist" .Data.Repos}} | |
| 19 | +{{if .Data.Repos}}<div class="repos">{{range .Data.Repos}}<div class="repo soft"><a href="/{{.Path}}">{{.Name}}</a>{{if .Private}} <span class="tag">private</span>{{end}}{{if .Description}}<div>{{.Description}}</div>{{end}}</div>{{end}}</div>{{else}}<p class="info">This user does not have any repositories.</p>{{end}} | |
| 15 | 20 | </div> |
| 16 | 21 | </div> |
| 17 | 22 | {{end}} |
| 18 | -{{define "repolist"}} | |
| 19 | -{{if .}}<div class="repos">{{range .}}<div class="repo"><a href="/{{.Path}}">{{.Name}}</a>{{if .Private}} <span class="tag">private</span>{{end}}{{if .Description}}<div>{{.Description}}</div>{{end}}</div>{{end}}</div>{{else}}<p class="muted">No repositories.</p>{{end}} | |
| 20 | -{{end}} | |