web: pinned repositories are a second row of the phone strip !407
2 files changed, +18 −7
Layout: unified · split
internal/web/static/style.css +15 −6
| @@ -271,6 +271,7 @@ a.brand svg.mark { display: block; flex: none; } | ||
| 271 | 271 | a.brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| 272 | 272 | |
| 273 | 273 | .railbody { flex: 1; overflow-y: auto; padding: 0 var(--sp-3); } |
| 274 | .railtop { display: block; } | |
| 274 | 275 | /* search is reachable from every page, so it sits above the rail's links |
| 275 | 276 | rather than on one page of its own */ |
| 276 | 277 | form.railsearch { margin-bottom: var(--sp-3); } |
| @@ -486,9 +487,9 @@ form.searchform, form.logfilter, form.compareform { | ||
| 486 | 487 | flex-wrap: wrap; |
| 487 | 488 | margin: 0 0 var(--sp-4); |
| 488 | 489 | } |
| 489 | form.searchform input[type="search"], form.logfilter input { flex: 1; min-width: 12rem; max-width: 32rem; } | |
| 490 | form.searchform input[type="search"], form.searchform input[type="text"], form.logfilter input { flex: 1; min-width: 12rem; max-width: 32rem; } | |
| 490 | 491 | form.searchform.compact { margin: 0; } |
| 491 | form.searchform.compact input[type="search"] { min-width: 18rem; } | |
| 492 | form.searchform.compact input[type="search"], form.searchform.compact input[type="text"] { min-width: 18rem; } | |
| 492 | 493 | form.compareform label { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; } |
| 493 | 494 | |
| 494 | 495 | /* ---- buttons: one family, 32px tall, so a row of them lines up ---- */ |
| @@ -1467,13 +1468,21 @@ svg.icon { vertical-align: -0.125em; } | ||
| 1467 | 1468 | overflow-x: auto; |
| 1468 | 1469 | } |
| 1469 | 1470 | a.brand { padding: var(--sp-2) var(--sp-3); } |
| 1470 | .railbody { flex: 1; overflow: visible; padding: 0; display: flex; align-items: center; } | |
| 1471 | .railbody { flex: 1; overflow: visible; padding: 0; display: flex; flex-direction: column; } | |
| 1472 | .railtop { display: flex; align-items: center; gap: var(--sp-2); overflow-x: auto; } | |
| 1473 | .railtop > * { flex-shrink: 0; } | |
| 1471 | 1474 | form.railsearch { margin: 0 var(--sp-2); } |
| 1472 | 1475 | form.railsearch input[type="search"] { min-width: 8rem; } |
| 1473 | /* the strip hides the pinned group and the review queue: pinned repos | |
| 1474 | are reachable from the repository pages and the review queue from | |
| 1475 | the dashboard's review section, per the spec */ | |
| 1476 | /* the strip hides the review queue, reachable from the dashboard, and | |
| 1477 | shows pinned repositories as a second row of the strip */ | |
| 1476 | 1478 | .railgroup { display: none; } |
| 1479 | .railgroup.pinned { | |
| 1480 | display: block; | |
| 1481 | border-top: 1px solid var(--shell-line); | |
| 1482 | padding: 0 var(--sp-2); | |
| 1483 | } | |
| 1484 | .railgroup.pinned .raillabel { display: none; } | |
| 1485 | .railgroup.pinned ul.raillist { overflow-x: auto; } | |
| 1477 | 1486 | ul.raillist { display: flex; margin: 0; } |
| 1478 | 1487 | ul.raillist a { border-radius: 0; border-bottom: 2px solid transparent; padding: var(--sp-2) var(--sp-3); } |
| 1479 | 1488 | ul.raillist a[aria-current] { box-shadow: none; border-bottom-color: var(--shell-mark); } |
internal/web/templates/layout.html +3 −1
| @@ -16,6 +16,7 @@ | ||
| 16 | 16 | <nav class="rail" aria-label="Site"> |
| 17 | 17 | <a class="brand" href="/">{{template "mark"}}<span>{{.Site}}</span></a> |
| 18 | 18 | <div class="railbody"> |
| 19 | <div class="railtop"> | |
| 19 | 20 | <form method="get" action="/search" class="railsearch" role="search"> |
| 20 | 21 | <input type="search" name="q" aria-label="Search {{.Site}}" placeholder="Search"> |
| 21 | 22 | </form> |
| @@ -26,8 +27,9 @@ | ||
| 26 | 27 | <li><a {{if eq (str . "Tab") "bookmarks"}}aria-current="page" {{end}}href="/bookmarks">Bookmarks</a></li> |
| 27 | 28 | <li><a href="/new">New repository</a></li>{{end}} |
| 28 | 29 | </ul> |
| 30 | </div> | |
| 29 | 31 | {{with .Rail.Pinned}} |
| 30 | <div class="railgroup"> | |
| 32 | <div class="railgroup pinned"> | |
| 31 | 33 | <p class="raillabel" id="rail-pinned">Pinned</p> |
| 32 | 34 | <ul class="raillist" aria-labelledby="rail-pinned"> |
| 33 | 35 | {{range .}}<li><a {{if eq $here (printf "%s/%s" .Owner .Name)}}aria-current="page" {{end}}href="/{{.Owner}}/{{.Name}}"><span class="owner">{{.Owner}}/</span>{{.Name}}</a></li> |