From 8d2a133c09ef18ba76ca4abaa1bff3f1c5ac0745 Mon Sep 17 00:00:00 2001 From: Denys Konovalov Date: Mon, 23 Oct 2023 22:51:41 +0200 Subject: [PATCH 1/5] revamp repo header --- templates/repo/header.tmpl | 87 +++++++++++++++++------------------ web_src/css/base.css | 17 ------- web_src/css/index.css | 1 + web_src/css/repo.css | 92 ------------------------------------- web_src/css/repo/header.css | 90 ++++++++++++++++++++++++++++++++++++ 5 files changed, 134 insertions(+), 153 deletions(-) create mode 100644 web_src/css/repo/header.css diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl index 895d18d6fd84f..0916c542e5048 100644 --- a/templates/repo/header.tmpl +++ b/templates/repo/header.tmpl @@ -2,38 +2,30 @@ {{with .Repository}}
-
-
-
- {{template "repo/icon" .}} -
- {{.Owner.Name}} -
/
- {{.Name}} -
- {{if .IsArchived}} - {{ctx.Locale.Tr "repo.desc.archived"}} - {{end}} - {{if .IsPrivate}} - {{ctx.Locale.Tr "repo.desc.private"}} - {{else}} - {{if .Owner.Visibility.IsPrivate}} - {{ctx.Locale.Tr "repo.desc.internal"}} - {{end}} - {{end}} - {{if .IsTemplate}} - {{ctx.Locale.Tr "repo.desc.template"}} +
+
{{template "repo/icon" .}}
+
+
{{.Owner.DisplayName}}
+
{{.Name}}
+
+
+ {{if .IsArchived}} + {{ctx.Locale.Tr "repo.desc.archived"}} + {{end}} + {{if .IsPrivate}} + {{ctx.Locale.Tr "repo.desc.private"}} + {{else}} + {{if .Owner.Visibility.IsPrivate}} + {{ctx.Locale.Tr "repo.desc.internal"}} {{end}} -
+ {{end}} + {{if .IsTemplate}} + {{ctx.Locale.Tr "repo.desc.template"}} + {{end}} {{if $.EnableFeed}} - {{svg "octicon-rss" 18}} + {{svg "octicon-rss" 18}} {{end}}
- {{if $.PullMirror}} -
{{ctx.Locale.Tr "repo.mirror_from"}} {{$.PullMirror.RemoteAddress}}
- {{end}} - {{if .IsFork}}
{{ctx.Locale.Tr "repo.forked_from"}} {{.BaseRepo.FullName}}
{{end}} - {{if .IsGenerated}}
{{ctx.Locale.Tr "repo.generated_from"}} {{(.TemplateRepo ctx).FullName}}
{{end}}
{{if not (or .IsBeingCreated .IsBroken)}}
@@ -59,7 +51,11 @@ {{$.CsrfTokenHtml}}
{{CountFmt .NumWatches}} @@ -71,7 +67,11 @@ {{$.CsrfTokenHtml}}
{{CountFmt .NumStars}} @@ -104,7 +104,7 @@ data-modal="#fork-repo-modal" {{end}} > - {{svg "octicon-repo-forked"}}{{ctx.Locale.Tr "repo.fork"}} + {{svg "octicon-repo-forked"}}{{ctx.Locale.Tr "repo.fork"}} @@ -135,12 +131,15 @@ {{end}}
{{end}} -
-
+
+ {{if $.PullMirror}}
{{ctx.Locale.Tr "repo.mirror_from"}} {{$.PullMirror.RemoteAddress}}
{{end}} + {{if .IsFork}}
{{ctx.Locale.Tr "repo.forked_from"}} {{.BaseRepo.FullName}}
{{end}} + {{if .IsGenerated}}
{{ctx.Locale.Tr "repo.generated_from"}} {{(.TemplateRepo ctx).FullName}}
{{end}} +
{{end}} -
+
{{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}} -
+
{{if .Permission.CanRead $.UnitTypeCode}} {{svg "octicon-code"}} {{ctx.Locale.Tr "repo.code"}} @@ -225,14 +224,14 @@ {{template "custom/extra_tabs" .}} {{if .Permission.IsAdmin}} - + {{svg "octicon-tools"}} {{ctx.Locale.Tr "repo.settings"}} {{end}}
{{else if .Permission.IsAdmin}} -
- +
+ {{svg "octicon-tools"}} {{ctx.Locale.Tr "repo.settings"}}
diff --git a/web_src/css/base.css b/web_src/css/base.css index 0cfd311158cf6..22a13271e35fe 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1358,23 +1358,6 @@ img.ui.avatar, padding-right: 4.5px; } -.repo-title { - font-size: 1.5rem; - display: flex; - align-items: center; - flex: 1; - word-break: break-all; - color: var(--color-text-light); -} - -.repo-title .labels { - margin-left: 0.5rem; -} - -.repo-title .labels > * + * { - margin-left: 0.5rem; -} - .activity-bar-graph { background-color: var(--color-primary); color: var(--color-primary-contrast); diff --git a/web_src/css/index.css b/web_src/css/index.css index c1360bb19446c..f893531b781cb 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -47,6 +47,7 @@ @import "./repo/list-header.css"; @import "./repo/linebutton.css"; @import "./repo/wiki.css"; +@import "./repo/header.css"; @import "./editor/fileeditor.css"; @import "./editor/combomarkdowneditor.css"; diff --git a/web_src/css/repo.css b/web_src/css/repo.css index c3e230f8e1389..fca84fd474a7c 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -4,23 +4,6 @@ user-select: none; } -.repository .repo-header .ui.compact.menu { - margin-left: 1rem; -} - -.repository .repo-header .ui.header { - margin-top: 0; -} - -.repository .repo-header .fork-flag { - font-size: 12px; - margin-top: 2px; -} - -.repository .tabs .navbar { - justify-content: initial; -} - .repository .navbar { display: flex; justify-content: space-between; @@ -106,14 +89,6 @@ white-space: nowrap; } -.repository .header-wrapper { - background-color: var(--color-header-wrapper); -} - -.repository .header-wrapper .ui.tabular .svg { - margin-right: 5px; -} - .repository .filter.menu.labels .label-filter .menu .info { display: inline-block; padding: 0.5rem 0; @@ -2600,73 +2575,6 @@ tbody.commit-list { overflow: hidden; } -.repo-header { - display: flex; - align-items: center; - justify-content: space-between; - flex-wrap: wrap; - word-break: break-word; -} - -@media (max-width: 767.98px) { - .repo-header + .container { - margin-top: 7px; - } -} - -.repo-buttons { - align-items: center; - display: flex; - flex-direction: row; - flex-wrap: wrap; - word-break: keep-all; - gap: 0.25em; -} - -@media (max-width: 767.98px) { - .repo-buttons { - margin-top: 1em; - } -} - -.repo-buttons .ui.labeled.button > .label:hover { - color: var(--color-primary-light-2); - background: var(--color-light); -} - -.repo-buttons button[disabled] ~ .label { - opacity: var(--opacity-disabled); - color: var(--color-text-dark); - background: var(--color-light-mimic-enabled) !important; -} - -.repo-buttons button[disabled] ~ .label:hover { - color: var(--color-primary-dark-1); -} - -.repo-buttons .ui.labeled.button.disabled { - pointer-events: inherit !important; -} - -.repo-buttons .ui.labeled.button.disabled > .label { - color: var(--color-text-dark); - background: var(--color-light-mimic-enabled) !important; -} - -.repo-buttons .ui.labeled.button.disabled > .label:hover { - color: var(--color-primary-dark-1); -} - -.repo-buttons .ui.labeled.button.disabled > .button { - pointer-events: none !important; -} - -@media (max-width: 767.98px) { - .repo-buttons .ui.labeled.button .svg { - display: none; - } -} - .tag-code { height: 28px; } diff --git a/web_src/css/repo/header.css b/web_src/css/repo/header.css new file mode 100644 index 0000000000000..29600a124b024 --- /dev/null +++ b/web_src/css/repo/header.css @@ -0,0 +1,90 @@ +.fork-flag { + margin-top: 1rem; + font-size: 12px; +} + +.repo-header { + display: flex; + flex-flow: row wrap; + justify-content: space-between; + gap: 1rem; +} + +.repo-header .flex-item { + padding: 0; +} + +.repo-header .flex-item-main { + flex-basis: unset; +} + +.repo-header .flex-item-trailing { + flex-wrap: nowrap; +} + +.repo-buttons { + align-items: center; + display: flex; + flex-flow: row wrap; + word-break: keep-all; + gap: 0.25em; +} + +.repo-buttons .ui.labeled.button > .label:hover { + color: var(--color-primary-light-2); + background: var(--color-light); +} + +.repo-buttons button[disabled] ~ .label { + opacity: var(--opacity-disabled); + color: var(--color-text-dark); + background: var(--color-light-mimic-enabled) !important; +} + +.repo-buttons button[disabled] ~ .label:hover { + color: var(--color-primary-dark-1); +} + +.repo-buttons .ui.labeled.button.disabled { + pointer-events: inherit !important; +} + +.repo-buttons .ui.labeled.button.disabled > .label { + color: var(--color-text-dark); + background: var(--color-light-mimic-enabled) !important; +} + +.repo-buttons .ui.labeled.button.disabled > .label:hover { + color: var(--color-primary-dark-1); +} + +.repo-buttons .ui.labeled.button.disabled > .button { + pointer-events: none !important; +} + +.repository .header-wrapper { + background-color: var(--color-header-wrapper); +} + +.repository .header-wrapper .new-menu { + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +.repository .header-wrapper .new-menu .item { + margin-left: 0 !important; + margin-right: 0 !important; +} + +@media (max-width: 767.98px) { + .repo-header .flex-item { + flex-grow: 1; + } + .repo-header .flex-item-trailing { + flex-wrap: wrap; + justify-content: center; + } + .repo-buttons .ui.labeled.button .text { + display: none; + } +} From 99d02debee13a955e8a28d1ff638d943bb5ac7d1 Mon Sep 17 00:00:00 2001 From: Denys Konovalov Date: Tue, 24 Oct 2023 10:17:20 +0200 Subject: [PATCH 2/5] bring back one-lined view & owner username --- templates/repo/header.tmpl | 5 +++-- web_src/css/repo/header.css | 4 ++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl index 0916c542e5048..5cc1c893c01c2 100644 --- a/templates/repo/header.tmpl +++ b/templates/repo/header.tmpl @@ -5,8 +5,9 @@
{{template "repo/icon" .}}
-
{{.Owner.DisplayName}}
-
{{.Name}}
+
+ {{.Owner.Name}}/ + {{.Name}}
{{if .IsArchived}} diff --git a/web_src/css/repo/header.css b/web_src/css/repo/header.css index 29600a124b024..8f6ba0a86460c 100644 --- a/web_src/css/repo/header.css +++ b/web_src/css/repo/header.css @@ -14,6 +14,10 @@ padding: 0; } +.repo-header .btn.interact-bg:hover { + text-decoration: none; +} + .repo-header .flex-item-main { flex-basis: unset; } From 659755c4c97eeb48c04b3a7bdeccdf15ad7afad6 Mon Sep 17 00:00:00 2001 From: Denys Konovalov Date: Tue, 24 Oct 2023 10:46:10 +0200 Subject: [PATCH 3/5] use icons instead of labels in mobile view --- templates/repo/header.tmpl | 4 ++++ web_src/css/repo/header.css | 14 ++++++++++---- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl index 5cc1c893c01c2..2a26b871e5587 100644 --- a/templates/repo/header.tmpl +++ b/templates/repo/header.tmpl @@ -12,16 +12,20 @@
{{if .IsArchived}} {{ctx.Locale.Tr "repo.desc.archived"}} + {{svg "octicon-archive" 18}} {{end}} {{if .IsPrivate}} {{ctx.Locale.Tr "repo.desc.private"}} + {{svg "octicon-lock" 18}} {{else}} {{if .Owner.Visibility.IsPrivate}} {{ctx.Locale.Tr "repo.desc.internal"}} + {{svg "octicon-shield-lock" 18}} {{end}} {{end}} {{if .IsTemplate}} {{ctx.Locale.Tr "repo.desc.template"}} + {{svg "octicon-repo-template" 18}} {{end}} {{if $.EnableFeed}} {{svg "octicon-rss" 18}} diff --git a/web_src/css/repo/header.css b/web_src/css/repo/header.css index 8f6ba0a86460c..f38aa662b5cbe 100644 --- a/web_src/css/repo/header.css +++ b/web_src/css/repo/header.css @@ -26,6 +26,10 @@ flex-wrap: nowrap; } +.repo-header .flex-item-trailing svg { + display: none; +} + .repo-buttons { align-items: center; display: flex; @@ -84,11 +88,13 @@ .repo-header .flex-item { flex-grow: 1; } - .repo-header .flex-item-trailing { - flex-wrap: wrap; - justify-content: center; - } .repo-buttons .ui.labeled.button .text { display: none; } + .repo-header .flex-item-trailing .label { + display: none; + } + .repo-header .flex-item-trailing svg { + display: initial; + } } From 7e2c300443d8adbbc20502b32697bcfe7b6654df Mon Sep 17 00:00:00 2001 From: Denys Konovalov Date: Tue, 24 Oct 2023 10:53:18 +0200 Subject: [PATCH 4/5] add tooltip --- templates/repo/header.tmpl | 8 ++++---- web_src/css/repo/header.css | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl index 2a26b871e5587..57c054f9ed66d 100644 --- a/templates/repo/header.tmpl +++ b/templates/repo/header.tmpl @@ -12,20 +12,20 @@
{{if .IsArchived}} {{ctx.Locale.Tr "repo.desc.archived"}} - {{svg "octicon-archive" 18}} +
{{svg "octicon-archive" 18}}
{{end}} {{if .IsPrivate}} {{ctx.Locale.Tr "repo.desc.private"}} - {{svg "octicon-lock" 18}} +
{{svg "octicon-lock" 18}}
{{else}} {{if .Owner.Visibility.IsPrivate}} {{ctx.Locale.Tr "repo.desc.internal"}} - {{svg "octicon-shield-lock" 18}} +
{{svg "octicon-shield-lock" 18}}
{{end}} {{end}} {{if .IsTemplate}} {{ctx.Locale.Tr "repo.desc.template"}} - {{svg "octicon-repo-template" 18}} +
{{svg "octicon-repo-template" 18}}
{{end}} {{if $.EnableFeed}} {{svg "octicon-rss" 18}} diff --git a/web_src/css/repo/header.css b/web_src/css/repo/header.css index f38aa662b5cbe..001ec672e43b0 100644 --- a/web_src/css/repo/header.css +++ b/web_src/css/repo/header.css @@ -26,7 +26,7 @@ flex-wrap: nowrap; } -.repo-header .flex-item-trailing svg { +.repo-header .flex-item-trailing .repo-icon { display: none; } @@ -94,7 +94,7 @@ .repo-header .flex-item-trailing .label { display: none; } - .repo-header .flex-item-trailing svg { + .repo-header .flex-item-trailing .repo-icon { display: initial; } } From da4a92628849fd2372574b52d49e2b5c635a59a8 Mon Sep 17 00:00:00 2001 From: Denys Konovalov Date: Sun, 19 Nov 2023 15:17:27 +0100 Subject: [PATCH 5/5] apply review suggestions --- templates/repo/header.tmpl | 4 ++-- web_src/css/repo/header.css | 5 +++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl index 57c054f9ed66d..3a92377755e5c 100644 --- a/templates/repo/header.tmpl +++ b/templates/repo/header.tmpl @@ -6,8 +6,8 @@
{{template "repo/icon" .}}
- {{.Owner.Name}}/ - {{.Name}}
+ {{.Owner.Name}}/ + {{.Name}}
{{if .IsArchived}} diff --git a/web_src/css/repo/header.css b/web_src/css/repo/header.css index 001ec672e43b0..d5c7d212e8e75 100644 --- a/web_src/css/repo/header.css +++ b/web_src/css/repo/header.css @@ -1,5 +1,5 @@ .fork-flag { - margin-top: 1rem; + margin-top: 0.5rem; font-size: 12px; } @@ -7,7 +7,7 @@ display: flex; flex-flow: row wrap; justify-content: space-between; - gap: 1rem; + gap: 0.5rem; } .repo-header .flex-item { @@ -75,6 +75,7 @@ } .repository .header-wrapper .new-menu { + padding-top: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }