+ new css (thanks to Thijs van der Vossen of Fingertips)

floere · Mar 9, 2012 · 0f18b46 · 0f18b46
1 parent 5189ee9
commit 0f18b46
Show file tree

Hide file tree

Showing 15 changed files with 403 additions and 215 deletions.
diff --git a/client/generate_bundles b/client/generate_bundles
@@ -53,10 +53,10 @@ system gzip_command
 # Copied also into the generator prototypes.
 #
 stylesheets_command = <<-STYLESHEETS
-sass -C test_project/stylesheets/picky.sass test_project/stylesheets/picky.css;
-sass -C test_project/stylesheets/application.sass test_project/stylesheets/application.css;
-cp test_project/stylesheets/picky.css ../generators/prototypes/client/sinatra/stylesheets/picky.css;
-cp test_project/stylesheets/application.css ../generators/prototypes/client/sinatra/stylesheets/application.css;
+# sass -C test_project/stylesheets/picky.sass test_project/stylesheets/picky.css;
+# sass -C test_project/stylesheets/application.sass test_project/stylesheets/application.css;
+# cp test_project/stylesheets/picky.css ../generators/prototypes/client/sinatra/stylesheets/picky.css;
+# cp test_project/stylesheets/application.css ../generators/prototypes/client/sinatra/stylesheets/application.css;
 STYLESHEETS
 p stylesheets_command
 system stylesheets_command

