Fix truncated organization names (#14655)

* Fix truncated organization names Previous ellipsis implementation hid vertical overflow - image + descent line of letters. Organization visibility in select on dashboard was not always visible. This commit extracts classes which don't make collisions with other items on page.
4 years ago · 51fb0463a3
parent 5a18712dd7
commit 51fb0463a3
12 changed files with 71 additions and 65 deletions
--- a/templates/repo/create.tmpl
+++ b/templates/repo/create.tmpl
@ -18,20 +18,20 @@
 						<label>{{.i18n.Tr "repo.owner"}}</label>
 						<div class="ui selection owner dropdown">
 							<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
-							<span class="text" title="{{.ContextUser.Name}}">
+							<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
 								{{avatar .ContextUser 28 "mini"}}
-								{{.ContextUser.ShortName 40}}
+								<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
 							</span>
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu">
-								<div class="item" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
+								<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
 									{{avatar .SignedUser 28 "mini"}}
-									{{.SignedUser.ShortName 40}}
+									<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
 								</div>
 								{{range .Orgs}}
-									<div class="item" data-value="{{.ID}}" title="{{.Name}}">
+									<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
 										{{avatar . 28 "mini"}}
-										{{.ShortName 40}}
+										<span class="truncated-item-name">{{.ShortName 40}}</span>
 									</div>
 								{{end}}
 							</div>
--- a/templates/repo/migrate/git.tmpl
+++ b/templates/repo/migrate/git.tmpl
@ -47,20 +47,20 @@
 						<label>{{.i18n.Tr "repo.owner"}}</label>
 						<div class="ui selection owner dropdown">
 							<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
-							<span class="text" title="{{.ContextUser.Name}}">
+							<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
 								{{avatar .ContextUser}}
-								{{.ContextUser.ShortName 40}}
+								<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
 							</span>
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu" title="{{.SignedUser.Name}}">
-								<div class="item" data-value="{{.SignedUser.ID}}">
+								<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}">
 									{{avatar .SignedUser}}
-									{{.SignedUser.ShortName 40}}
+									<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
 								</div>
 								{{range .Orgs}}
-									<div class="item" data-value="{{.ID}}" title="{{.Name}}">
+									<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
 										{{avatar .}}
-										{{.ShortName 40}}
+										<span class="truncated-item-name">{{.ShortName 40}}</span>
 									</div>
 								{{end}}
 							</div>
--- a/templates/repo/migrate/gitea.tmpl
+++ b/templates/repo/migrate/gitea.tmpl
@ -81,20 +81,20 @@
 						<label>{{.i18n.Tr "repo.owner"}}</label>
 						<div class="ui selection owner dropdown">
 							<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
-							<span class="text" title="{{.ContextUser.Name}}">
+							<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
 								{{avatar .ContextUser}}
-								{{.ContextUser.ShortName 40}}
+								<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
 							</span>
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu" title="{{.SignedUser.Name}}">
-								<div class="item" data-value="{{.SignedUser.ID}}">
+								<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}">
 									{{avatar .SignedUser}}
-									{{.SignedUser.ShortName 40}}
+									<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
 								</div>
 								{{range .Orgs}}
-								<div class="item" data-value="{{.ID}}" title="{{.Name}}">
+								<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
 									{{avatar .}}
-									{{.ShortName 40}}
+									<span class="truncated-item-name">{{.ShortName 40}}</span>
 								</div>
 								{{end}}
 							</div>
--- a/templates/repo/migrate/github.tmpl
+++ b/templates/repo/migrate/github.tmpl
@ -81,20 +81,20 @@
 						<label>{{.i18n.Tr "repo.owner"}}</label>
 						<div class="ui selection owner dropdown">
 							<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
-							<span class="text" title="{{.ContextUser.Name}}">
+							<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
 								{{avatar .ContextUser 28 "mini"}}
-								{{.ContextUser.ShortName 40}}
+								<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
 							</span>
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu" title="{{.SignedUser.Name}}">
-								<div class="item" data-value="{{.SignedUser.ID}}">
+								<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}">
 									{{avatar .SignedUser 28 "mini"}}
-									{{.SignedUser.ShortName 40}}
+									<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
 								</div>
 								{{range .Orgs}}
-									<div class="item" data-value="{{.ID}}" title="{{.Name}}">
+									<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
 										{{avatar . 28 "mini"}}
-										{{.ShortName 40}}
+										<span class="truncated-item-name">{{.ShortName 40}}</span>
 									</div>
 								{{end}}
 							</div>
--- a/templates/repo/migrate/gitlab.tmpl
+++ b/templates/repo/migrate/gitlab.tmpl
@ -81,20 +81,20 @@
 						<label>{{.i18n.Tr "repo.owner"}}</label>
 						<div class="ui selection owner dropdown">
 							<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
-							<span class="text" title="{{.ContextUser.Name}}">
+							<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
 								{{avatar .ContextUser 28 "mini"}}
-								{{.ContextUser.ShortName 40}}
+								<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
 							</span>
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu" title="{{.SignedUser.Name}}">
-								<div class="item" data-value="{{.SignedUser.ID}}">
+								<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}">
 									{{avatar .SignedUser 28 "mini"}}
-									{{.SignedUser.ShortName 40}}
+									<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
 								</div>
 								{{range .Orgs}}
-									<div class="item" data-value="{{.ID}}" title="{{.Name}}">
+									<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
 										{{avatar . 28 "mini"}}
-										{{.ShortName 40}}
+										<span class="truncated-item-name">{{.ShortName 40}}</span>
 									</div>
 								{{end}}
 							</div>
