From 119ab367b8f9f5b59fc7bb92929ba818b66f867f Mon Sep 17 00:00:00 2001
From: Avinash Agarwal <agarwalavinash14@gmail.com>
Date: Mon, 1 Apr 2019 23:17:10 +0530
Subject: [PATCH] remove-mod-btn-option-added

---
 client/styles/global.scss       |  2 +-
 client/views/create/create.html |  5 +++++
 client/views/create/create.js   | 22 +++++++++++++++++++++-
 client/views/delete/delete.scss | 18 ++++++++++++++++++
 4 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/client/styles/global.scss b/client/styles/global.scss
index 07fa29e7..e11fa92b 100644
--- a/client/styles/global.scss
+++ b/client/styles/global.scss
@@ -474,7 +474,7 @@ a {
 }
 
 .plusbuttoncontainer {
-	width: 51px;
+	width: 102px;
 	height: 50px;
 }
 
diff --git a/client/views/create/create.html b/client/views/create/create.html
index c3b235b7..51233c64 100644
--- a/client/views/create/create.html
+++ b/client/views/create/create.html
@@ -13,6 +13,11 @@
 						<div class="instancemodsplus">
 							+
 						</div>
+						{{#if minusButton}}
+							<div class="instancemodsminus">
+								-
+							</div>
+						{{/if}}
 					</div>
 				</div>
 				<div class="dropdowncontainer">
diff --git a/client/views/create/create.js b/client/views/create/create.js
index b9cf1b50..36068c6c 100644
--- a/client/views/create/create.js
+++ b/client/views/create/create.js
@@ -14,6 +14,13 @@ Template.create.onRendered(() => {
 
 /* eslint-disable func-names, no-unused-vars */
 
+Template.create.helpers({
+  minusButton() {
+    const spacers = document.getElementsByClassName('emptyinputspacer');
+    return spacers.length === 1;
+  },
+});
+
 Template.create.events({
   'click .checkbox': function (event, template) {
     // console.log(event);
@@ -53,7 +60,8 @@ Template.create.events({
       $('.instancemodsinput').removeClass('lastmodinput');
       $('.plusbuttoncontainer').removeClass('lastmodinput');
       $('.instancemodsplus').remove();
-      $('<input class="instancemodsinput lastmodinput" type="text" placeholder="Moderator email..."><div class="emptyinputspacer lastinputspacer"><div class="plusbuttoncontainer"><div class="instancemodsplus">+</div></div></div>').insertAfter('.lastinputspacer').last();
+      $('.instancemodsminus').remove();
+      $('<input class="instancemodsinput lastmodinput" type="text" placeholder="Moderator email..."><div class="emptyinputspacer lastinputspacer"><div class="plusbuttoncontainer"><div class="instancemodsplus">+</div><div class="instancemodsminus">-</div></div></div>').insertAfter('.lastinputspacer').last();
       $('.lastinputspacer').first().removeClass('lastinputspacer');
       $('#instancebottominputcontainer').height((index, height) => (height + 50));
     } else {
@@ -61,6 +69,18 @@ Template.create.events({
       return false;
     }
   },
+  'click .instancemodsminus': function (event, template) {
+    const instancemodsinput = document.getElementsByClassName('instancemodsinput');
+    const spacers = document.getElementsByClassName('emptyinputspacer');
+    spacers[spacers.length - 2].parentNode.removeChild(spacers[spacers.length - 2]);
+    instancemodsinput[instancemodsinput.length - 1].parentNode.removeChild(instancemodsinput[instancemodsinput.length - 1]);
+    if (spacers.length === 1) {
+      $('<div class="emptyinputspacer lastinputspacer"><div class="plusbuttoncontainer"><div class="instancemodsplus">+</div></div></div>').insertAfter('.lastinputspacer').last();
+      $('.lastinputspacer').first()[0].remove();
+    } else {
+      instancemodsinput[instancemodsinput.length - 2].classList.add('lastmodinput');
+    }
+  },
   'click #buttonarea': function (event, template) {
     if (!Meteor.user()) {
       return false;
diff --git a/client/views/delete/delete.scss b/client/views/delete/delete.scss
index 029a3a5d..832464ce 100644
--- a/client/views/delete/delete.scss
+++ b/client/views/delete/delete.scss
@@ -26,3 +26,21 @@
 		}
 	}
 }
+
+.instancemodsminus {
+	width: 31px;
+	float: left;
+	height: 30px;
+	margin: 10px;
+	background-color: #d82727;
+	border-radius: 5px;
+	color: white;
+	font-weight: 700;
+	text-align: center;
+	font-size: 23px;
+	cursor: pointer;
+
+  &:hover {
+		background-color: #ea6153;
+	}
+}