From 3ba0a47e615b3a2c2d016f49e5a290b9964425f4 Mon Sep 17 00:00:00 2001
From: Jarek Radosz <jradosz@gmail.com>
Date: Mon, 22 Feb 2021 16:06:52 +0100
Subject: [PATCH] UX: Tweak `group` layout to fix button alignment (#12167)

Included:

* DEV: Span can't contains divs
* DEV: Drop extra elements
* UX: Tweak `group` layout to fix button alignment
* UX: Add space between "Members" and "(N)"
---
 .../discourse/app/templates/group.hbs         | 69 ++++++++++---------
 app/assets/stylesheets/common/base/group.scss | 25 +++++--
 app/assets/stylesheets/desktop/group.scss     |  3 -
 app/assets/stylesheets/mobile/group.scss      |  4 ++
 4 files changed, 58 insertions(+), 43 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/templates/group.hbs b/app/assets/javascripts/discourse/app/templates/group.hbs
index 1867f80f52f..9383622c3bd 100644
--- a/app/assets/javascripts/discourse/app/templates/group.hbs
+++ b/app/assets/javascripts/discourse/app/templates/group.hbs
@@ -4,23 +4,49 @@
   <div class="group-details-container">
     <div class="group-info">
       {{#if model.flair_url}}
-        <span class="group-avatar-flair">
+        <div class="group-avatar-flair">
           {{avatar-flair
             flairURL=model.flair_url
             flairBgColor=model.flair_bg_color
             flairColor=model.flair_color
             groupName=model.name
           }}
-        </span>
+        </div>
       {{/if}}
 
-      <span>
+      <div class="group-info-names">
         <span class="group-info-name">{{groupName}}</span>
 
-        <div>
-          {{#if model.full_name}}<span class="group-info-full-name">{{model.name}}</span>{{/if}}
-        </div>
-      </span>
+        {{#if model.full_name}}<div class="group-info-full-name">{{model.name}}</div>{{/if}}
+      </div>
+
+      <div class="group-details-button">
+        {{group-membership-button
+          tagName=""
+          model=model
+          showLogin=(route-action "showLogin")
+        }}
+
+        {{#if displayGroupMessageButton}}
+          {{d-button
+            action=(action "messageGroup")
+            class="btn-primary group-message-button"
+            icon="envelope"
+            label="groups.message"
+          }}
+        {{/if}}
+
+        {{#if currentUser.admin}}
+          {{d-button
+            action=(action "destroy")
+            disabled=destroying
+            icon="trash-alt"
+            class="btn-danger"
+            label="admin.groups.delete"
+          }}
+        {{/if}}
+      </div>
+
       {{plugin-outlet name="group-details-after" args=(hash model=model)}}
     </div>
 
@@ -31,40 +57,15 @@
         <p>{{html-safe model.bio_cooked}}</p>
       </div>
     {{/if}}
-
-    <div class="group-details-button">
-      {{group-membership-button
-        class="inline"
-        model=model
-        showLogin=(route-action "showLogin")
-      }}
-
-      {{#if displayGroupMessageButton}}
-        {{d-button
-          action=(action "messageGroup")
-          class="btn-primary group-message-button inline"
-          icon="envelope"
-          label="groups.message"
-        }}
-      {{/if}}
-
-      {{#if currentUser.admin}}
-        {{d-button
-          action=(action "destroy")
-          disabled=destroying
-          icon="trash-alt"
-          class="btn-danger"
-          label="admin.groups.delete"
-        }}
-      {{/if}}
-    </div>
   </div>
+
   <div class="user-content-wrapper">
     <section class="user-primary-navigation">
       <div class="container">
         {{group-navigation group=model currentPath=currentPath tabs=tabs}}
       </div>
     </section>
+
     {{outlet}}
   </div>
 </div>
diff --git a/app/assets/stylesheets/common/base/group.scss b/app/assets/stylesheets/common/base/group.scss
index cf5750b2676..8c267a6f109 100644
--- a/app/assets/stylesheets/common/base/group.scss
+++ b/app/assets/stylesheets/common/base/group.scss
@@ -37,7 +37,13 @@ span.mention-group {
 }
 
 .group-info {
-  width: 100%;
+  align-items: flex-start;
+  display: flex;
+  gap: 10px;
+
+  .group-info-names {
+    flex-grow: 1;
+  }
 
   .group-info-name {
     font-size: $font-up-3;
@@ -50,11 +56,6 @@ span.mention-group {
     color: var(--primary-high-or-secondary-low);
   }
 
-  span {
-    display: inline-block;
-    vertical-align: middle;
-  }
-
   $size: 50px;
   $icon-size: $size / 1.8;
 
@@ -77,6 +78,18 @@ span.mention-group {
       width: $icon-size;
     }
   }
+
+  .group-details-button {
+    display: flex;
+    flex-shrink: 0;
+    gap: 10px;
+  }
+}
+
+.group-nav {
+  .count {
+    margin-left: 5px;
+  }
 }
 
 .group-manage-logs-filter {
diff --git a/app/assets/stylesheets/desktop/group.scss b/app/assets/stylesheets/desktop/group.scss
index 650949a2f1b..fdb331cb14d 100644
--- a/app/assets/stylesheets/desktop/group.scss
+++ b/app/assets/stylesheets/desktop/group.scss
@@ -3,9 +3,6 @@
     margin-right: 10px;
   }
 }
-.group-info {
-  margin-bottom: 20px;
-}
 
 .group-navigation {
   width: 15%;
diff --git a/app/assets/stylesheets/mobile/group.scss b/app/assets/stylesheets/mobile/group.scss
index e441eb0097f..52c10a82e77 100644
--- a/app/assets/stylesheets/mobile/group.scss
+++ b/app/assets/stylesheets/mobile/group.scss
@@ -40,3 +40,7 @@
     }
   }
 }
+
+.group-info {
+  flex-wrap: wrap;
+}