dfm_web 2.0.6 → 2.0.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 7f69b0c9a5adf49d604046e4d4b7776b37bb0ae8
-  data.tar.gz: bc900c1b0ed4d9efd5042eb6d9d549e0fed3d59d
+  metadata.gz: f9559d762ced71a604867bf003f7a822d73ed9ee
+  data.tar.gz: 5a23cea30468ef973362902cf6732feb93b87f6a
 SHA512:
-  metadata.gz: c7ca186379eb2800263d0c0dc79c5192c70a27846a31d411b4dac286a5cdd8b8106b70abfc0f721cf83014f8338eb5c51b49659e51ca8186e64e4f2df70dcd67
-  data.tar.gz: 5bd4976fc1ce6f71075f2f063cb682ad9842c435068f89dde979762ae46f7111d8bb6c8cb547a5d1a0f74db1ce74006ac881e9e536b4e3bab50f5fef77c2cbe3
+  metadata.gz: 63da1d996b881c733b3eae97433e96a42ebea86f31dff142b88b3ee73cc51073e7fe745f53e1649d43856cc489fa78545130e38aa22f709802bca0082048563a
+  data.tar.gz: 378fd1b0ac9769645a2c0d4219648023ee502d5438954b637203e1398015a45abc4899a7d2a31685b5536ec793e00df66410cf24716cd4b5cb0a40b938bb28b9

data/app/assets/javascripts/dfm_web/dfm_web.js.coffee

@@ -27,7 +27,7 @@ filter_table_rows = (searched) ->
 DfmWeb.activate_dfm_web = ->
 
   # Activate Tablesorter (add to table)
-  $('.tablesorter').tablesorter({widgets: ['zebra']}) unless typeof(tablesorter) == "undefined"
+  $('.tablesorter').tablesorter({widgets: ['zebra']})
 
   # Hide the #notice and #alert messages by clicking the [X] or pressing escape key
   $('#notice, #alert').click ->

data/app/assets/stylesheets/dfm_web/forms.css

@@ -98,7 +98,7 @@ input[type=submit], .button
 }
 
 input[type=submit]:hover, .button:hover {
-  box-shadow: inset 0 0 30px rgba(0,0,0,.4);
+  box-shadow: inset 0 0 0 300px rgba(255,255,255,.2);
 }
 
 /* Override the browser default submit outline so it can be the same for buttons */

data/app/assets/stylesheets/dfm_web/nav.css

@@ -14,6 +14,10 @@ nav {
 
 #nav img {
   vertical-align: middle;
+}
+
+/* If your first nav item has a logo, give it extra margin */
+#nav ul.left li:first-child img {
   margin-right: 1em;
 }
 

data/app/assets/stylesheets/dfm_web/tables.css

@@ -4,6 +4,8 @@ table {
   width: 100%;
   border: 1px solid rgba(0,0,0,.2);
   margin-bottom: 20px;
+  font-weight: lighter;
+  background-color: white; /* Override this in your app to match your style. */
 }
 table thead  { display: table-header-group; }
 
@@ -20,14 +22,21 @@ td, th {
   vertical-align: middle;
 }
 
