tenseleyflow/shithub / 34b69a1

Browse files

Align org settings profile UI

Authored by mfwolffe <wolffemf@dukes.jmu.edu>
SHA
34b69a13aca3d29039449ef7599264c276fb4728
Parents
b507608
Tree
3222b99

2 changed files

StatusFile+-
M internal/web/static/css/shithub.css 204 0
M internal/web/templates/orgs/settings_profile.html 178 29
internal/web/static/css/shithub.cssmodified
@@ -892,6 +892,7 @@ code {
892892
 }
893893
 .shithub-flash-error { background: rgba(248, 81, 73, 0.1); border-color: rgba(248, 81, 73, 0.3); }
894894
 .shithub-flash-notice { background: rgba(56, 139, 253, 0.1); border-color: rgba(56, 139, 253, 0.3); }
895
+.shithub-flash-success { background: rgba(46, 160, 67, 0.1); border-color: rgba(46, 160, 67, 0.3); }
895896
896897
 /* ----- 2FA (S06) ----- */
897898
 .shithub-auth-wide { max-width: 32rem; }
@@ -2565,6 +2566,195 @@ code {
25652566
   padding: 0 1rem;
25662567
   border-bottom: 0;
25672568
 }
2569
+
2570
+/* Organization settings profile page. Keeps the GitHub settings shell:
2571
+   org pagehead, left settings nav, main form, avatar aside, boxed rows. */
2572
+.shithub-org-settings-page {
2573
+  max-width: none;
2574
+}
2575
+.shithub-org-settings-layout {
2576
+  display: grid;
2577
+  grid-template-columns: 250px minmax(0, 1fr);
2578
+  gap: 1.5rem;
2579
+  max-width: 1280px;
2580
+  margin: 0 auto;
2581
+  padding: 1.5rem 1rem 2rem;
2582
+}
2583
+.shithub-org-settings-sidebar h1 {
2584
+  margin: 0 0 1rem;
2585
+  font-size: 1.5rem;
2586
+  line-height: 1.25;
2587
+}
2588
+.shithub-org-settings-menu {
2589
+  display: grid;
2590
+  gap: 0.15rem;
2591
+  font-size: 0.875rem;
2592
+}
2593
+.shithub-org-settings-menu a,
2594
+.shithub-org-settings-menu span {
2595
+  display: flex;
2596
+  align-items: center;
2597
+  gap: 0.5rem;
2598
+  min-height: 32px;
2599
+  padding: 0.35rem 0.65rem;
2600
+  border-radius: 6px;
2601
+  color: var(--fg-default);
2602
+  text-decoration: none;
2603
+}
2604
+.shithub-org-settings-menu a:hover {
2605
+  background: var(--canvas-subtle);
2606
+  text-decoration: none;
2607
+}
2608
+.shithub-org-settings-menu .is-selected {
2609
+  font-weight: 600;
2610
+  background: var(--canvas-subtle);
2611
+  box-shadow: inset 2px 0 0 var(--accent-emphasis);
2612
+}
2613
+.shithub-org-settings-menu span[aria-disabled="true"] {
2614
+  color: var(--fg-muted);
2615
+}
2616
+.shithub-org-settings-menu h2 {
2617
+  margin: 1rem 0 0.25rem;
2618
+  padding-top: 0.75rem;
2619
+  border-top: 1px solid var(--border-default);
2620
+  color: var(--fg-muted);
2621
+  font-size: 0.75rem;
2622
+  font-weight: 600;
2623
+  text-transform: uppercase;
2624
+}
2625
+.shithub-org-settings-main {
2626
+  min-width: 0;
2627
+  max-width: 880px;
2628
+}
2629
+.shithub-org-settings-profile {
2630
+  padding-bottom: 1rem;
2631
+  border-bottom: 1px solid var(--border-muted, var(--border-default));
2632
+}
2633
+.shithub-org-settings-profile-grid {
2634
+  display: grid;
2635
+  grid-template-columns: minmax(0, 1fr) 220px;
2636
+  gap: 2rem;
2637
+  align-items: start;
2638
+}
2639
+.shithub-org-settings-form {
2640
+  display: grid;
2641
+  gap: 0.85rem;
2642
+  max-width: 544px;
2643
+}
2644
+.shithub-org-settings-form label {
2645
+  display: grid;
2646
+  gap: 0.25rem;
2647
+  font-weight: 600;
2648
+}
2649
+.shithub-org-settings-form label small {
2650
+  color: var(--fg-muted);
2651
+  font-weight: 400;
2652
+}
2653
+.shithub-org-settings-form input[type=text],
2654
+.shithub-org-settings-form input[type=email],
2655
+.shithub-org-settings-form input[type=url],
2656
+.shithub-org-settings-form textarea {
2657
+  width: 100%;
2658
+  padding: 0.5rem 0.75rem;
2659
+  border-radius: 6px;
2660
+}
2661
+.shithub-org-settings-form textarea {
2662
+  min-height: 76px;
2663
+  resize: vertical;
2664
+}
2665
+.shithub-org-settings-checkbox {
2666
+  grid-template-columns: auto minmax(0, 1fr);
2667
+  align-items: start;
2668
+  font-weight: 400;
2669
+}
2670
+.shithub-org-settings-checkbox input {
2671
+  margin-top: 0.3rem;
2672
+}
2673
+.shithub-org-settings-form .shithub-button {
2674
+  justify-self: start;
2675
+}
2676
+.shithub-org-settings-avatar h3 {
2677
+  margin: 0 0 0.75rem;
2678
+  font-size: 0.9rem;
2679
+}
2680
+.shithub-org-settings-avatar .shithub-profile-edit-avatar {
2681
+  border-radius: 6px;
2682
+}
2683
+.shithub-org-settings-avatar form {
2684
+  display: grid;
2685
+  gap: 0.5rem;
2686
+  margin: 0.75rem 0 0;
2687
+}
2688
+.shithub-org-settings-section {
2689
+  margin-top: 1.5rem;
2690
+}
2691
+.shithub-org-settings-box {
2692
+  overflow: hidden;
2693
+  border: 1px solid var(--border-default);
2694
+  border-radius: 6px;
2695
+  background: var(--canvas-default);
2696
+}
2697
+.shithub-org-settings-row {
2698
+  display: grid;
2699
+  grid-template-columns: minmax(0, 1fr) auto;
2700
+  gap: 1rem;
2701
+  align-items: center;
2702
+  padding: 1rem;
2703
+  border-top: 1px solid var(--border-muted, var(--border-default));
2704
+}
2705
+.shithub-org-settings-row:first-child {
2706
+  border-top: 0;
2707
+}
2708
+.shithub-org-settings-row p {
2709
+  margin: 0.15rem 0 0;
2710
+  color: var(--fg-muted);
2711
+}
2712
+.shithub-org-danger-box {
2713
+  margin-top: 0.75rem;
2714
+}
2715
+.shithub-org-danger-row {
2716
+  display: grid;
2717
+  grid-template-columns: minmax(0, 1fr) auto;
2718
+  gap: 1rem;
2719
+  align-items: start;
2720
+}
2721
+.shithub-org-danger-row .listgroup-item-title {
2722
+  font-weight: 600;
2723
+}
2724
+.shithub-org-danger-row .listgroup-item-body {
2725
+  margin-top: 0.15rem;
2726
+  color: var(--fg-muted);
2727
+}
2728
+.shithub-org-danger-details {
2729
+  display: grid;
2730
+  justify-items: end;
2731
+  gap: 0.75rem;
2732
+}
2733
+.shithub-org-danger-details > summary {
2734
+  list-style: none;
2735
+}
2736
+.shithub-org-danger-details > summary::-webkit-details-marker {
2737
+  display: none;
2738
+}
2739
+.shithub-org-delete-form {
2740
+  display: grid;
2741
+  gap: 0.75rem;
2742
+  width: min(320px, 100%);
2743
+  padding: 0.75rem;
2744
+  border: 1px solid var(--border-default);
2745
+  border-radius: 6px;
2746
+  background: var(--canvas-subtle);
2747
+}
2748
+.shithub-org-delete-form label {
2749
+  display: grid;
2750
+  gap: 0.35rem;
2751
+  font-weight: 600;
2752
+}
2753
+.shithub-org-delete-form input[type=text] {
2754
+  width: 100%;
2755
+  padding: 0.5rem 0.75rem;
2756
+  border-radius: 6px;
2757
+}
25682758
 .shithub-org-people-layout {
25692759
   display: grid;
25702760
   grid-template-columns: 250px minmax(0, 1fr);
@@ -3377,6 +3567,8 @@ code {
33773567
 @media (max-width: 960px) {
33783568
   .shithub-org-hero-inner,
33793569
   .shithub-org-layout,
3570
+  .shithub-org-settings-layout,
3571
+  .shithub-org-settings-profile-grid,
33803572
   .shithub-org-people-layout,
33813573
   .shithub-org-repo-head {
33823574
     grid-template-columns: 1fr;
@@ -3405,6 +3597,10 @@ code {
34053597
     width: 100%;
34063598
     max-width: none;
34073599
   }
3600
+  .shithub-org-settings-main,
3601
+  .shithub-org-settings-form {
3602
+    max-width: none;
3603
+  }
34083604
   .shithub-org-people-row {
34093605
     grid-template-columns: 48px minmax(0, 1fr);
34103606
   }
@@ -3430,10 +3626,18 @@ code {
34303626
   }
34313627
   .shithub-org-layout,
34323628
   .shithub-org-hero,
3629
+  .shithub-org-settings-layout,
34333630
   .shithub-org-pagehead-inner,
34343631
   .shithub-org-people-layout {
34353632
     padding-inline: 0.75rem;
34363633
   }
3634
+  .shithub-org-settings-row,
3635
+  .shithub-org-danger-row {
3636
+    grid-template-columns: 1fr;
3637
+  }
3638
+  .shithub-org-danger-details {
3639
+    justify-items: start;
3640
+  }
34373641
   .shithub-org-pagehead .shithub-org-nav {
34383642
     padding-inline: 0.75rem;
34393643
   }
internal/web/templates/orgs/settings_profile.htmlmodified
@@ -1,25 +1,97 @@
11
 {{ define "page" -}}
2
-<section class="shithub-org-settings">
3
-  <header class="shithub-org-profile-head">
4
-    <h1>{{ .Org.DisplayName }} · Profile settings</h1>
5
-    <p class="shithub-meta">@{{ .Org.Slug }}</p>
2
+<section class="shithub-org-settings-page">
3
+  <header class="shithub-org-pagehead shithub-org-settings-pagehead">
4
+    <div class="shithub-org-pagehead-inner">
5
+      <a class="shithub-org-pagehead-title" href="/{{ .Org.Slug }}">
6
+        <img src="{{ .AvatarURL }}" alt="" width="30" height="30">
7
+        <span>{{ if .Org.DisplayName }}{{ .Org.DisplayName }}{{ else }}{{ .Org.Slug }}{{ end }}</span>
8
+      </a>
9
+    </div>
10
+    <nav class="shithub-org-nav" aria-label="Organization">
11
+      <a href="/{{ .Org.Slug }}" class="shithub-org-nav-item">{{ octicon "home" }} Overview</a>
12
+      <a href="/{{ .Org.Slug }}#org-repositories" class="shithub-org-nav-item">{{ octicon "repo" }} Repositories</a>
13
+      <span class="shithub-org-nav-item is-disabled" aria-disabled="true">{{ octicon "table" }} Projects</span>
14
+      <span class="shithub-org-nav-item is-disabled" aria-disabled="true">{{ octicon "package" }} Packages</span>
15
+      <a href="/{{ .Org.Slug }}/teams" class="shithub-org-nav-item">{{ octicon "people" }} Teams</a>
16
+      <a href="/{{ .Org.Slug }}/people" class="shithub-org-nav-item">{{ octicon "person" }} People</a>
17
+      <span class="shithub-org-nav-item is-disabled" aria-disabled="true">{{ octicon "shield-check" }} Security and quality</span>
18
+      <span class="shithub-org-nav-item is-disabled" aria-disabled="true">{{ octicon "pulse" }} Insights</span>
19
+      <a href="/organizations/{{ .Org.Slug }}/settings/profile" class="shithub-org-nav-item is-active" aria-current="page">{{ octicon "gear" }} Settings</a>
20
+    </nav>
621
   </header>
722
23
+  <div class="shithub-org-settings-layout">
24
+    <aside class="shithub-org-settings-sidebar" aria-label="Organization settings">
25
+      <h1>Settings</h1>
26
+      <nav class="shithub-org-settings-menu">
27
+        <a class="is-selected" href="/organizations/{{ .Org.Slug }}/settings/profile" aria-current="page">{{ octicon "organization" }} General</a>
28
+        <span aria-disabled="true">{{ octicon "people" }} People</span>
29
+        <span aria-disabled="true">{{ octicon "repo" }} Repository defaults</span>
30
+        <span aria-disabled="true">{{ octicon "lock" }} Member privileges</span>
31
+        <h2>Code, planning, and automation</h2>
32
+        <span aria-disabled="true">{{ octicon "play" }} Actions</span>
33
+        <span aria-disabled="true">{{ octicon "table" }} Projects</span>
34
+        <span aria-disabled="true">{{ octicon "package" }} Packages</span>
35
+        <h2>Security</h2>
36
+        <span aria-disabled="true">{{ octicon "shield-check" }} Code security</span>
37
+        <span aria-disabled="true">{{ octicon "globe" }} Domains</span>
38
+        <h2>Access</h2>
39
+        <span aria-disabled="true">{{ octicon "gear" }} Integrations</span>
40
+        <span aria-disabled="true">{{ octicon "history" }} Audit log</span>
41
+      </nav>
42
+    </aside>
43
+
44
+    <div class="shithub-org-settings-main">
845
       {{ with .Error }}<p class="shithub-flash shithub-flash-error" role="alert">{{ . }}</p>{{ end }}
946
       {{ with .Success }}<p class="shithub-flash shithub-flash-success" role="status">{{ . }}</p>{{ end }}
1047
11
-  <section class="shithub-settings-section" aria-labelledby="org-avatar-heading">
12
-    <h2 id="org-avatar-heading">Profile picture</h2>
13
-    <div class="shithub-profile-picture-settings">
14
-      <img src="{{ .AvatarURL }}" alt="" class="shithub-profile-edit-avatar">
48
+      <div class="Subhead">
49
+        <h2 class="Subhead-heading Subhead-heading--large">General</h2>
50
+      </div>
51
+
52
+      <section class="shithub-org-settings-profile" aria-labelledby="org-profile-heading">
53
+        <h3 id="org-profile-heading" class="sr-only">Organization profile</h3>
54
+        <div class="shithub-org-settings-profile-grid">
55
+          <form method="POST" action="/organizations/{{ .Org.Slug }}/settings/profile" class="shithub-org-settings-form" novalidate>
56
+            <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
57
+            <label>
58
+              <span>Organization display name</span>
59
+              <input type="text" name="display_name" value="{{ .Form.DisplayName }}" maxlength="100" autocomplete="organization">
60
+            </label>
61
+            <label>
62
+              <span>Description</span>
63
+              <textarea name="description" maxlength="350" rows="3">{{ .Form.Description }}</textarea>
64
+            </label>
65
+            <label>
66
+              <span>URL</span>
67
+              <input type="url" name="website" value="{{ .Form.Website }}" maxlength="200" placeholder="https://example.com" autocomplete="url">
68
+            </label>
69
+            <label>
70
+              <span>Location</span>
71
+              <input type="text" name="location" value="{{ .Form.Location }}" maxlength="80" autocomplete="address-level2">
72
+            </label>
73
+            <label>
74
+              <span>Billing email <small>(Private)</small></span>
75
+              <input type="email" name="billing_email" value="{{ .Form.BillingEmail }}" autocomplete="email">
76
+            </label>
77
+            <label class="shithub-org-settings-checkbox">
78
+              <input type="checkbox" name="allow_member_repo_create" {{ if .Form.AllowMemberRepoCreate }}checked{{ end }}>
79
+              <span>Allow members to create repositories for this organization</span>
80
+            </label>
81
+            <button type="submit" class="shithub-button shithub-button-primary">Update profile</button>
82
+          </form>
83
+
84
+          <aside class="shithub-org-settings-avatar" aria-labelledby="org-avatar-heading">
85
+            <h3 id="org-avatar-heading">Profile picture</h3>
86
+            <img class="shithub-profile-edit-avatar" src="{{ .AvatarURL }}" alt="@{{ .Org.Slug }}" width="200" height="200">
1587
             {{ if .AvatarUploadEnabled }}
1688
               <form method="POST" action="/organizations/{{ .Org.Slug }}/settings/profile/avatar" enctype="multipart/form-data" novalidate>
1789
                 <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
18
-          <label>
90
+                <label class="shithub-profile-edit-upload">
1991
                   <span>Upload new picture</span>
2092
                   <input type="file" name="avatar" accept="image/png,image/jpeg,image/gif" required>
2193
                 </label>
22
-          <button type="submit" class="shithub-button shithub-button-primary">Upload</button>
94
+                <button type="submit" class="shithub-button">Upload</button>
2395
               </form>
2496
               {{ if .HasAvatar }}
2597
               <form method="POST" action="/organizations/{{ .Org.Slug }}/settings/profile/avatar/remove" novalidate>
@@ -28,9 +100,86 @@
28100
               </form>
29101
               {{ end }}
30102
             {{ else }}
31
-        <p class="shithub-meta">Avatar uploads are disabled until object storage is configured.</p>
103
+              <p class="shithub-empty-note">Avatar uploads are disabled until object storage is configured.</p>
32104
             {{ end }}
105
+            <p class="shithub-empty-note">Use an image that clearly represents this organization.</p>
106
+          </aside>
33107
         </div>
34108
       </section>
109
+
110
+      <section class="shithub-org-settings-section" aria-labelledby="org-messaging-heading">
111
+        <div class="Subhead Subhead--spacious border-bottom-0 mb-0 tmp-mb-0">
112
+          <h2 id="org-messaging-heading" class="Subhead-heading Subhead-heading--large">In-product messages</h2>
113
+        </div>
114
+        <div class="shithub-org-settings-box">
115
+          <div class="shithub-org-settings-row">
116
+            <div>
117
+              <strong>Promotions</strong>
118
+              <p>Get product and event messages for this organization.</p>
119
+            </div>
120
+            <span class="ToggleSwitch ToggleSwitch--small ToggleSwitch--disabled">
121
+              <span class="ToggleSwitch-status"><span class="ToggleSwitch-statusOff">Off</span></span>
122
+              <button type="button" class="ToggleSwitch-track" aria-label="Promotions" aria-pressed="false" disabled>
123
+                <div aria-hidden="true" class="ToggleSwitch-icons"><div class="ToggleSwitch-lineIcon"></div><div class="ToggleSwitch-circleIcon"></div></div>
124
+                <div class="ToggleSwitch-knob"></div>
125
+              </button>
126
+            </span>
127
+          </div>
128
+          <div class="shithub-org-settings-row">
129
+            <div>
130
+              <strong>Tips</strong>
131
+              <p>Get tips for features enabled in repositories owned by this organization.</p>
132
+            </div>
133
+            <span class="ToggleSwitch ToggleSwitch--small ToggleSwitch--disabled">
134
+              <span class="ToggleSwitch-status"><span class="ToggleSwitch-statusOff">Off</span></span>
135
+              <button type="button" class="ToggleSwitch-track" aria-label="Tips" aria-pressed="false" disabled>
136
+                <div aria-hidden="true" class="ToggleSwitch-icons"><div class="ToggleSwitch-lineIcon"></div><div class="ToggleSwitch-circleIcon"></div></div>
137
+                <div class="ToggleSwitch-knob"></div>
138
+              </button>
139
+            </span>
140
+          </div>
141
+        </div>
142
+      </section>
143
+
144
+      <section class="shithub-org-settings-section" aria-labelledby="org-danger-heading">
145
+        <div class="Subhead Subhead--spacious border-bottom-0 mb-0 tmp-mb-0">
146
+          <h2 id="org-danger-heading" class="Subhead-heading Subhead-heading--large Subhead-heading--danger">Danger zone</h2>
147
+        </div>
148
+        <div class="Box Box--danger shithub-org-danger-box">
149
+          <div class="Box-row shithub-org-danger-row">
150
+            <div>
151
+              <div class="listgroup-item-title">Rename organization</div>
152
+              <div class="listgroup-item-body">Renaming your organization can have unintended side effects.</div>
153
+            </div>
154
+            <button type="button" class="shithub-button shithub-button-danger" disabled>Rename organization</button>
155
+          </div>
156
+          <div class="Box-row shithub-org-danger-row">
157
+            <div>
158
+              <div class="listgroup-item-title">Archive this organization</div>
159
+              <div class="listgroup-item-body">Only organizations that meet archive requirements can be archived.</div>
160
+            </div>
161
+            <button type="button" class="shithub-button" disabled>Archive organization</button>
162
+          </div>
163
+          <div class="Box-row shithub-org-danger-row">
164
+            <div>
165
+              <div class="listgroup-item-title">Delete this organization</div>
166
+              <div class="listgroup-item-body">Once deleted, it enters the configured recovery window before permanent removal.</div>
167
+            </div>
168
+            <details class="shithub-org-danger-details">
169
+              <summary class="shithub-button shithub-button-danger">Delete this organization</summary>
170
+              <form method="POST" action="/organizations/{{ .Org.Slug }}/settings/delete" class="shithub-org-delete-form">
171
+                <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
172
+                <label>
173
+                  <span>Enter this organization's name to confirm</span>
174
+                  <input type="text" name="confirm_slug" required autocomplete="off" placeholder="{{ .Org.Slug }}">
175
+                </label>
176
+                <button type="submit" class="shithub-button shithub-button-danger">Delete this organization</button>
177
+              </form>
178
+            </details>
179
+          </div>
180
+        </div>
181
+      </section>
182
+    </div>
183
+  </div>
35184
 </section>
36185
 {{- end }}