From e7171eae1835e2260d63659359a05d197fd0b8b5 Mon Sep 17 00:00:00 2001
From: Sruti Modekurty <msrutiv@gmail.com>
Date: Thu, 31 Jan 2019 14:51:33 -0500
Subject: [PATCH] Add description and creator to detail modal. Beautify things
 a bit

---
 .gitignore |  1 +
 index.html | 26 ++++++++++++++++----------
 styles.css |  8 +++++++-
 3 files changed, 24 insertions(+), 11 deletions(-)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..decdf90
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+todos.txt
diff --git a/index.html b/index.html
index cd32caa..bbececf 100644
--- a/index.html
+++ b/index.html
@@ -10,22 +10,24 @@
         <form id="form-idea-new" onsubmit="onModalSubmitClick(event, this)">
             Idea Name:<br>
             <input type="text" name="idea-name">
-            <br>
+            <br><br>
             Description:<br>
-            <input type="text" name="description">
-            <br>
+            <textarea type="text" name="description"></textarea>
+            <br><br>
             Topics (comma separated):<br>
             <input type="text" name="tags">
-            <br>
-            Your Name (optional):<br>
+            <br><br>
+            Your Name:<br>
             <input type="text" name="creator-name">
             <br><br>
             <input type="submit">
         </form>
     </div>
 
-    <div id="modal-detail">
-        <b><span id="detail-name"></span></b><br><br>
+    <div id="modal-idea-detail">
+        <b><span id="detail-name"></span></b><br>
+        <span id="detail-creator"></span><br><br>
+        <span id="detail-description"></span><br><br>
         Topics: <span id="detail-tags"></span>
     </div>
 
@@ -113,12 +115,16 @@
         }
 
         function detailDisplay(node) {
-            const modal = document.getElementById("modal-detail");
+            const modal = document.getElementById("modal-idea-detail");
             const detailName = document.getElementById("detail-name");
             const detailTags = document.getElementById("detail-tags");
+            const detailCreator = document.getElementById("detail-creator");
+            const detailDescription = document.getElementById("detail-description");
 
             detailName.textContent = node.name;
             detailTags.textContent = [...node.tags].join(', ');
+            detailCreator.textContent = node.creator;
+            detailDescription.textContent = node.description;
 
             modal.style.top = event.pageY;
             modal.style.left = event.pageX;
@@ -126,8 +132,8 @@
         }
 
         window.onclick = function (event) {
-            if (event.target == document.getElementById("modal-detail")) {
-                document.getElementById("modal-detail").style.display = "none";
+            if (event.target == document.getElementById("modal-idea-detail")) {
+                document.getElementById("modal-idea-detail").style.display = "none";
             }
         }
 
diff --git a/styles.css b/styles.css
index 9e072ba..b4818bc 100644
--- a/styles.css
+++ b/styles.css
@@ -1,5 +1,6 @@
 body { 
     margin: 0;
+    font-family: Arial, Helvetica, sans-serif;
 }
 
 #btn-add {
@@ -17,9 +18,14 @@ body {
     padding: 15px;
 }
 
-#modal-detail {
+#modal-idea-detail {
     display: none;
     position: absolute;
     background-color: aliceblue;
     padding: 15px;
+    width: 300px;
+}
+
+textarea {
+    height: 75px;
 }
\ No newline at end of file