UX: Fix alignment in group navigation bar (#15169)

Same as #15145.
This commit is contained in:
Penar Musaraj 2021-12-02 09:45:33 -05:00 committed by GitHub
parent 1c0022c195
commit 732678f642
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 32 deletions

View File

@ -21,9 +21,12 @@
@extend %nav;
@extend .clearfix;
display: flex;
flex-direction: row;
align-items: stretch;
> li {
display: flex;
float: left;
margin-right: 0.5em;
> a {
@ -36,7 +39,7 @@
min-height: 30px;
display: flex;
align-items: center;
transition: background 0.15s;
transition: background-color 0.2s, color 0.2s;
.d-icon {
margin-right: 5px;

View File

@ -1,33 +1,3 @@
.group-nav {
.group-dropdown {
margin-right: 10px;
}
}
.group-navigation {
width: 15%;
background-color: transparent;
li {
border: none;
a {
color: var(--primary-med-or-secondary-high);
padding: 8px 0;
&.active {
background-color: transparent;
font-weight: bold;
color: var(--primary);
&:after {
display: none;
}
}
}
}
}
.group-activity-outlet,
.group-messages-outlet,
.group-manage-outlet {

View File

@ -262,6 +262,8 @@ export function createData(store) {
{ name: "admin", id: 3, automatic: false },
],
groupNames: ["staff", "lounge", "admin"],
selectedGroups: [1, 2],
settings: "bold|italic|strike|underline",

View File

@ -9,3 +9,15 @@
{{/each}}
{{/mobile-nav}}
{{/styleguide-example}}
{{#styleguide-example title="group page navigation-bar"}}
{{#mobile-nav class="group-nav" desktopClass="nav nav-pills"}}
<li class="group-dropdown">
{{group-dropdown groups=dummy.groupNames value="staff"}}
</li>
{{#each dummy.navItems as |ni|}}
<li><a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>{{ni.displayName}}</a></li>
{{/each}}
{{/mobile-nav}}
{{/styleguide-example}}