tangled.org / core
Monorepo for Tangled tangled.org
fork atom

appview/pages/templates/repo/pulls: improve current round styling and contrast #1221

merged opened by eti.tf targeting master from eti.tf/core: eti/tan-355-current-round-selection-indicator

Update the styling for pull request rounds cards to provide better distinction between active and inactive rounds. Changes include:

  • Better background colors for active rounds (blue tint)
  • Improved text contrast in both light and dark modes
  • Consistent border handling and overflow clipping

the changes in light mode

the changes in dark mode

Signed-off-by: eti eti@eti.tf

Labels

None yet.

assignee

None yet.

Participants 2
AT URI
at://did:plc:xu5apv6kmu5jp7g5hwdnej42/sh.tangled.repo.pull/3mhxwojrh3d22
+78 -72
Diff #1
-1
appview/db/db.go
··· 34 34 "_journal_mode=WAL", 35 35 "_synchronous=NORMAL", 36 36 "_auto_vacuum=incremental", 37 - "_busy_timeout=5000", 38 37 } 39 38 40 39 logger := log.FromContext(ctx)
+2 -5
appview/indexer/repos/indexer.go
··· 241 241 } 242 242 243 243 func makeRepoData(repo *models.Repo) *repoData { 244 - var language string 245 - if repo.RepoStats != nil { 246 - language = repo.RepoStats.Language 247 - } 248 244 return &repoData{ 249 245 ID: repo.Id, 250 246 RepoAt: repo.RepoAt().String(), ··· 256 252 Topics: repo.Topics, 257 253 TopicsExact: repo.Topics, 258 254 Knot: repo.Knot, 259 - Language: language, 255 + Language: repo.RepoStats.Language, 260 256 } 261 257 } 262 258 ··· 313 309 for _, keyword := range opts.NegatedKeywords { 314 310 mustNots = append(mustNots, bleve.NewDisjunctionQuery( 315 311 bleveutil.MatchAndQuery("name", keyword, repoIndexerAnalyzer, 0), 312 + bleveutil.MatchAndQuery("name_trigram", keyword, "trigram", 0), 316 313 bleveutil.MatchAndQuery("description", keyword, repoIndexerAnalyzer, 0), 317 314 bleveutil.MatchAndQuery("website", keyword, repoIndexerAnalyzer, 0), 318 315 bleveutil.MatchAndQuery("topics", keyword, repoIndexerAnalyzer, 0),
+3 -3
appview/issues/issues.go
··· 23 23 "tangled.org/core/appview/models" 24 24 "tangled.org/core/appview/notify" 25 25 "tangled.org/core/appview/oauth" 26 + "tangled.org/core/ogre" 26 27 "tangled.org/core/appview/pages" 27 28 "tangled.org/core/appview/pages/repoinfo" 28 29 "tangled.org/core/appview/pagination" ··· 30 31 "tangled.org/core/appview/searchquery" 31 32 "tangled.org/core/appview/validator" 32 33 "tangled.org/core/idresolver" 33 - "tangled.org/core/ogre" 34 34 "tangled.org/core/orm" 35 35 "tangled.org/core/rbac" 36 36 "tangled.org/core/tid" ··· 49 49 logger *slog.Logger 50 50 validator *validator.Validator 51 51 indexer *issues_indexer.Indexer 52 - ogreClient *ogre.Client 52 + ogreClient *ogre.Client 53 53 } 54 54 55 55 func New( ··· 79 79 logger: logger, 80 80 validator: validator, 81 81 indexer: indexer, 82 - ogreClient: ogre.NewClient(config.Ogre.Host), 82 + ogreClient: ogre.NewClient(config.Ogre.Host), 83 83 } 84 84 } 85 85
+9 -12
appview/pages/funcmap.go
··· 265 265 return v.Slice(0, min(n, v.Len())).Interface() 266 266 }, 267 267 "markdown": func(text string) template.HTML { 268 - rctx := p.rctx.Clone() 269 - rctx.RendererType = markup.RendererTypeDefault 270 - htmlString := rctx.RenderMarkdown(text) 271 - sanitized := rctx.SanitizeDefault(htmlString) 268 + p.rctx.RendererType = markup.RendererTypeDefault 269 + htmlString := p.rctx.RenderMarkdown(text) 270 + sanitized := p.rctx.SanitizeDefault(htmlString) 272 271 return template.HTML(sanitized) 273 272 }, 274 273 "description": func(text string) template.HTML { 275 - rctx := p.rctx.Clone() 276 - rctx.RendererType = markup.RendererTypeDefault 277 - htmlString := rctx.RenderMarkdownWith(text, goldmark.New( 274 + p.rctx.RendererType = markup.RendererTypeDefault 275 + htmlString := p.rctx.RenderMarkdownWith(text, goldmark.New( 278 276 goldmark.WithExtensions( 279 277 emoji.Emoji, 280 278 ), 281 279 )) 282 - sanitized := rctx.SanitizeDescription(htmlString) 280 + sanitized := p.rctx.SanitizeDescription(htmlString) 283 281 return template.HTML(sanitized) 284 282 }, 285 283 "readme": func(text string) template.HTML { 286 - rctx := p.rctx.Clone() 287 - rctx.RendererType = markup.RendererTypeRepoMarkdown 288 - htmlString := rctx.RenderMarkdown(text) 289 - sanitized := rctx.SanitizeDefault(htmlString) 284 + p.rctx.RendererType = markup.RendererTypeRepoMarkdown 285 + htmlString := p.rctx.RenderMarkdown(text) 286 + sanitized := p.rctx.SanitizeDefault(htmlString) 290 287 return template.HTML(sanitized) 291 288 }, 292 289 "code": func(content, path string) string {
-9
appview/pages/markup/markdown.go
··· 86 86 return md 87 87 } 88 88 89 - // clone creates a shallow copy of the RenderContext 90 - func (rctx *RenderContext) Clone() *RenderContext { 91 - if rctx == nil { 92 - return nil 93 - } 94 - clone := *rctx 95 - return &clone 96 - } 97 - 98 89 // NewMarkdownWith is an alias for NewMarkdown with extra extensions. 99 90 func NewMarkdownWith(hostname string, extra ...goldmark.Extender) goldmark.Markdown { 100 91 return NewMarkdown(hostname, extra...)
+21 -20
appview/pages/pages.go
··· 350 350 return fmt.Errorf("failed to read %s: %w", filename, err) 351 351 } 352 352 353 - rctx := p.rctx.Clone() 354 - rctx.RendererType = markup.RendererTypeDefault 355 - htmlString := rctx.RenderMarkdown(string(markdownBytes)) 356 - sanitized := rctx.SanitizeDefault(htmlString) 353 + p.rctx.RendererType = markup.RendererTypeDefault 354 + htmlString := p.rctx.RenderMarkdown(string(markdownBytes)) 355 + sanitized := p.rctx.SanitizeDefault(htmlString) 357 356 params.Content = template.HTML(sanitized) 358 357 359 358 return p.execute("legal/terms", w, params) ··· 379 378 return fmt.Errorf("failed to read %s: %w", filename, err) 380 379 } 381 380 382 - rctx := p.rctx.Clone() 383 - rctx.RendererType = markup.RendererTypeDefault 384 - htmlString := rctx.RenderMarkdown(string(markdownBytes)) 385 - sanitized := rctx.SanitizeDefault(htmlString) 381 + p.rctx.RendererType = markup.RendererTypeDefault 382 + htmlString := p.rctx.RenderMarkdown(string(markdownBytes)) 383 + sanitized := p.rctx.SanitizeDefault(htmlString) 386 384 params.Content = template.HTML(sanitized) 387 385 388 386 return p.execute("legal/privacy", w, params) ··· 798 796 return p.executeRepo("repo/knotUnreachable", w, params) 799 797 } 800 798 801 - rctx := p.rctx.Clone() 802 - rctx.RepoInfo = params.RepoInfo 803 - rctx.RepoInfo.Ref = params.Ref 804 - rctx.RendererType = markup.RendererTypeRepoMarkdown 799 + p.rctx.RepoInfo = params.RepoInfo 800 + p.rctx.RepoInfo.Ref = params.Ref 801 + p.rctx.RendererType = markup.RendererTypeRepoMarkdown 805 802 806 803 if params.ReadmeFileName != "" { 807 804 ext := filepath.Ext(params.ReadmeFileName) 808 805 switch ext { 809 806 case ".md", ".markdown", ".mdown", ".mkdn", ".mkd": 810 807 params.Raw = false 811 - htmlString := rctx.RenderMarkdown(params.Readme) 812 - sanitized := rctx.SanitizeDefault(htmlString) 808 + htmlString := p.rctx.RenderMarkdown(params.Readme) 809 + sanitized := p.rctx.SanitizeDefault(htmlString) 813 810 params.HTMLReadme = template.HTML(sanitized) 814 811 default: 815 812 params.Raw = true ··· 892 889 func (p *Pages) RepoTree(w io.Writer, params RepoTreeParams) error { 893 890 params.Active = "overview" 894 891 895 - rctx := p.rctx.Clone() 896 - rctx.RepoInfo = params.RepoInfo 897 - rctx.RepoInfo.Ref = params.Ref 898 - rctx.RendererType = markup.RendererTypeRepoMarkdown 892 + p.rctx.RepoInfo = params.RepoInfo 893 + p.rctx.RepoInfo.Ref = params.Ref 894 + p.rctx.RendererType = markup.RendererTypeRepoMarkdown 899 895 900 896 if params.ReadmeFileName != "" { 901 897 ext := filepath.Ext(params.ReadmeFileName) 902 898 switch ext { 903 899 case ".md", ".markdown", ".mdown", ".mkdn", ".mkd": 904 900 params.Raw = false 905 - htmlString := rctx.RenderMarkdown(params.Readme) 906 - sanitized := rctx.SanitizeDefault(htmlString) 901 + htmlString := p.rctx.RenderMarkdown(params.Readme) 902 + sanitized := p.rctx.SanitizeDefault(htmlString) 907 903 params.HTMLReadme = template.HTML(sanitized) 908 904 default: 909 905 params.Raw = true ··· 975 971 } 976 972 977 973 func (p *Pages) RepoBlob(w io.Writer, params RepoBlobParams) error { 974 + switch params.BlobView.ContentType { 975 + case models.BlobContentTypeMarkup: 976 + p.rctx.RepoInfo = params.RepoInfo 977 + } 978 + 978 979 params.Active = "overview" 979 980 return p.executeRepo("repo/blob", w, params) 980 981 }
+36 -13
appview/pages/templates/repo/pulls/pull.html
··· 119 119 {{ $id := index . 0 }} 120 120 {{ $target := index . 1 }} 121 121 {{ $direction := index . 2 }} 122 - <div id="{{ $id }}" 122 + <div id="{{ $id }}" 123 123 data-resizer="vertical" 124 124 data-target="{{ $target }}" 125 125 data-direction="{{ $direction }}" ··· 265 265 {{ $root := index . 3 }} 266 266 {{ $round := $item.RoundNumber }} 267 267 <div class=" 268 - w-full shadow-sm bg-gray-50 dark:bg-gray-900 border border-t-0 268 + w-full shadow-sm border overflow-clip 269 + 269 270 {{ if eq $round 0 }}rounded-b{{ else }}rounded{{ end }} 270 271 {{ if eq $round $root.ActiveRound }} 271 - border-blue-200 dark:border-blue-700 272 + bg-blue-50/25 dark:bg-blue-900/10 border-blue-200 dark:border-blue-900 272 273 {{ else }} 273 - border-gray-200 dark:border-gray-700 274 + bg-gray-50 dark:bg-gray-900 border-gray-200 dark:border-gray-700 274 275 {{ end }} 275 276 "> 276 277 {{ template "submissionHeader" $ }} ··· 286 287 <div class=" 287 288 {{ if ne $round 0 }}rounded-t{{ end }} 288 289 px-6 py-4 pr-2 pt-2 289 - bg-white dark:bg-gray-800 290 - 291 290 {{ if eq $round $root.ActiveRound }} 292 - border-t border-t-blue-200 dark:border-t-blue-700 291 + bg-blue-50 dark:bg-blue-950 293 292 {{ else }} 294 - border-t border-t-gray-200 dark:border-t-gray-700 293 + bg-white dark:bg-gray-800 295 294 {{ end }} 296 295 297 296 flex gap-2 sticky top-0 z-20"> ··· 317 316 {{ $root := index . 3 }} 318 317 {{ $round := $item.RoundNumber }} 319 318 <div class="flex gap-2 items-center justify-between mb-1"> 320 - <span class="inline-flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 pt-2"> 321 - {{ $handle := resolve $root.Pull.OwnerDid }} 322 - <a class="text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" href="/{{ $handle }}">{{ $handle }}</a> 319 + <span class="inline-flex items-center gap-2 text-sm 320 + {{ if eq $round $root.ActiveRound }} 321 + text-gray-600 dark:text-gray-300 322 + {{ else }} 323 + text-gray-500 dark:text-gray-400 324 + {{ end }} 325 + pt-2"> 326 + {{ $handle := resolve $root.Pull.OwnerDid }} 327 + <a class=" 328 + {{ if eq $round $root.ActiveRound }} 329 + text-gray-800 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200 330 + {{ else }} 331 + text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 332 + {{ end }} 333 + " href="/{{ $handle }}">{{ $handle }}</a> 323 334 submitted 324 - <span class="px-2 py-0.5 text-black dark:text-white bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded font-mono text-xs border"> 335 + <span class="px-2 py-0.5 rounded font-mono text-xs border 336 + {{ if eq $round $root.ActiveRound }} 337 + text-blue-800 dark:text-white bg-blue-100 dark:bg-blue-600 border-blue-200 dark:border-blue-500 338 + {{ else }} 339 + text-black dark:text-white bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 340 + {{ end }} 341 + "> 325 342 #{{ $round }} 326 343 </span> 327 344 <span class="select-none before:content-['\00B7']"></span> 328 - <a class="text-gray-500 dark:text-gray-400 hover:text-gray-500" href="#round-#{{ $round }}"> 345 + <a class=" 346 + {{ if eq $round $root.ActiveRound }} 347 + text-gray-600 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-200 348 + {{ else }} 349 + text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 350 + {{ end }} 351 + " href="#round-#{{ $round }}"> 329 352 {{ template "repo/fragments/shortTime" $item.Created }} 330 353 </a> 331 354 </span>
+3 -3
appview/pulls/pulls.go
··· 26 26 "tangled.org/core/appview/models" 27 27 "tangled.org/core/appview/notify" 28 28 "tangled.org/core/appview/oauth" 29 + "tangled.org/core/ogre" 29 30 "tangled.org/core/appview/pages" 30 31 "tangled.org/core/appview/pages/markup" 31 32 "tangled.org/core/appview/pages/repoinfo" ··· 35 36 "tangled.org/core/appview/validator" 36 37 "tangled.org/core/appview/xrpcclient" 37 38 "tangled.org/core/idresolver" 38 - "tangled.org/core/ogre" 39 39 "tangled.org/core/orm" 40 40 "tangled.org/core/patchutil" 41 41 "tangled.org/core/rbac" ··· 66 66 logger *slog.Logger 67 67 validator *validator.Validator 68 68 indexer *pulls_indexer.Indexer 69 - ogreClient *ogre.Client 69 + ogreClient *ogre.Client 70 70 } 71 71 72 72 func New( ··· 96 96 logger: logger, 97 97 validator: validator, 98 98 indexer: indexer, 99 - ogreClient: ogre.NewClient(config.Ogre.Host), 99 + ogreClient: ogre.NewClient(config.Ogre.Host), 100 100 } 101 101 } 102 102
+3 -3
appview/repo/repo.go
··· 20 20 "tangled.org/core/appview/models" 21 21 "tangled.org/core/appview/notify" 22 22 "tangled.org/core/appview/oauth" 23 + "tangled.org/core/ogre" 23 24 "tangled.org/core/appview/pages" 24 25 "tangled.org/core/appview/reporesolver" 25 26 "tangled.org/core/appview/validator" 26 27 xrpcclient "tangled.org/core/appview/xrpcclient" 27 28 "tangled.org/core/eventconsumer" 28 29 "tangled.org/core/idresolver" 29 - "tangled.org/core/ogre" 30 30 "tangled.org/core/orm" 31 31 "tangled.org/core/rbac" 32 32 "tangled.org/core/tid" ··· 54 54 serviceAuth *serviceauth.ServiceAuth 55 55 validator *validator.Validator 56 56 cfClient *cloudflare.Client 57 - ogreClient *ogre.Client 57 + ogreClient *ogre.Client 58 58 } 59 59 60 60 func New( ··· 84 84 logger: logger, 85 85 validator: validator, 86 86 cfClient: cfClient, 87 - ogreClient: ogre.NewClient(config.Ogre.Host), 87 + ogreClient: ogre.NewClient(config.Ogre.Host), 88 88 } 89 89 } 90 90
-1
knotserver/db/db.go
··· 22 22 "_journal_mode=WAL", 23 23 "_synchronous=NORMAL", 24 24 "_auto_vacuum=incremental", 25 - "_busy_timeout=5000", 26 25 } 27 26 28 27 logger := log.FromContext(ctx)
-1
spindle/db/db.go
··· 18 18 "_journal_mode=WAL", 19 19 "_synchronous=NORMAL", 20 20 "_auto_vacuum=incremental", 21 - "_busy_timeout=5000", 22 21 } 23 22 24 23 db, err := sql.Open("sqlite3", dbPath+"?"+strings.Join(opts, "&"))
+1 -1
spindle/server.go
··· 298 298 tpl := tangled.Pipeline{} 299 299 err := json.Unmarshal(msg.EventJson, &tpl) 300 300 if err != nil { 301 - s.l.Error("failed to unmarshal pipeline event", "err", err) 301 + fmt.Println("error unmarshalling", err) 302 302 return err 303 303 } 304 304

