From fd4ee47065201581f04eb10c2636e2ab1bcec433 Mon Sep 17 00:00:00 2001
From: Luke Towers <luke@luketowers.ca>
Date: Wed, 22 Aug 2018 21:06:06 -0600
Subject: [PATCH] Improved repeater item collapse button when remove button not
 present

---
 .../backend/formwidgets/repeater/assets/css/repeater.css  | 2 ++
 .../backend/formwidgets/repeater/assets/js/repeater.js    | 4 ++--
 .../formwidgets/repeater/assets/less/repeater.less        | 8 ++++++++
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/modules/backend/formwidgets/repeater/assets/css/repeater.css b/modules/backend/formwidgets/repeater/assets/css/repeater.css
index 68d0f8c55..4ca4c3cfe 100644
--- a/modules/backend/formwidgets/repeater/assets/css/repeater.css
+++ b/modules/backend/formwidgets/repeater/assets/css/repeater.css
@@ -22,6 +22,8 @@
 .field-repeater li.field-repeater-item .repeater-item-collapse a,.field-repeater li.field-repeater-item .repeater-item-collapse button{-webkit-transition:transform 0.3s;transition:transform 0.3s;color:#bdc3c7;line-height:20px;display:block;font-size:12px}
 .field-repeater li.field-repeater-item .repeater-item-collapse a:hover,.field-repeater li.field-repeater-item .repeater-item-collapse button:hover,.field-repeater li.field-repeater-item .repeater-item-collapse a:focus,.field-repeater li.field-repeater-item .repeater-item-collapse button:focus{color:#999;text-decoration:none}
 .field-repeater li.field-repeater-item .repeater-item-remove{position:absolute;top:4px;right:5px;z-index:90}
+.field-repeater li.field-repeater-item .repeater-item-remove.disabled{display:none}
+.field-repeater li.field-repeater-item .repeater-item-remove.disabled + .repeater-item-collapse{right:7px}
 .field-repeater li.field-repeater-item .repeater-item-remove .close{float:none;display:inline-block}
 .field-repeater li.field-repeater-item .repeater-item-collapse,.field-repeater li.field-repeater-item .repeater-item-handle,.field-repeater li.field-repeater-item .repeater-item-remove{width:20px;height:20px;text-align:center}
 .field-repeater li.field-repeater-item:hover .repeater-item-collapse,.field-repeater li.field-repeater-item:active .repeater-item-collapse,.field-repeater li.field-repeater-item:hover .repeater-item-handle,.field-repeater li.field-repeater-item:active .repeater-item-handle,.field-repeater li.field-repeater-item:hover .repeater-item-remove,.field-repeater li.field-repeater-item:active .repeater-item-remove{opacity:1}
diff --git a/modules/backend/formwidgets/repeater/assets/js/repeater.js b/modules/backend/formwidgets/repeater/assets/js/repeater.js
index 042bba684..2363c8ac9 100644
--- a/modules/backend/formwidgets/repeater/assets/js/repeater.js
+++ b/modules/backend/formwidgets/repeater/assets/js/repeater.js
@@ -125,9 +125,9 @@
     Repeater.prototype.togglePrompt = function () {
         if (this.options.minItems && this.options.minItems > 0) {
             var repeatedItems = this.$el.find('> .field-repeater-items > .field-repeater-item').length,
-                $removeItemBtn = this.$el.find('> .field-repeater-items > .field-repeater-item > .repeater-item-remove')
+                $removeItemBtn = this.$el.find('> .field-repeater-items > .field-repeater-item > .repeater-item-remove');
 
-            $removeItemBtn.toggle(repeatedItems > this.options.minItems)
+            $removeItemBtn.toggleClass('disabled', !(repeatedItems > this.options.minItems))
         }
 
         if (this.options.maxItems && this.options.maxItems > 0) {
diff --git a/modules/backend/formwidgets/repeater/assets/less/repeater.less b/modules/backend/formwidgets/repeater/assets/less/repeater.less
index a94db02fc..dbacf02d1 100644
--- a/modules/backend/formwidgets/repeater/assets/less/repeater.less
+++ b/modules/backend/formwidgets/repeater/assets/less/repeater.less
@@ -155,6 +155,14 @@
             right: 5px;
             z-index: 90;
 
+            &.disabled {
+                display: none;
+
+                + .repeater-item-collapse {
+                    right: 7px;
+                }
+            }
+
             .close {
                 float: none;
                 display: inline-block;