styled log page.

Gruntfile.js

@@ -64,6 +64,7 @@ module.exports = function (grunt) {
                                     'UI/AddSeries/addSeries.less',
                                     'UI/Calendar/calendar.less',
                                     'UI/Cells/cells.less',
+                                    'UI/Logs/logs.less',
                                     'UI/Settings/settings.less',
                                 ],
                         dest  : '_output/',

UI/Index.html

@@ -11,6 +11,7 @@
     <link href="/Content/base.css" rel='stylesheet' type='text/css'/>
     <link href="/Cells/Cells.css" rel='stylesheet' type='text/css'>
     <link href="/Series/Series.css" rel='stylesheet' type='text/css'/>
+    <link href="/Logs/logs.css" rel='stylesheet' type='text/css'/>
     <link href="/Settings/settings.css" rel='stylesheet' type='text/css'/>
     <link href="/AddSeries/Addseries.css" rel='stylesheet' type='text/css'/>
     <link href="/Calendar/calendar.css" rel='stylesheet' type='text/css'/>

UI/Logs/Layout.js

@@ -1,11 +1,13 @@
 'use strict';
-define([
+define(
+    [
         'marionette',
         'backgrid',
+        'Logs/LogTimeCell',
+        'Logs/LogLevelCell',
         'Shared/Grid/Pager',
         'Logs/Collection'
-],
+    ], function (Marionette, Backgrid, LogTimeCell, LogLevelCell, GridPager, LogCollection) {
-    function (Marionette,Backgrid, GridPager, LogCollection) {
         return Marionette.Layout.extend({
             template: 'Logs/LayoutTemplate',
 
@@ -15,36 +17,44 @@ define([
                 pager  : '#x-pager'
             },
 
-            columns: [
+            attributes: {
+                id: 'logs-screen'
+            },
+
+            columns:
+                [
                     {
                         name    : 'level',
-                    label   : 'Level',
+                        label   : '',
                         sortable: true,
-                    cell    : Backgrid.StringCell
+                        cell    : LogLevelCell
                     },
                     {
                         name    : 'logger',
                         label   : 'Component',
                         sortable: true,
-                    cell    : Backgrid.StringCell
+                        cell    : Backgrid.StringCell.extend({
+                            className: 'log-logger-cell'
+                        })
                     },
                     {
                         name    : 'message',
                         label   : 'Message',
                         sortable: false,
-                    cell    : Backgrid.StringCell
+                        cell    : Backgrid.StringCell.extend({
+                            className: 'log-message-cell'
+                        })
                     },
                     {
                         name : 'time',
                         label: 'Time',
-                    cell : Backgrid.DatetimeCell
+                        cell : LogTimeCell
                     }
                 ],
 
             showTable: function () {
 
-                this.grid.show(new Backgrid.Grid(
+                this.grid.show(new Backgrid.Grid({
-                    {
                     row       : Backgrid.Row,
                     columns   : this.columns,
                     collection: this.collection,
@@ -66,7 +76,5 @@ define([
                 this.showTable();
             }
 
-        })
+        });
-        ;
+    });
-    })
-;

UI/Logs/LogLevelCell.js

@@ -0,0 +1,18 @@
+'use strict';
+define(
+    [
+        'Cells/NzbDroneCell'
+    ], function (NzbDroneCell) {
+        return NzbDroneCell.extend({
+
+            className: 'log-level-cell',
+
+            render: function () {
+
+                var level = this._getValue();
+                this.$el.html('<i class="icon-{0}" title="{1}"/>'.format(this._getValue().toLowerCase(), level));
+
+                return this;
+            }
+        });
+    });

UI/Logs/LogTimeCell.js

@@ -0,0 +1,20 @@
+'use strict';
+define(
+    [
+        'Cells/NzbDroneCell',
+        'moment'
+    ], function (NzbDroneCell, Moment) {
+        return NzbDroneCell.extend({
+
+            className: 'log-time-cell',
+
+            render: function () {
+
+                var date = Moment(this._getValue());
+                this.$el.html(date.format('LT'));
+                this.$el.attr('title', date.format('LLLL'));
+
+                return this;
+            }
+        });
+    });

UI/Logs/Logs.less

@@ -0,0 +1,50 @@
+@import "../Content/icons";
+
+#logs-screen {
+
+  .log-time-cell{
+    width: 80px;
+  }
+
+  .log-level-cell{
+    width: 12px;
+    font-size: 14px;
+  }
+
+  td{
+    font-size: 13px;
+  }
+
+
+  .icon-info:before {
+    .icon(@info-sign);
+    color : dodgerblue;
+  }
+
+  .icon-debug:before {
+    .icon(@info-sign);
+    color : gray;
+  }
+
+  .icon-trace:before {
+    .icon(@info-sign);
+    color : lightgrey;
+  }
+
+  .icon-warn:before {
+    .icon(@exclamation-sign);
+    color : orange;
+  }
+
+  .icon-error:before {
+    .icon(@bug);
+    color : red;
+  }
+
+  .icon-fatal:before {
+    .icon(@remove-sign);
+    color : purple;
+  }
+
+}
+

UI/app.js

@@ -6,6 +6,7 @@ require.config({
     paths: {
         'backbone'            : 'JsLibraries/backbone',
         'sugar'               : 'JsLibraries/sugar',
+        'moment'              : 'JsLibraries/moment',
         'handlebars'          : 'JsLibraries/handlebars.runtime',
         'handlebars.helpers'  : 'JsLibraries/handlebars.helpers',
         'bootstrap'           : 'JsLibraries/bootstrap',