fix(web): fit every page to phone widths
- commit
4246255fa8c892f5c501be8379918b1d10c7059fbrowse tree- parent
3895cc2cc2294a3a0ad6d548f7ae5156a93d65e4- author
- obscurejames <354576047+obscurejames@users.noreply.github.com>
- signature
- Signed by:
~james SHA256:KlzJ0P0gvJcnOYpaxD5yCUw52ImHttTKRjVAEnnYnKg
- date
- 2026-11-13 16:29 UTC
9 files changed, +35 −15
- Dockerfile modified +5 −2
- deploy/compose.yaml modified +5 −1
- forge/extra.go modified +2 −2
- web/static/style.css modified +17 −5
- web/templates/commit.tmpl modified +1 −1
- web/templates/log.tmpl modified +1 −2
- web/templates/meta.tmpl modified +2 −0
- web/templates/pull.tmpl modified +1 −1
- web/templates/repo.tmpl modified +1 −1
Dockerfile modified
| @@ -6,10 +6,13 @@ COPY . . | ||
| 6 | 6 | RUN CGO_ENABLED=0 go build -trimpath -ldflags='-s -w' -o /gitpocket . |
| 7 | 7 | |
| 8 | 8 | FROM alpine:3.22 |
| 9 | -RUN apk add --no-cache git gnupg openssh-keygen ca-certificates | |
| 9 | +ARG UID=65532 GID=65532 | |
| 10 | +RUN apk add --no-cache git gnupg openssh-keygen ca-certificates && \ | |
| 11 | + (getent group "$GID" || addgroup -g "$GID" git) && \ | |
| 12 | + adduser -D -H -h /srv/gitpocket -s /sbin/nologin -u "$UID" -G "$(getent group "$GID" | cut -d: -f1)" git | |
| 10 | 13 | COPY --from=build /gitpocket /usr/local/bin/gitpocket |
| 11 | 14 | ENV HOME=/tmp GOMEMLIMIT=192MiB |
| 12 | -USER 65532:65532 | |
| 15 | +USER $UID:$GID | |
| 13 | 16 | EXPOSE 3200 |
| 14 | 17 | ENTRYPOINT ["/usr/local/bin/gitpocket", "-root", "/srv/gitpocket"] |
| 15 | 18 | CMD ["serve", "-listen", ":3200"] |
deploy/compose.yaml modified
| @@ -2,7 +2,11 @@ name: gitpocket | ||
| 2 | 2 | |
| 3 | 3 | services: |
| 4 | 4 | gitpocket: |
| 5 | - build: .. | |
| 5 | + build: | |
| 6 | + context: .. | |
| 7 | + args: | |
| 8 | + UID: "${GITPOCKET_UID:?set GITPOCKET_UID}" | |
| 9 | + GID: "${GITPOCKET_GID:?set GITPOCKET_GID}" | |
| 6 | 10 | image: gitpocket |
| 7 | 11 | container_name: gitpocket |
| 8 | 12 | command: ["serve", "-listen", ":3200", "-host", "${GITPOCKET_HOST:?set GITPOCKET_HOST}", "-proxy", "172.31.255.1/32"] |
forge/extra.go modified
| @@ -604,7 +604,7 @@ func (s *Server) activity(owner User, year int) heatView { | ||
| 604 | 604 | view.Total += n |
| 605 | 605 | } |
| 606 | 606 | var b strings.Builder |
| 607 | - fmt.Fprintf(&b, `<div class="heat" style="--weeks:%d"><div class="months">`, weeks) | |
| 607 | + fmt.Fprintf(&b, `<div class="heatwrap"><div class="heat" style="--weeks:%d"><div class="months">`, weeks) | |
| 608 | 608 | lastMonth := -1 |
| 609 | 609 | for w := 0; w < weeks; w++ { |
| 610 | 610 | d := start.AddDate(0, 0, 7*w) |
| @@ -643,7 +643,7 @@ func (s *Server) activity(owner User, year int) heatView { | ||
| 643 | 643 | } |
| 644 | 644 | fmt.Fprintf(&b, `<span class="c h%d%s" data-tip="%s" aria-label="%s" tabindex="0"></span>`, level, edge, tip, tip) |
| 645 | 645 | } |
| 646 | - b.WriteString(`</div></div>`) | |
| 646 | + b.WriteString(`</div></div></div>`) | |
| 647 | 647 | view.Grid = template.HTML(b.String()) |
| 648 | 648 | return view |
| 649 | 649 | } |
web/static/style.css modified
| @@ -44,7 +44,8 @@ nav.subtabs a:hover,nav.tabs a:hover{text-decoration:none;color:var(--fg)} | ||
| 44 | 44 | .repohead{margin-top:-1rem} |
| 45 | 45 | .repohead h2{padding:.4rem 0 .3rem;font-size:1.9rem} |
| 46 | 46 | .tabbar{background:var(--bar)} |
| 47 | -nav.tabs{display:flex} | |
| 47 | +nav.tabs{display:flex;overflow-x:auto;scrollbar-width:none} | |
| 48 | +nav.tabs a{white-space:nowrap} | |
| 48 | 49 | nav.tabs a{padding:.25rem .9rem} |
| 49 | 50 | nav.tabs a.active{background:var(--bg);color:var(--fg)} |
| 50 | 51 | .repohead .desc{margin:0 0 .4rem;color:var(--muted)} |
| @@ -120,7 +121,8 @@ dl.meta dd{margin:0;overflow-wrap:anywhere} | ||
| 120 | 121 | .readme code,.readme pre{font-size:13.5px} |
| 121 | 122 | .readme p{margin:.6rem 0} |
| 122 | 123 | .readme img{max-width:100%} |
| 123 | -.readme table{border-collapse:collapse} | |
| 124 | +.readme table{border-collapse:collapse;display:block;max-width:100%;overflow-x:auto} | |
| 125 | +.readme{overflow-wrap:break-word} | |
| 124 | 126 | .readme td,.readme th{border:1px solid var(--line);padding:.2rem .5rem} |
| 125 | 127 | .readme code{background:var(--code);padding:.05rem .25rem} |
| 126 | 128 | .readme pre code{padding:0;background:none} |
| @@ -136,7 +138,7 @@ table.tree .size{color:var(--muted);text-align:right} | ||
| 136 | 138 | table.tree .last{max-width:30rem;overflow:hidden;text-overflow:ellipsis;width:100%} |
| 137 | 139 | table.tree .when{text-align:right} |
| 138 | 140 | table.refs td,table.keys td{padding:.3rem 1rem .3rem 0;border-bottom:1px solid var(--line)} |
| 139 | -.code{margin:0 -1rem;line-height:1.45;min-height:70vh} | |
| 141 | +.code{margin:0 -1rem;line-height:1.45;min-height:70vh;overflow-x:auto} | |
| 140 | 142 | .code .chroma .lntable{width:auto;min-width:0} |
| 141 | 143 | .code .chroma .lntd:last-child{border-right:1px solid var(--bar);min-width:calc(80ch + 1rem);padding-right:1rem;width:auto} |
| 142 | 144 | table.blob{width:100%} |
| @@ -227,8 +229,17 @@ select{font:inherit;color:var(--fg);padding:.35rem .5rem;border:1px solid var(-- | ||
| 227 | 229 | .mergeform input,.mergeform textarea{width:100%} |
| 228 | 230 | .mergeform .actions{gap:.4rem} |
| 229 | 231 | .panel a.btn.block{margin-top:.4rem} |
| 230 | -.verified{display:inline-block;font-size:.72rem;border:1px solid var(--add);color:var(--add);border-radius:3px;padding:0 .3rem;vertical-align:middle;margin-left:.3rem} | |
| 231 | -.verified.unknown{border-color:var(--muted);color:var(--muted)} | |
| 232 | +.sha{display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:4px;overflow:hidden;vertical-align:middle;line-height:1.55} | |
| 233 | +.sha .hash{padding:0 .4rem} | |
| 234 | +.sha:has(.seal.ok){border-color:color-mix(in srgb,var(--add) 45%,transparent)} | |
| 235 | +.seal{display:inline-flex;align-items:center;gap:.25rem;padding:0 .3rem;border-left:1px solid var(--line);color:var(--muted)} | |
| 236 | +.seal.ok{background:var(--addbg);border-color:color-mix(in srgb,var(--add) 45%,transparent);color:var(--add)} | |
| 237 | +.seal img{width:14px;height:14px;border-radius:2px} | |
| 238 | +.lock{width:12px;height:12px;fill:currentColor;flex:none} | |
| 239 | +.signedby{display:inline-flex;align-items:center;gap:.35rem;background:var(--addbg);border:1px solid color-mix(in srgb,var(--add) 45%,transparent);color:var(--add);border-radius:4px;padding:.05rem .5rem} | |
| 240 | +.signedby img{width:18px;height:18px;border-radius:3px} | |
| 241 | +.signedby a{color:var(--fg)} | |
| 242 | +.signedby.unknown{background:var(--soft);border-color:var(--line);color:var(--muted)} | |
| 232 | 243 | .auth{max-width:920px;margin:0 auto} |
| 233 | 244 | .auth h3 small{font-size:.9rem;font-weight:400;margin-left:.5rem} |
| 234 | 245 | .auth p{margin:.6rem 0 1rem} |
| @@ -531,3 +542,4 @@ nav.site .bell .badge{position:absolute;top:-.35rem;left:.85rem;min-width:1rem;p | ||
| 531 | 542 | fieldset.links{border:0;padding:0;margin:0 0 .8rem;display:flex;flex-direction:column;gap:.35rem;min-width:0} |
| 532 | 543 | fieldset.links legend{padding:0;margin-bottom:.25rem} |
| 533 | 544 | @media(max-width:700px){.inboxpanel{position:fixed;top:3.2rem;left:1rem;right:1rem;width:auto;max-width:none}} |
| 545 | +@media(max-width:800px){.btn{white-space:nowrap}.dashhead{flex-wrap:wrap;row-gap:.4rem}.dashhead h3{white-space:nowrap}.columns.pullbody,.columns.browse,.dash:has(>section+section){grid-template-columns:minmax(0,1fr)}nav.tabs a{padding:.25rem .6rem}table.tree .last,table.tree .mode{display:none}table.tree td.name{white-space:normal;overflow-wrap:anywhere}main a,.crumbs{overflow-wrap:anywhere;min-width:0}.userhead{flex-wrap:wrap;gap:.2rem 1rem}.userhead nav.tabs.small{margin-bottom:0;max-width:100%}.titlerow{flex-wrap:wrap;gap:.3rem .8rem}.titlerow .btn{white-space:nowrap}.columns.user,.columns.orgbody{grid-template-columns:minmax(0,1fr)}.heatwrap{overflow-x:auto;direction:rtl;padding-bottom:2.4rem;margin-bottom:-2.4rem}.heatwrap>.heat{direction:ltr;min-width:620px}.heat .c:hover::after,.heat .c:focus::after{bottom:auto;top:calc(100% + 6px)}} | |
web/templates/commit.tmpl modified
| @@ -7,7 +7,7 @@ | ||
| 7 | 7 | <dt>commit</dt><dd><code>{{$c.Hash}}</code> <a href="/{{$p.Repo.Path}}/tree/{{$c.Hash}}/">browse tree</a></dd> |
| 8 | 8 | {{range $c.Parents}}<dt>parent</dt><dd><a href="/{{$p.Repo.Path}}/commit/{{.}}"><code>{{.}}</code></a></dd>{{end}} |
| 9 | 9 | <dt>author</dt><dd>{{template "who" $c}} <{{$c.Email}}></dd> |
| 10 | -<dt>signature</dt><dd>{{with signer $c}}<span class="verified">Verified ~{{.}}</span> signed with a key registered by <a href="/~{{.}}">~{{.}}</a>{{else}}{{if and $c.Signature (ne $c.Signature "N")}}<span class="verified unknown">Unverified</span> signed with an unregistered key{{else}}none{{end}}{{end}}</dd> | |
| 10 | +<dt>signature</dt><dd>{{with signer $c}}<span class="signedby">{{template "lock"}}Signed by: <img src="/~{{.}}/avatar" alt=""><a href="/~{{.}}">~{{.}}</a></span>{{else}}{{if and $c.Signature (ne $c.Signature "N")}}<span class="signedby unknown">{{template "lock"}}Signed with an unregistered key</span>{{else}}none{{end}}{{end}}{{if and $c.Key (ne $c.Signature "N")}} <span class="muted small">{{$c.Key}}</span>{{end}}</dd> | |
| 11 | 11 | <dt>date</dt><dd>{{date $c.Time}} UTC</dd> |
| 12 | 12 | </dl> |
| 13 | 13 | {{if $c.Body}}<pre class="body">{{$c.Body}}</pre>{{end}} |
web/templates/log.tmpl modified
| @@ -4,8 +4,7 @@ | ||
| 4 | 4 | {{if $p.Empty}}<p class="muted">No commits.</p>{{else}} |
| 5 | 5 | <form method="get" class="pickaxe">{{if .Data.Path}}<input type="hidden" name="path" value="{{.Data.Path}}">{{end}}<input name="q" value="{{.Data.Query}}" placeholder="Find commits that added or removed some text"><select name="mode"><option value="text">changes its count</option><option value="regex"{{if eq .Data.Mode "regex"}} selected{{end}}>diff matches regex</option></select><button class="btn">Search history ▸</button></form> |
| 6 | 6 | {{with .Data.Error}}<p class="error">{{.}}</p>{{end}}{{if and .Data.Query (not .Data.Commits) (not .Data.Error)}}<p class="info">No commit on {{$p.Ref}} {{if eq .Data.Mode "regex"}}has a diff line matching{{else}}changes the number of occurrences of{{end}} <code>{{.Data.Query}}</code>.</p>{{end}}{{if and .Data.Query .Data.Commits}}<p class="muted">Commits on {{$p.Ref}} that {{if eq .Data.Mode "regex"}}touch lines matching{{else}}add or remove{{end}} <code>{{.Data.Query}}</code> · <a href="?{{if .Data.Path}}path={{.Data.Path}}{{end}}">clear</a></p>{{end}} |
| 7 | -<div class="log">{{range .Data.Commits}}<div class="event"><div><a class="hash" href="/{{$p.Repo.Path}}/commit/{{.Hash}}">{{short .Hash}}</a> <a class="subject" href="/{{$p.Repo.Path}}/commit/{{.Hash}}">{{.Subject}}</a>{{template "badge" .}}</div><div class="muted small">{{template "who" .}} · <span title="{{date .Time}}">{{ago .Time}}</span></div>{{if .Body}}<pre class="body">{{.Body}}</pre>{{end}}</div>{{end}}</div> | |
| 7 | +<div class="log">{{range .Data.Commits}}<div class="event"><div><span class="sha"><a class="hash" href="/{{$p.Repo.Path}}/commit/{{.Hash}}">{{short .Hash}}</a>{{template "seal" .}}</span> <a class="subject" href="/{{$p.Repo.Path}}/commit/{{.Hash}}">{{.Subject}}</a></div><div class="muted small">{{template "who" .}} · <span title="{{date .Time}}">{{ago .Time}}</span></div>{{if .Body}}<pre class="body">{{.Body}}</pre>{{end}}</div>{{end}}</div> | |
| 8 | 8 | {{with .Data.Next}}<p><a class="btn" href="?from={{.}}{{if $.Data.Path}}&path={{$.Data.Path}}{{end}}{{if $.Data.Query}}&q={{$.Data.Query}}&mode={{$.Data.Mode}}{{end}}">Older ▸</a></p>{{end}} |
| 9 | 9 | {{end}} |
| 10 | 10 | {{end}} |
| 11 | -{{define "badge"}}{{with signer .}}<span class="verified" title="Signed with a key registered by ~{{.}}">Verified ~{{.}}</span>{{else}}{{if and .Signature (ne .Signature "N")}}<span class="verified unknown" title="Signed with an unregistered key">Unverified</span>{{end}}{{end}}{{end}} | |
web/templates/meta.tmpl modified
| @@ -12,3 +12,5 @@ | ||
| 12 | 12 | {{define "repoitem"}}<div class="event repo"><h4><a href="/{{.Path}}">{{.Name}}</a>{{if .Private}} <span class="tag">private</span>{{else if .Unlisted}} <span class="tag">unlisted</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}}{{template "repometa" .}}</div>{{end}} |
| 13 | 13 | {{define "repometa"}}{{$l := lang .}}<p class="repometa">{{with $l.Name}}<span><i class="dot" style="background:{{$l.Colour}}"></i>{{.}}</span>{{end}}<span title="{{.Stars}} star{{if ne .Stars 1}}s{{end}}"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.6l1.9 4 4.4.5-3.3 3 .9 4.3L8 11.2 4.1 13.4l.9-4.3-3.3-3 4.4-.5z"/></svg>{{.Stars}}</span><span title="{{.Forks}} fork{{if ne .Forks 1}}s{{end}}"><svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="4" cy="3" r="1.6"/><circle cx="12" cy="3" r="1.6"/><circle cx="8" cy="13" r="1.6"/><path d="M4 4.6v1.4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V4.6M8 8v3.4"/></svg>{{.Forks}}</span></p>{{end}} |
| 14 | 14 | {{define "pushed"}}{{$p := .Page}}{{range .Pushed}}<div class="pushnote"><svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="4" cy="3" r="1.6"/><circle cx="4" cy="13" r="1.6"/><circle cx="12" cy="5" r="1.6"/><path d="M4 4.6v6.8M12 6.6c0 3-4 2.6-7.4 5.2"/></svg><span><strong>{{.Name}}</strong> had recent pushes {{ago .Time}}, {{.Ahead}} commit{{if ne .Ahead 1}}s{{end}} ahead of {{$p.Ref}}</span><a class="btn primary" href="/{{$p.Repo.Path}}/pulls/new?source={{$p.Repo.Path}}:{{.Name}}&target={{$p.Ref}}">Open pull request ▸</a></div>{{end}}{{end}} |
| 15 | +{{define "lock"}}<svg class="lock" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 7V5a4 4 0 0 1 8 0v2h.5A1.5 1.5 0 0 1 14 8.5v5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5v-5A1.5 1.5 0 0 1 3.5 7H4zm1.5 0h5V5a2.5 2.5 0 0 0-5 0v2z"/></svg>{{end}} | |
| 16 | +{{define "seal"}}{{with signer .}}<span class="seal ok" title="Signed with a key registered by ~{{.}}">{{template "lock"}}<img src="/~{{.}}/avatar" alt="~{{.}}"></span>{{else}}{{if and .Signature (ne .Signature "N")}}<span class="seal" title="Signed with an unregistered key">{{template "lock"}}</span>{{end}}{{end}}{{end}} | |
web/templates/pull.tmpl modified
| @@ -59,7 +59,7 @@ | ||
| 59 | 59 | {{end}} |
| 60 | 60 | {{if .Data.Commits}} |
| 61 | 61 | <h3>Commits</h3> |
| 62 | -<div class="log">{{range .Data.Commits}}<div class="event"><div><a class="hash" href="/{{$p.Repo.Path}}/commit/{{.Hash}}">{{short .Hash}}</a> <a class="subject" href="/{{$p.Repo.Path}}/commit/{{.Hash}}">{{.Subject}}</a>{{with signer .}}<span class="verified" title="Signed with a key registered by ~{{.}}">Verified ~{{.}}</span>{{end}}</div><div class="muted small">{{template "who" .}} · {{ago .Time}}</div></div>{{end}}</div> | |
| 62 | +<div class="log">{{range .Data.Commits}}<div class="event"><div><span class="sha"><a class="hash" href="/{{$p.Repo.Path}}/commit/{{.Hash}}">{{short .Hash}}</a>{{template "seal" .}}</span> <a class="subject" href="/{{$p.Repo.Path}}/commit/{{.Hash}}">{{.Subject}}</a></div><div class="muted small">{{template "who" .}} · {{ago .Time}}</div></div>{{end}}</div> | |
| 63 | 63 | {{end}} |
| 64 | 64 | {{if .Data.Files}} |
| 65 | 65 | <h3 id="diff">Changes <span class="muted">{{len .Data.Files}} files, <span class="add">+{{.Data.Added}}</span> <span class="del">−{{.Data.Removed}}</span>{{if .Data.ReviewCount}}, {{.Data.ReviewCount}} review comments{{end}}</span></h3> |
web/templates/repo.tmpl modified
| @@ -8,7 +8,7 @@ git push -u origin {{$p.Ref}}</pre> | ||
| 8 | 8 | {{else}} |
| 9 | 9 | <div class="summary"> |
| 10 | 10 | <div class="commits"> |
| 11 | -{{range .Data.Commits}}<div class="event"><div class="row"><span><a class="hash" href="/{{$p.Repo.Path}}/commit/{{.Hash}}">{{short .Hash}}</a> {{template "who" .}}{{with signer .}}<span class="verified" title="Signed with a key registered by ~{{.}}">Verified</span>{{end}}</span><a class="when" href="/{{$p.Repo.Path}}/commit/{{.Hash}}" title="{{date .Time}}">{{ago .Time}}</a></div><pre class="subject">{{.Subject}}</pre></div>{{end}} | |
| 11 | +{{range .Data.Commits}}<div class="event"><div class="row"><span><span class="sha"><a class="hash" href="/{{$p.Repo.Path}}/commit/{{.Hash}}">{{short .Hash}}</a>{{template "seal" .}}</span> {{template "who" .}}</span><a class="when" href="/{{$p.Repo.Path}}/commit/{{.Hash}}" title="{{date .Time}}">{{ago .Time}}</a></div><pre class="subject">{{.Subject}}</pre></div>{{end}} | |
| 12 | 12 | </div> |
| 13 | 13 | <div class="refs"> |
| 14 | 14 | <h3>refs</h3> |