UX: Layout changes to edit category page (#11222)

app/assets/javascripts/discourse/app/controllers/edit-category-tabs.js

@@ -118,14 +118,12 @@ export default Controller.extend({
           if (result) {
             this.model
               .destroy()
-              .then(
+              .then(() => {
-                () => {
                 this.transitionToRoute("discovery.categories");
-                },
+              })
-                () => {
+              .catch(() => {
                 this.displayErrors([I18n.t("category.delete_error")]);
-                }
+              })
-              )
               .finally(() => {
                 this.set("deleting", false);
               });
@@ -143,9 +141,5 @@ export default Controller.extend({
     goBack() {
       DiscourseURL.routeTo(this.model.url);
     },
-
-    toggleMenu() {
-      this.toggleProperty("expandedMenu");
-    },
   },
 });

app/assets/javascripts/discourse/app/templates/edit-category-tabs.hbs

@@ -1,4 +1,19 @@
 <div class="edit-category {{if expandedMenu "expanded-menu"}}">
+  <div class="edit-category-title">
+    <h2>{{title}}</h2>
+    {{#unless mobileView}}
+      {{#if model.id}}
+        {{d-button
+          class="category-back"
+          action=(action "goBack")
+          label="category.back"
+          icon="caret-left"
+        }}
+      {{/if}}
+    {{/unless}}
+  </div>
+
+  <div class="edit-category-nav">
     <ul class="nav nav-stacked">
       {{edit-category-tab panels=panels selectedTab=selectedTab params=parentParams tab="general"}}
       {{edit-category-tab panels=panels selectedTab=selectedTab params=parentParams tab="security"}}
@@ -9,21 +24,6 @@
         {{edit-category-tab panels=panels selectedTab=selectedTab params=parentParams tab="tags"}}
       {{/if}}
     </ul>
-
-  <div class="edit-category-title">
-    <h2>{{title}}</h2>
-    {{#if mobileView}}
-      {{d-button action=(action "toggleMenu") class="menu-toggle" icon="bars"}}
-    {{else}}
-      {{#if model.id}}
-        {{d-button
-          class="category-back"
-          action=(action "goBack")
-          label="category.back"
-          icon="caret-left"
-        }}
-      {{/if}}
-    {{/if}}
   </div>
 
   {{#each panels as |tab|}}

app/assets/stylesheets/common/base/edit-category.scss

@@ -7,19 +7,24 @@ div.edit-category {
   grid-template-rows: auto auto auto;
   grid-row-gap: 1em;
   grid-column-gap: 1.5em;
-  grid-template-areas: "sidebar header" "sidebar content" "sidebar footer";
+  grid-template-areas: "header header" "sidebar content" "sidebar footer";
 
   .edit-category-title {
     grid-area: header;
+    grid-column: 1 / span 2;
     display: flex;
     justify-content: space-between;
     align-self: start;
+    background-color: var(--primary-very-low);
+    padding: 20px;
   }
 
-  .nav-stacked {
+  .edit-category-nav {
     grid-area: sidebar;
-    grid-row: 1 / span 3;
+    grid-row: 2 / span 3;
-    background: transparent;
+    .nav-stacked {
+      background-color: var(--secondary);
+    }
   }
 
   #list-area & h2 {
@@ -34,6 +39,12 @@ div.edit-category {
     .category-chooser {
       width: unquote("min(340px, 90%)");
     }
+
+    .warning {
+      background-color: var(--tertiary-low);
+      padding: 0.5em 2.5em 0.5em 1em;
+      margin-top: 0;
+    }
   }
 
   .edit-category-tab-security {
@@ -136,6 +147,7 @@ div.edit-category {
     display: flex;
     justify-content: space-between;
     align-self: start;
+    padding-bottom: 2em;
 
     .disable-info {
       position: relative;

app/assets/stylesheets/mobile/edit-category.scss

@@ -1,11 +1,42 @@
 div.edit-category {
   display: block;
+
+  .edit-category-nav {
+    width: 100%;
+    background-color: var(--secondary);
     position: relative;
-  .nav-stacked {
+    border-top: 1px solid var(--primary-low);
+    border-bottom: 1px solid var(--primary-low);
+    margin: 0.5em 0;
+    overflow: hidden;
+    &:after {
+      background: linear-gradient(
+        to right,
+        rgba(var(--secondary-rgb), 0) 0%,
+        rgba(var(--secondary-rgb), 1) 100%
+      );
+      content: "";
       position: absolute;
-    top: 3.2em;
+      right: 0px;
-    left: -80%;
+      height: 100%;
-    transition: left 0.2s ease;
+      width: 30px;
+    }
+  }
+
+  .nav-stacked {
+    white-space: nowrap;
+    flex-wrap: nowrap;
+    overflow-x: scroll;
+    display: inline-flex;
+    width: 100%;
+    margin-bottom: 0;
+    li {
+      font-size: $font-down-1;
+      border-bottom: none;
+    }
+    a.active::after {
+      display: none;
+    }
   }
 
   .edit-category-tab,