UX: Change layout of invites page to match other user pages (#14520)

UX: Change layout of invites page to match other user pages (#14520)

  • UX: Change layout of invites page to match other user pages
diff --git a/app/assets/javascripts/discourse/app/templates/user-invited-show.hbs b/app/assets/javascripts/discourse/app/templates/user-invited-show.hbs
index 2ff2fa8..1872e0e 100644
--- a/app/assets/javascripts/discourse/app/templates/user-invited-show.hbs
+++ b/app/assets/javascripts/discourse/app/templates/user-invited-show.hbs
@@ -1,49 +1,53 @@
+{{#if model.can_see_invite_details}}
+  {{#d-section class="user-secondary-navigation" pageClass="user-invites"}}
+    {{#mobile-nav class="invites-nav" desktopClass="nav-stacked action-list"}}
+      {{nav-item route="userInvited.show" routeParam="pending" i18nLabel=pendingLabel}}
+      {{nav-item route="userInvited.show" routeParam="expired" i18nLabel=expiredLabel}}
+      {{nav-item route="userInvited.show" routeParam="redeemed" i18nLabel=redeemedLabel}}
+    {{/mobile-nav}}
+  {{/d-section}}
+{{/if}}
+
 {{#d-section pageClass="user-invites" tagName=""}}
   {{#if canInviteToForum}}
     {{#load-more class="user-content" selector=".user-invite-list tr" action=(action "loadMore")}}
-      <section>
-        {{#if model.can_see_invite_details}}
-          <div class="admin-controls invite-controls">
-            <nav>
-              <ul class="nav nav-pills">
-                {{nav-item route="userInvited.show" routeParam="pending" i18nLabel=pendingLabel}}
-                {{nav-item route="userInvited.show" routeParam="expired" i18nLabel=expiredLabel}}
-                {{nav-item route="userInvited.show" routeParam="redeemed" i18nLabel=redeemedLabel}}
-              </ul>
-            </nav>
-
-            <div class="pull-right">
-              {{d-button class="btn-default" icon="plus" action=(action "createInvite") label="user.invited.create"}}
-              {{#if canBulkInvite}}
-                {{d-button class="btn-default" icon="upload" action=(action "createInviteCsv") label="user.invited.bulk_invite.text"}}
-              {{/if}}
-              {{#if showBulkActionButtons}}
-                {{#if inviteExpired}}
-                  {{#if removedAll}}
-                    {{i18n "user.invited.removed_all"}}
-                  {{else}}
-                    {{d-button icon="times" action=(action "destroyAllExpired") label="user.invited.remove_all"}}
-                  {{/if}}
-                {{/if}}
-
-                {{#if invitePending}}
-                  {{#if reinvitedAll}}
-                    {{i18n "user.invited.reinvited_all"}}
-                  {{else}}
-                    {{d-button class="btn-default" icon="sync" action=(action "reinviteAll") label="user.invited.reinvite_all"}}
-                  {{/if}}
-                {{/if}}
-              {{/if}}
-            </div>
-          </div>
-        {{/if}}
-
+      {{#d-section class="user-additional-controls"}}
         {{#if showSearch}}
           <div class="user-invite-search">
             <form>{{text-field value=searchTerm placeholderKey="user.invited.search"}}</form>
           </div>
         {{/if}}
+        {{#d-section class="user-invite-buttons"}}
+          {{d-button class="btn-default" icon="plus" action=(action "createInvite") label="user.invited.create"}}
+          {{#if canBulkInvite}}
+            {{#unless site.mobileView}}
+              {{d-button class="btn-default" icon="upload" action=(action "createInviteCsv") label="user.invited.bulk_invite.text"}}
+            {{/unless}}
+          {{/if}}
+          {{#if showBulkActionButtons}}
+            {{#if inviteExpired}}
+              {{#if removedAll}}
+                <li>
+                  {{i18n "user.invited.removed_all"}}
+                </li>
+              {{else}}
+                {{d-button icon="times" action=(action "destroyAllExpired") label="user.invited.remove_all"}}
+              {{/if}}
+            {{/if}}
 
+            {{#if invitePending}}
+              {{#if reinvitedAll}}
+                <li>
+                  {{i18n "user.invited.reinvited_all"}}
+                </li>
+              {{else}}
+                {{d-button class="btn-default" icon="sync" action=(action "reinviteAll") label="user.invited.reinvite_all"}}
+              {{/if}}
+            {{/if}}
+          {{/if}}
+        {{/d-section}}
+      {{/d-section}}
+      <section>
         {{#if model.invites}}
           {{#if inviteRedeemed}}
             <table class="table user-invite-list">
diff --git a/app/assets/javascripts/discourse/tests/acceptance/create-invite-modal-test.js b/app/assets/javascripts/discourse/tests/acceptance/create-invite-modal-test.js
index d12ec51..5f521e5 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/create-invite-modal-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/create-invite-modal-test.js
@@ -51,7 +51,7 @@ acceptance("Invites - Create & Edit Invite Modal", function (needs) {
 
   test("basic functionality", async function (assert) {
     await visit("/u/eviltrout/invited/pending");
-    await click(".invite-controls .btn:first-child");
+    await click(".user-invite-buttons .btn:first-child");
     assert.equal(
       find("input.invite-link")[0].value,
       "http://example.com/invites/52641ae8878790bc7b79916247cfe6ba",
@@ -69,7 +69,7 @@ acceptance("Invites - Create & Edit Invite Modal", function (needs) {
 
   test("saving", async function (assert) {
     await visit("/u/eviltrout/invited/pending");
-    await click(".invite-controls .btn:first-child");
+    await click(".user-invite-buttons .btn:first-child");
 
     assert.ok(!exists("tbody tr"), "does not show invite before saving");
 
@@ -83,7 +83,7 @@ acceptance("Invites - Create & Edit Invite Modal", function (needs) {
 
   test("copying saves invite", async function (assert) {
     await visit("/u/eviltrout/invited/pending");
-    await click(".invite-controls .btn:first-child");
+    await click(".user-invite-buttons .btn:first-child");
 
     await click(".invite-link .btn");
 
@@ -93,7 +93,7 @@ acceptance("Invites - Create & Edit Invite Modal", function (needs) {
 
   test("copying an email invite without an email shows error message", async function (assert) {
     await visit("/u/eviltrout/invited/pending");
-    await click(".invite-controls .btn:first-child");
+    await click(".user-invite-buttons .btn:first-child");
 
     await fillIn("#invite-email", "error");
     await click(".invite-link .btn");
@@ -128,7 +128,7 @@ acceptance("Invites - Link Invites", function (needs) {
 
   test("invite links", async function (assert) {
     await visit("/u/eviltrout/invited/pending");
-    await click(".invite-controls .btn:first-child");
+    await click(".user-invite-buttons .btn:first-child");
 
     assert.ok(exists("#invite-max-redemptions"), "shows max redemptions field");
   });
@@ -167,7 +167,7 @@ acceptance("Invites - Email Invites", function (needs) {
 
   test("invite email", async function (assert) {
     await visit("/u/eviltrout/invited/pending");
-    await click(".invite-controls .btn:first-child");
+    await click(".user-invite-buttons .btn:first-child");
 
     assert.ok(exists("#invite-email"), "shows email field");
     await fillIn("#invite-email", "test@example.com");
@@ -226,7 +226,7 @@ acceptance(
     test("shows correct timeframe options", async function (assert) {
       await visit("/u/eviltrout/invited/pending");
 
-      await click(".invite-controls .btn:first-child");
+      await click(".user-invite-buttons .btn:first-child");
       await click(".modal-footer .show-advanced");
       await click(".future-date-input-selector-header");
 
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index 881a4ef..9d87e21 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -798,11 +798,6 @@
 }
 
 .user-invites-page {
-  .user-invite-search {
-    clear: both;
-    margin: 15px 0px -15px 0px;
-  }
-
   .invite-error {
     grid-column: 1 / span 2;
   }

[... diff too long, it was truncated ...]

GitHub sha: 6ab5f700901a06713f92a8c1bce12875fd0b2cbe

This commit appears in #14520 which was approved by eviltrout and pmusaraj. It was merged by jordanvidrine.