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([
-    'marionette',
-    'backgrid',
-    'Shared/Grid/Pager',
-    'Logs/Collection'
-],
-    function (Marionette,Backgrid, GridPager, LogCollection) {
+define(
+    [
+        'marionette',
+        'backgrid',
+        'Logs/LogTimeCell',
+        'Logs/LogLevelCell',
+        'Shared/Grid/Pager',
+        'Logs/Collection'
+    ], function (Marionette, Backgrid, LogTimeCell, LogLevelCell, GridPager, LogCollection) {
         return Marionette.Layout.extend({
             template: 'Logs/LayoutTemplate',
 
@@ -15,41 +17,49 @@ define([
                 pager  : '#x-pager'
             },
 
-            columns: [
-                {
-                    name    : 'level',
-                    label   : 'Level',
-                    sortable: true,
-                    cell    : Backgrid.StringCell
-                },
-                {
-                    name    : 'logger',
-                    label   : 'Component',
-                    sortable: true,
-                    cell    : Backgrid.StringCell
-                },
-                {
-                    name    : 'message',
-                    label   : 'Message',
-                    sortable: false,
-                    cell    : Backgrid.StringCell
-                },
-                {
-                    name : 'time',
-                    label: 'Time',
-                    cell : Backgrid.DatetimeCell
-                }
-            ],
+            attributes: {
+                id: 'logs-screen'
+            },
+
+            columns:
+                [
+                    {
+                        name    : 'level',
+                        label   : '',
+                        sortable: true,
+                        cell    : LogLevelCell
+                    },
+                    {
+                        name    : 'logger',
+                        label   : 'Component',
+                        sortable: true,
+                        cell    : Backgrid.StringCell.extend({
+                            className: 'log-logger-cell'
+                        })
+                    },
+                    {
+                        name    : 'message',
+                        label   : 'Message',
+                        sortable: false,
+                        cell    : Backgrid.StringCell.extend({
+                            className: 'log-message-cell'
+                        })
+                    },
+                    {
+                        name : 'time',
+                        label: 'Time',
+                        cell : LogTimeCell
+                    }
+                ],
 
             showTable: function () {
 
-                this.grid.show(new Backgrid.Grid(
-                    {
-                        row       : Backgrid.Row,
-                        columns   : this.columns,
-                        collection: this.collection,
-                        className : 'table table-hover'
-                    }));
+                this.grid.show(new Backgrid.Grid({
+                    row       : Backgrid.Row,
+                    columns   : this.columns,
+                    collection: this.collection,
+                    className : 'table table-hover'
+                }));
 
                 this.pager.show(new GridPager({
                     columns   : this.columns,
@@ -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',