💄 (repos): Wrap every settings section in a white panel card
Changes
2 files changed, +53 -50
MODIFY
src/main/resources/META-INF/resources/shark.css
+9 -12
@@ -1879,22 +1879,19 @@
1879
1879
max-width: 100%;
1880
1880
}
1881
1881
1882
-.danger-zone {
1883
- margin-top: var(--s6);
1882
+/* settings page — every section is a padded white card */
1883
+
1884
+.settings-card {
1885
+ padding: var(--s5);
1886
+ margin-top: var(--s5);
1887
+}
1888
+
1889
+.settings-card > h2:first-child {
1890
+ margin-top: 0;
1884
1891
}
1885
1892
1886
1893
/* push mirrors */
1887
1894
1888
-.mirrors {
1889
- margin-top: var(--s6);
1890
- padding: var(--s4);
1891
-}
1892
-
1893
-.mirrors-head {
1894
- font-weight: 600;
1895
- margin-bottom: var(--s3);
1896
-}
1897
-
1898
1895
.mirror-list {
1899
1896
list-style: none;
1900
1897
margin: 0 0 var(--s4);
MODIFY
src/main/resources/templates/RepositoryResource/settings.html
+44 -38
@@ -11,44 +11,50 @@
11
11
<p class="error">{error}</p>
12
12
{/if}
13
13
14
- <h2>Visibility</h2>
15
- <p class="muted">This repository is currently <strong>{repo.visibility.name()}</strong>.
16
- Public repositories can be seen and cloned by anyone, including other federated instances;
17
- private repositories are visible only to you and your collaborators.</p>
18
- <form method="post" action="/repos/{repo.ownerHandle}/{repo.name}/visibility"
19
- onsubmit="return confirm('Change the visibility of this repository?')">
20
- <p>
21
- <select name="visibility">
22
- <option value="PUBLIC"{#if repo.visibility.name() == 'PUBLIC'} selected{/if}>Public</option>
23
- <option value="PRIVATE"{#if repo.visibility.name() == 'PRIVATE'} selected{/if}>Private</option>
24
- </select>
25
- </p>
26
- <button class="btn btn-primary">Change visibility</button>
27
- </form>
14
+ <section class="panel settings-card">
15
+ <h2>Visibility</h2>
16
+ <p class="muted">This repository is currently <strong>{repo.visibility.name()}</strong>.
17
+ Public repositories can be seen and cloned by anyone, including other federated instances;
18
+ private repositories are visible only to you and your collaborators.</p>
19
+ <form method="post" action="/repos/{repo.ownerHandle}/{repo.name}/visibility"
20
+ onsubmit="return confirm('Change the visibility of this repository?')">
21
+ <p>
22
+ <select name="visibility">
23
+ <option value="PUBLIC"{#if repo.visibility.name() == 'PUBLIC'} selected{/if}>Public</option>
24
+ <option value="PRIVATE"{#if repo.visibility.name() == 'PRIVATE'} selected{/if}>Private</option>
25
+ </select>
26
+ </p>
27
+ <button class="btn btn-primary">Change visibility</button>
28
+ </form>
29
+ </section>
28
30
29
- <h2>Repository image</h2>
30
- <p class="muted">Shown next to this repository across git-shark. Without one, the owner's profile picture is used.</p>
31
- {#if repo.hasImage}
32
- <img class="avatar-preview" src="/repos/{repo.ownerHandle}/{repo.name}/image?v={repo.imageUpdatedAt.toEpochMilli}" alt="Current repository image">
33
- {/if}
34
- <form method="post" action="/repos/{repo.ownerHandle}/{repo.name}/image" enctype="multipart/form-data">
35
- <p><input type="file" name="image" accept="image/png,image/jpeg,image/gif,image/webp" required></p>
36
- <p class="muted">PNG, JPEG, GIF or WebP, up to 2 MB.</p>
37
- <button class="btn btn-primary">Upload</button>
38
- </form>
39
- {#if repo.hasImage}
40
- <form method="post" action="/repos/{repo.ownerHandle}/{repo.name}/image/delete"
41
- onsubmit="return confirm('Remove this repository image?')">
42
- <button class="btn btn-danger">Remove image</button>
43
- </form>
44
- {/if}
31
+ <section class="panel settings-card">
32
+ <h2>Repository image</h2>
33
+ <p class="muted">Shown next to this repository across git-shark. Without one, the owner's profile picture is used.</p>
34
+ {#if repo.hasImage}
35
+ <img class="avatar-preview" src="/repos/{repo.ownerHandle}/{repo.name}/image?v={repo.imageUpdatedAt.toEpochMilli}" alt="Current repository image">
36
+ {/if}
37
+ <form method="post" action="/repos/{repo.ownerHandle}/{repo.name}/image" enctype="multipart/form-data">
38
+ <p><input type="file" name="image" accept="image/png,image/jpeg,image/gif,image/webp" required></p>
39
+ <p class="muted">PNG, JPEG, GIF or WebP, up to 2 MB.</p>
40
+ <button class="btn btn-primary">Upload</button>
41
+ </form>
42
+ {#if repo.hasImage}
43
+ <form method="post" action="/repos/{repo.ownerHandle}/{repo.name}/image/delete"
44
+ onsubmit="return confirm('Remove this repository image?')">
45
+ <button class="btn btn-danger">Remove image</button>
46
+ </form>
47
+ {/if}
48
+ </section>
45
49
46
- <h2>Collaborators</h2>
47
- <p class="muted">Grant other users read and write access to this repository, including when it is private.</p>
48
- <p><a class="btn btn-secondary" href="/repos/{repo.ownerHandle}/{repo.name}/settings/collaborators">Manage collaborators</a></p>
50
+ <section class="panel settings-card">
51
+ <h2>Collaborators</h2>
52
+ <p class="muted">Grant other users read and write access to this repository, including when it is private.</p>
53
+ <p><a class="btn btn-secondary" href="/repos/{repo.ownerHandle}/{repo.name}/settings/collaborators">Manage collaborators</a></p>
54
+ </section>
49
55
50
- <div class="panel mirrors">
51
- <div class="mirrors-head">Push mirrors</div>
56
+ <section class="panel settings-card">
57
+ <h2>Push mirrors</h2>
52
58
{#if mirrors}
53
59
<ul class="mirror-list">
54
60
{#for m in mirrors}
@@ -97,15 +103,15 @@
97
103
<p><label>Password / token (HTTPS only) <input type="password" name="secret" autocomplete="new-password"></label></p>
98
104
<button class="btn">Add mirror</button>
99
105
</form>
100
- </div>
106
+ </section>
101
107
102
- <div class="danger-zone">
108
+ <section class="panel settings-card">
103
109
<h2>Danger zone</h2>
104
110
<form method="post" action="/repos/{repo.ownerHandle}/{repo.name}/delete">
105
111
<p><label>Type the repository name to confirm deletion <input name="confirm"></label></p>
106
112
<button class="btn btn-danger">Delete repository</button>
107
113
</form>
108
- </div>
114
+ </section>
109
115
</section>
110
116
111
117
</div>