slims up the position-panel margin, fixes Popup self-awareness issues

2020-07-01 17:56:42 -04:00
parent 2f60a527da
commit 4e1749c56d
9 changed files with 66 additions and 12 deletions
--- 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);
      }
--- 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 {
--- 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;
      }
    }

--- 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;
  }
 }
--- 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;
 }
--- a/src/client/components/forms/field-types/Flexible/BlockSelector/index.scss
+++ 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;
+  }
+}
--- 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  {
--- 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 (
    <svg
      width="82"
@@ -12,22 +16,22 @@ const DefaultBlockImage = () => {
        x="0.713013"
        width="80.574"
        height="52.7791"
-        fill="url(#pattern0)"
+        fill={`url(#${patternID})`}
      />
      <defs>
        <pattern
-          id="pattern0"
+          id={`${patternID}`}
          patternContentUnits="objectBoundingBox"
          width="1"
          height="1"
        >
          <use
-            xlinkHref="#image0"
+            xlinkHref={`#${imageID}`}
            transform="scale(0.00387597 0.00591716)"
          />
        </pattern>
        <image
-          id="image0"
+          id={imageID}
          width="258"
          height="169"
          xlinkHref="data:image/png;base64,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"