Merge pull request #26 from eea/develop

Develop

CHANGELOG.md

@@ -4,8 +4,20 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [3.4.4](https://github.com/eea/volto-block-style/compare/3.4.3...3.4.4)
+
+- Stretch styles for Edit specific cases [`a36b568`](https://github.com/eea/volto-block-style/commit/a36b5680178604ced2a55944777dd647e2affc0c)
+- Stretch description titles [`8ced579`](https://github.com/eea/volto-block-style/commit/8ced5793153a1cd896919ef32822c866f88112a1)
+- Lint fix [`bf6b9d7`](https://github.com/eea/volto-block-style/commit/bf6b9d7008f29c4527bd87a2226ddd10b2b72923)
+- Stretch mode fix overflow in edit mode [`c723110`](https://github.com/eea/volto-block-style/commit/c7231100f7370532d2cb8b7e556d4aa3b9ec3a25)
+- Wide screen stretch max-width [`40efbc9`](https://github.com/eea/volto-block-style/commit/40efbc953423a646e703baa7d3b193078ba6bb3d)
+- Stretch for narrow view with authentication conditionals [`49417e1`](https://github.com/eea/volto-block-style/commit/49417e1fe15919b3b4d63e2c0a6567995c6c2f46)
+
 #### [3.4.3](https://github.com/eea/volto-block-style/compare/3.4.2...3.4.3)
 
+> 24 August 2021
+
+- Release [`#25`](https://github.com/eea/volto-block-style/pull/25)
 - Stretch styles [`eb1c548`](https://github.com/eea/volto-block-style/commit/eb1c5480106f4ac29d478a86b8491a4de3c289cf)
 - Stretch style schema fix [`5e9e761`](https://github.com/eea/volto-block-style/commit/5e9e7616349e9a9265eb943aea51b57ad09425e5)
 - Add Stretch style widget WIP [`a54f047`](https://github.com/eea/volto-block-style/commit/a54f0475184deb26f959135c6dd988bd5996fa2e)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-block-style",
-  "version": "3.4.3",
+  "version": "3.4.4",
   "description": "volto-block-style: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

src/Blocks/StretchBlock.jsx

@@ -36,6 +36,7 @@ const StretchBlock = ({ stretch, onChangeBlock, data, intl, block }) => {
         <Button
           icon
           basic
+          title={'Default'}
           aria-label={intl.formatMessage(messages.fit)}
           onClick={() => onStretchBlock('fit')}
           active={data.stretch === 'fit' || !data.stretch}
@@ -47,6 +48,7 @@ const StretchBlock = ({ stretch, onChangeBlock, data, intl, block }) => {
         <Button
           icon
           basic
+          title={'Stretch block to the edges'}
           aria-label={intl.formatMessage(messages.stretch)}
           onClick={() => onStretchBlock('stretch')}
           active={data.stretch === 'stretch'}

src/Widgets/range.css

@@ -5,11 +5,82 @@
 }
 
 .stretch {
-  margin: 0 -1rem;
+  position: relative;
+  right: 50%;
+  left: 50%;
+  width: 100vw !important;
+  margin-right: -50vw !important;
+  margin-left: -50vw !important;
 }
 
-@media (max-width: 1199px) {
+/* detect if is authenticated or anon */
+body:not(.is-authenticated) .stretch {
+  padding: 0 2rem;
+}
+
+/* detect if is logged in but in view with toolbar open */
+body:not(.view-editview):not(.is-anonymous):not(.has-toolbar-collapsed)
+  .stretch {
+  padding: 0 4.5rem;
+}
+
+/* detect if its in edit mode */
+
+/* detect if both sidebars open */
+body:not(.view-viewview):not(.has-sidebar-collapsed):not(.has-toolbar-collapsed)
+  .stretch {
+  padding: 0 16.2rem;
+}
+/* detect if both sidebars closed */
+body:not(.view-viewview):not(.has-sidebar):not(.has-toolbar) .stretch {
+  padding: 0 3.2rem;
+}
+
+/* detect if left sidebar open right sidebar closed */
+body:not(.view-viewview):not(.has-sidebar):not(.has-toolbar-collapsed)
+  .stretch {
+  padding: 0 5.2rem;
+}
+/* detect if left sidebar closed right sidebar open */
+body:not(.view-viewview):not(.has-sidebar-collapsed):not(.has-toolbar)
+  .stretch {
+  padding: 0 14.3rem;
+}
+
+body:not(.is-anonymous):not(.has-toolbar) .stretch {
+  padding: 0 2.6rem;
+}
+@media (min-width: 1700px) {
+  .stretch {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+    transform: translate(-50%, 0%);
+  }
+
+  body:not(.view-viewview) .stretch {
+    max-width: 1790px !important;
+    transform: translate(-57.5%, 0%);
+  }
+
+  body:not(.view-viewview):not(.has-sidebar):not(.has-toolbar) .stretch {
+    transform: translate(-55.8%, 0%);
+  }
+
+  body:not(.is-anonymous):not(.has-toolbar) .stretch {
+    max-width: 1720px;
+  }
+
+  body:not(.is-anonymous):not(.has-toolbar-collapsed) .stretch {
+    max-width: 1778px;
+  }
+
+  body:not(.is-authenticated) .stretch {
+    max-width: 1700px;
+  }
+}
+
+@media (max-width: 786px) {
   .stretch {
-    margin: 0 -0.65rem;
+    padding: 0 !important;
   }
 }