tenseleyflow/shithub / 8744f30

Browse files

Restyle repo social lists

Authored by espadonne
SHA
8744f307b21fea6240a97d057184b083450b576e
Parents
e2a85a5
Tree
4d29b6e

4 changed files

StatusFile+-
M internal/web/static/css/shithub.css 121 6
M internal/web/templates/repo/forks.html 23 16
M internal/web/templates/repo/stargazers.html 17 11
M internal/web/templates/repo/watchers.html 16 12
internal/web/static/css/shithub.cssmodified
@@ -1936,15 +1936,130 @@ code {
19361936
 .shithub-pull-check-conclusion-timed_out { background: #9a670022; color: #9a6700; }
19371937
 .shithub-pull-check-conclusion-action_required { background: #cf222e22; color: #cf222e; font-weight: 600; }
19381938
1939
-/* S26 — stars / watchers list pages */
1940
-.shithub-social { padding: 1rem 0; }
1941
-.shithub-social-list { list-style: none; padding: 0; margin: 1rem 0; }
1939
+/* S26 — stars / watchers / forks list pages */
1940
+.shithub-social { max-width: 1012px; margin: 0 auto; padding: 1.5rem 0; }
1941
+.shithub-social-subhead {
1942
+  display: flex;
1943
+  align-items: baseline;
1944
+  gap: 0.75rem;
1945
+  padding-bottom: 0.85rem;
1946
+  border-bottom: 1px solid var(--border-default);
1947
+}
1948
+.shithub-social-subhead h1 {
1949
+  margin: 0;
1950
+  font-size: 1.55rem;
1951
+  font-weight: 400;
1952
+}
1953
+.shithub-social-subhead p { margin: 0; color: var(--fg-muted); }
1954
+.shithub-social-tabnav {
1955
+  display: flex;
1956
+  gap: 0.25rem;
1957
+  margin: 1rem 0;
1958
+  border-bottom: 1px solid var(--border-default);
1959
+}
1960
+.shithub-social-tabnav a,
1961
+.shithub-social-tabnav span {
1962
+  display: inline-flex;
1963
+  align-items: center;
1964
+  gap: 0.35rem;
1965
+  padding: 0.55rem 0.85rem;
1966
+  color: var(--fg-default);
1967
+  border-bottom: 2px solid transparent;
1968
+  position: relative;
1969
+  bottom: -1px;
1970
+}
1971
+.shithub-social-tabnav a:hover { text-decoration: none; background: var(--canvas-subtle); border-radius: 6px 6px 0 0; }
1972
+.shithub-social-tabnav .is-active { border-bottom-color: var(--accent-emphasis); font-weight: 600; }
1973
+.shithub-social-tabnav .is-disabled { color: var(--fg-muted); }
1974
+.shithub-social-list {
1975
+  list-style: none;
1976
+  padding: 0;
1977
+  margin: 1rem 0;
1978
+  border: 1px solid var(--border-default);
1979
+  border-radius: 6px;
1980
+  background: var(--canvas-default);
1981
+}
19421982
 .shithub-social-list li {
1943
-  display: flex; gap: 0.6rem; align-items: baseline;
1944
-  padding: 0.5rem 0; border-bottom: 1px solid var(--border-default);
1983
+  display: grid;
1984
+  grid-template-columns: 40px minmax(0, 1fr) auto;
1985
+  gap: 0.85rem;
1986
+  align-items: center;
1987
+  padding: 1rem;
1988
+  border-bottom: 1px solid var(--border-muted);
19451989
 }
19461990
 .shithub-social-list li:last-child { border-bottom: none; }
1947
-.shithub-social-list small { color: var(--fg-muted); }
1991
+.shithub-social-avatar,
1992
+.shithub-social-avatar img {
1993
+  display: block;
1994
+  width: 40px;
1995
+  height: 40px;
1996
+  border-radius: 50%;
1997
+}
1998
+.shithub-social-avatar img { border: 1px solid var(--border-muted); }
1999
+.shithub-social-person {
2000
+  min-width: 0;
2001
+  display: grid;
2002
+  gap: 0.1rem;
2003
+}
2004
+.shithub-social-person strong { font-size: 1rem; }
2005
+.shithub-social-person span,
2006
+.shithub-social-time,
2007
+.shithub-social-meta {
2008
+  color: var(--fg-muted);
2009
+  font-size: 0.875rem;
2010
+}
2011
+.shithub-social-meta {
2012
+  display: flex;
2013
+  align-items: center;
2014
+  justify-content: end;
2015
+  gap: 0.75rem;
2016
+  flex-wrap: wrap;
2017
+}
2018
+.shithub-social-meta span {
2019
+  display: inline-flex;
2020
+  align-items: center;
2021
+  gap: 0.25rem;
2022
+}
2023
+.shithub-social-fork-badges {
2024
+  display: flex;
2025
+  gap: 0.35rem;
2026
+  flex-wrap: wrap;
2027
+  margin-top: 0.25rem;
2028
+}
2029
+.shithub-social-blank {
2030
+  margin: 1rem 0;
2031
+  padding: 2.5rem 1.5rem;
2032
+  border: 1px solid var(--border-default);
2033
+  border-radius: 6px;
2034
+  text-align: center;
2035
+  color: var(--fg-muted);
2036
+}
2037
+.shithub-social-blank svg {
2038
+  width: 24px;
2039
+  height: 24px;
2040
+  color: var(--fg-muted);
2041
+  margin-bottom: 0.75rem;
2042
+}
2043
+.shithub-social-blank h2 {
2044
+  margin: 0 0 0.4rem;
2045
+  color: var(--fg-default);
2046
+  font-size: 1.25rem;
2047
+  font-weight: 600;
2048
+}
2049
+.shithub-social-blank p {
2050
+  max-width: 520px;
2051
+  margin: 0 auto;
2052
+}
2053
+@media (max-width: 700px) {
2054
+  .shithub-social-list li {
2055
+    grid-template-columns: 40px minmax(0, 1fr);
2056
+  }
2057
+  .shithub-social-time,
2058
+  .shithub-social-meta {
2059
+    grid-column: 2;
2060
+    justify-content: start;
2061
+  }
2062
+}
19482063
 .shithub-meta { color: var(--fg-muted); margin: 0.25rem 0 1rem; }
19492064
 .shithub-empty { color: var(--fg-muted); padding: 1rem; }
19502065
 .shithub-pagination {
internal/web/templates/repo/forks.htmlmodified
@@ -2,32 +2,39 @@
22
 <section class="shithub-repo-page">
33
   {{ template "repo-header" . }}
44
   <div class="shithub-social">
5
-  <header class="shithub-code-head">
6
-    <h1>
7
-      <a href="/{{ .Owner }}/{{ .Repo.Name }}">{{ .Owner }}/{{ .Repo.Name }}</a>
8
-      <span class="shithub-code-sep">/</span>
9
-      Forks
10
-    </h1>
11
-    <p class="shithub-meta">{{ .Total }} {{ if eq .Total 1 }}fork{{ else }}forks{{ end }}</p>
5
+  <header class="shithub-social-subhead">
6
+    <h1>Forks</h1>
7
+    <p>{{ .Total }} {{ if eq .Total 1 }}fork{{ else }}forks{{ end }}</p>
128
   </header>
139
1410
   {{ if .Forks }}
1511
   <ul class="shithub-social-list">
1612
     {{ range .Forks }}
1713
     <li>
18
-      <a href="/{{ .OwnerUsername }}/{{ .Name }}"><strong>{{ .OwnerUsername }}/{{ .Name }}</strong></a>
19
-      {{ if eq .Visibility "private" }}<span class="shithub-pill shithub-pill-private">private</span>{{ end }}
20
-      {{ if eq .InitStatus "init_pending" }}<span class="shithub-pill">preparing</span>{{ end }}
21
-      {{ if eq .InitStatus "init_failed" }}<span class="shithub-pill shithub-pill-private">failed</span>{{ end }}
22
-      <small>★ {{ .StarCount }}</small>
23
-      <small>forks: {{ .ForkCount }}</small>
24
-      <small><time datetime="{{ .CreatedAt.Format "2006-01-02T15:04:05Z" }}">forked {{ relativeTime .CreatedAt }}</time></small>
25
-      {{ if .Description }}<p class="shithub-meta">{{ .Description }}</p>{{ end }}
14
+      <a href="/{{ .OwnerUsername }}" class="shithub-social-avatar"><img src="/avatars/{{ .OwnerUsername }}" alt="" width="40" height="40"></a>
15
+      <div class="shithub-social-person">
16
+        <a href="/{{ .OwnerUsername }}/{{ .Name }}"><strong>{{ .OwnerUsername }}/{{ .Name }}</strong></a>
17
+        {{ if .Description }}<span>{{ .Description }}</span>{{ end }}
18
+        <span class="shithub-social-fork-badges">
19
+          {{ if eq .Visibility "private" }}<span class="shithub-pill shithub-pill-private">Private</span>{{ end }}
20
+          {{ if eq .InitStatus "init_pending" }}<span class="shithub-pill">Preparing</span>{{ end }}
21
+          {{ if eq .InitStatus "init_failed" }}<span class="shithub-pill shithub-pill-private">Failed</span>{{ end }}
22
+        </span>
23
+      </div>
24
+      <div class="shithub-social-meta">
25
+        <span>{{ octicon "star" }} {{ .StarCount }}</span>
26
+        <span>{{ octicon "repo-forked" }} {{ .ForkCount }}</span>
27
+        <time datetime="{{ .CreatedAt.Format "2006-01-02T15:04:05Z" }}">Forked {{ relativeTime .CreatedAt }}</time>
28
+      </div>
2629
     </li>
2730
     {{ end }}
2831
   </ul>
2932
   {{ else }}
30
-  <p class="shithub-empty">No forks yet.</p>
33
+  <div class="shithub-social-blank">
34
+    {{ octicon "repo-forked" }}
35
+    <h2>No one has forked this repository yet</h2>
36
+    <p>Forks are a great way to contribute to a repository. After forking, you can send the original author a pull request.</p>
37
+  </div>
3138
   {{ end }}
3239
3340
   {{ if or .HasPrev .HasNext }}
internal/web/templates/repo/stargazers.htmlmodified
@@ -2,27 +2,33 @@
22
 <section class="shithub-repo-page">
33
   {{ template "repo-header" . }}
44
   <div class="shithub-social">
5
-  <header class="shithub-code-head">
6
-    <h1>
7
-      <a href="/{{ .Owner }}/{{ .Repo.Name }}">{{ .Owner }}/{{ .Repo.Name }}</a>
8
-      <span class="shithub-code-sep">/</span>
9
-      Stargazers
10
-    </h1>
11
-    <p class="shithub-meta">{{ .Total }} {{ if eq .Total 1 }}stargazer{{ else }}stargazers{{ end }}</p>
5
+  <header class="shithub-social-subhead">
6
+    <h1>Stargazers</h1>
127
   </header>
8
+  <nav class="shithub-social-tabnav" aria-label="Stargazers">
9
+    <a href="/{{ .Owner }}/{{ .Repo.Name }}/stargazers" class="is-active" aria-current="page">All <span class="shithub-tab-count">{{ .Total }}</span></a>
10
+    <span class="is-disabled">You know</span>
11
+  </nav>
1312
1413
   {{ if .Stargazers }}
1514
   <ul class="shithub-social-list">
1615
     {{ range .Stargazers }}
1716
     <li>
18
-      <a href="/{{ .Username }}"><strong>{{ if .DisplayName }}{{ .DisplayName }}{{ else }}{{ .Username }}{{ end }}</strong></a>
19
-      <small>@{{ .Username }}</small>
20
-      <small><time datetime="{{ .StarredAt.Time.Format "2006-01-02T15:04:05Z" }}">starred {{ relativeTime .StarredAt.Time }}</time></small>
17
+      <a href="/{{ .Username }}" class="shithub-social-avatar"><img src="/avatars/{{ .Username }}" alt="" width="40" height="40"></a>
18
+      <div class="shithub-social-person">
19
+        <a href="/{{ .Username }}"><strong>{{ if .DisplayName }}{{ .DisplayName }}{{ else }}{{ .Username }}{{ end }}</strong></a>
20
+        <span>@{{ .Username }}</span>
21
+      </div>
22
+      <time class="shithub-social-time" datetime="{{ .StarredAt.Time.Format "2006-01-02T15:04:05Z" }}">Starred {{ relativeTime .StarredAt.Time }}</time>
2123
     </li>
2224
     {{ end }}
2325
   </ul>
2426
   {{ else }}
25
-  <p class="shithub-empty">No stargazers yet.</p>
27
+  <div class="shithub-social-blank">
28
+    {{ octicon "star" }}
29
+    <h2>Be the first to star this repository</h2>
30
+    <p>Stars help people track repositories and show appreciation for useful work.</p>
31
+  </div>
2632
   {{ end }}
2733
2834
   {{ if or .HasPrev .HasNext }}
internal/web/templates/repo/watchers.htmlmodified
@@ -2,28 +2,32 @@
22
 <section class="shithub-repo-page">
33
   {{ template "repo-header" . }}
44
   <div class="shithub-social">
5
-  <header class="shithub-code-head">
6
-    <h1>
7
-      <a href="/{{ .Owner }}/{{ .Repo.Name }}">{{ .Owner }}/{{ .Repo.Name }}</a>
8
-      <span class="shithub-code-sep">/</span>
9
-      Watchers
10
-    </h1>
11
-    <p class="shithub-meta">{{ .Total }} {{ if eq .Total 1 }}watcher{{ else }}watchers{{ end }}</p>
5
+  <header class="shithub-social-subhead">
6
+    <h1>Watchers</h1>
127
   </header>
138
149
   {{ if .Watchers }}
1510
   <ul class="shithub-social-list">
1611
     {{ range .Watchers }}
1712
     <li>
18
-      <a href="/{{ .Username }}"><strong>{{ if .DisplayName }}{{ .DisplayName }}{{ else }}{{ .Username }}{{ end }}</strong></a>
19
-      <small>@{{ .Username }}</small>
20
-      <span class="shithub-pill">{{ .Level }}</span>
21
-      <small><time datetime="{{ .UpdatedAt.Time.Format "2006-01-02T15:04:05Z" }}">since {{ relativeTime .UpdatedAt.Time }}</time></small>
13
+      <a href="/{{ .Username }}" class="shithub-social-avatar"><img src="/avatars/{{ .Username }}" alt="" width="40" height="40"></a>
14
+      <div class="shithub-social-person">
15
+        <a href="/{{ .Username }}"><strong>{{ if .DisplayName }}{{ .DisplayName }}{{ else }}{{ .Username }}{{ end }}</strong></a>
16
+        <span>@{{ .Username }}</span>
17
+      </div>
18
+      <div class="shithub-social-meta">
19
+        <span class="shithub-pill">{{ .Level }}</span>
20
+        <time datetime="{{ .UpdatedAt.Time.Format "2006-01-02T15:04:05Z" }}">Watching since {{ relativeTime .UpdatedAt.Time }}</time>
21
+      </div>
2222
     </li>
2323
     {{ end }}
2424
   </ul>
2525
   {{ else }}
26
-  <p class="shithub-empty">No watchers yet.</p>
26
+  <div class="shithub-social-blank">
27
+    {{ octicon "eye" }}
28
+    <h2>No one's watching this repository yet.</h2>
29
+    <p>You could be the first.</p>
30
+  </div>
2731
   {{ end }}
2832
2933
   {{ if or .HasPrev .HasNext }}