Fixing small UI issues (#2961)

Adding styles to prevent menu item title text to expand if title is too long. Fixed GraphiQL and Media UI after changing the collapsed admin menu size. Aligning more properly the collapsible chevron icon vertically.
OrchardCMS · Dec 31, 2018 · 4477749 · 4477749
1 parent 9c507fb
commit 4477749
Show file tree

Hide file tree

Showing 10 changed files with 43 additions and 29 deletions.
diff --git a/src/OrchardCore.Modules/OrchardCore.Apis.GraphQL/Assets/scss/graphiql-orchard.scss b/src/OrchardCore.Modules/OrchardCore.Apis.GraphQL/Assets/scss/graphiql-orchard.scss
@@ -1,6 +1,6 @@
 #graphiql {
     position: absolute;
-    top: 59px;
+    top: 49px;
     bottom: 0;
     right: 0;
     left: 260px;
@@ -13,7 +13,7 @@
 
 
 .left-sidebar-compact #graphiql {
-    left: 60px;
+    left: 48px;
     transition: left 0.2s ease-in-out, width 0.2s ease-in-out;
 }
 

diff --git a/src/OrchardCore.Modules/OrchardCore.Apis.GraphQL/wwwroot/Styles/graphiql-orchard.css b/src/OrchardCore.Modules/OrchardCore.Apis.GraphQL/wwwroot/Styles/graphiql-orchard.css
@@ -5,7 +5,7 @@
 
 #graphiql {
   position: absolute;
-  top: 59px;
+  top: 49px;
   bottom: 0;
   right: 0;
   left: 260px;
@@ -14,7 +14,7 @@
     overflow-x: unset; }
 
 .left-sidebar-compact #graphiql {
-  left: 60px;
+  left: 48px;
   transition: left 0.2s ease-in-out, width 0.2s ease-in-out; }
 
 .graphiql-container .docExplorerShow {

diff --git a/src/OrchardCore.Modules/OrchardCore.Apis.GraphQL/wwwroot/Styles/graphiql-orchard.min.css b/src/OrchardCore.Modules/OrchardCore.Apis.GraphQL/wwwroot/Styles/graphiql-orchard.min.css
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/Assets/scss/_main-layout.scss b/src/OrchardCore.Modules/OrchardCore.Media/Assets/scss/_main-layout.scss
@@ -52,10 +52,5 @@
 }
 
 .left-sidebar-compact #mediaApp {
-    position: absolute;
-    top: 128px;
-    bottom: 0;
-    right: 0;
-    left: 60px;
-    transition: left 0.2s ease-in-out, width 0.2s ease-in-out;
+    left: 48px;
 }
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/Assets/scss/media.scss b/src/OrchardCore.Modules/OrchardCore.Media/Assets/scss/media.scss
@@ -19,4 +19,4 @@
 @import "drop-zone.scss";
 @import "media-field.scss";
 @import "modal-view.scss";
-@import "utils.scss"; 
+@import "utils.scss";
diff --git a/src/OrchardCore.Modules/OrchardCore.Media/wwwroot/Styles/media.css b/src/OrchardCore.Modules/OrchardCore.Media/wwwroot/Styles/media.css
@@ -39,12 +39,7 @@
   height: 100%; }
 
 .left-sidebar-compact #mediaApp {
