V8: Make "Open in split view" look better in narrow viewports (umbrac…

…o#4619) * Make "Open in split view" look better in narrow viewports * Add white background to inactive split view button * Better support for long culture names
Nuklon · Mar 19, 2019 · 3a0dd23 · 3a0dd23
1 parent 532f69e
commit 3a0dd23
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor.less b/src/Umbraco.Web.UI.Client/src/less/components/editor.less
@@ -195,6 +195,7 @@ a.umb-variant-switcher__toggle {
     justify-content: space-between;
 	align-items: center;
 	border-bottom: 1px solid @gray-9;
+    position: relative;
     &:hover .umb-variant-switcher__name-wrapper {
 
     }
@@ -246,10 +247,15 @@ a.umb-variant-switcher__toggle {
 }
 
 .umb-variant-switcher__split-view {
-	font-size: 13px;
-	display: none;
-	padding: 16px 20px;
-
+    font-size: 13px;
+    display: none;
+    padding: 16px 20px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-color: @white;
+
     &:hover {
         background-color: @ui-option-hover;
         color: @ui-option-type-hover;

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
@@ -38,7 +38,7 @@
                         <span>{{vm.currentVariant.language.name}}</span>
                     </span>
 
-                    <umb-dropdown ng-if="vm.dropdownOpen" style="width: 100%; max-height: 250px; overflow-y: scroll; margin-top: 5px;" on-close="vm.dropdownOpen = false" umb-keyboard-list>
+                    <umb-dropdown ng-if="vm.dropdownOpen" style="min-width: 100%; max-height: 250px; overflow-y: auto; margin-top: 5px;" on-close="vm.dropdownOpen = false" umb-keyboard-list>
                         <umb-dropdown-item class="umb-variant-switcher__item" ng-class="{'umb-variant-switcher_item--current': variant.active, 'umb-variant-switcher_item--not-allowed': variantIsOpen(variant.language.culture)}" ng-repeat="variant in content.variants">
                             <a href="" class="umb-variant-switcher__name-wrapper" ng-click="selectVariant($event, variant)" prevent-default>
                                 <span class="umb-variant-switcher__name" ng-class="{'bold': variant.language.isDefault}">{{variant.language.name}}</span>