mirror of
https://github.com/go-gitea/gitea.git
synced 2024-09-06 23:44:20 -04:00
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.
This commit is contained in:
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
Block a user