Updated shrink and grow

index.html → vici.html

@@ -16,23 +16,7 @@
       </details>
     </header>
     <section id="platform-content">
-      <!--Below is an example, should be commented later-->
-      <article id="form-core-1" style="left:10rem;top:10rem;z-index:1;">
-        <form style="width:25rem;height:6rem;">
-          <input type="text" name="head" value="head"/>
-          <input type="text" name="body" value="body"/>
-          <input type="text" name="tail" value="tail"/>
-        </form>
-        <!--This is the below element which includes buttons to do different keyu elements-->
-        <details>
-          <summary>Options</summary>
-          <button name="form-core-1" onclick="moveRecord(this.name)">Move</button>
-          <button name="form-core-1" onclick="saveRecord(this.name)">Sync</button>
-          <button name="form-core-1" onclick="killRecord(this.name)">Delete</button>
-          <button name="form-core-1" onclick="pullRecord(this.name)">Front</button>
-          <button name="form-core-1" onclick="pushRecord(this.name)">Back</button>
-        </details>
-      </article>
+      <!--JS will import these-->
     </section>
     <footer id="platform-footer">
       <!--Generic footer for setttings and tools and search, not 100% sure what should go here-->

vici.js

@@ -4,11 +4,14 @@ function createOptionsForCards(coreId){
     const mainDetail = document.createElement("details");
     const summaryElement = document.createElement('summary');
     summaryElement.appendChild(document.createTextNode("Options"));
+    mainDetail.appendChild(summaryElement);
     const moveId = coreId;
     const saveId = coreId;
     const killId = coreId;
     const pullId = coreId;
     const pushId = coreId;
+    const moreId = coreId;
+    const lessId = coreId;
     const moveButton = document.createElement("button");
     moveButton.appendChild(document.createTextNode("Move"));
     moveButton.name = moveId;
@@ -34,7 +37,16 @@ function createOptionsForCards(coreId){
     pushButton.name = pushId;
     pushButton.setAttribute("onclick", "pushRecord(this.name)");
     mainDetail.appendChild(pushButton);
-    mainDetail.appendChild(summaryElement);
+    const moreButton = document.createElement("button");
+    moreButton.appendChild(document.createTextNode("Grow"));
+    moreButton.name = moreId;
+    moreButton.setAttribute("onclick", "moreRecord(this.name)");
+    mainDetail.appendChild(moreButton);
+    const lessButton = document.createElement("button");
+    lessButton.appendChild(document.createTextNode("Shrink"));
+    lessButton.name = lessId;
+    lessButton.setAttribute("onclick", "lessRecord(this.name)");
+    mainDetail.appendChild(lessButton);
     return mainDetail;
 }
 
@@ -262,6 +274,26 @@ function pushRecord(event){
     console.log(event);
     document.getElementById(event).style.zIndex--;
 }
+/**
+ * Function to bring the record forward
+ * @param {*} event 
+ */
+function moreRecord(event){
+    console.log("pullRecord");
+    console.log(event);
+    let widthValue= parseInt(document.getElementById(event).children[0].style.width);
+    document.getElementById(event).children[0].style.width = (widthValue+1)+"rem";
+}
+/**
+ * Function to bring the record back
+ * @param {*} event 
+ */
+function lessRecord(event){
+    console.log("pullRecord");
+    console.log(event);
+    let widthValue= parseInt(document.getElementById(event).children[0].style.width);
+    document.getElementById(event).children[0].style.width = (widthValue-1)+"rem";
+}
 /**
  * On change operation for the given fields
  * @param {*} event