Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Make the menu links header within the user panel more flexible

This commit is contained in:
Kris 2020-05-29 21:02:26 -04:00
parent 8f59f155fb
commit 32e40ea133
1 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/assets/stylesheets/common/base/menu-panel.scss
View File

@ -279,10 +279,9 @@
div.menu-links-header { div.menu-links-header {
width: 100%; width: 100%;
display: table; margin-bottom: 0.5em;
border-collapse: separate;
border-spacing: 0 0.5em;
.menu-links-row { .menu-links-row {
box-sizing: border-box;
border-bottom: 1px solid dark-light-choose($primary-low, $secondary-medium); border-bottom: 1px solid dark-light-choose($primary-low, $secondary-medium);
display: flex; display: flex;
@ -295,15 +294,17 @@ div.menu-links-header {
flex-wrap: wrap; flex-wrap: wrap;
&.user { &.user {
margin-right: auto; margin-right: auto;
flex: 1 1 0;
overflow: hidden;
} }
&.glyphs { &.glyphs {
flex-wrap: wrap; flex-wrap: nowrap;
text-align: right; text-align: right;
a { a {
// Expand the click area a bit. // Expand the click area a bit.
padding-left: 0.55em; padding-left: 0.6em;
padding-right: 0.55em; padding-right: 0.6em;
} }
} }
@ -347,10 +348,11 @@ div.menu-links-header {
padding: 0.3em 0.5em; padding: 0.3em 0.5em;
} }
a.user-activity-link { a.user-activity-link {
box-sizing: border-box;
align-items: center; align-items: center;
display: flex; display: flex;
margin: -0.5em 0; margin: -0.5em 0;
max-width: 120px; max-width: 100%;
// `overflow: hidden` on `.user-activity-link` would hide the `::after` // `overflow: hidden` on `.user-activity-link` would hide the `::after`
// pseudo element (used to create the tab-looking effect). Sets `overflow: // pseudo element (used to create the tab-looking effect). Sets `overflow:
@ -359,7 +361,6 @@ div.menu-links-header {
span.d-label { span.d-label {
display: block; display: block;
max-width: 130px;
@include ellipsis; @include ellipsis;
} }