From c5642056e4fe54a03760f064b76071f1119c0812 Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Thu, 28 Aug 2014 20:05:35 -0400
Subject: [PATCH] Fixes code formatting of table examples

---
 server/documents/collections/table.html.eco | 174 ++++++++++++--------
 server/files/javascript/header.js           |  53 ++++++
 2 files changed, 161 insertions(+), 66 deletions(-)
 create mode 100644 server/files/javascript/header.js

diff --git a/server/documents/collections/table.html.eco b/server/documents/collections/table.html.eco
index c6497ac7a..2e434fba0 100755
--- a/server/documents/collections/table.html.eco
+++ b/server/documents/collections/table.html.eco
@@ -40,10 +40,12 @@ themes      : ['Default']
     </div>
     <table class="ui table">
       <thead>
-        <th>Name</th>
-        <th>Registration Date</th>
-        <th>E-mail address</th>
-        <th>Premium Plan</th>
+        <tr>
+          <th>Name</th>
+          <th>Registration Date</th>
+          <th>E-mail address</th>
+          <th>Premium Plan</th>
+        </tr>
       </thead>
       <tbody>
         <tr>
@@ -66,11 +68,13 @@ themes      : ['Default']
         </tr>
       </tbody>
       <tfoot>
-        <th colspan="4">
-          <div class="ui primary labeled icon button">
-            <i class="user icon"></i> Add User
-          </div>
-        </th>
+        <tr>
+          <th colspan="4">
+            <div class="ui primary labeled icon button">
+              <i class="user icon"></i> Add User
+            </div>
+          </th>
+        </tr>
       </tfoot>
     </table>
   </div>
@@ -82,9 +86,11 @@ themes      : ['Default']
     <p>A cell or row may let a user know whether a value is good or bad</p>
     <table class="ui table">
       <thead>
-        <th>Name</th>
-        <th>Status</th>
-        <th>Notes</th>
+        <tr>
+          <th>Name</th>
+          <th>Status</th>
+          <th>Notes</th>
+        </tr>
       </thead>
       <tbody>
         <tr>
@@ -117,9 +123,11 @@ themes      : ['Default']
     <p>A cell or row may attention the user to an error or a negative value</p>
     <table class="ui table">
       <thead>
-        <th>Name</th>
-        <th>Status</th>
-        <th>Notes</th>
+        <tr>
+          <th>Name</th>
+          <th>Status</th>
+          <th>Notes</th>
+        </tr>
       </thead>
       <tbody>
         <tr>
@@ -151,9 +159,11 @@ themes      : ['Default']
     <p>A cell or row may warn a user</p>
     <table class="ui table">
       <thead>
-        <th>Name</th>
-        <th>Status</th>
-        <th>Notes</th>
+        <tr>
+          <th>Name</th>
+          <th>Status</th>
+          <th>Notes</th>
+        </tr>
       </thead>
       <tbody>
         <tr>
@@ -185,9 +195,11 @@ themes      : ['Default']
     <p>A cell or row can be active or selected by a user</p>
     <table class="ui table">
       <thead>
-        <th>Name</th>
-        <th>Status</th>
-        <th>Notes</th>
+        <tr>
+          <th>Name</th>
+          <th>Status</th>
+          <th>Notes</th>
+        </tr>
       </thead>
       <tbody>
         <tr>
@@ -218,9 +230,11 @@ themes      : ['Default']
     <p>A cell can be disabled</p>
     <table class="ui table">
       <thead>
-        <th>Name</th>
-        <th>Status</th>
-        <th>Notes</th>
+        <tr>
+          <th>Name</th>
+          <th>Status</th>
+          <th>Notes</th>
+        </tr>
       </thead>
       <tbody>
         <tr class="disabled">
@@ -255,9 +269,11 @@ themes      : ['Default']
     <p>A table can stripe alternate rows of content with a darker color to increase contrast</p>
     <table class="ui striped table">
       <thead>
-        <th>Name</th>
-        <th>Status</th>
-        <th>Notes</th>
+        <tr>
+          <th>Name</th>
+          <th>Status</th>
+          <th>Notes</th>
+        </tr>
       </thead>
       <tbody>
         <tr>
@@ -289,9 +305,11 @@ themes      : ['Default']
     <p>A table may be divided each row into separate cells</p>
     <table class="ui celled table">
       <thead>
-        <th>Name</th>
-        <th>Status</th>
-        <th>Notes</th>
+        <tr>
+          <th>Name</th>
+          <th>Status</th>
+          <th>Notes</th>
+        </tr>
       </thead>
       <tbody>
         <tr>
@@ -323,9 +341,11 @@ themes      : ['Default']
     <p>A table can reduce its complexity to increase readability.</p>
     <table class="ui basic table">
       <thead>
-        <th>Name</th>
-        <th>Status</th>
-        <th>Notes</th>
+        <tr>
+          <th>Name</th>
+          <th>Status</th>
+          <th>Notes</th>
+        </tr>
       </thead>
       <tbody>
         <tr>
@@ -349,9 +369,11 @@ themes      : ['Default']
   <div class="another example">
     <table class="ui very basic table">
       <thead>
-        <th>Name</th>
-        <th>Status</th>
-        <th>Notes</th>
+        <tr>
+          <th>Name</th>
+          <th>Status</th>
+          <th>Notes</th>
+        </tr>
       </thead>
       <tbody>
         <tr>
