dfm_web 2.1.5 → 2.1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 623263b77d9cabe6aa0645231b7b4ed0c4554380
-  data.tar.gz: 9bab0e345d1319ea59e8008e275ec6aa2cb44c1b
+  metadata.gz: b84ece98c264df4a4cc9ea05faa9ae080c3259bc
+  data.tar.gz: 4fc2c41439e5f6c761bedb6d90e05bbb20eb6fa1
 SHA512:
-  metadata.gz: '093adb49b723d467094a88267a0452d1069d92410be666cf874b9b3cf7de718a75048bc648c852a8c0ba35e104bc53ac372e66aa5b8dd7b842f9d6b55b7c3ab6'
-  data.tar.gz: 04c4b2b326053fef1d4b2a60e5adbd2fbca48dac7e35275900906fe856bbe39c78a6286b5fecff96a93b49fd6da2d200c279d1320c6a03bb8e71aab98c6906ea
+  metadata.gz: 16765b01e5d49abe2e25ace7ffeffad1603b69ae8f65ba23e32c14b4a49ccf3e2edba8414fc99947fd9b685cd5678c979d5989cc272ce0f83c8aeaff97f56821
+  data.tar.gz: 6e83e0af92da2ef32c81e4326d4d8a174742e45eaad996ad9bb018e5aab80bd249b48c1e51bac51e68c389d8ee13e9c48278cd401ee1c22bfe154a5e22547075

data/MIT-LICENSE

@@ -1,4 +1,4 @@
-Copyright 2014 YOURNAME
+Copyright 2014 Jacob Duffy
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

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

@@ -90,7 +90,6 @@ input[type=submit], .button
   padding: 10px 20px;
   margin: 3px 0 10px 0;   /* Unfortunately we need 3px for the button:active outline. */
                           /* Anything that lines up with button will need 3px as well. */
-  background: linear-gradient(rgba(0, 82, 136, 1), rgba(0, 82, 136, 0.78));
   border: none;
   color: white !important;
   text-decoration: none;
@@ -106,13 +105,21 @@ input[type=submit]:focus, .button:focus {
   outline: 3px solid rgba(135, 206, 250, 0.66);
 }
 
