From 3a4801d1958ce33c9b893433c096281aa5b9b1c5 Mon Sep 17 00:00:00 2001
From: vnkmpf <t.z@mail.com>
Date: Tue, 9 Feb 2021 20:51:01 +0100
Subject: [PATCH] Truncated organisations name #14583 (#14615)
- truncate to max length 40
- add CSS ellipsis
---
templates/repo/create.tmpl | 6 +++---
templates/repo/migrate/git.tmpl | 6 +++---
templates/repo/migrate/gitea.tmpl | 6 +++---
templates/repo/migrate/github.tmpl | 6 +++---
templates/repo/migrate/gitlab.tmpl | 6 +++---
templates/repo/migrate/gogs.tmpl | 6 +++---
templates/repo/pulls/fork.tmpl | 6 +++---
templates/user/dashboard/navbar.tmpl | 8 ++++----
templates/user/project.tmpl | 6 +++---
web_src/less/_base.less | 7 +++++++
web_src/less/_form.less | 4 ++++
11 files changed, 39 insertions(+), 28 deletions(-)
diff --git a/templates/repo/create.tmpl b/templates/repo/create.tmpl
index ad795387df..8e4e0c748b 100644
--- a/templates/repo/create.tmpl
+++ b/templates/repo/create.tmpl
@@ -20,18 +20,18 @@
<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
<span class="text" title="{{.ContextUser.Name}}">
{{avatar .ContextUser 28 "mini"}}
- {{.ContextUser.ShortName 20}}
+ {{.ContextUser.ShortName 40}}
</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">
<div class="item" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
{{avatar .SignedUser 28 "mini"}}
- {{.SignedUser.ShortName 20}}
+ {{.SignedUser.ShortName 40}}
</div>
{{range .Orgs}}
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
{{avatar . 28 "mini"}}
- {{.ShortName 20}}
+ {{.ShortName 40}}
</div>
{{end}}
</div>
diff --git a/templates/repo/migrate/git.tmpl b/templates/repo/migrate/git.tmpl
index 7fb8f3d585..f200281cbe 100644
--- a/templates/repo/migrate/git.tmpl
+++ b/templates/repo/migrate/git.tmpl
@@ -49,18 +49,18 @@
<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
<span class="text" title="{{.ContextUser.Name}}">
{{avatar .ContextUser}}
- {{.ContextUser.ShortName 20}}
+ {{.ContextUser.ShortName 40}}
</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu" title="{{.SignedUser.Name}}">
<div class="item" data-value="{{.SignedUser.ID}}">
{{avatar .SignedUser}}
- {{.SignedUser.ShortName 20}}
+ {{.SignedUser.ShortName 40}}
</div>
{{range .Orgs}}
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
{{avatar .}}
- {{.ShortName 20}}
+ {{.ShortName 40}}
</div>
{{end}}
</div>
diff --git a/templates/repo/migrate/gitea.tmpl b/templates/repo/migrate/gitea.tmpl
index 4ad6e6024f..a214369f21 100644
--- a/templates/repo/migrate/gitea.tmpl
+++ b/templates/repo/migrate/gitea.tmpl
@@ -83,18 +83,18 @@
<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
<span class="text" title="{{.ContextUser.Name}}">
{{avatar .ContextUser}}
- {{.ContextUser.ShortName 20}}
+ {{.ContextUser.ShortName 40}}
</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu" title="{{.SignedUser.Name}}">
<div class="item" data-value="{{.SignedUser.ID}}">
{{avatar .SignedUser}}
- {{.SignedUser.ShortName 20}}
+ {{.SignedUser.ShortName 40}}
</div>
{{range .Orgs}}
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
{{avatar .}}
- {{.ShortName 20}}
+ {{.ShortName 40}}
</div>
{{end}}
</div>
diff --git a/templates/repo/migrate/github.tmpl b/templates/repo/migrate/github.tmpl
index c31444aaef..c4ca991aca 100644
--- a/templates/repo/migrate/github.tmpl
+++ b/templates/repo/migrate/github.tmpl
@@ -83,18 +83,18 @@
<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
<span class="text" title="{{.ContextUser.Name}}">
{{avatar .ContextUser 28 "mini"}}
- {{.ContextUser.ShortName 20}}
+ {{.ContextUser.ShortName 40}}
</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu" title="{{.SignedUser.Name}}">
<div class="item" data-value="{{.SignedUser.ID}}">
{{avatar .SignedUser 28 "mini"}}
- {{.SignedUser.ShortName 20}}
+ {{.SignedUser.ShortName 40}}
</div>
{{range .Orgs}}
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
{{avatar . 28 "mini"}}
- {{.ShortName 20}}
+ {{.ShortName 40}}
</div>
{{end}}
</div>
diff --git a/templates/repo/migrate/gitlab.tmpl b/templates/repo/migrate/gitlab.tmpl
index 823bf25de2..bb1e19041d 100644
--- a/templates/repo/migrate/gitlab.tmpl
+++ b/templates/repo/migrate/gitlab.tmpl
@@ -83,18 +83,18 @@
<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
<span class="text" title="{{.ContextUser.Name}}">
{{avatar .ContextUser 28 "mini"}}
- {{.ContextUser.ShortName 20}}
+ {{.ContextUser.ShortName 40}}
</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu" title="{{.SignedUser.Name}}">
<div class="item" data-value="{{.SignedUser.ID}}">
{{avatar .SignedUser 28 "mini"}}
- {{.SignedUser.ShortName 20}}
+ {{.SignedUser.ShortName 40}}
</div>
{{range .Orgs}}
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
{{avatar . 28 "mini"}}
- {{.ShortName 20}}
+ {{.ShortName 40}}
</div>
{{end}}
</div>
diff --git a/templates/repo/migrate/gogs.tmpl b/templates/repo/migrate/gogs.tmpl
index dd33fd0138..be66d5079d 100644
--- a/templates/repo/migrate/gogs.tmpl
+++ b/templates/repo/migrate/gogs.tmpl
@@ -85,18 +85,18 @@
<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
<span class="text" title="{{.ContextUser.Name}}">
{{avatar .ContextUser}}
- {{.ContextUser.ShortName 20}}
+ {{.ContextUser.ShortName 40}}
</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu" title="{{.SignedUser.Name}}">
<div class="item" data-value="{{.SignedUser.ID}}">
{{avatar .SignedUser}}
- {{.SignedUser.ShortName 20}}
+ {{.SignedUser.ShortName 40}}
</div>
{{range .Orgs}}
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
{{avatar .}}
- {{.ShortName 20}}
+ {{.ShortName 40}}
</div>
{{end}}
</div>
diff --git a/templates/repo/pulls/fork.tmpl b/templates/repo/pulls/fork.tmpl
index 42d9791163..d172fc73cc 100644
--- a/templates/repo/pulls/fork.tmpl
+++ b/templates/repo/pulls/fork.tmpl
@@ -15,20 +15,20 @@
<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
<span class="text" title="{{.ContextUser.Name}}">
{{avatar .ContextUser 28 "mini"}}
- {{.ContextUser.ShortName 20}}
+ {{.ContextUser.ShortName 40}}
</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">
{{if .CanForkToUser}}
<div class="item" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
{{avatar .SignedUser 28 "mini"}}
- {{.SignedUser.ShortName 20}}
+ {{.SignedUser.ShortName 40}}
</div>
{{end}}
{{range .Orgs}}
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
{{avatar . 28 "mini"}}
- {{.ShortName 20}}
+ {{.ShortName 40}}
</div>
{{end}}
</div>
diff --git a/templates/user/dashboard/navbar.tmpl b/templates/user/dashboard/navbar.tmpl
index 70eb7cce7f..c83ffde40a 100644
--- a/templates/user/dashboard/navbar.tmpl
+++ b/templates/user/dashboard/navbar.tmpl
@@ -4,7 +4,7 @@
<div class="ui floating dropdown link jump">
<span class="text">
{{avatar .ContextUser}}
- {{.ContextUser.ShortName 20}}
+ {{.ContextUser.ShortName 40}}
{{if .ContextUser.IsOrganization}}
<span class="org-visibility">
{{if .ContextUser.Visibility.IsLimited}}<div class="ui orange tiny horizontal label">{{.i18n.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
@@ -20,12 +20,12 @@
<div class="scrolling menu items">
<a class="{{if eq .ContextUser.ID .SignedUser.ID}}active selected{{end}} item" href="{{AppSubUrl}}/{{if .PageIsIssues}}issues{{else if .PageIsPulls}}pulls{{else if .PageIsMilestonesDashboard}}milestones{{end}}">
{{avatar .SignedUser}}
- {{.SignedUser.ShortName 20}}
+ {{.SignedUser.ShortName 40}}
</a>
{{range .Orgs}}
<a class="{{if eq $.ContextUser.ID .ID}}active selected{{end}} item" title="{{.Name}}" href="{{AppSubUrl}}/org/{{.Name}}/{{if $.PageIsIssues}}issues{{else if $.PageIsPulls}}pulls{{else if $.PageIsMilestonesDashboard}}milestones{{else}}dashboard{{end}}">
{{avatar .}}
- {{.ShortName 20}}
+ {{.ShortName 40}}
<span class="org-visibility">
{{if .Visibility.IsLimited}}<div class="ui orange tiny horizontal label">{{$.i18n.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
{{if .Visibility.IsPrivate}}<div class="ui red tiny horizontal label">{{$.i18n.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}
@@ -94,7 +94,7 @@
{{end}}
<div class="item">
<a class="ui blue basic button" href="{{.ContextUser.HomeLink}}" title='{{.i18n.Tr "home.view_home" .ContextUser.Name}}'>
- {{.i18n.Tr "home.view_home" (.ContextUser.ShortName 20)}}
+ {{.i18n.Tr "home.view_home" (.ContextUser.ShortName 40)}}
</a>
</div>
</div>
diff --git a/templates/user/project.tmpl b/templates/user/project.tmpl
index b444783dbb..eabed943fe 100644
--- a/templates/user/project.tmpl
+++ b/templates/user/project.tmpl
@@ -15,18 +15,18 @@
<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
<span class="text" title="{{.ContextUser.Name}}">
{{avatar .ContextUser 28 "mini"}}
- {{.ContextUser.ShortName 20}}
+ {{.ContextUser.ShortName 40}}
</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">
<div class="item" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
{{avatar .SignedUser 28 "mini"}}
- {{.SignedUser.ShortName 20}}
+ {{.SignedUser.ShortName 40}}
</div>
{{range .Orgs}}
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
{{avatar . 28 "mini"}}
- {{.ShortName 20}}
+ {{.ShortName 40}}
</div>
{{end}}
</div>
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 6b16143bb1..b5c890fd61 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -347,6 +347,9 @@ a.muted:hover,
.ui.selection.dropdown .menu > .item {
border-color: var(--color-secondary);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.ui.selection.visible.dropdown > .text:not(.default) {
@@ -387,6 +390,10 @@ a.muted:hover,
.ui.menu .ui.dropdown .menu > .item {
color: var(--color-text) !important;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: block;
}
.ui.menu .ui.dropdown .menu > .item:hover {
diff --git a/web_src/less/_form.less b/web_src/less/_form.less
index 76c1a06990..a4842edd01 100644
--- a/web_src/less/_form.less
+++ b/web_src/less/_form.less
@@ -278,6 +278,10 @@ textarea:focus,
form {
.dropdown .text {
margin-right: 0 !important;
+
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.header {