* 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.tags/v1.15.0-dev
@@ -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 { |