tweaked the dialog to be editable

diff --git a/index.html b/index.html
index 66d16ebc8ab87a954633f027c8a6102e533ef89b..be59aa8766a72c05509664294ccecc5c0cae3b09 100644 (file)
--- a/index.html
+++ b/index.html
@@ -57,11 +57,6 @@ h2 {
                 0 1px 5px  0px rgba(0,0,0,0.12);
 }
 
-hr {
-    background-color: deepskyblue;
-    height: 5px;
-}
-
 .dialog {
     display: none; /* Hidden by default */
     position: fixed; /* Stay in place */
@@ -90,18 +85,11 @@ hr {
                 0 1px 5px  0px rgba(0,0,0,0.12);
 }
 
-.dialog-close {
-    color: #aaa;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
-}
-
-.dialog-close:hover,
-.dialog-close:focus {
-    color: black;
-    text-decoration: none;
-    cursor: pointer;
+.card-title {
+    width: 100%;
+    font-size: 1.5rem;
+    margin: 10px 0px 10px 0px;
+    color: #555;
 }
 
     </style>
@@ -116,28 +104,34 @@ hr {
         <div class="column">
             <h2>To Do</h2>
             <div class="card">
-                <p>(1) this is a card with data and it is maybe long enough to wrap around in the column. perhaps a few times</p>
+                <div>(1) this is a card with data and it is maybe long enough to wradiv around in the column. diverhadivs a few times</div>
+                <div style="display: none;">Card 1</div>
             </div>
             <div class="card">
-                <p>(2) this is a card with data</p>
+                <div>(2) this is a card with data</div>
+                <div style="display: none;">Card 2</div>
             </div>
             <div class="card">
-                <p>(3) this is a card with data</p>
+                <div>(3) this is a card with data</div>
+                <div style="display: none;">Card 3</div>
             </div>
         </div>
         <div class="column">
             <h2>Doing</h2>
             <div class="card">
-                <p>(4) this is a <br/> card with data</p>
+                <div>(4) this is a <br/> card with data</div>
+                <div style="display: none;">Card 4</div>
             </div>
             <div class="card">
-                <p>(5) this is a card with data</p>
+                <div>(5) this is a card with data</div>
+                <div style="display: none;">Card 5</div>
             </div>
         </div>
         <div class="column">
             <h2>Done</h2>
             <div class="card">
-                <p>(6) this is a card with data</p>
+                <div>(6) this is a card with data</div>
+                <div style="display: none;">Card 6</div>
             </div>
         </div>
         <div class="column">
@@ -147,7 +141,8 @@ hr {
 
     <div id="dialog" class="dialog">
         <div class="dialog-content">
-            <p>Some text in the Modal..</p>
+            <div contenteditable=true class="card-title">Card title...</div>
+            <div contenteditable=true class="card-content">Card title...</div>
         </div>
     </div>