forked from tangled.org/core
this repo has no description

improve settings styles on mobile

Changed files
+24 -18
appview
pages
templates
+24 -18
appview/pages/templates/settings.html
··· 7 7 <div class="flex flex-col"> 8 8 {{ block "profile" . }} {{ end }} 9 9 {{ block "keys" . }} {{ end }} 10 - {{ block "knots" . }} {{ end }} 11 10 {{ block "emails" . }} {{ end }} 12 11 </div> 13 12 {{ end }} ··· 34 33 <p class="mb-8">SSH public keys added here will be broadcasted to knots that you are a member of, <br> allowing you to push to repositories there.</p> 35 34 <div id="key-list" class="flex flex-col gap-6 mb-8"> 36 35 {{ range $index, $key := .PubKeys }} 37 - <div class="flex justify-between items-center gap-4"> 38 - <div> 36 + <div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4"> 37 + <div class="flex flex-col gap-1"> 39 38 <div class="inline-flex items-center gap-4"> 40 39 <i class="w-3 h-3" data-lucide="key"></i> 41 40 <p class="font-bold">{{ .Name }}</p> 42 - <p class="text-sm text-gray-500">added {{ .Created | timeFmt }}</p> 43 41 </div> 44 - <code class="block break-all text-sm text-gray-500">{{ .Key }}</code> 42 + <p class="text-sm text-gray-500">added {{ .Created | timeFmt }}</p> 43 + <div class="overflow-x-auto whitespace-nowrap flex-1 max-w-full"> 44 + <code class="text-sm text-gray-500">{{ .Key }}</code> 45 + </div> 45 46 </div> 46 47 <button 47 48 class="btn text-red-500 hover:text-red-700" ··· 49 50 hx-delete="/settings/keys?name={{urlquery .Name}}&rkey={{urlquery .Rkey}}&key={{urlquery .Key}}" 50 51 hx-confirm="Are you sure you wish to delete the key '{{ .Name }}'?"> 51 52 <i class="w-5 h-5" data-lucide="trash-2"></i> 53 + <span class="hidden md:inline">delete</span> 52 54 </button> 53 55 </div> 54 56 {{ end }} ··· 86 88 <p class="mb-8">Commits authored using emails listed here will be associated with your Tangled profile.</p> 87 89 <div id="email-list" class="flex flex-col gap-6 mb-8"> 88 90 {{ range $index, $email := .Emails }} 89 - <div class="flex justify-between items-center gap-4"> 90 - <div> 91 + <div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4"> 92 + <div class="flex flex-col gap-2"> 91 93 <div class="inline-flex items-center gap-4"> 92 94 <i class="w-3 h-3" data-lucide="mail"></i> 93 95 <p class="font-bold">{{ .Address }}</p> 94 - <p class="text-sm text-gray-500">added {{ .CreatedAt | timeFmt }}</p> 95 - {{ if .Verified }} 96 - <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">verified</span> 97 - {{ else }} 98 - <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">unverified</span> 99 - {{ end }} 100 - {{ if .Primary }} 101 - <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">primary</span> 102 - {{ end }} 96 + <div class="inline-flex items-center gap-1"> 97 + {{ if .Verified }} 98 + <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">verified</span> 99 + {{ else }} 100 + <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">unverified</span> 101 + {{ end }} 102 + {{ if .Primary }} 103 + <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">primary</span> 104 + {{ end }} 105 + </div> 103 106 </div> 107 + <p class="text-sm text-gray-500">added {{ .CreatedAt | timeFmt }}</p> 104 108 </div> 105 109 <div class="flex gap-2 items-center"> 106 110 {{ if not .Verified }} 107 111 <a 108 - class="text-sm" 112 + class="btn flex gap-2" 109 113 hx-post="/settings/emails/verify/resend" 110 114 hx-swap="none" 111 115 href="#" 112 116 hx-vals='{"email": "{{ .Address }}"}'> 113 - resend verification 117 + <i class="w-5 h-5" data-lucide="rotate-cw"></i> 118 + <span class="hidden md:inline">resend</span> 114 119 </a> 115 120 {{ end }} 116 121 {{ if and (not .Primary) .Verified }} ··· 131 136 title="Delete email" 132 137 type="submit"> 133 138 <i class="w-5 h-5" data-lucide="trash-2"></i> 139 + <span class="hidden md:inline">delete</span> 134 140 </button> 135 141 </form> 136 142 {{ end }}