-th {
-  background-color: rgba(0,0,0,.1);
+thead th {
+  background-color: rgba(0, 0, 0, 0.15);
   color:  rgba(0,0,0,.6);
-  border-width: 0 0 1px 1px;
-  border-style: solid;
-  border-color: rgba(0,0,0,.2);
+  font-weight: normal;
 }
 
+tbody th {
+  background-color: rgba(0, 0, 0, 0.08);
+  font-weight: lighter;
+}
+tfoot th {
+  font-weight: bold;
+}
+
+
 td .button, th .button {
   margin: 0 5px 0 0;
 }
@@ -36,10 +45,7 @@ th:first-child {
   border-left: 1px;
 }
 
-tr.warn td, tr.warn th {
-  color: red;
-  background-color: rgba(255, 0, 0, 0.04) !important; /* important needed to override zebra */
-}
+
 
 td.active::before {
   content: "☑";
@@ -47,6 +53,23 @@ td.active::before {
   font-size: 1.5em;
 }
 
+tfoot tr td, tfoot tr th {
+  background-color: rgba(0, 0, 0, 0.04);
+  border-top-width: 0;
+}
+
+tfoot tr:first-child td, tfoot tr:first-child th{
+  border-top-color: #aaa;
+  border-top-width: 1px;
+}
+
+
+tfoot tr:nth-child(odd) {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+
+
 td input[type=text], th input[type=text]
 {
   vertical-align: middle;
@@ -93,6 +116,42 @@ table.tablesorter thead th.sorter-false {
   cursor: default;
 }
 
-.tablesorter-default tr.even td {
-  background-color: rgba(255,255,255,.5);
+
+/* Zebra & modifier classes */
+
+tr.highlight td {
+  background-color: rgba(255, 255, 0, 0.16);
+  border-color: rgba(128, 128, 0, 0.25);
+}
+.tablesorter-default tr.highlight.even td,
+tbody tr.highlight:nth-child(even) td {
+  /* tablesorter zebra highlight need to be a little darker */
+  background-color: rgba(200, 200, 0, 0.16);
+}
+
+tr.warn td {
+  color: #cd0000;
+  background-color: rgba(255, 230, 230, .3);
+  border-color: rgba(255, 0, 0, 0.25);
+}
+.tablesorter-default tr.warn.even td,
+tbody tr.warn:nth-child(even) td {
+  /* tablesorter zebra warn need to be a little darker */
+  background-color: rgba(255, 150, 150, .12);
 }
+
+
+/* darken even rows */
+.tablesorter-default tr.even td,
+tbody tr:nth-child(even) td {
+  background-color: rgba(128,128,128,.03);
+}
+
+table tfoot tr{
+  transition: box-shadow 0.4s;
+}
+
+table tfoot tr:hover {
+  box-shadow: inset 0 0 2px black;
+  transition: box-shadow 0.05s;
+}

data/lib/dfm_web/version.rb

@@ -1,10 +1,11 @@
 module DfmWeb
-  VERSION = "2.0.6"
+  VERSION = "2.0.7"
 end
 
 
 # Version History
 
+# 2.0.7   Added table to kitchen sink.  Tablesorter is now a added to the dummy app.
 # 2.0.6   Robust ajax_load method imported.  Will not render errors / huge responses.
 # 2.0.5   Improved the long menu CSS.  No more side-effects!
 # 2.0.4   Really long menus will now show with a compact scrollable menu instead of the default.

data/spec/dummy/app/assets/javascripts/application.js

@@ -11,10 +11,11 @@
 // about supported directives.
 //
 //= require jquery
-//= require     dfm_web/dfm_web
-//= require_tree .
+//= require jquery-tablesorter
+//= require dfm_web/dfm_web
+//= require_self
 
 // See dfm_web/dfm_web.js.coffee for information
 $(document).on('ready page:load', function() {
-    return DfmWeb.activate_dfm_web();
+    DfmWeb.activate_dfm_web();
 });

data/spec/dummy/app/views/application/_form.html.erb

@@ -1,60 +1,62 @@
 <%= form_tag nil, method: :get do %>
-  <div class="field">
-    <%= label_tag :text_field %>
-    <%= text_field_tag :text_field, ' ' %> <!-- The space is a Chrome workaround.  Don't do that in practice -->
-  </div>
-
-  <div class="field">
-    <%= label_tag :text_field %>
-    <%= text_field_tag :text_field, "Locked", class: 'locked' %>
-  </div>
-
-
-  <div class="field">
-    <%= label_tag :password_field %>
-    <%= password_field_tag :password_field %>
-  </div>
-
-  <div class="field">
-    <%= label_tag :date_field %>
-    <%= date_field_tag :date_field %>
-  </div>
-
-  <div class="field">
-    <%= label_tag :select %>
-    <%= select_tag :select, options_for_select(['Item 1', 'Item 2']) %>
-  </div>
-
-  <div class="field">
-    <%= label_tag :text_area %>
-    <%= text_area_tag :text_area %>
-  </div>
-
-  <div class="field">
-    <%= label_tag :file_field %>
-    <%= file_field_tag :file_field %>
-  </div>
-
-  <div class="field">
-    <%= check_box_tag :check_box %>
-    <%= label_tag :check_box %>
-
-    <%= check_box_tag :check_box %>
-    <%= label_tag :check_box %>
-  </div>
-
-  <div class="field">
-    <%= radio_button_tag :example, :radio_button %>
-    <%= label_tag :radio_button %>
-
-    <%= radio_button_tag :example, :radio_button %>
-    <%= label_tag :radio_button %>
-  </div>
-
-  <div class="actions">
-    <%= submit_tag 'Submit' %>
-    <%= submit_tag 'Warn', class: 'warn' %>
-    <%= link_to "Alert", "#", class: 'button alert' %>      <!-- link with class "button" looks the same. -->
-  </div>
-
+  <!-- Random Namespace to avoid id conflicts -->
+  <%= fields_for nil, nil, namespace: "rand_#{rand(100)}" do |f|  %>
+    <div class="field">
+      <%= f.label :text_field %>
+      <%= f.text_field :text_field %> <!-- The space is a Chrome workaround.  Don't do that in practice -->
+    </div>
+
+    <div class="field">
+      <%= f.label :locked_field %>
+      <%= f.text_field :locked_field, value: "Locked", class: 'locked' %>
+    </div>
+
+    <div class="field">
+      <%= f.label :password_field %>
+      <%= f.password_field :password_field %>
+    </div>
+
+    <div class="field">
+      <%= f.label :date_field %>
+      <%= f.date_field :date_field %>
+    </div>
+
+    <div class="field">
+      <%= f.label :select %>
+      <%= f.select :select, options_for_select(['Item 1', 'Item 2']) %>
+    </div>
+
+    <div class="field">
+      <%= f.label :text_area %>
+      <%= f.text_area :text_area %>
+    </div>
+
+    <div class="field">
+      <%= f.label :file_field %>
+      <%= f.file_field :file_field %>
+    </div>
+
+    <div class="field">
+      <%= f.check_box :check_box_1 %>
+      <%= f.label :check_box_1 %>
+
+      <%= f.check_box :check_box_2 %>
+      <%= f.label :check_box_2 %>
+    </div>
+
+    <div class="field">
+      <%= f.radio_button :example, :radio_button_1 %>
+      <%= f.label :radio_button_1 %>
+
+      <%= f.radio_button :example, :radio_button_2 %>
+      <%= f.label :radio_button_2 %>
+    </div>
+
+    <div class="actions">
+      <%= f.submit 'Submit' %>
+      <%= f.submit 'Warn', class: 'warn' %>
+      <%= link_to "Alert", "#", class: 'button alert' %>      <!-- link with class "button" looks the same. -->
+    </div>
+
+  <% end %>
 <% end %>

data/spec/dummy/app/views/application/_tablesorter.html.erb

@@ -0,0 +1,129 @@
+<table class='tablesorter'>
+  <caption>This table has the 'tablesorter' class</caption>
+  <thead>
+    <tr>
+      <th class="sorter-false">Side TH</th>
+      <th>String</th>
+      <th>Date</th>
+      <th>Number</th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr>
+      <th>Row 1</th>
+      <td>Apple</td>
+      <td>2017-01-11</td>
+      <td>4</td>
+    </tr>
+
+    <tr>
+      <th>Row 2</th>
+      <td>Cucumber</td>
+      <td>2014-03-11</td>
+      <td>3</td>
+    </tr>
+
+    <tr>
+      <th>Row 3</th>
+      <td>Banana</td>
+      <td>2018-03-20</td>
+      <td>6</td>
+    </tr>
+
+
+    <tr class="warn">
+      <th>Row 4</th>
+      <td>warn</td>
+      <td>2011-03-07</td>
+      <td>-9</td>
+    </tr>
+
+    <tr class="warn">
+      <th>Row 5</th>
+      <td>warn</td>
+      <td>2015-03-08</td>
+      <td>-11</td>
+    </tr>
+
+    <tr class="warn">
+      <th>Row 6</th>
+      <td>warn</td>
+      <td>2015-03-09</td>
+      <td>-17</td>
+    </tr>
+
+    <tr class="warn">
+      <th>Row 7</th>
+      <td>warn</td>
+      <td>2015-03-09</td>
+      <td>-2</td>
+    </tr>
+
+
+    <tr class="highlight">
+      <th>Row 8</th>
+      <td>highlight</td>
+      <td>2018-03-20</td>
+      <td>22</td>
+    </tr>
+
+    <tr class="highlight">
+      <th>Row 9</th>
+      <td>highlight</td>
+      <td>2014-03-20</td>
+      <td>22</td>
+    </tr>
+
+    <tr class="highlight">
+      <th>Row 10</th>
+      <td>highlight</td>
+      <td>2018-03-20</td>
+      <td>22</td>
+    </tr>
+
+    <tr class="highlight">
+      <th>Row 11</th>
+      <td>highlight</td>
+      <td>2018-03-20</td>
+      <td>22</td>
+    </tr>
+
+    <tr>
+      <th>Row 12</th>
+      <td>Cake</td>
+      <td>2014-03-11</td>
+      <td>1</td>
+    </tr>
+
+    <tr>
+      <th>Row 13</th>
+      <td>Donut</td>
+      <td>2011-08-22</td>
+      <td>2</td>
+    </tr>
+
+    <tr>
+      <th>Row 14</th>
+      <td>Egg</td>
+      <td>2011-08-21</td>
+      <td>3</td>
+    </tr>
+
+  </tbody>
+
+  <tfoot>
+    <tr>
+      <th colspan='3'>Colspan 3</th>
+      <td>123</td>
+    </tr>
+    <tr>
+      <th colspan='3'>Colspan 3</th>
+      <td>456</td>
+    </tr>
+    <tr>
+      <th colspan='3'>Colspan 3</th>
+      <td>789</td>
+    </tr>
+  </tfoot>
+</table>

data/spec/dummy/app/views/application/index.html.erb

@@ -98,10 +98,10 @@
     </div>
     <div class="panel">
       <div class="field">
-        <%= text_field_tag :one,  "The space above me should equal.." %>
+        <%= text_field_tag :two,  "The space above me should equal.." %>
       </div>
       <div class="field">
-        <%= text_field_tag :one,  "..the space below me." %>
+        <%= text_field_tag :three,  "..the space below me." %>
       </div>
     </div>
     <div class="panel">
@@ -117,13 +117,13 @@
     <h2>H2: Labels</h2>
     <div class="panel">
       <div class="field">
-        <%= check_box_tag :check %>
+        <%= check_box_tag :example_check %>
         <%= label_tag "Checkboxes should have really wide labels." %>
       </div>
     </div>
     <div class="panel">
       <div class="field">
-        <%= radio_button_tag :radio, "1" %>
+        <%= radio_button_tag :example_radio, "1" %>
         <%= label_tag "Radio buttons should have really wide labels." %>
       </div>
     </div>
@@ -324,6 +324,14 @@
   </div>
 </div>
 
+<hr>
+
+<h1>Tables</h1>
+
+<%= render partial: 'tablesorter' %>
+
+
+
 <hr>
 
 <h1>Links / Buttons within Tables</h1>
@@ -351,11 +359,11 @@
 
     <tr>
       <th>
-        <%= text_field_tag "input", "Text Field" %>
+        <%= text_field_tag "th_input", "Text Field" %>
         <%= link_to "TH Button", "#", class: 'button' %>
       </th>
       <td>
-        <%= text_field_tag "input", "Text Field" %>
+        <%= text_field_tag "td_input", "Text Field" %>
         <%= link_to "TD Button", "#", class: 'button' %>
       </td>
     </tr>

data/spec/dummy/config/application.rb

@@ -1,12 +1,13 @@
 require File.expand_path('../boot', __FILE__)
 
 require "active_model/railtie"
-# require "active_record/railtie"
 require "action_controller/railtie"
 require "action_mailer/railtie"
 require "action_view/railtie"
 require "sprockets/railtie"
-#require "rails/test_unit/railtie"
+require 'jquery-rails'
+require 'jquery-tablesorter'
+
 
 Bundler.require(*Rails.groups)
 require "dfm_web"