Add notification sending functionality.

src/Scylla/Notification.elm

@@ -0,0 +1,11 @@
+port module Scylla.Notification exposing (..)
+import Scylla.Model exposing (..)
+import Json.Decode
+
+type alias Notification =
+    { name : String
+    , text : String
+    }
+
+port sendNotificationPort : Notification -> Cmd msg
+port onNotificationClockPort : (Json.Decode.Value -> msg) -> Sub msg

static/js/notifications.js

@@ -0,0 +1,12 @@
+if("Notification" in window) {
+    Notification.requestPermission();
+}
+
+function setupNotificationPorts(app) {
+    app.ports.sendNotificationPort.subscribe(function(data) {
+        var options = {
+            "body" : data.text
+        }
+        new Notification(data.name, options)
+    })
+}

static/scss/style.scss

@@ -3,6 +3,8 @@ $primary-color: #53C0FA;
 $primary-color-highlight: #4298C7;
 $primary-color-light: #9FDBFB;
 $active-input-color: white;
+$background-color: #fafafa;
+$background-color-dark: darken($background-color, 4%);
 $transition-duration: .125s;
 
 $inactive-input-color: darken($active-input-color, 3%);
@@ -16,7 +18,7 @@ html, body {
 body {
     font-family: 'Open Sans', sans-serif;
     margin: 0px;
-    background-color: #fbfbfb;
+    background-color: $background-color;
 }
 
 @mixin input-common {
@@ -88,15 +90,9 @@ div.base-wrapper {
     height: 100%;
 
     div {
-        padding: 3px;
+        padding: 5px;
         box-sizing: border-box;
     }
-
-    h2 {
-        padding-bottom: 5px;
-        margin-bottom: 5px;
-        border-bottom: 1px solid $inactive-input-border-color;
-    }
 }
 
 /*
@@ -117,7 +113,7 @@ div.room-wrapper {
     flex-grow: 1;
     display: flex;
     height: 100%;
-    flex-direction: column;
+    flex-direction: column;  
 }
 
 /*
@@ -143,17 +139,34 @@ div.events-wrapper {
 }
 
 table.events-table {
+    border-collapse: collapse;
+    width: 100%;
+
     td {
-        padding-left: 5px;
+        padding: 5px;
         vertical-align: top;
     }
+
+    td:nth-child(1) {
+        width: 0px;
+        white-space: nowrap;
+    }
+
+    tr:nth-child(2n) {
+        background-color: $background-color-dark;
+    }
 }
 
 span.sender-wrapper {
     border-radius: 2px;
     padding-left: 5px;
     padding-right: 5px;
-    float: right;
+    display: inline-block;
+    box-sizing: border-box;
+    text-align: center;
+    width: 100%;
+    max-width: 100px;
+    text-overflow: ellipsis;
 }
 
 /**