Add dashboard

widgets/daily_xkcd/daily_xkcd.coffee

@@ -0,0 +1,9 @@
+class Dashing.DailyXKCD extends Dashing.Widget
+
+ ready: ->
+   # This is fired when the widget is done being rendered
+
+ onData: (data) ->
+   # Handle incoming data
+   # You can access the html node of this widget with `@node`
+   # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.

widgets/daily_xkcd/daily_xkcd.html

@@ -0,0 +1,7 @@
+<h1 class="header" data-bind="'xkcd #' | append num | append ': ' | append title"></h1>
+
+<img class="xkcd-image" data-bind-src="img" />
+<p class="date" data-bind="'Published: ' | append datestr"></p>
+<p class="caption" data-bind="alt"></p>
+
+<p class="updated-at" data-bind="updatedAtMessage"></p>

widgets/daily_xkcd/daily_xkcd.scss

@@ -0,0 +1,60 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color: white;
+
+$header-color: rgba(0, 0, 0, 0.7);
+
+$title-color: rgba(0, 0, 0, 0.7);
+
+$caption-color: rgba(0, 0, 0, 0.7);
+
+$published-color: rgba(0, 0, 0, 0.7);
+
+$updated-at-color: rgba(0, 0, 0, 0.3);
+
+// ----------------------------------------------------------------------------
+// Widget-daily-xkcd styles
+// ----------------------------------------------------------------------------
+.widget-daily-xkcd {
+	background-color: $background-color;
+	vertical-align: top !important;
+	padding: 8px 12px !important;
+
+	.wrapper {
+		max-height: 100%;
+	}
+
+	.header {
+		color: $header-color;
+
+		font-size: large;
+		font-variant: small-caps;
+	}
+
+	.xkcd-image {
+		max-height: 200px;
+	}
+
+	.date {
+		color: $published-color;
+		margin-bottom: 0.5vh;
+		font-size: small;
+		text-align: left;
+	}
+
+	.caption {
+		color: $caption-color;
+		font-size: small;
+		text-align: justify;
+		margin-bottom: 0.5vh;
+	}
+
+	.updated-at {
+		color: $updated-at-color;
+		position: relative;
+		padding: 0;
+		margin: 0;
+		bottom: 0;
+	}
+}