fix: imaged full width view in edit mode (#570)

RedTurtle · Mar 13, 2024 · 053183b · 053183b
1 parent beb07ad
commit 053183b
Showing 1 changed file with 29 additions and 4 deletions.
diff --git a/src/theme/ItaliaTheme/Views/_common.scss b/src/theme/ItaliaTheme/Views/_common.scss
@@ -68,14 +68,39 @@ picture.volto-image.responsive img.full-width,
   margin-left: -50vw !important;
   object-fit: cover;
 
+  $toolbar-width: 80px;
+  $toolbar-collapsed-width: 20px;
+  $sidebar-width: 375px;
+  $sidebar-collapsed-width: 20px;
+
   .has-toolbar & {
-    left: calc(50% + 40px);
-    width: calc(100vw - 80px) !important;
+    left: calc(50% + calc($toolbar-width / 2));
+    width: calc(100vw - $toolbar-width) !important;
+  }
+  .has-toolbar.has-sidebar & {
+    $toolbars-width: calc($toolbar-width + $sidebar-width);
+    left: calc(50% + calc($toolbars-width / 2));
+    width: calc(100vw - $toolbars-width) !important;
+  }
+  .has-toolbar.has-sidebar-collapsed & {
+    $toolbars-width: calc($toolbar-width + $sidebar-collapsed-width);
+    left: calc(50% + calc($toolbars-width / 2));
+    width: calc(100vw - $toolbars-width) !important;
   }
 
   .has-toolbar-collapsed & {
-    left: calc(50% + 10px);
-    width: calc(100vw - 20px) !important;
+    left: calc(50% + calc($toolbar-collapsed-width / 2));
+    width: calc(100vw - $toolbar-collapsed-width) !important;
+  }
+  .has-toolbar-collapsed.has-sidebar & {
+    $toolbars-width: calc($toolbar-collapsed-width + $sidebar-width);
+    left: calc(50% + calc($toolbars-width / 2));
+    width: calc(100vw - $toolbars-width) !important;
+  }
+  .has-toolbar-collapsed.has-sidebar-collapsed & {
+    $toolbars-width: calc($toolbar-collapsed-width + $sidebar-collapsed-width);
+    left: calc(50% + calc($toolbars-width / 2));
+    width: calc(100vw - $toolbars-width) !important;
   }
 }