krz/gitbay

web: pinned repositories are a second row of the phone strip !407

merged merged by cmc on 2026-09-18 06:56 UTC · krz/gitbay:stack-220 into main

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