- truncate to max length 40 - add CSS ellipsis
This commit is contained in:
parent
b337c606d3
commit
3a4801d195
11 changed files with 39 additions and 28 deletions
|
@ -20,18 +20,18 @@
|
||||||
<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" title="{{.ContextUser.Name}}">
|
||||||
{{avatar .ContextUser 28 "mini"}}
|
{{avatar .ContextUser 28 "mini"}}
|
||||||
{{.ContextUser.ShortName 20}}
|
{{.ContextUser.ShortName 40}}
|
||||||
</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" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
|
||||||
{{avatar .SignedUser 28 "mini"}}
|
{{avatar .SignedUser 28 "mini"}}
|
||||||
{{.SignedUser.ShortName 20}}
|
{{.SignedUser.ShortName 40}}
|
||||||
</div>
|
</div>
|
||||||
{{range .Orgs}}
|
{{range .Orgs}}
|
||||||
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
|
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
|
||||||
{{avatar . 28 "mini"}}
|
{{avatar . 28 "mini"}}
|
||||||
{{.ShortName 20}}
|
{{.ShortName 40}}
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -49,18 +49,18 @@
|
||||||
<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" title="{{.ContextUser.Name}}">
|
||||||
{{avatar .ContextUser}}
|
{{avatar .ContextUser}}
|
||||||
{{.ContextUser.ShortName 20}}
|
{{.ContextUser.ShortName 40}}
|
||||||
</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" data-value="{{.SignedUser.ID}}">
|
||||||
{{avatar .SignedUser}}
|
{{avatar .SignedUser}}
|
||||||
{{.SignedUser.ShortName 20}}
|
{{.SignedUser.ShortName 40}}
|
||||||
</div>
|
</div>
|
||||||
{{range .Orgs}}
|
{{range .Orgs}}
|
||||||
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
|
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
|
||||||
{{avatar .}}
|
{{avatar .}}
|
||||||
{{.ShortName 20}}
|
{{.ShortName 40}}
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -83,18 +83,18 @@
|
||||||
<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" title="{{.ContextUser.Name}}">
|
||||||
{{avatar .ContextUser}}
|
{{avatar .ContextUser}}
|
||||||
{{.ContextUser.ShortName 20}}
|
{{.ContextUser.ShortName 40}}
|
||||||
</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" data-value="{{.SignedUser.ID}}">
|
||||||
{{avatar .SignedUser}}
|
{{avatar .SignedUser}}
|
||||||
{{.SignedUser.ShortName 20}}
|
{{.SignedUser.ShortName 40}}
|
||||||
</div>
|
</div>
|
||||||
{{range .Orgs}}
|
{{range .Orgs}}
|
||||||
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
|
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
|
||||||
{{avatar .}}
|
{{avatar .}}
|
||||||
{{.ShortName 20}}
|
{{.ShortName 40}}
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -83,18 +83,18 @@
|
||||||
<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" title="{{.ContextUser.Name}}">
|
||||||
{{avatar .ContextUser 28 "mini"}}
|
{{avatar .ContextUser 28 "mini"}}
|
||||||
{{.ContextUser.ShortName 20}}
|
{{.ContextUser.ShortName 40}}
|
||||||
</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" data-value="{{.SignedUser.ID}}">
|
||||||
{{avatar .SignedUser 28 "mini"}}
|
{{avatar .SignedUser 28 "mini"}}
|
||||||
{{.SignedUser.ShortName 20}}
|
{{.SignedUser.ShortName 40}}
|
||||||
</div>
|
</div>
|
||||||
{{range .Orgs}}
|
{{range .Orgs}}
|
||||||
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
|
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
|
||||||
{{avatar . 28 "mini"}}
|
{{avatar . 28 "mini"}}
|
||||||
{{.ShortName 20}}
|
{{.ShortName 40}}
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -83,18 +83,18 @@
|
||||||
<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" title="{{.ContextUser.Name}}">
|
||||||
{{avatar .ContextUser 28 "mini"}}
|
{{avatar .ContextUser 28 "mini"}}
|
||||||
{{.ContextUser.ShortName 20}}
|
{{.ContextUser.ShortName 40}}
|
||||||
</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" data-value="{{.SignedUser.ID}}">
|
||||||
{{avatar .SignedUser 28 "mini"}}
|
{{avatar .SignedUser 28 "mini"}}
|
||||||
{{.SignedUser.ShortName 20}}
|
{{.SignedUser.ShortName 40}}
|
||||||
</div>
|
</div>
|
||||||
{{range .Orgs}}
|
{{range .Orgs}}
|
||||||
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
|
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
|
||||||
{{avatar . 28 "mini"}}
|
{{avatar . 28 "mini"}}
|
||||||
{{.ShortName 20}}
|
{{.ShortName 40}}
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -85,18 +85,18 @@
|
||||||
<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" title="{{.ContextUser.Name}}">
|
||||||
{{avatar .ContextUser}}
|
{{avatar .ContextUser}}
|
||||||
{{.ContextUser.ShortName 20}}
|
{{.ContextUser.ShortName 40}}
|
||||||
</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" data-value="{{.SignedUser.ID}}">
|
||||||
{{avatar .SignedUser}}
|
{{avatar .SignedUser}}
|
||||||
{{.SignedUser.ShortName 20}}
|
{{.SignedUser.ShortName 40}}
|
||||||
</div>
|
</div>
|
||||||
{{range .Orgs}}
|
{{range .Orgs}}
|
||||||
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
|
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
|
||||||
{{avatar .}}
|
{{avatar .}}
|
||||||
{{.ShortName 20}}
|
{{.ShortName 40}}
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -15,20 +15,20 @@
|
||||||
<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" title="{{.ContextUser.Name}}">
|
||||||
{{avatar .ContextUser 28 "mini"}}
|
{{avatar .ContextUser 28 "mini"}}
|
||||||
{{.ContextUser.ShortName 20}}
|
{{.ContextUser.ShortName 40}}
|
||||||
</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" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
|
||||||
{{avatar .SignedUser 28 "mini"}}
|
{{avatar .SignedUser 28 "mini"}}
|
||||||
{{.SignedUser.ShortName 20}}
|
{{.SignedUser.ShortName 40}}
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
{{range .Orgs}}
|
{{range .Orgs}}
|
||||||
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
|
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
|
||||||
{{avatar . 28 "mini"}}
|
{{avatar . 28 "mini"}}
|
||||||
{{.ShortName 20}}
|
{{.ShortName 40}}
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<div class="ui floating dropdown link jump">
|
<div class="ui floating dropdown link jump">
|
||||||
<span class="text">
|
<span class="text">
|
||||||
{{avatar .ContextUser}}
|
{{avatar .ContextUser}}
|
||||||
{{.ContextUser.ShortName 20}}
|
{{.ContextUser.ShortName 40}}
|
||||||
{{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}}
|
||||||
|
@ -20,12 +20,12 @@
|
||||||
<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" href="{{AppSubUrl}}/{{if .PageIsIssues}}issues{{else if .PageIsPulls}}pulls{{else if .PageIsMilestonesDashboard}}milestones{{end}}">
|
||||||
{{avatar .SignedUser}}
|
{{avatar .SignedUser}}
|
||||||
{{.SignedUser.ShortName 20}}
|
{{.SignedUser.ShortName 40}}
|
||||||
</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" title="{{.Name}}" href="{{AppSubUrl}}/org/{{.Name}}/{{if $.PageIsIssues}}issues{{else if $.PageIsPulls}}pulls{{else if $.PageIsMilestonesDashboard}}milestones{{else}}dashboard{{end}}">
|
||||||
{{avatar .}}
|
{{avatar .}}
|
||||||
{{.ShortName 20}}
|
{{.ShortName 40}}
|
||||||
<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}}
|
||||||
|
@ -94,7 +94,7 @@
|
||||||
{{end}}
|
{{end}}
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<a class="ui blue basic button" href="{{.ContextUser.HomeLink}}" title='{{.i18n.Tr "home.view_home" .ContextUser.Name}}'>
|
<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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -15,18 +15,18 @@
|
||||||
<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" title="{{.ContextUser.Name}}">
|
||||||
{{avatar .ContextUser 28 "mini"}}
|
{{avatar .ContextUser 28 "mini"}}
|
||||||
{{.ContextUser.ShortName 20}}
|
{{.ContextUser.ShortName 40}}
|
||||||
</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" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
|
||||||
{{avatar .SignedUser 28 "mini"}}
|
{{avatar .SignedUser 28 "mini"}}
|
||||||
{{.SignedUser.ShortName 20}}
|
{{.SignedUser.ShortName 40}}
|
||||||
</div>
|
</div>
|
||||||
{{range .Orgs}}
|
{{range .Orgs}}
|
||||||
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
|
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
|
||||||
{{avatar . 28 "mini"}}
|
{{avatar . 28 "mini"}}
|
||||||
{{.ShortName 20}}
|
{{.ShortName 40}}
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -347,6 +347,9 @@ 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) {
|
||||||
|
@ -387,6 +390,10 @@ 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 {
|
||||||
|
|
|
@ -278,6 +278,10 @@ 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 {
|
||||||
|
|
Reference in a new issue