--- a/templates/repo/migrate/gogs.tmpl
+++ b/templates/repo/migrate/gogs.tmpl
@ -83,20 +83,20 @@
 						<label>{{.i18n.Tr "repo.owner"}}</label>
 						<div class="ui selection owner dropdown">
 							<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
-							<span class="text" title="{{.ContextUser.Name}}">
+							<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
 								{{avatar .ContextUser}}
-								{{.ContextUser.ShortName 40}}
+								<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
 							</span>
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu" title="{{.SignedUser.Name}}">
-								<div class="item" data-value="{{.SignedUser.ID}}">
+								<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}">
 									{{avatar .SignedUser}}
-									{{.SignedUser.ShortName 40}}
+									<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
 								</div>
 								{{range .Orgs}}
-								<div class="item" data-value="{{.ID}}" title="{{.Name}}">
+								<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
 									{{avatar .}}
-									{{.ShortName 40}}
+									<span class="truncated-item-name">{{.ShortName 40}}</span>
 								</div>
 								{{end}}
 							</div>
--- a/templates/repo/pulls/fork.tmpl
+++ b/templates/repo/pulls/fork.tmpl
@ -13,22 +13,22 @@
 						<label>{{.i18n.Tr "repo.owner"}}</label>
 						<div class="ui selection owner dropdown">
 							<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
-							<span class="text" title="{{.ContextUser.Name}}">
+							<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
 								{{avatar .ContextUser 28 "mini"}}
-								{{.ContextUser.ShortName 40}}
+								<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
 							</span>
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu">
 								{{if .CanForkToUser}}
-									<div class="item" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
+									<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
 										{{avatar .SignedUser 28 "mini"}}
-										{{.SignedUser.ShortName 40}}
+										<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
 									</div>
 								{{end}}
 								{{range .Orgs}}
-									<div class="item" data-value="{{.ID}}" title="{{.Name}}">
+									<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
 										{{avatar . 28 "mini"}}
-										{{.ShortName 40}}
+										<span class="truncated-item-name">{{.ShortName 40}}</span>
 									</div>
 								{{end}}
 							</div>
--- a/templates/user/dashboard/navbar.tmpl
+++ b/templates/user/dashboard/navbar.tmpl
@ -2,9 +2,9 @@
 	<div class="ui secondary stackable menu">
 		<div class="item">
 			<div class="ui floating dropdown link jump">
-				<span class="text">
+				<span class="text truncated-item-container">
 					{{avatar .ContextUser}}
-					{{.ContextUser.ShortName 40}}
+					<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
 					{{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}}
@ -18,14 +18,14 @@
 						{{.i18n.Tr "home.switch_dashboard_context"}}
 					</div>
 					<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}}">
+						<a class="{{if eq .ContextUser.ID .SignedUser.ID}}active selected{{end}} item truncated-item-container" href="{{AppSubUrl}}/{{if .PageIsIssues}}issues{{else if .PageIsPulls}}pulls{{else if .PageIsMilestonesDashboard}}milestones{{end}}">
 							{{avatar .SignedUser}}
-							{{.SignedUser.ShortName 40}}
+							<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
 						</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}}">
+							<a class="{{if eq $.ContextUser.ID .ID}}active selected{{end}} item truncated-item-container" title="{{.Name}}" href="{{AppSubUrl}}/org/{{.Name}}/{{if $.PageIsIssues}}issues{{else if $.PageIsPulls}}pulls{{else if $.PageIsMilestonesDashboard}}milestones{{else}}dashboard{{end}}">
 								{{avatar .}}
-								{{.ShortName 40}}
+								<span class="truncated-item-name">{{.ShortName 40}}</span>
 								<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}}
--- a/templates/user/project.tmpl
+++ b/templates/user/project.tmpl
@ -13,20 +13,20 @@
 						<label>{{.i18n.Tr "repo.owner"}}</label>
 						<div class="ui selection owner dropdown">
 							<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
-							<span class="text" title="{{.ContextUser.Name}}">
+							<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
 								{{avatar .ContextUser 28 "mini"}}
-								{{.ContextUser.ShortName 40}}
+								<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
 							</span>
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu">
-								<div class="item" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
+								<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
 									{{avatar .SignedUser 28 "mini"}}
-									{{.SignedUser.ShortName 40}}
+									<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
 								</div>
 								{{range .Orgs}}
-								<div class="item" data-value="{{.ID}}" title="{{.Name}}">
+								<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
 									{{avatar . 28 "mini"}}
-									{{.ShortName 40}}
+									<span class="truncated-item-name">{{.ShortName 40}}</span>
 								</div>
 								{{end}}
 							</div>
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@ -347,9 +347,6 @@ 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) {
@ -390,10 +387,6 @@ 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 {
@ -2002,3 +1995,16 @@ table th[data-sortt-desc] {
  display: block;
  text-align: left;
 }
+
+.truncated-item-container {
+  display: flex !important;
+}
+
+.truncated-item-name {
+  line-height: 2em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: -.5em;
+  margin-bottom: -.5em;
+}
--- a/web_src/less/_dashboard.less
+++ b/web_src/less/_dashboard.less
@ -75,6 +75,10 @@
    .org-visibility .label {
      margin-left: 5px;
    }
+
+    .ui.dropdown {
+      max-width: 100%;
+    }
  }
 }

--- a/web_src/less/_form.less
+++ b/web_src/less/_form.less
@ -278,10 +278,6 @@ textarea:focus,
    form {
      .dropdown .text {
        margin-right: 0 !important;
-
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
      }

      .header {