History

5 rounds 5 comments
sign up or login to add to the discussion
eti.tf submitted #4
diff interdiff
1 commit
expand
45309cd7
appview/pages/templates/repo/pulls: improve round styling and contrast
expand 0 comments
pull request successfully merged
eti.tf submitted #3
diff interdiff
1 commit
expand
ba3a36ba
appview/pages/templates/repo/pulls: improve round styling and contrast
expand 2 comments
eti.tf

@oppi.li squashed!

oppi.li

lgtm barring merge conflicts! please do rebase when you do fixup the conflicts!

eti.tf submitted #2
diff interdiff
2 commits
expand
86c9d0d1
appview/pages/templates/repo/pulls: improve round styling and contrast
c3e50e12
appview/pages/templates/repo/pulls: fix non-current round card bg color regression & add back missing hunk
expand 0 comments
eti.tf submitted #1
interdiff
2 commits
expand
67bd0f03
appview/pages/templates/repo/pulls: improve round styling and contrast
9fa0f667
appview/pages/templates/repo/pulls: fix non-current round card bg color regression & add back missing hunk
expand 1 comment
oppi.li

thanks! can you squash and rebase?

eti.tf submitted #0
diff
1 commit
expand
67bd0f03
appview/pages/templates/repo/pulls: improve round styling and contrast
expand 2 comments
oppi.li

largely lgtm!

appview/pages/templates/repo/pulls/pull.html:103-105: why was this hunk removed?

eti.tf

oops, that wasn't supposed to happen. let me add it back.

i also noticed a regression with how non-selected rounds look. i'll resubmit soon w a fix