From 4e1749c56d74b47a85911154073a765deacc152d Mon Sep 17 00:00:00 2001 From: Jarrod Flesch Date: Wed, 1 Jul 2020 17:56:42 -0400 Subject: [PATCH] slims up the position-panel margin, fixes Popup self-awareness issues --- demo/collections/AllFields.js | 16 ++++++++++++++++ src/client/components/elements/Popup/index.js | 9 ++++++--- .../DraggableSection/PositionPanel/index.scss | 11 ++++++++++- .../components/forms/DraggableSection/index.scss | 1 + .../BlockSelector/BlockSelection/index.scss | 13 +++++++++++++ .../BlockSelector/BlocksContainer/index.scss | 4 ++-- .../Flexible/BlockSelector/index.scss | 8 ++++++++ .../forms/field-types/Repeater/index.scss | 2 +- .../graphics/DefaultBlockImage/index.js | 14 +++++++++----- 9 files changed, 66 insertions(+), 12 deletions(-) create mode 100644 src/client/components/forms/field-types/Flexible/BlockSelector/index.scss diff --git a/demo/collections/AllFields.js b/demo/collections/AllFields.js index efaa11119e..8d50268a59 100644 --- a/demo/collections/AllFields.js +++ b/demo/collections/AllFields.js @@ -1,3 +1,8 @@ +const Email = require('../content-blocks/Email'); +const Quote = require('../content-blocks/Quote'); +const NumberBlock = require('../content-blocks/Number'); +const CallToAction = require('../content-blocks/CallToAction'); + const AllFields = { slug: 'all-fields', labels: { @@ -164,6 +169,17 @@ const AllFields = { }, ], }, + { + type: 'flexible', + label: 'Flexible Content', + name: 'flexible', + minRows: 2, + singularLabel: 'Block', + blocks: [Email, NumberBlock, Quote, CallToAction], + localized: true, + required: true, + timestamps: true, + }, { type: 'relationship', label: 'Relationship to One Collection', diff --git a/src/client/components/elements/Popup/index.js b/src/client/components/elements/Popup/index.js index 159407428b..4482309df8 100644 --- a/src/client/components/elements/Popup/index.js +++ b/src/client/components/elements/Popup/index.js @@ -42,13 +42,16 @@ const Popup = (props) => { const { y: buttonYCoord } = buttonRef.current.getBoundingClientRect(); const windowWidth = window.innerWidth; - const distanceToRightEdge = windowWidth - (contentRightEdge + contentWidth); + const distanceToRightEdge = windowWidth - contentRightEdge; const distanceToLeftEdge = contentRightEdge - contentWidth; - if (distanceToRightEdge <= 0) { + if (horizontalAlign === 'left' && distanceToRightEdge <= 0) { setForceHorizontalAlign('right'); - } else if (distanceToLeftEdge <= 0) { + } else if (horizontalAlign === 'right' && distanceToLeftEdge <= 0) { setForceHorizontalAlign('left'); + } else if (horizontalAlign === 'center' && (distanceToLeftEdge <= contentWidth / 2 || distanceToRightEdge <= contentWidth / 2)) { + if (distanceToRightEdge > distanceToLeftEdge) setForceHorizontalAlign('left'); + else setForceHorizontalAlign('right'); } else { setForceHorizontalAlign(null); } diff --git a/src/client/components/forms/DraggableSection/PositionPanel/index.scss b/src/client/components/forms/DraggableSection/PositionPanel/index.scss index 741fc1c7ed..61b92d3e12 100644 --- a/src/client/components/forms/DraggableSection/PositionPanel/index.scss +++ b/src/client/components/forms/DraggableSection/PositionPanel/index.scss @@ -13,7 +13,7 @@ $controls-top-adjustment: base(.1); } &__controls { - padding-right: base(1.25); + padding-right: base(.65); display: flex; flex-direction: column; justify-content: center; @@ -49,9 +49,18 @@ $controls-top-adjustment: base(.1); text-align: center; color: $color-gray; } + + @include large-break { + padding-right: base(1); + + &__controls { + padding-right: base(.75); + } + } } +// External scopes .field-type.flexible { .position-panel { &__controls-container { diff --git a/src/client/components/forms/DraggableSection/index.scss b/src/client/components/forms/DraggableSection/index.scss index 57bdb948b6..2d56121e43 100644 --- a/src/client/components/forms/DraggableSection/index.scss +++ b/src/client/components/forms/DraggableSection/index.scss @@ -94,6 +94,7 @@ .action-panel__controls { opacity: 1; visibility: visible; + z-index: $z-nav; } } diff --git a/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.scss b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.scss index 88eb937f76..50b5ae7fea 100644 --- a/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.scss +++ b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.scss @@ -13,8 +13,21 @@ background-color: $color-background-gray; } + &__image { + svg, + img { + max-width: 100%; + } + } + &__label { margin-top: base(.25); font-weight: 600; + text-align: center; + white-space: initial; + } + + @include mid-break { + width: unset; } } diff --git a/src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.scss b/src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.scss index 1f5a6e2f3a..c3014d2f5d 100644 --- a/src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.scss +++ b/src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.scss @@ -7,8 +7,8 @@ display: flex; flex-wrap: wrap; align-items: center; - min-width: 300px; - max-width: 450px; + min-width: 450px; + max-width: 80vw; max-height: 300px; position: relative; } diff --git a/src/client/components/forms/field-types/Flexible/BlockSelector/index.scss b/src/client/components/forms/field-types/Flexible/BlockSelector/index.scss new file mode 100644 index 0000000000..6c5e738d1a --- /dev/null +++ b/src/client/components/forms/field-types/Flexible/BlockSelector/index.scss @@ -0,0 +1,8 @@ +@import '../../../../../scss/styles.scss'; + +.block-selector { + + @include mid-break { + min-width: 80vw; + } +} diff --git a/src/client/components/forms/field-types/Repeater/index.scss b/src/client/components/forms/field-types/Repeater/index.scss index 61a21c796e..1ea46f8133 100644 --- a/src/client/components/forms/field-types/Repeater/index.scss +++ b/src/client/components/forms/field-types/Repeater/index.scss @@ -28,7 +28,7 @@ .field-type.repeater { .field-type.repeater__add-button-wrap { - margin-left: base(3.25); + margin-left: base(2.65); } .field-type.repeater__header { diff --git a/src/client/components/graphics/DefaultBlockImage/index.js b/src/client/components/graphics/DefaultBlockImage/index.js index 30d1bb00e6..13ef649576 100644 --- a/src/client/components/graphics/DefaultBlockImage/index.js +++ b/src/client/components/graphics/DefaultBlockImage/index.js @@ -1,6 +1,10 @@ -import React from 'react'; +import React, { useState } from 'react'; +import { v4 as uuid } from 'uuid'; const DefaultBlockImage = () => { + const [patternID] = useState(`pattern${uuid()}`); + const [imageID] = useState(`image${uuid()}`); + return ( { x="0.713013" width="80.574" height="52.7791" - fill="url(#pattern0)" + fill={`url(#${patternID})`} />