diff --git a/client/javascripts/picky.min.js b/client/javascripts/picky.min.js
diff --git a/client/javascripts/picky.source.js.tar b/client/javascripts/picky.source.js.tar
diff --git a/client/javascripts/source/picky.client.js b/client/javascripts/source/picky.client.js
@@ -66,17 +66,23 @@ var PickyClient = function(config) {
 
   // Enclosing selector.
   //
-  var enclosingSelector = config['enclosingSelector'] || '#picky';
+  var enclosingSelector = config['enclosingSelector'] || '.picky';
 
+  // Form selector.
+  //
+  var formSelector = config['formSelector'] || (enclosingSelector + ' form');
+
   // View config.
   //
-  config['input']        = $(config['inputSelector']     || (enclosingSelector + ' input.query'));
-  config['reset']        = $(config['resetSelector']     || (enclosingSelector + ' div.reset'));
-  config['button']       = $(config['buttonSelector']    || (enclosingSelector + ' input.search_button'));
-  config['counter']      = $(config['counterSelector']   || (enclosingSelector + ' div.status'));
-  config['dashboard']    = $(config['dashboardSelector'] || (enclosingSelector + ' .dashboard'));
+  config['form']         = $(formSelector);
+
+  config['input']        = $(config['inputSelector']     || (formSelector + ' input[type=search]'));
+  config['reset']        = $(config['resetSelector']     || (formSelector + ' div.reset'));
+  config['button']       = $(config['buttonSelector']    || (formSelector + ' input[type=button]'));
+  config['counter']      = $(config['counterSelector']   || (formSelector + ' div.status'));
+
   config['results']      = $(config['resultsSelector']   || (enclosingSelector + ' div.results'));
-  config['noResults']    = $(config['noResultsSelector'] || (enclosingSelector + ' .no_results'));
+  config['noResults']    = $(config['noResultsSelector'] || (enclosingSelector + ' div.no_results'));
   config['moreSelector'] =   config['moreSelector']      ||  enclosingSelector + ' div.results div.addination:last';
 
   // Allocations cloud.
@@ -92,7 +98,7 @@ var PickyClient = function(config) {
   config['results']        = $(config['resultsSelector'] || (enclosingSelector + ' div.results'));
   config['resultsDivider'] = config['resultsDivider']    || '';
   config['nonPartial']     = config['nonPartial']        || []; // e.g. ['category1', 'category2']
-  config['wrapResults']    = config['wrapResults']       || '<ol class="results"></ol>';
+  config['wrapResults']    = config['wrapResults']       || '<ol></ol>';
 
   // The central Picky controller.
   //

diff --git a/client/javascripts/source/picky.view.js b/client/javascripts/source/picky.view.js
@@ -9,7 +9,7 @@ var PickyView = function(picky_controller, config) {
   var clearButton    = config['reset'];
   var searchButton   = config['button'];
   var resultCounter  = config['counter'];
-  var dashboard      = config['dashboard'];
+  var form           = config['form'];
   var moreSelector   = config['moreSelector']; // e.g. "#picky div.results div.addination:last"
 
   // Push into results.
@@ -157,7 +157,7 @@ var PickyView = function(picky_controller, config) {
     return 'ok';
   };
   var setSearchStatus = function(statusClass) {
-    dashboard.attr('class', 'dashboard ' + statusClass);
+    form.attr('class', statusClass);
   };
   var setSearchStatusFor = function(data) {
     setSearchStatus(resultStatusFor(data));

diff --git a/client/lib/picky-client/helper.rb b/client/lib/picky-client/helper.rb
@@ -13,7 +13,7 @@ class Helper
     <input type="search" autocorrect="off" class="query"/>
     <div class="reset" title="clear"></div>
   <!-- </div> -->
-  <input type="button" class="search_button" value="#{search_button_text}">
+  <input type="button" value="#{search_button_text}"/>
 </form>
 HTML
     }
@@ -35,7 +35,7 @@ class Helper
 <section class="picky">
   #{@@localized_input[options]}
   #{@@localized_results[options]}
-</div>
+</section>
 HTML
     }
 

diff --git a/client/test_project/book.rb b/client/test_project/book.rb
@@ -36,7 +36,7 @@ def initialize id, title, author, year, publisher, subjects
   # Note: This is just an example. Please do not render in the model.
   #
   def to_s
-    "<li class='book'><p>\"#{@title}\", by #{@author}</p><p>#{@year}, #{@publisher}</p><p>#{@subjects}</p></li>"
+    "<li class='book'><h3><a href='http://google.com?q=#{@title}'>#{@title}</a></h3><em>#{@author}</em><p>#{@year}, #{@publisher}</p><p>#{@subjects}</p></li>"
   end
 
 end
diff --git a/client/test_project/images/picky.png b/client/test_project/images/picky.png
diff --git a/client/test_project/javascripts/picky.client.js b/client/test_project/javascripts/picky.client.js
@@ -66,17 +66,23 @@ var PickyClient = function(config) {
 
   // Enclosing selector.
   //
-  var enclosingSelector = config['enclosingSelector'] || '#picky';
+  var enclosingSelector = config['enclosingSelector'] || '.picky';
 
+  // Form selector.
+  //
+  var formSelector = config['formSelector'] || (enclosingSelector + ' form');
+
   // View config.
   //
-  config['input']        = $(config['inputSelector']     || (enclosingSelector + ' input.query'));
-  config['reset']        = $(config['resetSelector']     || (enclosingSelector + ' div.reset'));
-  config['button']       = $(config['buttonSelector']    || (enclosingSelector + ' input.search_button'));
-  config['counter']      = $(config['counterSelector']   || (enclosingSelector + ' div.status'));
-  config['dashboard']    = $(config['dashboardSelector'] || (enclosingSelector + ' .dashboard'));
+  config['form']         = $(formSelector);
+
+  config['input']        = $(config['inputSelector']     || (formSelector + ' input[type=search]'));
+  config['reset']        = $(config['resetSelector']     || (formSelector + ' div.reset'));
+  config['button']       = $(config['buttonSelector']    || (formSelector + ' input[type=button]'));
+  config['counter']      = $(config['counterSelector']   || (formSelector + ' div.status'));
+
   config['results']      = $(config['resultsSelector']   || (enclosingSelector + ' div.results'));
-  config['noResults']    = $(config['noResultsSelector'] || (enclosingSelector + ' .no_results'));
+  config['noResults']    = $(config['noResultsSelector'] || (enclosingSelector + ' div.no_results'));
   config['moreSelector'] =   config['moreSelector']      ||  enclosingSelector + ' div.results div.addination:last';
 
   // Allocations cloud.
@@ -92,7 +98,7 @@ var PickyClient = function(config) {
   config['results']        = $(config['resultsSelector'] || (enclosingSelector + ' div.results'));
   config['resultsDivider'] = config['resultsDivider']    || '';
   config['nonPartial']     = config['nonPartial']        || []; // e.g. ['category1', 'category2']
-  config['wrapResults']    = config['wrapResults']       || '<ol class="results"></ol>';
+  config['wrapResults']    = config['wrapResults']       || '<ol></ol>';
 
   // The central Picky controller.
   //

diff --git a/client/test_project/javascripts/picky.view.js b/client/test_project/javascripts/picky.view.js
@@ -9,7 +9,7 @@ var PickyView = function(picky_controller, config) {
   var clearButton    = config['reset'];
   var searchButton   = config['button'];
   var resultCounter  = config['counter'];
-  var dashboard      = config['dashboard'];
+  var form           = config['form'];
   var moreSelector   = config['moreSelector']; // e.g. "#picky div.results div.addination:last"
 
   // Push into results.
@@ -157,7 +157,7 @@ var PickyView = function(picky_controller, config) {
     return 'ok';
   };
   var setSearchStatus = function(statusClass) {
-    dashboard.attr('class', 'dashboard ' + statusClass);
+    form.attr('class', statusClass);
   };
   var setSearchStatusFor = function(data) {
     setSearchStatus(resultStatusFor(data));

diff --git a/client/test_project/stylesheets/picky.css b/client/test_project/stylesheets/picky.css
@@ -1,37 +1,37 @@
-#picky {
+.picky {
   overflow: hidden; }
-  #picky > div.header {
+  .picky > div.header {
     display: none; }
-  #picky div.dashboard {
+/*  .picky form {
     position: relative;
     overflow: hidden;
     background-color: lightGrey;
     padding: 5px 5px 7px 5px;
     height: 26px;
-    margin-bottom: 3px; }
-    #picky div.dashboard.empty .status {
-      background-color: #8cacda; }
-    #picky div.dashboard.empty .feedback {
+    margin-bottom: 3px; }*/
+    .picky form.empty .status {
+      background-color: hsl(215, 51%, 70%); }
+    .picky form.empty .feedback {
       background-color: #d0e2ff; }
-    #picky div.dashboard.none .status {
-      background-color: red; }
-    #picky div.dashboard.none .feedback {
+    .picky form.none .status {
+      background-color: hsl(6, 51%, 70%); }
+    .picky form.none .feedback {
       background-color: #ffdddd; }
-    #picky div.dashboard.support .status {
-      background-color: #ff6600; }
-    #picky div.dashboard.support .feedback {
+    .picky form.support .status {
+      background-color: hsl(29, 51%, 70%); }
+    .picky form.support .feedback {
       background-color: #faf3d0; }
-    #picky div.dashboard.ok .status {
-      background-color: #09be01; }
-    #picky div.dashboard.ok .feedback {
+    .picky form.ok .status {
+      background-color: hsl(82, 51%, 70%); }
+    .picky form.ok .feedback {
       background-color: #bcf0b3; }
-    #picky div.dashboard .feedback {
+    .picky form .feedback {
       width: 85%;
       float: left;
       border: 1px solid #cccccc;
       padding: 0;
       margin: 0; }
-      #picky div.dashboard .feedback .status {
+/*      .picky form .status {
         float: left;
         width: 45px;
         height: 26px;
@@ -40,10 +40,10 @@
         padding: 0 0 0 2px;
         font-weight: bold;
         color: white;
-        margin-right: 5px; }
-      #picky div.dashboard .feedback .status.alert {
-        background-color: lightgreen; }
-      #picky div.dashboard .feedback input.query {
+        margin-right: 5px; }*/
+/*      .picky form .status.alert {
+        background-color: yellow; }*/
+/*      .picky form input.query {
         float: left;
         width: 80%;
         height: 100%;
@@ -55,81 +55,67 @@
         margin: 0;
         padding: 4px 0 0 0;
         outline: none;
-        background: none; }
-      #picky div.dashboard .feedback .reset {
+        background: none; }*/
+/*      .picky form .reset {
         float: right;
         width: 18px;
         height: 18px;
         margin: 3px 3px 0px 0px;
         cursor: pointer;
-        opacity: 0; }
-    #picky div.dashboard input.search_button {
-      margin: 5px 0px 5px 2%; }
-  #picky div.results {
+        opacity: 0; }*/
+/*    .picky form input.search_button {
+      margin: 5px 0px 5px 2%; }*/
+/*  .picky div.results {
     margin-top: 0px;
     padding: 0px; }
-    #picky div.results div.header, #picky div.results div.addination {
+    .picky div.results div.header, .picky div.results div.addination {
       color: #555555;
       background-color: #eeeeee;
       padding: 6px 5px 5px 8px; }
-      #picky div.results div.header .tothetop, #picky div.results div.addination .tothetop {
+      .picky div.results div.header .tothetop, .picky div.results div.addination .tothetop {
         float: right; }
-        #picky div.results div.header .tothetop a, #picky div.results div.addination .tothetop a {
+        .picky div.results div.header .tothetop a, .picky div.results div.addination .tothetop a {
           display: block;
           width: 20px;
           height: 20px; }
-    #picky div.results ol.results {
+    .picky div.results ol.results {
       list-style-type: none;
       padding: 0px;
       margin: 0px; }
-    #picky div.results div.addination {
+    .picky div.results div.addination {
       position: relative;
       text-align: center;
       color: #276abb;
       cursor: pointer; }
-  #picky .no_results {
-    display: none; }
-  #picky .allocations {
+  .picky .no_results {
+    display: none; }*/
+/*  .picky .allocations {
     clear: both;
     overflow: hidden;
     background-color: white;
-    padding-bottom: 2px; }
-    #picky .allocations ol.hidden {
+    padding-bottom: 2px; }*/
+    .picky .allocations ol.hidden {
       display: none; }
-    #picky .allocations ol.more:hover {
+    .picky .allocations ol.more:hover {
       background-color: #cccccc;
       cursor: pointer; }
-    #picky .allocations ol.more {
+/*    .picky .allocations ol.more {
       background-color: #eeeeee;
       display: none;
       text-align: center;
       height: 32px;
       line-height: 32px; }
-      #picky .allocations ol.more li {
-        text-align: center; }
-    #picky .allocations ol {
+      .picky .allocations ol.more li {
+        text-align: center; }*/
+    .picky .allocations ol {
       list-style-position: outside;
       list-style: none;
-      padding: 0;
-      margin: 0px;
-      overflow: hidden; }
-      #picky .allocations ol li {
-        margin: 0px;
-        margin-bottom: 3px;
-        padding: 10px 13px;
-        cursor: pointer;
-        display: block;
-        font: menu;
-        font-size: 1em;
-        line-height: 16px;
-        background-color: #f3f3f3;
-        overflow: hidden;
-        color: #276abb; }
-        #picky .allocations ol li .text {
+      padding: 0;}
+        .picky .allocations ol li .text {
           max-width: 90%;
           float: left; }
-        #picky .allocations ol li .count {
+        .picky .allocations ol li .count {
           float: right;
           color: #cccccc; }
-      #picky .allocations ol li:hover {
-        background-color: #d0e2ff; }
+      .picky .allocations ol li:hover {
+        background-color: #eee; }