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.release/v1.15
parent
5a18712dd7
commit
51fb0463a3
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -75,6 +75,10 @@
|
|||
.org-visibility .label {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.ui.dropdown {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -278,10 +278,6 @@ textarea:focus,
|
|||
form {
|
||||
.dropdown .text {
|
||||
margin-right: 0 !important;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.header {
|
||||
|
|
Loading…
Reference in New Issue