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(
-                () => {
-                  this.transitionToRoute("discovery.categories");
-                },
-                () => {
-                  this.displayErrors([I18n.t("category.delete_error")]);
-                }
-              )
+              .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,20 +1,7 @@
 <div class="edit-category {{if expandedMenu "expanded-menu"}}">
-  <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"}}
-    {{edit-category-tab panels=panels selectedTab=selectedTab params=parentParams tab="settings"}}
-    {{edit-category-tab panels=panels selectedTab=selectedTab params=parentParams tab="images"}}
-    {{edit-category-tab panels=panels selectedTab=selectedTab params=parentParams tab="topic-template"}}
-    {{#if siteSettings.tagging_enabled}}
-      {{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}}
+    {{#unless mobileView}}
       {{#if model.id}}
         {{d-button
           class="category-back"
@@ -23,7 +10,20 @@
           icon="caret-left"
         }}
       {{/if}}
-    {{/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"}}
+      {{edit-category-tab panels=panels selectedTab=selectedTab params=parentParams tab="settings"}}
+      {{edit-category-tab panels=panels selectedTab=selectedTab params=parentParams tab="images"}}
+      {{edit-category-tab panels=panels selectedTab=selectedTab params=parentParams tab="topic-template"}}
+      {{#if siteSettings.tagging_enabled}}
+        {{edit-category-tab panels=panels selectedTab=selectedTab params=parentParams tab="tags"}}
+      {{/if}}
+    </ul>
   </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;
-    background: transparent;
+    grid-row: 2 / span 3;
+    .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;
-  position: relative;
+
+  .edit-category-nav {
+    width: 100%;
+    background-color: var(--secondary);
+    position: relative;
+    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;
+      right: 0px;
+      height: 100%;
+      width: 30px;
+    }
+  }
+
   .nav-stacked {
-    position: absolute;
-    top: 3.2em;
-    left: -80%;
-    transition: left 0.2s ease;
+    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,