Better generators, sample widgets, and more!

3 files changed, 52 insertions, 0 deletions

diff --git a/templates/project/widgets/table/table.coffee b/templates/project/widgets/table/table.coffee
new file mode 100644
index 0000000..5735316
--- /dev/null
+++ b/templates/project/widgets/table/table.coffee
@@ -0,0 +1,2 @@
+class AllTheThings.Table extends AllTheThings.Widget
+  source: 'table'
\ No newline at end of file
diff --git a/templates/project/widgets/table/table.html b/templates/project/widgets/table/table.html
new file mode 100644
index 0000000..e5aeb99
--- /dev/null
+++ b/templates/project/widgets/table/table.html
@@ -0,0 +1,8 @@
+<h1 class="title" data-bind="title"></h1>
+
+<table>
+  <tr data-foreach-item="items">
+    <td class="label" data-bind="item.label"></td>
+    <td class="value" data-bind="item.value | shortenedNumber"></td>
+  </tr>
+</table>
\ No newline at end of file
diff --git a/templates/project/widgets/table/table.scss b/templates/project/widgets/table/table.scss
new file mode 100644
index 0000000..0d38164
--- /dev/null
+++ b/templates/project/widgets/table/table.scss
@@ -0,0 +1,42 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$widget-table_background-color: #82b53d;
+$widget-table_value-color:      #fff;
+
+$widget-table_title-color:      lighten($widget-table_background-color, 45%);
+$widget-table_label-color:      lighten($widget-table_background-color, 45%);
+
+// ----------------------------------------------------------------------------
+// Widget-table styles
+// ----------------------------------------------------------------------------
+.widget-table { 
+
+  background-color: $widget-table_background-color;
+
+  th {
+    font-weight: 400;
+    font-size: 16px;
+  }
+
+  td.label {
+    vertical-align: middle;
+    text-align: left;
+    font-size: 23px;
+  }
+
+  .title { 
+    color: $widget-table_title-color;
+  }
+
+  .label {
+    color: $widget-table_label-color;    
+  }
+
+  .value {
+    font-weight: 700;
+    font-size: 54px;
+    color: $widget-table_value-color;
+  }
+
+}
\ No newline at end of file