overview style

journalmarks/templates/overview.html

@@ -19,7 +19,6 @@ function run() {
             var n = p.cloneNode(true);
             n.id = 'journalmark_' + j.tag;
             var created = new Date(j.created);
-            console.log(created);
             n.getElementsByClassName('date')[0].innerText =  created.getDate().toString() + '.' + (created.getMonth()+1).toString() + '.' + created.getFullYear().toString();
             n.getElementsByClassName('tag')[0].innerText = j.tag;
             n.getElementsByClassName('tag')[0].href = '/' + j.tag;
@@ -28,8 +27,10 @@ function run() {
             decrs.push(journalmarks_decrypturl(j.content).then(function(url) {
                 n.getElementsByClassName('url')[0].href = url.url;
                 n.getElementsByClassName('url')[0].innerText = url.url;
-                if(url.hasOwnProperty('comment'))
+                if(url.hasOwnProperty('comment')) {
                     n.getElementsByClassName('comment')[0].innerText = url.comment;
+                    n.getElementsByClassName('comment-row')[0].style.display = 'table-row';
+                }
             }).catch(function(error) {
                 console.log(error);
                 n.getElementsByClassName('url')[0].innerText = 'unable to decrypt url';
@@ -53,7 +54,7 @@ else document.attachEvent('onreadystatechange', function(){
 #prototype {
     display: none;
 }
-#journalmarks p {
+.journalmark {
     margin: 1em;
     padding: 1em;
     border: 1px solid grey;
@@ -61,7 +62,22 @@ else document.attachEvent('onreadystatechange', function(){
 #back-to-welcome {
     text-align: center;
 }
+.tag {
+    font-size: 2em;
+}
+.comment-row {
+    display: none;
+}
+.journalmark td:first-child {
+    font-size: 0.8em;
+    color: #7e7e7e;
+    vertical-align: bottom;
+    text-align: right;
+    padding-right: 1em;
+
+}
 </style>
+
 {% endblock %}
 {% block body %}
 <h1>Journalmarks Overview</h1>
@@ -71,11 +87,13 @@ else document.attachEvent('onreadystatechange', function(){
 </p>
 
 <div id="journalmarks">
-<p id="prototype">
-Tag: <a class="tag" href=""></a><br>
-URL: <a class="url" rel="noreferrer" href=""></a><br>
-Comment: <span class="comment"></span><br>
-Created: <span class="date"></span>
-</p>
+    <div class="journalmark" id="prototype">
+        <table>
+            <tr><td>Tag:</td><td><a class="tag" href=""></a></td></tr>
+            <tr><td>URL:</td><td><a class="url" rel="noreferrer" href=""></a></td></tr>
+            <tr><td>Created:</td><td><span class="date"></td></tr>
+            <tr class="comment-row"><td>Comment:</td><td><span class="comment"></span></td></tr>
+        </table>
+    </div>
 </div>
 {% endblock %}