-input[type=submit].alert, .button.alert {
-  background: linear-gradient(rgb(168, 1, 14), rgba(199, 3, 0, 0.78));
+input[type=submit],           .button           { background: linear-gradient(rgb(0, 129, 198), rgb(0, 122, 201));    text-shadow: 1px 1px 0 #434446; }
+input[type=submit].okay,      .button.okay      { background: linear-gradient(rgb(96, 180, 111), rgb(103, 190, 118)); text-shadow: 1px 1px 0 #4c8e58; }
+input[type=submit].highlight, .button.highlight { background: linear-gradient(rgb(203, 199, 0), rgb(209, 205, 0));    text-shadow: 1px 1px 0 #959000; }
+input[type=submit].warn,      .button.warn      { background: linear-gradient(rgb(220, 129, 0), rgb(211, 132, 0));    text-shadow: 1px 1px 0 #9f5d00; }
+input[type=submit].alert,     .button.alert     { background: linear-gradient(rgb(217, 54, 54), rgb(240, 60, 60));    text-shadow: 1px 1px 0 #9d2727; }
+input[type=submit].gray,      .button.gray      { background: linear-gradient(rgb(177, 177, 177), rgb(189, 189, 189)); }
+input[type=submit]:disabled,  .button.disabled,
+input[type=submit]:hover:disabled, .button:hover.disabled  {
+  background: linear-gradient(rgb(204, 204, 204), rgb(204, 204, 204));
+  box-shadow: none;
+  text-shadow: 1px 1px 0 #8d8f94;
+  pointer-events: none;
 }
 
-input[type=submit].warn, .button.warn {
-  background: linear-gradient(rgb(168, 84, 0), rgba(199, 122, 0, 0.78));
-}
+
 
 .field_with_errors label {
   color: red;

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

@@ -25,10 +25,8 @@ body {
   height: 75px;
   margin: -25px 0 25px 0;  /* This doesn't seem right */
   float: left;
-  position: relative;
   font-size: 1.5em;
   padding: 25px;
-  z-index: 1;
   pointer-events: none;
 }
 

data/app/assets/stylesheets/dfm_web/style.css.erb

@@ -70,17 +70,12 @@ footer {
 }
 
 /* Special style for warn and alert.  box-shadow instead of border-width so the content doesn't shift */
-.panel.warn{
-  box-shadow: inset 3px 0 0 0 rgb(199, 122, 0);
-  border-color: rgba(199, 122, 0, .25);
-  background-color: rgba(199, 122, 0, .08);
-}
+.panel.okay       { background-color: rgba(0, 255, 0, 0.11);    border-color: rgb(0, 183, 0);     box-shadow: inset 4px 0 0 0 rgb(0, 183, 0);   }
+.panel.highlight  { background-color: rgba(255, 255, 0, 0.16);  border-color: rgb(200, 200, 52);  box-shadow: inset 4px 0 0 0 rgb(200, 200, 52); }
+.panel.warn       { background-color: rgba(255, 147, 0, 0.11);  border-color: rgb(255, 147, 0);   box-shadow: inset 4px 0 0 0 rgb(255, 147, 0); }
+.panel.alert      { background-color: rgba(255, 0, 0, 0.09);    border-color: rgb(168, 1, 0);     box-shadow: inset 4px 0 0 0 rgb(168, 1, 0); }
+.panel.gray       { background-color: rgba(0, 0, 0, 0.1);       border-color: rgb(128, 128, 128); box-shadow: inset 4px 0 0 0 rgb(128, 128, 128); }
 
-.panel.alert{
-  box-shadow: inset 3px 0 0 0 rgb(168, 1, 14);
-  border-color: rgba(168, 1, 0, .25);
-  background-color: rgba(168, 1, 0, .05);
-}
 
 /* Simulate a print-out */
 .paper {
@@ -120,12 +115,13 @@ p  { font-size: 1em;  line-height: 1.3em; margin: 0; }
 
 
 /* Alert and Warn rules are added to specific elements.  Buttons, Typography, panels all are totally different */
-h1.alert, h2.alert, h3.alert, p.alert, span.alert {
-  color: rgb(168, 1, 14);
-}
-h1.warn, h2.warn, h3.warn, p.warn, span.warn {
-  color: rgb(199, 122, 0);
-}
+
+
+h1.okay, h2.okay, h3.okay, p.okay, span.okay { color: rgb(0, 168, 0); }
+h1.highlight, h2.highlight, h3.highlight, p.highlight, span.highlight { color: rgb(191, 188, 0); }
+h1.warn,  h2.warn,  h3.warn,  p.warn,  span.warn {color: rgb(199, 122, 0); }
+h1.alert, h2.alert, h3.alert, p.alert, span.alert { color: rgb(168, 1, 14); }
+h1.gray, h2.gray, h3.gray, p.gray, span.gray { color: rgb(166, 166, 166); }
 
 
 /* Header right before .button  */
@@ -171,6 +167,13 @@ p a, p a:visited { line-height: inherit; }
 ul, ol { margin: 0; padding: 0 0 0 1em; }
 ul li, ol li { margin: .5em 0 .5em 0; }
 
+li.okay       { color: rgb(0, 180, 0); }
+li.highlight  { color: rgb(177, 171, 40); }
+li.warn       { color: rgb(198, 118, 0); }
+li.alert      { color: rgb(233, 0, 0); }
+li.gray       { color: rgb(122, 122, 122); }
+
+
 /* Reveal subtext on hover */
 /* transitions don't work with width: auto, so a large-enough max-width is used instead */
 /* Example: <h1 class="hover_span">LD<span>AP&nbsp;</span>E<span>n</span>R<span>ichment&nbsp;</span>P<span>rogram</span></h1>  */

data/lib/dfm_web/version.rb

@@ -1,10 +1,11 @@
 module DfmWeb
-  VERSION = "2.1.5"
+  VERSION = "2.1.6"
 end
 
 
 # Version History
 
+# 2.1.6   Added okay/highlight/warn/alert/gray class rules to panel, lists, headers, buttons, p where missing.
 # 2.1.5   Added explicit transparent background on body to aid combining DfmWeb with other CSS frameworks.
 # 2.1.4   Fixed menu bug when browser was exactly 1037px wide with a scrollbar.
 # 2.1.3   New Table TR modifier classes: okay, highlight, warn, alert, gray.

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

@@ -161,48 +161,57 @@
 
 <hr>
 
-<h1>Alert & Warn classes</h1>
+<h1>Modifier classes</h1>
 
 <p>Use a <span class='alert'>span</span> if you don't want to change an entire element.</p>
 
 <div class="pure-g">
   <div class="pure-u-1 pure-u-lg-1-4">
     <h1>H1: (no classes)</h1>
+    <h1 class='okay'>H1: okay</h1>
+    <h1 class='highlight'>H1: highlight</h1>
     <h1 class='warn'>H1: warn</h1>
     <h1 class='alert'>H1: alert</h1>
+    <h1 class='gray'>H1: gray</h1>
   </div>
   <div class="pure-u-1 pure-u-lg-1-4">
     <h2>H2: (no classes)</h2>
+    <h2 class='okay'>H2: okay</h2>
+    <h2 class='highlight'>H2: highlight</h2>
     <h2 class='warn'>H2: warn</h2>
     <h2 class='alert'>H2: alert</h2>
+    <h2 class='gray'>H2: gray</h2>
   </div>
   <div class="pure-u-1 pure-u-lg-1-4">
     <h3>H3: (no classes)</h3>
+    <h3 class='okay'>H3: okay</h3>
+    <h3 class='highlight'>H3: highlight</h3>
     <h3 class='warn'>H3: warn</h3>
     <h3 class='alert'>H3: alert</h3>
+    <h3 class='gray'>H3: gray</h3>
   </div>
   <div class="pure-u-1 pure-u-lg-1-4">
     <p>P: (no classes)</p>
+    <p class='okay'>P: okay</p>
+    <p class='highlight'>P: highlight</p>
     <p class='warn'>P: warn</p>
     <p class='alert'>P: alert</p>
+    <p class='gray'>P: gray</p>
   </div>
 </div>
 
 
 <div class='panel'>DIV: panel</div>
+<div class='panel okay'>DIV: panel okay</div>
+<div class='panel highlight'>DIV: panel highlight</div>
 <div class='panel warn'>DIV: panel warn</div>
 <div class='panel alert'>DIV: panel alert</div>
+<div class='panel gray'>DIV: panel gray</div>
 
 
 
 <hr>
 
-<h1>H1: Errors</h1>
-<p>...not yet implemented</p>
-<%= form_tag do %>
-  <%= submit_tag 'Break Something', class: 'alert' %>     <!-- TODO: Create nice Error templates -->
-<% end %>
-<hr>
 
 <h1 class="hover_span">H1: H<span>over&nbsp;</span>over<span>&nbsp;me to see the</span> Span<span>&nbsp;content</span></h1>
 <h1 class="hover_span">LD<span>AP&nbsp;</span>E<span>n</span>R<span>ichment&nbsp;</span>P<span>rogram</span></h1>
@@ -270,14 +279,22 @@
 
     <h2>Links with button</h2>
     <%= link_to "button", "#", class: 'button' %>
-    <%= link_to "button alert", "#", class: 'button alert' %>
+    <%= link_to "button okay", "#", class: 'button okay' %>
+    <%= link_to "button highlight", "#", class: 'button highlight' %>
     <%= link_to "button warn", "#", class: 'button warn' %>
+    <%= link_to "button alert", "#", class: 'button alert' %>
+    <%= link_to "button gray", "#", class: 'button gray' %>
+    <%= link_to "button disabled", "#", class: 'button disabled' %>
 
     <h2>Form Submit</h2>
     <%= form_tag nil, method: :get do %>
       <%= submit_tag "submit" %>
-      <%= submit_tag "submit alert", class: 'alert' %>
+      <%= submit_tag "submit okay", class: 'okay' %>
+      <%= submit_tag "submit highlight", class: 'highlight' %>
       <%= submit_tag "submit warn", class: 'warn' %>
+      <%= submit_tag "submit alert", class: 'alert' %>
+      <%= submit_tag "submit gray", class: 'gray' %>
+      <%= submit_tag "submit disabled", disabled: 'disabled' %>
     <% end %>
 
 
@@ -291,7 +308,6 @@
 <hr>
 
 <div class="pure-g">
-
   <div class="pure-u-1 pure-u-lg-1-3">
     <h1>Unordered List</h1>
     <ul>
@@ -324,15 +340,12 @@
     <h1>List in a panel</h1>
     <div class="panel">
       <ul>
-        <li>Wisconsin</li>
-        <li>Hawaii
-          <ol>
-            <li>Waikiki</li>
-            <li>Punaluu</li>
-          </ol>
-        </li>
-        <li>Florida</li>
-        <li>California</li>
+        <li class="">Normal</li>
+        <li class="okay">Okay</li>
+        <li class="highlight">Highlight</li>
+        <li class="warn">Warn</li>
+        <li class="alert">Alert</li>
+        <li class="gray">Gray</li>
       </ul>
     </div>
   </div>
@@ -353,18 +366,18 @@
 <table>
   <thead>
   <tr>
-    <th><%= link_to "TH Link", "#" %></th>
-    <td><%= link_to "TD Link", "#" %></td>
+    <th colspan="2"><%= link_to "TH Link", "#" %></th>
+    <td colspan="2"><%= link_to "TD Link", "#" %></td>
   </tr>
   </thead>
   <tbody>
     <tr>
-      <th>
+      <th colspan="2">
         <%= link_to "TH Button", "#", class: 'button' %>
         <%= link_to "TH Button", "#", class: 'button warn' %>
         <%= link_to "TH Button", "#", class: 'button alert' %>
       </th>
-      <td>
+      <td colspan="2">
         <%= link_to "TD Button", "#", class: 'button' %>
         <%= link_to "TD Button", "#", class: 'button warn' %>
         <%= link_to "TD Button", "#", class: 'button alert' %>
@@ -374,10 +387,14 @@
     <tr>
       <th>
         <%= text_field_tag "th_input", "Text Field" %>
+      </th>
+      <th>
         <%= link_to "TH Button", "#", class: 'button' %>
       </th>
       <td>
         <%= text_field_tag "td_input", "Text Field" %>
+      </td>
+      <td>
         <%= link_to "TD Button", "#", class: 'button' %>
       </td>
     </tr>
@@ -385,10 +402,14 @@
     <tr>
       <th>
         <%= select_tag "input", options_for_select(["Select Tag"]) %>
+      </th>
+      <th>
         <%= link_to "TH Button", "#", class: 'button' %>
       </th>
       <td>
         <%= select_tag "input", options_for_select(["Select Tag"]) %>
+      </td>
+      <td>
         <%= link_to "TD Button", "#", class: 'button' %>
       </td>
     </tr>