validate JSON form dynamically, better resizing, add ignore options

Author: Leeous

index.html

@@ -57,13 +57,13 @@ <h3>Addon creation</h3>
                     <input id="addon_dir_folder" class="real_select" type="file" webkitdirectory />
                     <p id="addonDir"><b></b></p>
                     <div class="next_prompt">
-                        <button id="addonDirCheck" class="transition_button" data-divtoshow="#addonjsonPrompt" data-divtohide="#addonDirPrompt" disabled>Next</button>
+                        <button id="addonDirCheck" class="transition_button" data-divtoshow="#addonjsonPrompt" data-divtohide="#addonDirPrompt" data-resize="500, 175" disabled>Next</button>
                     </div>
                 </div>
                 <div id="addonjsonPrompt">
                     <p>Do you already have a addon.json?</p>
                     <div>
-                        <button class="button_normal transition_button removeBackOption" data-divtoshow="#jsonCreator" data-divtohide="#addonjsonPrompt" data-resize="500, 300">No</button>
+                        <button class="button_normal transition_button removeBackOption" data-divtoshow="#jsonCreator" data-divtohide="#addonjsonPrompt" data-resize="500, 350">No</button>
                         <button class="button_normal transition_button removeBackOption" data-divtoshow="#gmaPrep" data-divtohide="#addonjsonPrompt">Yes</button>
                     </div>
                 </div>
@@ -72,6 +72,7 @@ <h3>Addon creation</h3>
                         <div id="jsonTitle">
                             <p class="jsonSectionHeader">Title</p>
                             <input name="addonTitle" type="text" placeholder="Crazy cool addon" maxlength="128">
+                            <p><span style="font-size: .7em; color: grey;">(required)</span></p>
                         </div>
                         <div id="jsonType">
                             <p class="jsonSectionHeader">Type</p>
@@ -87,6 +88,7 @@ <h3>Addon creation</h3>
                                 <option value="effects">Effects</option>
                                 <option value="model">Model</option>
                             </select>
+                            <p><span style="font-size: .7em; color: grey;">(required)</span></p>
                         </div>
                         <div id="jsonTags">
                             <div class="col">
@@ -130,11 +132,19 @@ <h3>Addon creation</h3>
                                         <input type="checkbox" name="cartoon" class="typeCheckbox">
                                         <p>Cartoon</p>
                                     </div>
+                                    <div class="type">
+                                        <p><span style="font-size: .7em; color: grey;">(max 2)</span></p>
+                                    </div>
                                 </div>
                             </div>
                         </div>
+                        <div id="jsonIgnore">
+                            <p class="jsonSectionHeader">Ignore</p>
+                            <input name="addonIgnore" type="text" placeholder="*.html, README.md, etc">
+                            <p><span style="font-size: .7em; color: grey; font-weight:500;">(folder/file names seprated by a comma)</span></p>
+                        </div>
                         <div class="next_prompt">
-                            <button id="jsonAddonValidate" class="transition_button" style="background-color: #56bd56; color: white;" data-divtoshow="#gmaPrep" data-divtohide="#jsonCreator" data-resize="500, 250">Next</button>
+                            <button id="jsonAddonValidate" class="transition_button" data-divtoshow="#gmaPrep" data-divtohide="#jsonCreator" data-resize="500, 250" disabled>Next</button>
                         </div>
                     </div>
                 </div>

index.js

@@ -24,7 +24,7 @@ function createWindow() {
   // Create the browser window.
   mainWindow = new BrowserWindow({
           width: 500,
-          height: 250,
+          height: 175,
           resizable: false,
           fullscreenable: false,
           backgroundColor: "#262626",
@@ -108,4 +108,6 @@ ipcMain.on('createJsonFile', (event, json, dir) => {
   })
 })
 
+// ipcMain.on('createGmaFile', (addonDir))
+
 // function 

src/css/style.css

@@ -244,16 +244,15 @@ header {
     display: inline-block;
 }
 
-#jsonTitle input[type='text'] {
+#jsonTitle input[type="text"], #jsonIgnore input[type="text"] {
     border-radius: 5px;
     display: inline-block;
     width: 350px;
     border: none;
     padding: 5px;
 }
 
-#jsonTags, #jsonTitle, #jsonType {
-    padding: 0 10px;
+#jsonTags, #jsonTitle, #jsonType, #jsonIgnore {
 }
 
 #jsonTags .type > * {
@@ -280,26 +279,38 @@ header {
     cursor: pointer;
 }
 
+#jsonIgnore > * {
+    display: inline-block;
+}
+
+#jsonIgnore p {
+    font-weight: 700;
+    /* padding-right: 9px; */
+}
+
+#jsonIgnore input[type="text"] {
+    width: 150px;
+}
+
+.typeCheckbox {
+    cursor: pointer;
+}
+
 .jsonSectionHeader {
     font-weight: 700;
+    width: 55px;
     /* margin-top: 0; */
-    padding-right: 15px;
+    padding-left: 15px;
     letter-spacing: 1px;
     /* white-space: nowrap; */
 }
 
 .jsonGrid {
     display: grid;
-    margin-left: 7px;
+    /* margin-left: 10px; */
     grid-template-columns: auto auto auto auto auto;
 }
 
-.next_prompt {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-}
-
 .next_prompt {
     text-align: center;
     position: absolute;