Nulo/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix truncated organization names (#14655)

Browse source 
* 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:
vnkmpf 2021-02-12 02:29:07 +01:00 committed by GitHub
parent 5a18712dd7
commit 51fb0463a3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 71 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
templates/repo/create.tmpl
View file

@ -18,20 +18,20 @@
<label>{{.i18n.Tr "repo.owner"}}</label> <label>{{.i18n.Tr "repo.owner"}}</label>
<div class="ui selection owner dropdown"> <div class="ui selection owner dropdown">
<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required> <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"}} {{avatar .ContextUser 28 "mini"}}
{{.ContextUser.ShortName 40}} <span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
</span> </span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}} {{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu"> <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"}} {{avatar .SignedUser 28 "mini"}}
{{.SignedUser.ShortName 40}} <span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
</div> </div>
{{range .Orgs}} {{range .Orgs}}
<div class="item" data-value="{{.ID}}" title="{{.Name}}"> <div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
{{avatar . 28 "mini"}} {{avatar . 28 "mini"}}
{{.ShortName 40}} <span class="truncated-item-name">{{.ShortName 40}}</span>
</div> </div>
{{end}} {{end}}
</div> </div>

12
templates/repo/migrate/git.tmpl
View file

@ -47,20 +47,20 @@
<label>{{.i18n.Tr "repo.owner"}}</label> <label>{{.i18n.Tr "repo.owner"}}</label>
<div class="ui selection owner dropdown"> <div class="ui selection owner dropdown">
<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required> <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}} {{avatar .ContextUser}}
{{.ContextUser.ShortName 40}} <span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
</span> </span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}} {{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu" title="{{.SignedUser.Name}}"> <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}} {{avatar .SignedUser}}
{{.SignedUser.ShortName 40}} <span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
</div> </div>
{{range .Orgs}} {{range .Orgs}}
<div class="item" data-value="{{.ID}}" title="{{.Name}}"> <div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
{{avatar .}} {{avatar .}}
{{.ShortName 40}} <span class="truncated-item-name">{{.ShortName 40}}</span>
</div> </div>
{{end}} {{end}}
</div> </div>

12
templates/repo/migrate/gitea.tmpl
View file

@ -81,20 +81,20 @@
<label>{{.i18n.Tr "repo.owner"}}</label> <label>{{.i18n.Tr "repo.owner"}}</label>
<div class="ui selection owner dropdown"> <div class="ui selection owner dropdown">
<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required> <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}} {{avatar .ContextUser}}
{{.ContextUser.ShortName 40}} <span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
</span> </span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}} {{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu" title="{{.SignedUser.Name}}"> <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}} {{avatar .SignedUser}}
{{.SignedUser.ShortName 40}} <span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
</div> </div>
{{range .Orgs}} {{range .Orgs}}
<div class="item" data-value="{{.ID}}" title="{{.Name}}"> <div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
{{avatar .}} {{avatar .}}
{{.ShortName 40}} <span class="truncated-item-name">{{.ShortName 40}}</span>
</div> </div>
{{end}} {{end}}
</div> </div>

12
templates/repo/migrate/github.tmpl
View file

@ -81,20 +81,20 @@
<label>{{.i18n.Tr "repo.owner"}}</label> <label>{{.i18n.Tr "repo.owner"}}</label>
<div class="ui selection owner dropdown"> <div class="ui selection owner dropdown">
<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required> <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"}} {{avatar .ContextUser 28 "mini"}}
{{.ContextUser.ShortName 40}} <span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
</span> </span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}} {{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu" title="{{.SignedUser.Name}}"> <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"}} {{avatar .SignedUser 28 "mini"}}
{{.SignedUser.ShortName 40}} <span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
</div> </div>
{{range .Orgs}} {{range .Orgs}}
<div class="item" data-value="{{.ID}}" title="{{.Name}}"> <div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
{{avatar . 28 "mini"}} {{avatar . 28 "mini"}}
{{.ShortName 40}} <span class="truncated-item-name">{{.ShortName 40}}</span>
</div> </div>
{{end}} {{end}}
</div> </div>

12
templates/repo/migrate/gitlab.tmpl
View file

@ -81,20 +81,20 @@
<label>{{.i18n.Tr "repo.owner"}}</label> <label>{{.i18n.Tr "repo.owner"}}</label>
<div class="ui selection owner dropdown"> <div class="ui selection owner dropdown">
<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required> <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"}} {{avatar .ContextUser 28 "mini"}}
{{.ContextUser.ShortName 40}} <span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
</span> </span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}} {{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu" title="{{.SignedUser.Name}}"> <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"}} {{avatar .SignedUser 28 "mini"}}
{{.SignedUser.ShortName 40}} <span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
</div> </div>
{{range .Orgs}} {{range .Orgs}}
<div class="item" data-value="{{.ID}}" title="{{.Name}}"> <div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
{{avatar . 28 "mini"}} {{avatar . 28 "mini"}}
{{.ShortName 40}} <span class="truncated-item-name">{{.ShortName 40}}</span>
</div> </div>
{{end}} {{end}}
</div> </div>

12
templates/repo/migrate/gogs.tmpl
View file

