Added some design tweaks related to the sidebar

EasyCorp · Jun 6, 2020 · 403d0ae · 403d0ae
1 parent c8d227f
commit 403d0ae
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 21 deletions.
diff --git a/assets/css/app-custom-rtl.scss b/assets/css/app-custom-rtl.scss
@@ -26,7 +26,7 @@ html[dir="rtl"] .page-item:last-child .page-link {
     border-bottom-right-radius: 0;
 }
 
-@media (min-width: 992px) {
+@media (min-width: 1024px) {
     html[dir="rtl"].ea-sidebar-width-compact .sidebar-menu > li:hover > .treeview-menu,
     html[dir="rtl"].ea-sidebar-width-compact .sidebar-menu > li:hover > a > span {
         left: unset;

diff --git a/assets/css/easyadmin-theme/base.scss b/assets/css/easyadmin-theme/base.scss
@@ -55,9 +55,9 @@ pre {
     ;
     margin: 20px 15px;
 
-    @media(min-width: 992px) {
-        grid-template-columns: fit-content(var(--sidebar-width)) auto;
-        grid-column-gap: 35px;
+    @media(min-width: 1024px) {
+        grid-template-columns: var(--sidebar-width) auto;
+        grid-column-gap: 15px;
         grid-template-areas:
             "header   header"
             "sidebar  content-wrapper"
@@ -66,21 +66,27 @@ pre {
         margin-right: auto;
         width: calc(100% - 2 * 20px);
     }
+
+    @media(min-width: 1280px) {
+        grid-column-gap: 35px;
+    }
 }
 
 body:not(.ea-content-width-full) .wrapper {
     max-width: var(--body-max-width);
 }
 body.ea-sidebar-width-compact .wrapper {
-    @media(min-width: 992px) {
+    grid-column-gap: 25px;
+
+    @media(min-width: 1024px) {
         grid-template-columns: 24px auto;
     }
 }
 
 .main-header {
     display: flex;
     justify-content: space-between;
-    @media(min-width: 992px) {
+    @media(min-width: 1024px) {
         padding-right: 10px; // same as the width of #content-resizer-handler
     }
 }
@@ -114,7 +120,7 @@ body.ea-sidebar-width-compact .wrapper {
     padding: 0;
     width: 24px;
 
-    @media(min-width: 992px) {
+    @media(min-width: 1024px) {
         display: none;
     }
 }
@@ -132,7 +138,7 @@ body.ea-sidebar-width-compact .wrapper {
     z-index: $zindex-modal-backdrop + 1;
     width: calc(2 * 20px + var(--sidebar-width));
 
-    @media(min-width: 992px) {
+    @media(min-width: 1024px) {
         height: unset;
         padding: 0;
         position: static;
@@ -200,7 +206,7 @@ body.ea-mobile-sidebar-visible .main-sidebar {
     grid-template-columns: 0 auto 0;
     margin-top: -14px;
 
-    @media(min-width: 992px) {
+    @media(min-width: 1024px) {
         grid-template-columns: 10px auto 10px;
     }
 }
@@ -218,7 +224,7 @@ body.ea-mobile-sidebar-visible .main-sidebar {
         background: rgba(0, 0, 0, 0.1) center no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" viewBox="0 0 320 512"><path fill="rgba(0, 0, 0, 0.7)" d="M96 32H32C14.33 32 0 46.33 0 64v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zM288 32h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32z"></path></svg>');
     }
 
-    @media(min-width: 992px) {
+    @media(min-width: 1024px) {
         display: block;
     }
 }

diff --git a/assets/css/easyadmin-theme/datalists.scss b/assets/css/easyadmin-theme/datalists.scss
@@ -13,7 +13,7 @@ dl.datalist .data-row {
   align-items: flex-start;
   padding: 15px 20px;
 }
-@media(min-width: 992px) {
+@media(min-width: 1024px) {
   dl.datalist .data-row {
     flex-wrap: nowrap;
   }
@@ -31,7 +31,7 @@ dl.datalist dd {
   margin-bottom: 0;
   padding-right: 10px;
 }
-@media(min-width: 992px) {
+@media(min-width: 1024px) {
   dl.datalist dd {
     flex: 20% 0 0;
   }

diff --git a/assets/css/easyadmin-theme/forms.scss b/assets/css/easyadmin-theme/forms.scss
@@ -27,7 +27,7 @@ input[disabled] {
     align-self: self-start;
 }
 
-@media(min-width: 992px) {
+@media(min-width: 1024px) {
     .form-group label,
     .form-group legend.col-form-label {
         flex: 30% 0 0;
@@ -73,7 +73,7 @@ label.form-check-label {
     flex-direction: column;
 }
 
-@media(min-width: 992px) {
+@media(min-width: 1024px) {
     .form-widget {
         flex: 0 0 55%;
         padding-left: 5px;
@@ -149,7 +149,7 @@ label.form-check-label {
     position: static;
 }
 
-@media(min-width: 992px) {
+@media(min-width: 1024px) {
     .field-boolean .form-widget {
         margin-left: calc(30% + 5px);
     }

diff --git a/assets/css/easyadmin-theme/menu.scss b/assets/css/easyadmin-theme/menu.scss
@@ -97,12 +97,12 @@
 body.ea-sidebar-width-compact .main-sidebar {
     overflow: visible;
 
-    @media(min-width: 992px) {
+    @media(min-width: 1024px) {
         width: 24px;
     }
 }
 
-@media(min-width: 992px) {
+@media(min-width: 1024px) {
     body.ea-sidebar-width-compact .sidebar-menu a {
         padding: 7px 5px 7px 0;
     }

diff --git a/assets/css/easyadmin-theme/variables.css b/assets/css/easyadmin-theme/variables.css
@@ -7,7 +7,7 @@
  --------------------------------------------------------------------------- */
 :root {
     --body-max-width: 1440px;
-    --sidebar-width: 200px;
+    --sidebar-width: 180px;
 
     --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

diff --git a/src/Resources/public/app-custom-rtl.css b/src/Resources/public/app-custom-rtl.css
diff --git a/src/Resources/public/app.css b/src/Resources/public/app.css