Added mobile optimization for style preview

diff --git a/wcfsetup/install/files/acp/style/acpStyleEditor.css b/wcfsetup/install/files/acp/style/acpStyleEditor.css
index 89a9c7748db99b1f1c3ec645785453b6905bdfa6..ccad365c09d04d9c59c83083ee5000b6a9ae37d7 100644 (file)
--- a/wcfsetup/install/files/acp/style/acpStyleEditor.css
+++ b/wcfsetup/install/files/acp/style/acpStyleEditor.css
@@ -73,14 +73,16 @@
 
 /* ### wrapper sidebar ### */
 .spSidebarBox { background-color: rgb(217, 237, 247); margin-bottom: 10px; padding: 10px; }
-.spSidebarBox.pointer { position: relative; }
-.spSidebarBox.pointer::before { border: 10px solid transparent; border-right-color: rgb(217, 237, 247); content: ""; display: block; left: -20px; position: absolute; }
 .spColor { align-items: center; }
 .spColor:not(:first-child) { margin-top: 5px; }
 .spColorBox { background-color: #fff; border: 1px solid #ccc; margin-right: 10px !important; padding: 1px; }
 .spColorBox > span { display: block; height: 24px; width: 24px; }
 .spVariable, .spDescription { display: block; font-size: 12px; }
 .spVariable { font-family: Consolas, Courier, monospace; }
+@media (min-width: 769px) {
+       .spSidebarBox.pointer { position: relative; }
+       .spSidebarBox.pointer::before { border: 10px solid transparent; border-right-color: rgb(217, 237, 247); content: ""; display: block; left: -20px; position: absolute; }
+}
 
 /* ### style region marker ### */
 #stylePreviewRegionMarker { border: 3px solid rgba(255, 0, 0, .4); position: absolute; pointer-events: none; }

diff --git a/wcfsetup/install/files/acp/templates/styleAdd.tpl b/wcfsetup/install/files/acp/templates/styleAdd.tpl
index 6a44aae0d30f09074e35a747c9f2a336b9d1c5cf..71b11c81f64c3fe72a796d8661de3e20aa7ce3b4 100644 (file)
--- a/wcfsetup/install/files/acp/templates/styleAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/styleAdd.tpl
@@ -480,8 +480,7 @@
                                                                <ol class="inlineList">
                                                                        <li><a>Lorem</a></li>
                                                                        <li><a>Ipsum Dolor</a></li>
-                                                                       <li><a>Sit Amet</a></li>
-                                                                       <li><a>Consetetur</a></li>
+                                                                       <li><a>Sit Amet Lorem</a></li>
                                                                        
                                                                        <li class="active">
                                                                                <a>Sadipscing</a>

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Style/Editor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Style/Editor.js
index 5600a99695725cab54edf1546eadc49b1acf8f25..393204d92905e48dfb72ff99bcd7659b9c125d15 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Style/Editor.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Style/Editor.js
@@ -6,7 +6,7 @@
  * @license    GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @module     WoltLabSuite/Core/Acp/Ui/Style/Editor
  */
-define(['Ajax', 'Dictionary', 'Dom/Util', 'EventHandler'], function(Ajax, Dictionary, DomUtil, EventHandler) {
+define(['Ajax', 'Core', 'Dictionary', 'Dom/Util', 'EventHandler', 'Ui/Screen'], function(Ajax, Core, Dictionary, DomUtil, EventHandler, UiScreen) {
        "use strict";
        
        var _stylePreviewRegions = new Dictionary();
@@ -28,6 +28,12 @@ define(['Ajax', 'Dictionary', 'Dom/Util', 'EventHandler'], function(Ajax, Dictio
                        }
                        
                        this._initVisualEditor(options.styleRuleMap);
+                       
+                       UiScreen.on('screen-sm-down', {
+                               match: this.hideVisualEditor.bind(this),
+                               unmatch: this.showVisualEditor.bind(this),
+                               setup: this.hideVisualEditor.bind(this)
+                       });
                },
                
                /**
@@ -262,6 +268,20 @@ define(['Ajax', 'Dictionary', 'Dom/Util', 'EventHandler'], function(Ajax, Dictio
                                
                                updateCSSRule(variableName, colorField.style.getPropertyValue('background-color'));
                        });
+               },
+               
+               hideVisualEditor: function() {
+                       elHide(elById('spWindow'));
+                       elById('spVariablesWrapper').style.removeProperty('transform');
+                       elHide(elById('stylePreviewRegionMarker'));
+               },
+               
+               showVisualEditor: function() {
+                       elShow(elById('spWindow'));
+                       
+                       window.setTimeout(function() {
+                               Core.triggerEvent(elById('spCategories'), 'change');
+                       }, 100);
                }
        };