[fix] CSS & appearance cosmetics

public/css/site.css

@@ -23,3 +23,27 @@
 	color: #003e80;
 	padding: 3px 8px;
 }
+.log .actions{
+  display:none;
+}
+.log div.col-2 p {
+    margin: 2px 0px 6px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+.log p.author {
+    font-size: .875rem;
+}
+.log p.server {
+    font-weight: bold;
+}
+.log a.actions-toggle.btn-link.btn-sm {
+    margin: 0;
+    padding: 0;
+    color: #007bff;
+    cursor: pointer;
+}
+.log pre {
+    font-size: 1.0rem;
+    color: #333;
+}

public/js/app.js

@@ -31,6 +31,10 @@ var cmdRegex = /```([^`]*?)```/g
 cmd = function(string) {
   return ''+string.replace(cmdRegex, '<span class="cmd">$1</span>');
 }
+date = function(date){
+  var D = new Date(date);
+  return D.toLocaleDateString()+" "+D.toLocaleTimeString();
+}
 function updatePage(data){
   
   var content = "";
@@ -46,11 +50,24 @@ function updatePage(data){
     id = v._id;
     content += `
 
-    <div class="log row-fluid">
+    <div class="log row">
-      <div class="span9">
+      <div class="col-2 text-right">
-        <p><a href="/log/${id}">${escape(item.created_at)} -- ${escape(item.author)} -- ${escape(item.server)}</a></p> 
+	  <a href="/log/${id}">
+	    ${date(escape(item.created_at))} <br/>
+	  </a>
+	  <div class="d-none d-lg-block">
+		  <p class="server">  ${escape(item.server)} </p>
+		  <p class="author">  ${escape(item.author)} </p>
+		  <a class="actions-toggle btn-link btn-sm">Actions</a>
+	  </div>
+	  <div class="actions btn-group btn-group-sm" role="group" aria-label="log actions">
+	    <a class="destroy btn btn btn-outline-secondary" href="/destroy/${id}">Remove</a>
+	    <a class="edit btn btn btn-outline-secondary" href="/edit/${id}">Edit</a>
+	  </div>
+      </div>
+      <div class="col-lg">
         <pre> ${cmd(title(url(escape(item.content))))}</pre>
-      </span>
+      </div>
     </div>
     `;
   });
@@ -79,3 +96,6 @@ $("input").on("keyup",function(e){
 });
 
 updatePage( initData );
+
+$(".actions-toggle").on("click",(e) => { var el=e.target; $(el).next().show(); $(el).hide(); } )
+

views/index.pug

@@ -17,13 +17,12 @@ html(lang="en")
       </button>
 
       <div class="collapse navbar-collapse" id="navbarSupportedContent">
-
         <form class="form-inline my-2 my-lg-2">
           input.form-control.mr-sm-2(type='search', name='q', value='',aria-label="Search",placeholder='Search')
         </form>
       </div>
     </nav>
-    #content.container-fluid
+    #content.container-sm
 
 
       hr