Work on edit modal

Something's wrong with scrolling, gotta fix

index.html

@@ -75,7 +75,7 @@
         <h2 id="dictionaryName">Dictionary Name</h2>
         <nav>
           <ul>
-            <li>Description</li><li>Details</li><li>Stats</li><li onclick="document.getElementById('editModal').style.display='block'">Edit</li>
+            <li>Description</li><li>Details</li><li>Stats</li><li id="editDictionaryButton">Edit</li>
           </ul>
         </nav>
         <article id="detailsPanel" style="display:none;">
@@ -122,6 +122,76 @@
           <li class="active">Description</li><li>Details</li><li>Settings</li><li>Actions</li>
         </ul>
       </nav>
+      <section id="editDescriptionTab" style="display:none;">
+        <label>Name<br>
+          <input id="editName">
+        </label>
+        <label>Specification<br>
+          <input id="editSpecification">
+        </label>
+        <label>Description<a class="label-button">Maximize</a><br>
+          <textarea id="editDescription"></textarea>
+        </label>
+      </section>
+
+      <section id="editDetailsTab">
+        <label>Parts of Speech <small>(Comma Separated List)</small><br>
+          <input id="editPartsOfSpeech">
+        </label>
+        <label>Alphabetical Order <small>(Comma Separated List. Include every letter!)</small><br>
+          <input id="editAlphabeticalOrder" disabled value="English Alphabet">
+        </label>
+        <h3>Phonology</h3>
+        <div class="split three">
+          <div>
+            <label>Consonants<br>
+              <input id="editConsonants">
+            </label>
+          </div>
+          <div>
+            <label>Vowels<br>
+              <input id="editVowels">
+            </label>
+          </div>
+          <div>
+            <label>Polyphthongs&nbsp;/ Blends<br>
+              <input id="editBlends">
+            </label>
+          </div>
+        </div>
+        <h3>Phonotactics</h3>
+        <div class="split three">
+          <div>
+            <label>Onset<br>
+              <input id="editOnset">
+            </label>
+          </div>
+          <div>
+            <label>Nucleus<br>
+              <input id="editNucleus">
+            </label>
+          </div>
+          <div>
+            <label>Coda<br>
+              <input id="editCoda">
+            </label>
+          </div>
+        </div>
+        <h3>Orthography</h3>
+        <label>Notes<a class="label-button">Maximize</a><br>
+          <textarea id="editOrthography"></textarea>
+        </label>
+        <h3>Grammar</h3>
+        <label>Notes<a class="label-button">Maximize</a><br>
+          <textarea id="editGrammar"></textarea>
+        </label>
+      </section>
+
+      <footer>
+        <a class="button" id="editSave">Save</a>
+        <a class="button" id="editSaveAndClose">Save &amp; Close</a>
+        <a class="red button" onclick="this.parentElement.parentElement.parentElement.style.display='none';">Close Without Saving</a>
+      </footer>
     </div>
   </section>
 </body>

src/js/dictionaryManagement.js

@@ -0,0 +1,14 @@
+import { renderDictionaryDetails } from "./render";
+
+export function updateDictionary () {
+
+  renderDictionaryDetails();
+}
+
+export function openEditModal() {
+  document.getElementById('editModal').style.display = 'block';
+}
+
+export function updateGeneralDetails() {
+
+}

src/js/setupListeners.js

@@ -3,6 +3,7 @@ import { renderWords } from './render';
 import { validateWord, addWord } from './wordManagement';
 import { removeTags } from '../helpers';
 import { getNextId } from './utilities';
+import { openEditModal } from './dictionaryManagement';
 
 export default function setupListeners() {
   setupDetailsTabs();
@@ -15,6 +16,9 @@ function setupDetailsTabs() {
   tabs.forEach(tab => {
     tab.addEventListener('click', () => {
       const section = tab.innerText.toLowerCase();
+      if (section === 'edit') {
+        openEditModal();
+      } else {
         const isActive = tab.classList.contains('active');
         tabs.forEach(t => t.classList.remove('active'));
         if (isActive) {
@@ -23,8 +27,14 @@ function setupDetailsTabs() {
           tab.classList.add('active');
           showSection(section);
         }
+      }
     });
-  })
+  });
+  setupEditForm();
+}
+
+function setupEditForm() {
+  
 }
 
 function setupSearchBar() {

src/js/utilities.js

@@ -76,7 +76,7 @@ export function getWordsStats() {
   });
 
   wordStats.totalLetters = totalLetters;
-  wordStats.wordLength.average = words.length > 0 ? totalLetters / words.length : 0;
+  wordStats.wordLength.average = words.length > 0 ? Math.round(totalLetters / words.length) : 0;
 
   for (const letter in numberOfLetters) {
     if (numberOfLetters.hasOwnProperty(letter)) {

src/styles/_elements.scss

@@ -8,6 +8,31 @@ p, span {
   }
 }
 
+label {
+  display: block;
+  font-weight: bold;
+
+  &:not(:last-child) {
+    margin-bottom: 20px;
+  }
+
+  small {
+    font-weight: normal;
+  }
+
+  input:not([type="checkbox"]):not([type="radio"]),
+  select, textarea {
+    font-weight: normal;
+    width: 100%;
+  }
+
+  .label-button {
+    font-size: 80%;
+    float: right;
+    cursor: pointer;
+  }
+}
+
 .tag {
   padding: 3px 9px;
   border: $border;
@@ -77,6 +102,25 @@ span .tag {
       font-size: 200%;
       cursor: pointer;
     }
+
+    nav ul {
+      margin-bottom: 0;
+    }
+
+    section {
+      padding: 20px;
+      margin-bottom: 80px;
+      overflow-y: auto;
+      height: 78%;
+    }
+
+    section~footer {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      background-color: $white;
+    }
   }
 }
 

src/styles/_structure.scss

@@ -22,6 +22,24 @@
       margin: 0 auto;
       width: 90%;
       padding: 20px;
+
+      label {
+        display: inline;
+      }
+
+      section {
+        padding: 0;
+        overflow-y: unset;
+        margin-bottom: 0;
+      }
+
+      section+footer {
+        position: relative;
+        left: unset;
+        bottom: unset;
+        right: unset;
+        background-color: $white;
+      }
     }
 
     #searchBox {
@@ -36,7 +54,7 @@
     }
 
     .options {
-      * {
+      label {
         margin-right: 5px;
       }
     }
@@ -53,26 +71,6 @@
   border-radius: 5px;
   max-height: 80%;
   overflow-y: auto;
-
-  label {
-    display: block;
-    font-weight: bold;
-
-    &:not(:last-child) {
-      margin-bottom: 20px;
-    }
-
-    input, select, textarea {
-      font-weight: normal;
-      width: 100%;
-    }
-
-    .label-button {
-      font-size: 80%;
-      float: right;
-      cursor: pointer;
-    }
-  }
 }
 
 #detailsSection {
@@ -132,3 +130,10 @@
     font-size: 70%;
   }
 }
+
+#editModal {
+  #editDescription {
+    width: 100%;
+    height: 350px;
+  }
+}