From 732678f642015b08ba22d0995dc74c13a086ac92 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Thu, 2 Dec 2021 09:45:33 -0500
Subject: [PATCH] UX: Fix alignment in group navigation bar (#15169)
Same as #15145.
---
.../stylesheets/common/components/navs.scss | 7 +++--
app/assets/stylesheets/desktop/group.scss | 30 -------------------
.../javascripts/discourse/lib/dummy-data.js | 2 ++
.../styleguide/molecules/navigation-bar.hbs | 12 ++++++++
4 files changed, 19 insertions(+), 32 deletions(-)
diff --git a/app/assets/stylesheets/common/components/navs.scss b/app/assets/stylesheets/common/components/navs.scss
index 6bef0c18f10..49a6a767fdc 100644
--- a/app/assets/stylesheets/common/components/navs.scss
+++ b/app/assets/stylesheets/common/components/navs.scss
@@ -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;
diff --git a/app/assets/stylesheets/desktop/group.scss b/app/assets/stylesheets/desktop/group.scss
index 606b402ff8e..0b095a67ab1 100644
--- a/app/assets/stylesheets/desktop/group.scss
+++ b/app/assets/stylesheets/desktop/group.scss
@@ -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 {
diff --git a/plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js b/plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js
index df2f90450e9..29597f9e579 100644
--- a/plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js
+++ b/plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js
@@ -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",
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/navigation-bar.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/navigation-bar.hbs
index 53a46ed9279..d62354700ef 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/navigation-bar.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/navigation-bar.hbs
@@ -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}}