@ -83,20 +83,20 @@
<label>{{.i18n.Tr "repo.owner"}}</label> <label>{{.i18n.Tr "repo.owner"}}</label>
<div class="ui selection owner dropdown"> <div class="ui selection owner dropdown">
<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required> <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}} {{avatar .ContextUser}}
{{.ContextUser.ShortName 40}} <span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
</span> </span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}} {{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu" title="{{.SignedUser.Name}}"> <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}} {{avatar .SignedUser}}
{{.SignedUser.ShortName 40}} <span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
</div> </div>
{{range .Orgs}} {{range .Orgs}}
<div class="item" data-value="{{.ID}}" title="{{.Name}}"> <div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
{{avatar .}} {{avatar .}}
{{.ShortName 40}} <span class="truncated-item-name">{{.ShortName 40}}</span>
</div> </div>
{{end}} {{end}}
</div> </div>

12
templates/repo/pulls/fork.tmpl
View file

@ -13,22 +13,22 @@
<label>{{.i18n.Tr "repo.owner"}}</label> <label>{{.i18n.Tr "repo.owner"}}</label>
<div class="ui selection owner dropdown"> <div class="ui selection owner dropdown">
<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required> <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"}} {{avatar .ContextUser 28 "mini"}}
{{.ContextUser.ShortName 40}} <span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
</span> </span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}} {{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu"> <div class="menu">
{{if .CanForkToUser}} {{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"}} {{avatar .SignedUser 28 "mini"}}
{{.SignedUser.ShortName 40}} <span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
</div> </div>
{{end}} {{end}}
{{range .Orgs}} {{range .Orgs}}
<div class="item" data-value="{{.ID}}" title="{{.Name}}"> <div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
{{avatar . 28 "mini"}} {{avatar . 28 "mini"}}
{{.ShortName 40}} <span class="truncated-item-name">{{.ShortName 40}}</span>
</div> </div>
{{end}} {{end}}
</div> </div>

12
templates/user/dashboard/navbar.tmpl
View file

@ -2,9 +2,9 @@
<div class="ui secondary stackable menu"> <div class="ui secondary stackable menu">
<div class="item"> <div class="item">
<div class="ui floating dropdown link jump"> <div class="ui floating dropdown link jump">
<span class="text"> <span class="text truncated-item-container">
{{avatar .ContextUser}} {{avatar .ContextUser}}
{{.ContextUser.ShortName 40}} <span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
{{if .ContextUser.IsOrganization}} {{if .ContextUser.IsOrganization}}
<span class="org-visibility"> <span class="org-visibility">
{{if .ContextUser.Visibility.IsLimited}}<div class="ui orange tiny horizontal label">{{.i18n.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}} {{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"}} {{.i18n.Tr "home.switch_dashboard_context"}}
</div> </div>
<div class="scrolling menu items"> <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}} {{avatar .SignedUser}}
{{.SignedUser.ShortName 40}} <span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
</a> </a>
{{range .Orgs}} {{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 .}} {{avatar .}}
{{.ShortName 40}} <span class="truncated-item-name">{{.ShortName 40}}</span>
<span class="org-visibility"> <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.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}} {{if .Visibility.IsPrivate}}<div class="ui red tiny horizontal label">{{$.i18n.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}

12
templates/user/project.tmpl
View file

@ -13,20 +13,20 @@
<label>{{.i18n.Tr "repo.owner"}}</label> <label>{{.i18n.Tr "repo.owner"}}</label>
<div class="ui selection owner dropdown"> <div class="ui selection owner dropdown">
<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required> <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"}} {{avatar .ContextUser 28 "mini"}}
{{.ContextUser.ShortName 40}} <span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
</span> </span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}} {{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu"> <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"}} {{avatar .SignedUser 28 "mini"}}
{{.SignedUser.ShortName 40}} <span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
</div> </div>
{{range .Orgs}} {{range .Orgs}}
<div class="item" data-value="{{.ID}}" title="{{.Name}}"> <div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
{{avatar . 28 "mini"}} {{avatar . 28 "mini"}}
{{.ShortName 40}} <span class="truncated-item-name">{{.ShortName 40}}</span>
</div> </div>
{{end}} {{end}}
</div> </div>

20
web_src/less/_base.less
View file

@ -347,9 +347,6 @@ a.muted:hover,
.ui.selection.dropdown .menu > .item { .ui.selection.dropdown .menu > .item {
border-color: var(--color-secondary); border-color: var(--color-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.ui.selection.visible.dropdown > .text:not(.default) { .ui.selection.visible.dropdown > .text:not(.default) {
@ -390,10 +387,6 @@ a.muted:hover,
.ui.menu .ui.dropdown .menu > .item { .ui.menu .ui.dropdown .menu > .item {
color: var(--color-text) !important; color: var(--color-text) !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
} }
.ui.menu .ui.dropdown .menu > .item:hover { .ui.menu .ui.dropdown .menu > .item:hover {
@ -2002,3 +1995,16 @@ table th[data-sortt-desc] {
display: block; display: block;
text-align: left; 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;
}

4
web_src/less/_dashboard.less
View file

@ -75,6 +75,10 @@
.org-visibility .label { .org-visibility .label {
margin-left: 5px; margin-left: 5px;
} }
.ui.dropdown {
max-width: 100%;
}
} }
} }

4
web_src/less/_form.less
View file

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