@@ -454,9 +476,11 @@ themes      : ['Default']
     <p>By default tables take the size of their container. A collapsing takes up only as much space as its rows.</p>
     <table class="ui collapsing table">
       <thead>
-        <th>Name</th>
-        <th>Status</th>
-        <th>Notes</th>
+        <tr>
+          <th>Name</th>
+          <th>Status</th>
+          <th>Notes</th>
+        </tr>
       </thead>
       <tbody>
         <tr>
@@ -488,9 +512,11 @@ themes      : ['Default']
     <p>A table can be given a color to distinguish it from other tables.</p>
     <table class="ui blue table">
       <thead>
-        <th>Name</th>
-        <th>Status</th>
-        <th>Notes</th>
+        <tr>
+          <th>Name</th>
+          <th>Status</th>
+          <th>Notes</th>
+        </tr>
       </thead>
       <tbody>
         <tr>
@@ -522,9 +548,11 @@ themes      : ['Default']
     <p>A tables colors can be inverted</p>
     <table class="ui inverted table">
       <thead>
-        <th>Name</th>
-        <th>Status</th>
-        <th>Notes</th>
+        <tr>
+          <th>Name</th>
+          <th>Status</th>
+          <th>Notes</th>
+        </tr>
       </thead>
       <tbody>
         <tr>
@@ -553,9 +581,11 @@ themes      : ['Default']
   <div class="another example">
     <table class="ui inverted red table">
       <thead>
-        <th>Name</th>
-        <th>Status</th>
-        <th>Notes</th>
+        <tr>
+          <th>Name</th>
+          <th>Status</th>
+          <th>Notes</th>
+        </tr>
       </thead>
       <tbody>
         <tr>
@@ -614,9 +644,11 @@ themes      : ['Default']
 
     <table class="ui sortable table">
       <thead>
-        <th>Name</th>
-        <th>Status</th>
-        <th>Notes</th>
+        <tr>
+          <th>Name</th>
+          <th>Status</th>
+          <th>Notes</th>
+        </tr>
       </thead>
       <tbody>
         <tr>
@@ -647,9 +679,11 @@ themes      : ['Default']
     <p>A table may sometimes need to be more padded for legibility</p>
     <table class="ui padded table">
       <thead>
-        <th>Name</th>
-        <th>Status</th>
-        <th>Notes</th>
+        <tr>
+          <th>Name</th>
+          <th>Status</th>
+          <th>Notes</th>
+        </tr>
       </thead>
       <tbody>
         <tr>
@@ -668,9 +702,11 @@ themes      : ['Default']
   <div class="another example">
     <table class="ui very padded table">
       <thead>
-        <th>Name</th>
-        <th>Status</th>
-        <th>Notes</th>
+        <tr>
+          <th>Name</th>
+          <th>Status</th>
+          <th>Notes</th>
+        </tr>
       </thead>
       <tbody>
         <tr>
@@ -691,9 +727,11 @@ themes      : ['Default']
     <p>A table may sometimes need to be more compact to make more rows visible at a time</p>
     <table class="ui compact table">
       <thead>
-        <th>Name</th>
-        <th>Status</th>
-        <th>Notes</th>
+        <tr>
+          <th>Name</th>
+          <th>Status</th>
+          <th>Notes</th>
+        </tr>
       </thead>
       <tbody>
         <tr>
@@ -804,9 +842,11 @@ themes      : ['Default']
     <p>A table can also be small or large</p>
     <table class="ui small table">
       <thead>
-        <th>Name</th>
-        <th>Status</th>
-        <th>Notes</th>
+        <tr>
+          <th>Name</th>
+          <th>Status</th>
+          <th>Notes</th>
+        </tr>
       </thead>
       <tbody>
         <tr>
@@ -835,9 +875,11 @@ themes      : ['Default']
   <div class="another example">
     <table class="ui large table">
       <thead>
-        <th>Name</th>
-        <th>Status</th>
-        <th>Notes</th>
+        <tr>
+          <th>Name</th>
+          <th>Status</th>
+          <th>Notes</th>
+        </tr>
       </thead>
       <tbody>
         <tr>
diff --git a/server/files/javascript/header.js b/server/files/javascript/header.js
new file mode 100644
index 000000000..c1c3df483
--- /dev/null
+++ b/server/files/javascript/header.js
@@ -0,0 +1,53 @@
+semantic.header = {};
+
+// ready event
+semantic.header.ready = function() {
+
+  // selector cache
+  var
+    $increaseFont     = $('.font .increase'),
+    $decreaseFont     = $('.font .decrease'),
+
+    // alias
+    handler
+  ;
+
+  // event handlers
+  handler = {
+    font: {
+
+      increase: function() {
+        var
+          $container = $(this).parent().next('.ui.segment'),
+          fontSize   = parseInt( $container.css('font-size'), 10)
+        ;
+        $container
+          .css('font-size', fontSize + 1)
+        ;
+      },
+      decrease: function() {
+        var
+          $container = $(this).parent().next('.ui.segment'),
+          fontSize   = parseInt( $container.css('font-size'), 10)
+        ;
+        $container
+          .css('font-size', fontSize - 1)
+        ;
+      }
+    }
+  };
+
+  $increaseFont
+    .on('click', handler.font.increase)
+  ;
+  $decreaseFont
+    .on('click', handler.font.decrease)
+  ;
+
+};
+
+
+// attach ready event
+$(document)
+  .ready(semantic.header.ready)
+;
\ No newline at end of file