-  position: absolute;
-  top: 128px;
-  bottom: 0;
-  right: 0;
-  left: 60px;
-  transition: left 0.2s ease-in-out, width 0.2s ease-in-out; }
+  left: 48px; }
 
 .upload {
   background-color: rgba(0, 0, 0, 0.05);

diff --git a/src/OrchardCore.Modules/OrchardCore.Media/wwwroot/Styles/media.min.css b/src/OrchardCore.Modules/OrchardCore.Media/wwwroot/Styles/media.min.css
diff --git a/src/OrchardCore.Themes/TheAdmin/Assets/scss/TheAdmin.scss b/src/OrchardCore.Themes/TheAdmin/Assets/scss/TheAdmin.scss
@@ -186,7 +186,7 @@ body:not(.left-sidebar-compact) {
 
         .chevron {
             position: absolute;
-            top: 33%;
+            top: 38%;
             left: 100%;
             margin-left: -25px;
         }
@@ -273,6 +273,10 @@ body:not(.left-sidebar-compact) {
                         > span.title {
                             flex-grow: 1;
                             font-size: 14px;
+                            width: calc(100% - 48px - 45px);
+                            overflow: hidden;
+                            white-space: nowrap;
+                            text-overflow: ellipsis;
                         }
                     }
 
@@ -479,7 +483,7 @@ body:not(.left-sidebar-compact) {
 
         .chevron {
             position: absolute;
-            top: 33%;
+            top: 38%;
             left: 100%;
             margin-left: -25px;
         }
@@ -561,6 +565,10 @@ body:not(.left-sidebar-compact) {
                     > span.title {
                         flex-grow: 1;
                         font-size: 14px;
+                        width: calc(100% - 48px);
+                        overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
                     }
                 }
 
@@ -664,7 +672,7 @@ body:not(.left-sidebar-compact) {
                     display: flex;
 
                     .title {
-                        padding-left: 20px;
+                        padding: 0 20px;
 
                         &:hover {
                             background-color: $gray-100 !important;
@@ -688,6 +696,10 @@ body:not(.left-sidebar-compact) {
                         flex-grow: 1;
                         font-size: 14px;
                         font-weight: bold;
+                        width: calc(100% - 48px);
+                        overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
                     }
 
                     > span.title:after {

diff --git a/src/OrchardCore.Themes/TheAdmin/wwwroot/Styles/TheAdmin.css b/src/OrchardCore.Themes/TheAdmin/wwwroot/Styles/TheAdmin.css
@@ -7084,7 +7084,7 @@ body:not(.left-sidebar-compact) #ta-left-sidebar {
     display: block; }
   body:not(.left-sidebar-compact) #ta-left-sidebar .chevron {
     position: absolute;
-    top: 33%;
+    top: 38%;
     left: 100%;
     margin-left: -25px; }
   body:not(.left-sidebar-compact) #ta-left-sidebar label, body:not(.left-sidebar-compact) #ta-left-sidebar a {
@@ -7145,7 +7145,11 @@ body:not(.left-sidebar-compact) #ta-left-sidebar {
             width: 35px; }
         body:not(.left-sidebar-compact) #ta-left-sidebar #left-nav > ul.menu-admin .item-label > span.title {
           flex-grow: 1;
-          font-size: 14px; }
+          font-size: 14px;
+          width: calc(100% - 48px - 45px);
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis; }
       body:not(.left-sidebar-compact) #ta-left-sidebar #left-nav > ul.menu-admin > li > .item-label > .collapse-icon {
         color: rgba(255, 0, 0, 0);
         display: flex;
@@ -7277,7 +7281,7 @@ body:not(.left-sidebar-compact) #ta-left-sidebar {
     display: block; }
   .left-sidebar-compact #ta-left-sidebar .chevron {
     position: absolute;
-    top: 33%;
+    top: 38%;
     left: 100%;
     margin-left: -25px; }
   .left-sidebar-compact #ta-left-sidebar label, .left-sidebar-compact #ta-left-sidebar a {
@@ -7332,7 +7336,11 @@ body:not(.left-sidebar-compact) #ta-left-sidebar {
         width: 37px; }
       .left-sidebar-compact #ta-left-sidebar #left-nav > ul .item-label > span.title {
         flex-grow: 1;
-        font-size: 14px; }
+        font-size: 14px;
+        width: calc(100% - 48px);
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis; }
     .left-sidebar-compact #ta-left-sidebar #left-nav > ul > li > .item-label > .collapse-icon {
       color: rgba(255, 0, 0, 0);
       display: flex;
@@ -7399,7 +7407,7 @@ body:not(.left-sidebar-compact) #ta-left-sidebar {
       padding-left: 0px !important;
       display: flex; }
       .left-sidebar-compact #ta-left-sidebar #left-nav > ul > li > .item-label .title {
-        padding-left: 20px; }
+        padding: 0 20px; }
         .left-sidebar-compact #ta-left-sidebar #left-nav > ul > li > .item-label .title:hover {
           background-color: #f8f9fa !important;
           color: #495057; }
@@ -7414,7 +7422,11 @@ body:not(.left-sidebar-compact) #ta-left-sidebar {
       .left-sidebar-compact #ta-left-sidebar #left-nav > ul > li > .item-label > span.title {
         flex-grow: 1;
         font-size: 14px;
-        font-weight: bold; }
+        font-weight: bold;
+        width: calc(100% - 48px);
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis; }
       .left-sidebar-compact #ta-left-sidebar #left-nav > ul > li > .item-label > span.title:after {
         content: "";
         height: 1px;

diff --git a/src/OrchardCore.Themes/TheAdmin/wwwroot/Styles/TheAdmin.min.css b/src/OrchardCore.Themes/TheAdmin/wwwroot/Styles/TheAdmin.min.css