🐛 Fix viewport size when collapsing sidebar

frontend/resources/styles/main/partials/left-toolbar.scss

@@ -5,13 +5,15 @@
 // Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
 // Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
+$width-left-toolbar: 40px;
+
 .left-toolbar {
   background-color: $color-gray-50;
   bottom: 0;
   height: 100%;
   position: fixed;
   left: 0;
-  width: 40px;
+  width: $width-left-toolbar;
   z-index: 11;
 }
 
@@ -76,4 +78,4 @@
 
 }
 
-    
+    

frontend/resources/styles/main/partials/sidebar.scss

@@ -5,6 +5,8 @@
 // Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
 // Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
+$width-settings-bar: 15rem;
+
 .settings-bar {
   background-color: $color-gray-50;
   border-left: 1px solid $color-gray-60;
@@ -12,7 +14,7 @@
   height: 100%;
   position: fixed;
   right: 0;
-  width: 15rem;
+  width: $width-settings-bar;
   z-index: 10;
 
   &.settings-bar-left {

frontend/resources/styles/main/partials/workspace.scss

@@ -25,7 +25,6 @@
     display: flex;
     justify-content: space-between;
 
-
     &.separator {
       border-top: 1px solid $color-gray-10;
       padding: 0px;
@@ -61,19 +60,18 @@
   background-color: $color-canvas;
   display: flex;
   height: 100%;
-  width: calc(100% - 520px);
+  width: calc(100% - #{$width-left-toolbar} - 2 * #{$width-settings-bar});
   padding: 0;
   margin: 0;
   position: fixed;
-  right: 240px;
+  right: $width-settings-bar;
 
   &.scrolling {
     cursor: grab;
   }
 
   &.no-tool-bar-right {
-    padding-right: 0;
-    width: calc(100% - 230px);
+    width: calc(100% - #{$width-left-toolbar} - #{$width-settings-bar});
     right: 0;
 
     .coordinates {
@@ -82,8 +80,7 @@
   }
 
   &.no-tool-bar-left {
-    padding-left: 0;
-    width: calc(100% - 230px);
+    width: calc(100% - #{$width-left-toolbar} - #{$width-settings-bar});
 
     &.no-tool-bar-right {
       width: 100%;
@@ -96,7 +93,7 @@
     bottom: -10px;
     padding-left: 5px;
     position: fixed;
-    right: 248px;
+    right: calc(#{$width-settings-bar} + 10px);
     text-align: center;
     width: 100px;
     padding-bottom: 2px;
@@ -201,8 +198,6 @@
   fill: $color-primary-dark;
 }
 
-
-
 .multiuser-cursor {
   align-items: center;
   display: flex;

frontend/src/uxbox/main/ui/workspace.cljs

@@ -40,7 +40,7 @@
   [{:keys [page file layout project] :as params}]
   (let [left-sidebar? (not (empty? (keep layout [:layers :sitemap
                                                  :document-history :libraries])))
-        right-sidebar? (not (empty? (keep layout [:icons :drawtools :element-options])))
+        right-sidebar? (not (empty? (keep layout [:icons :element-options])))
         classes (classnames
                  :no-tool-bar-right (not right-sidebar?)
                  :no-tool-bar-left (not left-sidebar?))

frontend/src/uxbox/main/ui/workspace/viewport.cljs

@@ -393,10 +393,10 @@
               (events/unlistenByKey key5)
               )))
 
-        options (mf/deref refs/workspace-page-options)
-        ]
+        options (mf/deref refs/workspace-page-options)]
 
     (mf/use-effect on-mount)
+    (mf/use-effect (mf/deps layout) on-resize)
 
     [:svg.viewport
      {:preserveAspectRatio "xMidYMid meet"