Fixed overlap of field handle and map toggle

Author: lindseydiloreto

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## Unreleased
+
+### Fixed
+- Fixed visual overlap of field handle and map toggle occurring in Craft 5.6+. ([#13](https://github.com/doublesecretagency/craft-mapbox/issues/13))
+
 ## 2.0.0 - 2024-02-24
 
 ### Changed

src/web/assets/dist/css/address.css

@@ -1 +1,49 @@
-.field .copytextbtn.gm-toggle-both{margin-right:94px}.field .copytextbtn.gm-toggle-text{margin-right:79px}.field .copytextbtn.gm-toggle-icon{margin-right:21px}.address-field{width:101%}.address-field input{margin-bottom:2px;margin-right:1%}.mb-map{background-color:#f3f7fc;border:1px solid #d7dfe7;border-radius:3px;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);height:240px;margin-right:1%;margin-top:2px;text-align:center;width:99%}.mb-map>div{color:#606d7b;font-style:italic;font-weight:700}.errors .required{border:1px solid #cf1124!important}.superTableContainer.columnLayout .address-field,.superTableContainer.rowLayout .address-field{margin-bottom:3px;margin-top:27px}
+.field .copytextbtn.mb-toggle-both,
+.field .action-btn.mb-toggle-both,
+.field craft-copy-attribute.mb-toggle-both {
+  margin-right: 94px;
+}
+.field .copytextbtn.mb-toggle-text,
+.field .action-btn.mb-toggle-text,
+.field craft-copy-attribute.mb-toggle-text {
+  margin-right: 79px;
+}
+.field .copytextbtn.mb-toggle-icon,
+.field .action-btn.mb-toggle-icon,
+.field craft-copy-attribute.mb-toggle-icon {
+  margin-right: 21px;
+}
+
+.address-field {
+  width: 101%;
+}
+.address-field input {
+  margin-right: 1%;
+  margin-bottom: 2px;
+}
+
+.mb-map {
+  height: 240px;
+  width: 99%;
+  margin-right: 1%;
+  margin-top: 2px;
+  text-align: center;
+  background-color: #f3f7fc;
+  border: 1px solid #d7dfe7;
+  border-radius: 3px;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+}
+.mb-map > div {
+  color: #606d7b;
+  font-weight: bold;
+  font-style: italic;
+}
+
+.errors .required {
+  border: 1px solid #cf1124 !important;
+}
+
+.superTableContainer.columnLayout .address-field, .superTableContainer.rowLayout .address-field {
+  margin-top: 27px;
+  margin-bottom: 3px;
+}

src/web/assets/dist/js/address-settings.js

@@ -1,9 +1,11 @@
 // To accommodate the map toggle, adjust margin of "copy" div
 .field {
-  .copytextbtn {
-    &.gm-toggle-both {margin-right: 94px;}
-    &.gm-toggle-text {margin-right: 79px;}
-    &.gm-toggle-icon {margin-right: 21px;}
+  .copytextbtn,          // Craft < 5.6
+  .action-btn,           // Craft 5.6+ (menu button)
+  craft-copy-attribute { // Craft 5.6+ (copy handle)
+    &.mb-toggle-both {margin-right: 94px;}
+    &.mb-toggle-text {margin-right: 79px;}
+    &.mb-toggle-icon {margin-right: 21px;}
   }
 }
 

src/web/assets/dist/js/address.js

@@ -65,18 +65,30 @@ export default {
                 return toggleOffset;
             }
 
+            // Compile new class
+            const toggleClass = `mb-toggle-${this.config.style}`;
+
             // Look at parent element to get nearby items
-            let copyTextBtn  = this.container.getElementsByClassName('copytextbtn');
-            let instructions = this.container.getElementsByClassName('instructions');
+            let copyTextBtn   = this.container.getElementsByClassName('copytextbtn');
+            let actionBtn     = this.container.getElementsByClassName('action-btn');
+            let copyAttribute = this.container.getElementsByTagName('craft-copy-attribute');
+            let instructions  = this.container.getElementsByClassName('instructions');
 
-            // If "copy" div is visible
+            // If "copy" div is visible (Craft < 5.6)
             if (copyTextBtn.length) {
-                // Compile new class
-                const toggleClass = `gm-toggle-${this.config.style}`;
                 // Add new class to "copy" div
                 copyTextBtn[0].classList.add(toggleClass);
             }
 
+            // If "copy" div is visible (Craft 5.6+)
+            if (copyAttribute.length) {
+                // Add new class to "copy" div
+                copyAttribute[0].classList.add(toggleClass);
+            } else if (actionBtn.length) {
+                // Add new class to menu button
+                actionBtn[0].classList.add(toggleClass);
+            }
+
             // If field has instructions
             if (instructions.length) {
                 // Measure height of instructions div