Merge pull request #14910 from craftcms/fork/cp-sidebar-ui-fixes

CP sidebar UI fixes
craftcms · May 1, 2024 · 55eb60c · 55eb60c
2 parents 19a31c9 + f19db5e
commit 55eb60c
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 28 deletions.
diff --git a/CHANGELOG-WIP.md b/CHANGELOG-WIP.md
@@ -2,6 +2,7 @@
 
 ### Content Management
 - Element index checkboxes no longer have a lag when deselected, except within element selection modals. ([#14896](https://github.com/craftcms/cms/issues/14896))
+- Improved mobile styling. ([#14910](https://github.com/craftcms/cms/pull/14910))
 
 ### Extensibility
 - Added the `waitForDoubleClicks` setting to `Garnish.Select`, `Craft.BaseElementIndex`, and `Craft.BaseElementIndexView`.
diff --git a/src/templates/_layouts/cp.twig b/src/templates/_layouts/cp.twig
@@ -258,11 +258,11 @@ history.replaceState(undefined, undefined, window.location.href.match(/^[^#]*/)[
                                     <button
                                         type="button"
                                         id="sidebar-toggle"
-                                        class="btn menubtn"
+                                        class="btn menubtn chromeless"
                                         aria-controls="sidebar-container"
                                         aria-expanded="false"
                                     >
-                                        {{ 'Show sidebar'|t('app') }}
+                                      <span id="content-heading"></span>
                                     </button>
                                 </div>
                                 <div id="sidebar-container">
@@ -274,9 +274,6 @@ history.replaceState(undefined, undefined, window.location.href.match(/^[^#]*/)[
 
                             {# content-container #}
                             <div id="content-container">
-                                {% if sidebar %}
-                                    <h2 id="content-heading"></h2>
-                                {% endif %}
                                 {% block main %}
                                     {% if errorSummary is not empty %}
                                         {{ errorSummary is defined ? errorSummary|raw }}

diff --git a/src/web/assets/cp/dist/css/cp.css b/src/web/assets/cp/dist/css/cp.css
diff --git a/src/web/assets/cp/dist/css/cp.css.map b/src/web/assets/cp/dist/css/cp.css.map
diff --git a/src/web/assets/cp/src/css/_cp.scss b/src/web/assets/cp/src/css/_cp.scss
@@ -1003,7 +1003,7 @@ li.breadcrumb-toggle-wrapper {
 #sidebar {
   position: relative;
   box-sizing: border-box;
-  padding: 0 31px var(--m);
+  padding: 0 40px var(--m);
   width: $sidebarWidth;
   background-color: transparent;
 
@@ -1031,6 +1031,13 @@ li.breadcrumb-toggle-wrapper {
       }
     }
   }
+  .skip-link {
+    margin: 0 var(--s);
+  }
+
+  @media only screen and (min-width: $minFullUiWidth) {
+    padding: 0 31px var(--m);
+  }
 }
 
 #content-container {
@@ -1043,14 +1050,6 @@ li.breadcrumb-toggle-wrapper {
   width: 400px;
 }
 
-#content-heading {
-  margin-top: var(--xl) !important;
-
-  @media only screen and (min-width: $minHorizontalUiWidth) {
-    @include visually-hidden;
-  }
-}
-
 .content-pane {
   @include pane;
   border-radius: var(--large-border-radius);
@@ -1224,13 +1223,17 @@ li.breadcrumb-toggle-wrapper {
 
   #main-content {
     width: 100vw;
+    &.has-sidebar {
+      padding-left: 0;
+    }
   }
 }
 
 // Rearrange #main-content to flow vertically at < 999
 @media only screen and (max-width: $minHorizontalUiWidth - calc(1rem/16)) {
   #header {
-    display: block;
+    display: flex;
+    flex-wrap: wrap;
 
     .flex:not(#toolbar) {
       margin-top: 10px;
@@ -1239,42 +1242,59 @@ li.breadcrumb-toggle-wrapper {
 
   #toolbar {
     flex-wrap: wrap !important;
+    order: 3;
+    width: 100%;
+    flex: auto;
 
     & > * {
       margin-top: 10px !important;
     }
   }
 
+  #action-buttons {
+    order: 2;
+  }
+
   body.fixed-header #header .flex:first-child {
     margin-top: 0;
   }
 
   #main-content {
     display: block;
+    &.has-sidebar {
+      padding: 0 var(--padding) 48px;
+    }
+  }
+
+  #sidebar {
+    nav {
+      margin-left: -40px;
+      margin-right: -40px;
+    }
+    .skip-link {
+      margin: 0;
+    }
+  }
+
+  #source-actions {
+    margin-top: var(--s);
+    margin-left: -9px;
   }
 
   #sidebar-toggle-container {
     display: block;
-    margin-bottom: var(--m);
+    margin-bottom: var(--s);
   }
 
   #sidebar-toggle {
     &:after {
       top: 0;
-      transform: rotate(-45deg);
+      transform: rotate(45deg);
 
       body.rtl & {
         transform: rotate(135deg);
       }
     }
-
-    body.showing-sidebar & {
-      background-color: darken($grey200, 10%) !important;
-
-      &:after {
-        transform: rotate(45deg);
-      }
-    }
   }
 
   #content-container {
@@ -1294,7 +1314,7 @@ li.breadcrumb-toggle-wrapper {
 
   #sidebar,
   #details {
-    position: static !important;
+    position: relative !important;
     overflow-y: visible !important;
     max-height: none !important;
     width: auto;
@@ -1303,6 +1323,12 @@ li.breadcrumb-toggle-wrapper {
   #sidebar {
     margin-bottom: var(--m);
 
+    body.showing-sidebar & {
+      @include pane;
+      padding-block: 0.5rem;
+      border-radius: var(--large-border-radius);
+    }
+
     body:not(.showing-sidebar) & {
       display: none;
     }