Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

+ preparations for 4.3.0, + completely overhauled JS, + gorgeous new …

…design (thanks @tvandervossen!)
  • Loading branch information...
commit 66abf229075a2c431db4d91b2566573b2cf72003 1 parent 6c14477
@floere authored
Showing with 1,268 additions and 1,050 deletions.
  1. BIN  client/javascripts/picky.source.js.tar
  2. +0 −6 client/test_project/app.rb
  3. +0 −4 client/test_project/stylesheets/picky.css
  4. +0 −166 client/test_project/views/configure.haml
  5. +1 −7 generators/prototypes/all_in_one/sinatra/app.rb
  6. +10 −10 generators/prototypes/all_in_one/sinatra/book.rb
  7. BIN  generators/prototypes/all_in_one/sinatra/images/picky.png
  8. +19 −17 generators/prototypes/all_in_one/sinatra/javascripts/picky.min.js
  9. +82 −18 generators/prototypes/all_in_one/sinatra/stylesheets/application.css
  10. BIN  generators/prototypes/all_in_one/sinatra/stylesheets/images/background.png
  11. +10 −0 generators/prototypes/all_in_one/sinatra/stylesheets/images/cancel.svg
  12. +277 −135 generators/prototypes/all_in_one/sinatra/stylesheets/picky.css
  13. +0 −188 generators/prototypes/all_in_one/sinatra/views/configure.haml
  14. +232 −58 generators/prototypes/all_in_one/sinatra/views/search.haml
  15. +19 −30 generators/prototypes/client/sinatra/app.rb
  16. +9 −9 generators/prototypes/client/sinatra/book.rb
  17. BIN  generators/prototypes/client/sinatra/images/picky.png
  18. +82 −18 generators/prototypes/client/sinatra/stylesheets/application.css
  19. BIN  generators/prototypes/client/sinatra/stylesheets/images/background.png
  20. +10 −0 generators/prototypes/client/sinatra/stylesheets/images/cancel.svg
  21. +277 −135 generators/prototypes/client/sinatra/stylesheets/picky.css
  22. +0 −188 generators/prototypes/client/sinatra/views/configure.haml
  23. +232 −58 generators/prototypes/client/sinatra/views/search.haml
  24. +5 −0 history.textile
  25. +2 −2 integration
  26. +1 −1  version.rb
View
BIN  client/javascripts/picky.source.js.tar
Binary file not shown
View
6 client/test_project/app.rb
@@ -28,12 +28,6 @@
haml :'/search'
end
-# Configure. The configuration info page.
-#
-get '/configure' do
- haml :'/configure'
-end
-
# For full results, you get the ids from the picky server
# and then populate the result with models (rendered, even).
#
View
4 client/test_project/stylesheets/picky.css
@@ -1,7 +1,3 @@
-/* Headers */
-.picky .header {
- display: none; }
-
/* Form */
form
{
View
166 client/test_project/views/configure.haml
@@ -1,166 +0,0 @@
-!!!
-%html{ :lang => 'en' }
- %head
- %link{:href => "stylesheets/stylesheet.css", :media => "screen", :rel => "stylesheet", :type => "text/css"}/
- %body
- %img{:src => "images/picky.png"}/
- %p
- %a{:href => "http://floere.github.com/picky"} To the Picky Homepage
- \/
- %a{:href => '/' } Back to the example
- .content
- %h1 Already made it this far? You're good!
- %p I think you're ready for configuring me for your own purposes.
- %h2 Configuring the Picky client.
- %p
- There are two places where you configure the Picky client:
- %ol
- %li
- %a{ :href => '#controller' } In the controller.
- (client to Picky server)
- %li
- %a{ :href => '#view' } In the view.
- (javascript client interface)
- %h2#controller Controller
- %p
- Open the file
- %strong app.rb
- and take a peek inside.
- %p
- First you need both a client instance for a
- %strong full
- or a
- %strong live search
- depending on what you need (Full gets results with IDs, Live without and is used for updating the counter).
- %p
- In the example, I called it
- %strong BookSearch
- \.
- %code
- %pre
- :preserve
- BookSearch = Picky::Client.new :host => 'localhost', :port => 8080, :path => '/books'
- %p
- Both clients offer the options:
- %dl
- %dt
- %strong host
- %dd The Picky search server host.
- %dt
- %strong port
- %dd The Picky search server port (see unicorn.rb in the server).
- %dt
- %strong path
- %dd The Picky search path (see app/application.rb in the server for the mapping path => query).
- %p
- Then, use these Client instances in your actions. For example like this:
- %code
- %pre
- :preserve
- get '/search/full' do
- results = BookSearch.search params[:query], :ids => params[:ids], :offset => params[:offset]
- results.extend Picky::Convenience
- results.populate_with Book do |book|
- book.to_s
- end
- ActiveSupport::JSON.encode results
- end
- %p
- This part gets a
- %strong hash
- with the results:
- %code
- %pre results = BookSearch.search params[:query], :ids => params[:ids], :offset => params[:offset]
- %p
- This part takes the
- %strong hash
- and extends it with a few useful and convenient methods:
- %code
- %pre results.extend Picky::Convenience
- %p
- One of these methods is the
- %strong populate_with
- method which takes a
- %strong model
- as parameter, and then gets the corresponding
- %strong model instances
- for each id in the result.
- %code
- %pre
- :preserve
- results.populate_with Book do |book|
- book.to_s
- end
- The
- %strong book.to_s
- simulates rendering a book.
- You can do whatever with the book instance if you just return a rendered thing that's supposed to be shown in the front end.
- %p
- If you don't want to render in the controller, you can do so in a view. In the controller just call
- %code
- %pre
- results.populate_with Book
- and then render the books in a view using:
- %code
- %pre
- :preserve
- results.entries do |book|
- render book # or book.to_s, or however you like to render the book.
- end
- %p
- At the end, encode the hash in JSON:
- %code
- %pre
- ActiveSupport::JSON.encode results
- That's it for the controller.
- %p
- All the steps in one:
- %code
- %pre
- :preserve
- BookSearch = Picky::Client.new :host => 'localhost', :port => 8080, :path => '/books'
-
- get '/search/full' do
- results = BookSearch.search params[:query], :ids => params[:ids], :offset => params[:offset]
-
- results.extend Picky::Convenience
- results.populate_with Book do |book|
- book.to_s
- end
-
- ActiveSupport::JSON.encode results
- end
- %h2#view View
- %p
- The view is even easier. Just add the line
- %code
- %pre
- \= Picky::Helper.cached_interface
- if you use just one language, or
- %code
- %pre
- \= Picky::Helper.interface :button => 'search', :no_results => 'No results!', :more => 'more'
- if you use multiple languages.
- (You'd use the options
- %pre :button => t(:'search.button'), :no_results => t(:'search.no_results'), :more => t(:'search.more')
- of course, with proper i18n)
- The same options can be used for
- %strong #cached_interface
- but they will be cached, so you can only set them once and then reused.
- %p
- You're almost finished. Take a look at the file
- %strong views/search.haml
- where you'll find javascript at the end. It looks something like this:
- %code
- %pre
- :preserve
- :javascript
- pickyClient = new PickyClient({
- // A full query displays the rendered results.
- //
- full: '/search/full',
-
- // etc.
- Just take a look at the possible javascript client options in that file.
- %p
- %strong Good luck my friend! *waves several stubby pink tentacles*
View
8 generators/prototypes/all_in_one/sinatra/app.rb
@@ -89,12 +89,6 @@ def each
haml :'/search'
end
- # Configure. The configuration info page.
- #
- get '/configure' do
- haml :'/configure'
- end
-
# Renders the results into the json.
#
# You get the results from the (local) picky server and then
@@ -106,7 +100,7 @@ def each
results = results.to_hash
results.extend Picky::Convenience
results.populate_with Book do |book|
- book.render
+ book.to_s
end
#
View
20 generators/prototypes/all_in_one/sinatra/book.rb
@@ -9,34 +9,34 @@
# * a number of subjects
#
class Book
-
+
@@books_mapping = {}
-
+
# Load the books on startup.
#
- file_name = File.expand_path "../data/#{PICKY_ENVIRONMENT}/library.csv", __FILE__
+ file_name = File.expand_path "data/#{PICKY_ENVIRONMENT}/library.csv", File.dirname(__FILE__)
CSV.open(file_name, 'r').each do |row|
@@books_mapping[row.shift.to_i] = row
end
-
+
# Find uses a lookup table.
#
def self.find ids, _ = {}
ids.map { |id| new(id, *@@books_mapping[id]) }
end
-
+
attr_reader :id
-
+
def initialize id, title, author, year, publisher, subjects
@id, @title, @author, @year, @publisher, @subjects = id, title, author, year, publisher, subjects
end
-
+
# "Rendering" ;)
#
# Note: This is just an example. Please do not render in the model.
#
- def render
- "<li class='book'><p>\"#{@title}\", by #{@author}</p><p>#{@year}, #{@publisher}</p><p>#{@subjects}</p></li>"
+ def to_s
+ "<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
View
BIN  generators/prototypes/all_in_one/sinatra/images/picky.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
36 generators/prototypes/all_in_one/sinatra/javascripts/picky.min.js
@@ -1,17 +1,19 @@
-Array.prototype.index=function(c){for(var i=0,g=this.length;i<g;i++)if(this[i]==c)return i;return null};Array.prototype.include=function(c){return this.index(c)!==null};Array.prototype.remove=function(c){this.splice(c,1);return this};var PickyI18n={};$(function(){PickyI18n.locale=$("html").attr("lang").split("-")[0]||"en"});
-var dictionary={common:{join:{de:"und",fr:"et",it:"e",en:"and",ch:"und"},"with":{de:"mit",fr:"avec",it:"con",en:"with",ch:"mit"},of:{de:"von",fr:"de",it:"di",en:"of",ch:"vo"},to:{de:"bis",fr:"\u00e0",it:"alla",en:"to",ch:"bis"}},results:{addination:{more:{de:"Weitere Resultate",fr:"Autres r\u00e9sultats",it:"Altri risultati",en:"More results",ch:"Mee Resultaat"}},header:{de:"Ergebnisse",fr:"R\u00e9sultats",it:"Risultati",en:"Results",ch:"Erg\u00e4bnis"}}},t=function(c){for(var i=PickyI18n.locale||
-"en",g=c.split(".").concat(i),e=dictionary,d=0,j=g.length;d<j;d++){e=e[g[d]];if(e==undefined){e="Translation missing: "+c+"."+i;break}}return e};function Allocation(c,i,g,e,d,j){var n=this;this.type=c;this.weight=i;this.count=g;this.combination=e;this.ids=d||[];this.entries=this.rendered=j||[];this.isType=function(s){return s==n.type}}function Allocations(c){this.allocations=[];for(var i=0,g=c.length;i<g;i++){var e=c[i];this.allocations.push(new Allocation(e[0],e[1],e[2],e[3],e[4],e[5]))}this.length=this.allocations.length;this.each=function(d){return $.each(this.allocations,d)}}
-function PickyData(c){var i=c.total,g=c.duration,e=c.offset,d=new Allocations(c.allocations||[]);this.original_hash=c;this.total=i;this.duration=g;this.offset=e;this.allocations=d;this.renderedAmount=function(){var j=0;d.each(function(n,s){j+=s.rendered.length});return j};this.isEmpty=function(){return i==0}};var PickyView=function(c,i){var g=i.showResultsLimit||10,e=$("#picky input.query"),d=$("#picky div.reset"),j=$("#picky input.search_button"),n=$("#picky div.status"),s=$("#picky .dashboard"),u=$("#picky .results"),k=$("#picky .no_results"),m=new PickyAddination(this,u),r=new PickyAllocationsCloud(this,i),p=new PickyResultsRenderer(m,i),a=function(){d.fadeTo(166,1)},b=function(){r.hide();u.empty();k.hide()},f=function(h){e.val(h);d.fadeTo(166,0);v("empty");n.empty();b()},o=function(){return e.val()};
-this.text=o;var q=function(h){n.text(h);h>0&&h<=5&&n.fadeTo("fast",0.5).fadeTo("fast",1)},w=function(h){if(h.isEmpty())return"none";if(h.total>g&&h.allocations.length>1)return"support";return"ok"},v=function(h){s.attr("class","dashboard "+h)};this.insert=function(h){e.val(h);e.select()};this.fullResultsCallback=function(h){v(w(h));if(h.isEmpty()){b();q(0);k.show();a()}else if(h.total>g&&h.allocations.length>1){b();a();r.show(h);q(h.total)}else if(h.offset==0){b();q(h.total);p.render(h);u.show();a();
-e.focus()}else{m.remove();p.render(h);$("body").animate({scrollTop:$("#picky div.results div.header:last").position().top-12},500)}};this.liveResultsCallback=function(h){v(w(h));q(h.total)};this.allocationChosen=function(h){h=h.data.query;e.val(h);c.allocationChosen(h)};this.addinationClicked=function(h){c.addinationClicked(o(),h)};(function(){e.keyup(function(h){if(o()==""){f();c.searchTextCleared()}else{c.searchTextEntered(o(),h);a()}});n.click(function(){o()==""||c.searchButtonClicked(o())});j.click(function(){o()==
-""||c.searchButtonClicked(o())});d.click(function(){f("");c.clearButtonClicked();e.focus()})})();e.focus()};var PickyBackend=function(c){var i=function(g,e,d){var j=d||{};j=$.extend({query:g},d);$.getJSON(c,j,function(n){e&&e(new PickyData(n))})};this.search=function(g,e,d,j){i(g,function(n){e&&e(j,n)},d)}},LiveBackend=function(c){var i=c.live||alert("A live backend path must be provided."),g=new PickyBackend(i);this.search=function(e,d,j,n){n=n||{};latestRequestTimestamp=new Date;n.live=latestRequestTimestamp;j=$.extend({ids:c.liveResults||0,offset:0},j);g.search(e,function(s,u){if(!s.live||s.live==latestRequestTimestamp)d&&
-d(u)},j,n)}},FullBackend=function(c){var i=c.full||alert("A full backend path must be provided."),g=new PickyBackend(i);this.search=function(e,d,j,n){n=n||{};latestRequestTimestamp=new Date;n.full=latestRequestTimestamp;j=$.extend({ids:c.fullResults||20,offset:0},j);g.search(e,function(s,u){if(!s.full||s.full==latestRequestTimestamp)d&&d(u)},j,n)}};var PickyController=function(c){var i=new PickyView(this,c),g=c.backends,e=c.before||function(){},d=c.success||function(){},j=c.after||function(){},n=function(a){return(a=a&&a.match(/q=([^&]+)/))&&unescape(a[1]||"")};this.extractQuery=n;var s=function(){var a=window.History&&window.History.getState();return n(a&&a.url)};this.lastQuery=s;var u=function(a,b){a=d(a,b)||a;i.liveResultsCallback(a);j(a,b)},k,m=function(){var a=i.text(),b={};b=e(b)||b;var f=g.live;f&&f.search(a,u,b);clearInterval(k)};k=
-setInterval(m,180);clearInterval(k);var r=function(a,b){a=d(a,b)||a;i.fullResultsCallback(a);j(a,b)},p=function(a,b){var f=b||{};clearInterval(k);if(a!=s()){var o="?q="+escape(a).replace(/\*/g,"%2A");window.History&&window.History.getState()&&window.History.pushState&&window.History.pushState(null,null,o)}f=e(f,a)||f;(o=g.full)&&o.search(a,r,f)};this.insert=function(a,b,f){i.insert(a);f&&p(a,b)};this.clearButtonClicked=function(){clearInterval(k)};this.searchTextCleared=function(){clearInterval(k)};
-this.searchTextEntered=function(a,b){if($.inArray(b.keyCode,[0,8,13,32,46,48,49,50,51,52,53,54,55,56,57,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90])>-1)if(b.keyCode==13)p(a);else{clearInterval(k);k=setInterval(m,180)}};this.searchButtonClicked=function(a){p(a)};this.allocationChosen=function(a){p(a)};this.addinationClicked=function(a,b){p(a,{offset:b.data.offset})}};var Localization={},PickyClient=function(c){Localization.qualifiers=c.qualifiers||{};Localization.explanations=c.explanations||{};Localization.choices=c.choices||{};Localization.explanation_delimiters={de:"und",fr:"et",it:"e",en:"and",ch:"und"};var i=c.backends;if(i){i.live||alert("Both a full and live backend must be provided.");i.full||alert("Both a full and live backend must be provided.")}else c.backends={live:new LiveBackend(c),full:new FullBackend(c)};var g=c.controller&&new c.controller(c)||
-new PickyController(c);var e=this.insert=function(d,j,n){g.insert(d,j||{},n||true)};this.insertFromURL=function(d){if(d&&d!="")e(d);else(d=g.lastQuery())&&e(d)};window.History&&window.History.Adapter.bind(window,"statechange",function(){var d=window.History.getState();(d=g.extractQuery(d.url))&&e(d)})};var PickyAddination=function(c,i){this.remove=function(){i.find(".addination").remove()};this.render=function(g){var e=g.total,d,j=g.renderedAmount();d=g.offset+j;j=d+j;g=g.total;if(g<j)j=g;d={offset:d,start:d+1,end:j};if(d.offset<e){e=$("<div class='addination'>"+t("results.addination.more")+"</div>");e.bind("click",{offset:d.offset},c.addinationClicked);return e}else return""}};var PickyResultsRenderer=function(c,i){var g=i.wrapResults||'<ol class="results"></ol>',e=["street_number","zipcode"],d=function(k){var m=k[k.length-1];k=k.slice(0,k.length-1);if(k==[])k=[k];if(!e.include(m[0]))if(m[1].match(/[^\*~]$/))m[1]+="*";k.push(m);return k},j=function(k){for(var m=Localization.explanations&&Localization.explanations[PickyI18n.locale]||{},r=[],p,a=0,b=k.length;a<b;a++){p=k[a];var f=p[0];f=m[f]||f;r.push([f,p[1]])}return r},n=function(k,m){return[k.replace(/([\w\s\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u00e9\u00e8\u00e0]+)/,
-"<strong>$1</strong>"),m].join(" ")},s=function(k,m){var r=Localization.explanation_delimiters[PickyI18n.locale],p=j(d(m)),a="",b=[];p=$.map(p,function(f){var o=f[0];f=f[1];if(a==""||o==a){b.push(f);a=o}else{var q=n(a,b.join(" "));b=[];b.push(f);a=o;return q}});p.push(n(a,b.join(" ")));p=p.join(" "+r+" ");return'<span class="explanation">'+k+" "+p+"</span>"},u=function(k,m){var r='<div class="header">';r+=s(m.type,m.combination);if(k.offset>0)r+='<div class="tothetop"><a href="#" onclick="javascript:$(\'body\').animate({scrollTop: 0}, 500);">&uarr;</a></div>';
-return r};this.render=function(k){var m=$("#picky div.results");k.allocations.each(function(r,p){m.append(u(k,p)).append(p.entries.join("")).append(c.render(k));m.children("li").wrapAll(g)})}};function AllocationRenderer(c,i){function g(a){var b={},f={},o=[],q;q=0;for(l=a.length;q<l;q++){var w=a[q][0];if(w in b){b[w]=b[w]+" "+a[q][1];o.push(q)}else{b[w]=a[q][1];f[q]=w}}for(q in f)a[q][1]=b[f[q]];for(q=o.length-1;q>=0;q--)a.remove(o[q]);return a}function e(a){return $.map(a,function(b,f){return"%"+(f+1)+"$s"}).join(" ")}function d(a){if(a.length==0)return"";var b=a=g(a);b.sort(function(x,y){return x[0]<y[0]?-1:1});for(var f=[],o=0,q=b.length;o<q;o++)f.push(b[o][0]);var w=f.length==1,v=r[f]||
-(r[f]=e(f));if($.type(v)==="string"){r[f]={format:v};v=r[f]}var h=1,z=v.format;$.each(a,function(x,y){var A=y[0],B=y[1];if(v.filter)B=v.filter(B);A=k[A]||A;if(w&&!(v&&v.ignoreSingle))return z=B+"&nbsp;("+A+")";z=z.replace(RegExp("%"+h+"\\$s","g"),B);h+=1;return h});return z}function j(a){for(var b=[],f=0,o=m.length;f<o;f++)b.push([]);b.push([]);f=0;for(o=a.length;f<o;f++){for(var q=a[f],w=q[0],v=false,h=0,z=m.length;h<z;h++)if(m[h].include(w)){b[h].push(q);v=true;break}v||b[b.length-1].push(q)}var x;
-for(a=b.length-1;a>=0;a--){x=b[a];if(x.length>0)break}x=x[x.length-1];p.include(x[0])||(x[1]+="...");return $.map(b,function(y){return d(y)})}function n(a){var b=[],f,o;for(o in a){f=a[o][0];f=u[f]||f;b[o]=f+":"+a[o][1]}return b.join(" ")}var s=PickyI18n.locale,u=Localization.qualifiers&&Localization.qualifiers[s]||{},k=Localization.explanations&&Localization.explanations[s]||{},m=i.groups||[],r=Localization.choices&&Localization.choices[s]||{};this.explanation=this.query=this.text="";var p=["street_number",
-"zipcode"];this.contract=g;this.rendered=d;this.groupify=j;this.querify=n;this.render=function(a){var b=a.combination,f=a.count;a=n(b);b=j(b).join(" ");b=$('<li><div class="text">'+b+'</div><div class="count">'+f+"</div></li>");b.bind("click",{query:a},c);return b}};var PickyAllocationsCloud=function(c,i){var g=$("#picky .allocations"),e=g.find(".shown"),d=g.find(".more"),j=g.find(".hidden"),n=function(){g.hide()},s=new AllocationRenderer(function(m){n();c.allocationChosen(m)},i),u=function(m){var r=[];m.each(function(p,a){r.push(s.render(a))});return r},k=function(m){if(m.length==0)return $("#search .allocations").hide();e.empty();d.hide();j.empty().hide();if(m.length>3){$.each(m.slice(0,2),function(r,p){e.append(p)});$.each(m.slice(2),function(r,p){j.append(p)});
-d.show()}else $.each(m,function(r,p){e.append(p)});return $("#search .allocations").show()};d.click(function(){d.hide();j.show()});this.hide=n;this.show=function(m){k(u(m.allocations));g.show()}};
+Array.prototype.index=function(a){for(var b=0,j=this.length;b<j;b++)if(this[b]==a)return b;return null};Array.prototype.include=function(a){return this.index(a)!==null};Array.prototype.remove=function(a){this.splice(a,1);return this};Array.prototype.compare=function(a){return this.join("")==a.join("")};Array.prototype.each=function(a){for(var b=0,j=this.length;b<j;b++)a(b,this[b]);return this};Array.prototype.map=function(a){for(var b=0,j=this.length;b<j;b++)this[b]=a(b,this[b]);return this};var dictionary={common:{join:{de:"und",fr:"et",it:"e",en:"and",ch:"und"},"with":{de:"mit",fr:"avec",it:"con",en:"with",ch:"mit"},of:{de:"von",fr:"de",it:"di",en:"of",ch:"vo"},to:{de:"bis",fr:"\u00e0",it:"alla",en:"to",ch:"bis"}},results:{addination:{more:{de:"Weitere Resultate",fr:"Autres r\u00e9sultats",it:"Altri risultati",en:"More results",ch:"Mee Resultaat"}},header:{de:"Ergebnisse",fr:"R\u00e9sultats",it:"Risultati",en:"Results",ch:"Erg\u00e4bnis"}}},t=function(a){for(var b=PickyI18n.locale||
+"en",j=a.split(".").concat(b),i=dictionary,k=0,n=j.length;k<n;k++){i=i[j[k]];if(i==undefined){i="Translation missing: "+a+"."+b;break}}return i};function Allocation(a,b,j,i,k,n){var p=this;this.type=a;this.weight=b;this.count=j;this.combination=i;this.ids=k||[];this.entries=this.rendered=n||[];this.isType=function(s){return s==p.type}}function Allocations(a){this.allocations=[];for(var b=0,j=a.length;b<j;b++){var i=a[b];this.allocations.push(new Allocation(i[0],i[1],i[2],i[3],i[4],i[5]))}this.length=this.allocations.length;this.remove=function(k){this.allocations.splice(k,1)};this.each=function(k){this.allocations.each(k)}}
+function PickyData(a){var b=a.total,j=a.duration,i=a.offset,k=new Allocations(a.allocations||[]);this.original_hash=a;this.total=b;this.duration=j;this.offset=i;this.allocations=k;this.renderedAmount=function(){var n=0;k.each(function(p,s){n+=s.rendered.length});return n};this.isEmpty=function(){return b==0}};var PickyView=function(a,b){var j=b.showResultsLimit||10,i=b.input,k=b.reset,n=b.button,p=b.counter,s=b.form,x=b.moreSelector,u=b.results,v=b.noResults,z=new PickyAddination(this,u),f=new PickyAllocationsCloud(this,b),d=new PickyResultsRenderer(z,b),g=function(){k.fadeTo(166,1)},o=function(){f.hide();u.empty();v.hide()},m=function(c){i.val(c);k.fadeTo(166,0);s.attr("class","empty");p.empty();o()};this.reset=m;var h=function(){return i.val()};this.text=h;var q=function(c){p.text(c);c>0&&c<=5&&p.fadeTo("fast",
+0.5).fadeTo("fast",1)},e=function(c){if(c.isEmpty())return"none";if(c.total>j&&c.allocations.length>1)return"support";return"ok"};this.insert=function(c){i.val(c);i.select()};this.fullResultsCallback=function(c){var r=e(c);s.attr("class",r);if(c.isEmpty()){o();q(0);v.show();g()}else if(c.total>j&&c.allocations.length>1){o();g();f.show(c);q(c.total)}else if(c.offset==0){o();q(c.total);d.render(u,c);u.show();g();i.focus()}else{r=$(x).position().top;z.remove();d.render(u,c);$("body").animate({scrollTop:r-
+12},500)}};this.liveResultsCallback=function(c){var r=e(c);s.attr("class",r);q(c.total)};this.allocationChosen=function(c){c=c.data.query;a.insert(c);a.allocationChosen(c)};this.addinationClicked=function(c){a.addinationClicked(h(),c)};(function(){i.keyup(function(c){if(h()==""){m();a.searchTextCleared()}else g();a.searchTextEntered(h(),c)});p.click(function(){a.searchButtonClicked(h())});n.click(function(){a.searchButtonClicked(h())});k.click(function(){m();a.clearButtonClicked();i.focus()})})();
+i.focus()};var PickyBackend=function(a){var b=function(j,i,k){var n=k||{};n=$.extend({query:j},k);$.getJSON(a,n,function(p){i&&i(new PickyData(p))})};this.search=function(j,i,k,n){b(j,function(p){i&&i(n,p)},k)}},LiveBackend=function(a){var b=a.live||alert("A live backend path must be provided."),j=new PickyBackend(b);this.search=function(i,k,n,p){p=p||{};latestRequestTimestamp=new Date;p.live=latestRequestTimestamp;n=$.extend({ids:a.liveResults||0,offset:0},n);j.search(i,function(s,x){if(!s.live||s.live==latestRequestTimestamp)k&&
+k(x)},n,p)}},FullBackend=function(a){var b=a.full||alert("A full backend path must be provided."),j=new PickyBackend(b);this.search=function(i,k,n,p){p=p||{};latestRequestTimestamp=new Date;p.full=latestRequestTimestamp;n=$.extend({ids:a.fullResults||20,offset:0},n);j.search(i,function(s,x){if(!s.full||s.full==latestRequestTimestamp)k&&k(x)},n,p)}};var PickyController=function(a){var b=new PickyView(this,a),j=a.backends,i=a.beforeInsert||function(){},k=a.before||function(){},n=a.success||function(){},p=a.after||function(){},s=a.liveRendered||false,x=a.liveSearchInterval||180,u,v=function(e){return(e=e&&e.match(/q=([^&]+)/))&&decodeURIComponent(e[1]).replace(/\+/g," ").replace(/#/g,"")||""};this.extractQuery=v;var z=function(){var e=window.History&&window.History.getState();return v(e&&e.url)};this.lastFullQuery=z;var f=function(e,c,r,y){var w=
+k(c,y);if(w!=undefined)c=w;u=[e,c,r,y];w=c;if(w!=z()){w=w==""?"":"?q="+escape(w).replace(/\*/g,"%2A");window.History&&window.History.getState()&&window.History.pushState&&window.History.pushState(null,null,w)}if(c=="")b.reset();else(e=j[e])&&e.search(c,r,y)};this.resend=function(){u&&f.apply(this,u)};var d=function(e,c){e=n(e,c)||e;b.fullResultsCallback(e);p(e,c)},g=function(e,c){clearInterval(m);f("full",e,d,c||{})};a=function(e,c){e=n(e,c)||e;b.liveResultsCallback(e);p(e,c)};var o=s?d:a,m,h=function(){var e=
+b.text();f("live",e,o,{});clearInterval(m)};m=setInterval(h,x);clearInterval(m);var q=function(e,c,r){var y=i(e);if(y!=undefined)e=y;b.insert(e);r&&g(e,c)};this.insert=q;this.clearButtonClicked=function(){clearInterval(m)};this.searchTextCleared=function(){clearInterval(m)};this.searchTextEntered=function(e,c){if($.inArray(c.keyCode,[0,8,13,32,46,48,49,50,51,52,53,54,55,56,57,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90])>-1)if(c.keyCode==13)g(e);else{clearInterval(m);
+m=setInterval(h,x)}};this.searchButtonClicked=function(e){g(e)};this.allocationChosen=function(e){g(e)};this.addinationClicked=function(e,c){g(e,{offset:c.data.offset})};window.History&&window.History.Adapter.bind(window,"statechange",function(){var e=window.History.getState();e=v(e.url);e!=undefined&&e!=(u&&u.length>1&&u[1])&&q(e,{},true)})};var PickyI18n={},PickyClient=function(a){PickyI18n.locale=$("html").attr("lang").split("-")[0]||"en";a.locale=a.locale||PickyI18n.locale;a.qualifiers=a.qualifiers||{};a.explanations=a.explanations||{};a.choices=a.choices||{};a.explanation_delimiters={ch:"und",de:"und",en:"and",fr:"et",it:"e"};var b=a.backends;if(b){b.live||alert("Both a full and live backend must be provided.");b.full||alert("Both a full and live backend must be provided.")}else a.backends={live:new LiveBackend(a),full:new FullBackend(a)};
+b=a.enclosingSelector||".picky";var j=a.formSelector||b+" form";a.form=$(j);a.input=$(a.inputSelector||j+" input[type=search]");a.reset=$(a.resetSelector||j+" div.reset");a.button=$(a.buttonSelector||j+" input[type=button]");a.counter=$(a.counterSelector||j+" div.status");a.results=$(a.resultsSelector||b+" div.results");a.noResults=$(a.noResultsSelector||b+" div.no_results");a.moreSelector=a.moreSelector||b+" div.results div.addination:last";a.allocations=$(a.allocationsSelector||b+" .allocations");
+a.shownAllocations=a.allocations.find(".shown");a.showMoreAllocations=a.allocations.find(".more");a.hiddenAllocations=a.allocations.find(".hidden");a.maxSuggestions=a.maxSuggestions||3;a.results=$(a.resultsSelector||b+" div.results");a.resultsDivider=a.resultsDivider||"";a.nonPartial=a.nonPartial||[];a.wrapResults=a.wrapResults||"<ol></ol>";var i=a.controller&&new a.controller(a)||new PickyController(a);var k=this.insert=function(n,p,s){i.insert(n,p||{},s||true)};this.resend=i.resend;this.insertFromURL=
+function(n){if(n)k(n);else(n=i.lastFullQuery())&&k(n)}};var PickyAddination=function(a,b){this.remove=function(){b.find(".addination").remove()};this.render=function(j){var i=j.total,k,n=j.renderedAmount();k=j.offset+n;n=k+n;j=j.total;if(j<n)n=j;k={offset:k,start:k+1,end:n};if(k.offset<i){i=$("<div class='addination'>"+t("results.addination.more")+"</div>");i.bind("click",{offset:k.offset},a.addinationClicked);return i}else return""}};var PickyResultsRenderer=function(a,b){var j=b.locale,i=b.explanations||{},k=b.explanation_delimiters||{},n=b.resultsDivider,p=b.wrapResults,s=b.nonPartial,x=function(d){var g=d[d.length-1];if(g===undefined)return[];d=d.slice(0,d.length-1);if(d==[])d=[d];if(!s.include(g[0]))if(g[1].match(/[^\*~]$/))g[1]+="*";d.push(g);return d};this.asteriskifyLastToken=x;var u=function(d){for(var g=i[j]||{},o=[],m,h=0,q=d.length;h<q;h++){m=d[h];var e=m[0];e=g[e]||e;o.push([e,m[1]])}return o};this.explainCategory=
+u;var v=function(d,g){return[d.replace(/([\w\s\u00c4\u00e4\u00d6\u00f6\u00dc\u00fc\u00e9\u00e8\u00e0\,]+)/,"<strong>$1</strong>"),g].join(" ")};this.strongify=v;var z=function(d,g){var o=k[j],m="",h=[],q=[];u(x(g)).each(function(e,c){var r=c[0],y=c[1];y=y.replace(/[\w,]+:(.+)/,"$1");if(m==""||r==m){h.push(y);m=r}else{var w=v(m,h.join(" "));h=[];h.push(y);m=r;q.push(w)}});q.push(v(m,h.join(" ")));q=q.join(" "+o+" ");return q='<span class="explanation">'+d+" "+q+"</span>"};this.explain=z;var f=function(d,
+g){var o='<div class="header">';o+=z(g.type,g.combination);if(d.offset>0)o+='<div class="tothetop"><a href="#" onclick="javascript:$(\'body\').animate({scrollTop: 0}, 500);">&uarr;</a></div>';o+="</div>";return o};this.renderHeader=f;this.render=function(d,g){g.allocations.each(function(o,m){if(m.entries.length>0){d.append(f(g,m)).append(m.entries.join(n));d.children("li").wrapAll(p)}});d.append(a.render(g))}};function AllocationRenderer(a){function b(f){var d={},g={},o={},m=[],h;h=0;for(l=f.length;h<l;h++){var q=f[h][0];if(q in d){d[q].push(f[h][1]);g[q].push(f[h][2]);m.push(h)}else{d[q]=[f[h][1]];g[q]=[f[h][2]];o[h]=q}}for(h in o){f[h][1]=d[o[h]];f[h][2]=g[o[h]]}for(h=m.length-1;h>=0;h--)f.remove(m[h]);return f}function j(f){f.map(function(d){return"%"+(d+1)+"$s"});return f.join(" ")}function i(f){if(f.length==0)return"";f=b(f);f.sort(function(e,c){return e[0]<c[0]?-1:1});for(var d=[],g=0,o=f.length;g<
+o;g++)d.push(f[g][0]);var m=d.length==1,h=v[d.join(",")];if(h===undefined)h=v[d]=j(d);if(typeof h==="string"){v[d]={format:h,ignoreSingle:true};h=v[d]}var q=h.format;f.each(function(e,c){var r=c[0],y=c[1],w=c[2];w.map(function(B,A){var C=y[B];if(C.charAt(C.length-1)=="*")A+="...";return A});h.filter&&w.map(function(B,A){return h.filter(A)});if(m&&!(h&&h.ignoreSingle)){r=x[r]||r;return q=w.join("&nbsp;")+"&nbsp;("+r+")"}w.map(function(B,A){return A.replace(/[\w,]+:(.+)/,"$1")});q=q.replace(RegExp("%"+
+(e+1)+"\\$s","g"),w.join("&nbsp;"))});return q}function k(f){for(var d=[],g=0,o=u.length;g<o;g++)d.push([]);d.push([]);g=0;for(o=f.length;g<o;g++){for(var m=f[g],h=m[0],q=false,e=0,c=u.length;e<c;e++)if(u[e].include(h)){d[e].push(m);q=true;break}q||d[d.length-1].push(m)}var r;for(f=d.length-1;f>=0;f--){r=d[f];if(r.length>0)break}r=r[r.length-1];z.include(r[0])||(r[1]=r[1].valueOf()+"*");return d}function n(f){var d=[];k(f).each(function(g,o){var m=i(o);m&&d.push(m)});return d.join(" ")}var p=a.locale,
+s=a.qualifiers&&a.qualifiers[p]||{},x=a.explanations&&a.explanations[p]||{},u=a.groups||[],v=a.choices&&a.choices[p]||{},z=a.nonPartial||[];this.explanation=this.query=this.text="";this.contract=b;this.makeUpMissingFormat=j;this.rendered=i;this.groupify=k;this.querify=function(f){var d=[],g,o,m;for(m in f){g=f[m][0];g=s[g]||g;o=(o=f[m][1])||"";o=o.charAt(o.length-1)=="*"?"*":"";d[m]=g+":"+f[m][2]+o}return d.join(" ")};this.suggestify=n;this.render=function(f){return n(f.combination)}};var PickyAllocationsCloud=function(a,b){var j=b.allocations,i=b.shownAllocations,k=b.showMoreAllocations,n=b.hiddenAllocations,p=b.maxSuggestions,s=function(){j.hide()},x=function(f){s();a.allocationChosen(f)},u=new AllocationRenderer(b),v=function(f){var d=[];f.each(function(g,o){var m=u.querify(o.combination),h=u.render(o);h=$('<li><div class="text">'+h+'</div><div class="count">'+o.count+"</div></li>");h.bind("click",{query:m},x);d.push(h)});return d},z=function(f){if(f.length==0)return j.hide();
+i.empty();k.hide();n.empty().hide();if(f.length>p){$.each(f.slice(0,p-1),function(d,g){i.append(g)});$.each(f.slice(p-1),function(d,g){n.append(g)});k.show()}else $.each(f,function(d,g){i.append(g)});return j.show()};k.click(function(){k.hide();n.show()});this.hide=s;this.show=function(f){z(v(f.allocations));j.show()}};
View
100 generators/prototypes/all_in_one/sinatra/stylesheets/application.css
@@ -1,22 +1,86 @@
-body {
- text-align: center;
- font-family: Lucida Grande; }
- body .content {
- width: 560px;
- margin: 0 auto;
- text-align: left; }
-
-img {
- margin: 0px 0px -210px; }
+* {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+@font-face /* TODO: Replace with images */
+{
+ font-family: 'myriad';
+ src: url('MyriadPro-Semibold.otf') format('opentype');
+}
+body,
+html
+{
+ margin: 0;
+ padding: 0;
+}
+body
+{
+ font: 15px/20px "HelveticaNeue", arial, sans-serif;
+ text-rendering: optimizeLegibility;
+ background: url(images/background.png), #f8f8fc;
+ background-size: 64px;
+}
+body > div
+{
+ width: 728px;
+ padding: 20px;
+ margin: 0 auto;
+}
+pre {
+ padding: 10px;
+ background-color: #efede5;
+}
-p span.explanation {
- color: #999999; }
+/* Headers */
+hgroup {
+ width: 728px;
+ height: 61px;
+ margin: 0 auto;
+}
+hgroup img.picky {
+ float: left;
+ margin-left: 30px;
+}
+hgroup h1 {
+ font-size: 1.5em;
+}
+hgroup h2 {
+ font-size: 1.0em;
+}
+hgroup h1, hgroup h2 {
+ margin: 10px 0px 0px 150px;
+}
+hgroup a {
+ color: #999;
+}
-pre {
+/* Content */
+.content
+{
+ padding: 20px;
+ background: rgba(0,0,0,0.08);
+ border: 1px solid #cacacb;
+ border-top-color: #d1d1d2;
+ border-bottom-color: #b8b8ba;
+ border-radius: 6px;
+ box-shadow: inset 0 1px 3px rgba(255,255,255,0.4), 0 1px 3px rgba(0,0,0,0.16);
+}
+section {
padding: 10px;
- background-color: #efede5; }
+}
-#picky ol.results li.book {
- background-color: #ffeeee;
- padding: 5px 25px;
- margin: 3px 0px; }
+/* Footer */
+footer
+{
+ text-align: center;
+}
+footer,
+footer a
+{
+ color: #a0a0a8;
+}
+footer a:hover
+{
+ color: #808088;
+}
View
BIN  generators/prototypes/all_in_one/sinatra/stylesheets/images/background.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
10 generators/prototypes/all_in_one/sinatra/stylesheets/images/cancel.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="32px" height="64px" viewBox="0 0 32 64" enable-background="new 0 0 32 64" xml:space="preserve">
+<path fill="#C0C0C8" d="M16,2C8.268,2,2,8.268,2,16s6.268,14,14,14s14-6.268,14-14S23.732,2,16,2z M24.5,21.5l-3,3L16,19l-5.5,5.5
+ l-3-3L13,16l-5.5-5.5l3-3L16,13l5.5-5.5l3,3L19,16L24.5,21.5z"/>
+<path fill="#A0A0A8" d="M16,34C8.268,34,2,40.268,2,48s6.268,14,14,14s14-6.268,14-14S23.732,34,16,34z M24.5,53.5l-3,3L16,51
+ l-5.5,5.5l-3-3L13,48l-5.5-5.5l3-3L16,45l5.5-5.5l3,3L19,48L24.5,53.5z"/>
+</svg>
View
412 generators/prototypes/all_in_one/sinatra/stylesheets/picky.css
@@ -1,135 +1,277 @@
-#picky {
- overflow: hidden; }
- #picky > div.header {
- display: none; }
- #picky div.dashboard {
- 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 {
- background-color: #d0e2ff; }
- #picky div.dashboard.none .status {
- background-color: red; }
- #picky div.dashboard.none .feedback {
- background-color: #ffdddd; }
- #picky div.dashboard.support .status {
- background-color: #ff6600; }
- #picky div.dashboard.support .feedback {
- background-color: #faf3d0; }
- #picky div.dashboard.ok .status {
- background-color: #09be01; }
- #picky div.dashboard.ok .feedback {
- background-color: #bcf0b3; }
- #picky div.dashboard .feedback {
- width: 85%;
- float: left;
- border: 1px solid #cccccc;
- padding: 0;
- margin: 0; }
- #picky div.dashboard .feedback .status {
- float: left;
- width: 45px;
- height: 26px;
- line-height: 26px;
- text-align: center;
- 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 {
- float: left;
- width: 80%;
- height: 100%;
- font-size: 1em;
- font-weight: bold;
- border-style: solid;
- border-width: 0px 0px 3px 0px;
- border-color: transparent;
- margin: 0;
- padding: 4px 0 0 0;
- outline: none;
- background: none; }
- #picky div.dashboard .feedback .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 {
- margin-top: 0px;
- padding: 0px; }
- #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 {
- float: right; }
- #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 {
- list-style-type: none;
- padding: 0px;
- margin: 0px; }
- #picky div.results div.addination {
- position: relative;
- text-align: center;
- color: #276abb;
- cursor: pointer; }
- #picky .no_results {
- display: none; }
- #picky .allocations {
- clear: both;
- overflow: hidden;
- background-color: white;
- padding-bottom: 2px; }
- #picky .allocations ol.hidden {
- display: none; }
- #picky .allocations ol.more:hover {
- background-color: #cccccc;
- cursor: pointer; }
- #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 {
- 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 {
- max-width: 90%;
- float: left; }
- #picky .allocations ol li .count {
- float: right;
- color: #cccccc; }
- #picky .allocations ol li:hover {
- background-color: #d0e2ff; }
+/* Form */
+form
+{
+ display: block;
+ position: relative;
+ height: 46px;
+ background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.08))), rgba(255,255,255,0.4);
+ background: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.08)), rgba(255,255,255,0.4);
+ border-radius: 99px;
+ box-shadow: inset 0 1px 0 rgba(0,0,0,0.08), inset 0 0 4px rgba(0,0,0,0.6), 0 0px 0 rgba(255,255,255,0.6);
+ -webkit-user-select: none;
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+form input[type=search],
+form input[type=button],
+form .status
+{
+ height: 46px;
+ border: 1px solid #98989f;
+ -webkit-appearance: none;
+ border-radius: 99px;
+ box-shadow: inset 0 2px 4px rgba(0,0,0,0.12);
+ background: #fff;
+ line-height: 1;
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+form input[type=search] {
+ font-size: 30px;
+ z-index: 3;
+ display: block;
+ position: absolute;
+ margin: 0 0 0 2em;
+ padding: 0 8px 0 13px;
+ width: 526px;
+}
+form input[type=search]::-webkit-input-placeholder
+{
+ color: #c0c0c8;
+ font-size: 30px;
+ line-height: 36px; /* Fixes placeholder vertical alignment in Chrome and Webkit Nightly (535.*) */
+}
+form input[type=search]:-moz-placeholder
+{
+ color: #c0c0c8;
+}
+form input[type=search]:focus
+{
+ outline: none;
+ border-color: #6e96c7;
+ box-shadow: inset 0 0 4px #6e96c7, inset 0 0 4px #6e96c7, 0 0 4px #6e96c7, 0 0 4px #6e96c7, inset 0 2px 4px rgba(0,0,0,0.16);
+}
+form input[type=search]::-webkit-search-cancel-button
+{
+ z-index: 9;
+ position: absolute;
+ right: 6px;
+ top: 6px;
+ width: 32px;
+ height: 32px;
+ margin: 0;
+ padding: 0;
+ background: url(images/cancel.svg);
+ -webkit-appearance: none;
+}
+form input[type=search]::-webkit-search-cancel-button:active
+{
+ background-position: 0 -32px;
+}
+form input[type=search]::-webkit-search-cancel-button
+{
+/* outline: 1px dashed red !important;*/
+}
+form input[type=button]
+{
+ background: rgba(0,0,0,0.01);
+ font-size: 1.2em;
+ z-index: 2;
+ display: block;
+ position: absolute;
+ padding-right: 0.8em;
+ right: 0;
+ width: 130px;
+ color: #606068;
+ text-align: right;
+ text-shadow: 0 1px 0 rgba(255,255,255,0.8);
+ -webkit-transition: background 0.15s ease-in;
+}
+form input[type=button]:active
+{
+ background: rgba(0,0,0,0.08);
+ -webkit-transition-duration: 0;
+}
+form .status {
+ background: rgba(0,0,0,0.0);
+ z-index: 2;
+ display: block;
+ position: absolute;
+ left: 0;
+ width: 100px;
+ line-height: 46px;
+ padding-right: 2em;
+ text-align: right;
+ font-size: 1.5em;
+}
+.picky form.empty .status {
+ background-color: hsl(215, 51%, 70%); }
+.picky form.empty .feedback {
+ background-color: #d0e2ff; }
+.picky form.none .status {
+ background-color: hsl(6, 51%, 70%); }
+.picky form.none .feedback {
+ background-color: #ffdddd; }
+.picky form.support .status {
+ background-color: hsl(29, 51%, 70%); }
+.picky form.support .feedback {
+ background-color: #faf3d0; }
+.picky form.ok .status {
+ background-color: hsl(82, 51%, 70%); }
+.picky form.ok .feedback {
+ background-color: #bcf0b3; }
+.picky form .feedback {
+ width: 85%;
+ float: left;
+ border: 1px solid #cccccc;
+ padding: 0;
+ margin: 0; }
+
+/* To the top */
+.picky .header .tothetop {
+ float: right;
+}
+.picky .header .tothetop a {
+ display: block;
+ width: 20px;
+ height: 20px;
+ text-align: center;
+ margin-left: 1em;
+ border-radius: 5px;
+ background-color: #EEE;
+ text-decoration: none;
+ font-size: 1em;
+ font-weight: bold;
+ color: #777;
+}
+.picky .header .tothetop a:hover {
+ background-color: white;
+}
+
+/* Addination */
+.picky .addination {
+ line-height: 2em;
+ text-align: center;
+ cursor: pointer;
+}
+.picky .addination:hover {
+ background-color: #eee;
+}
+
+/* Allocations */
+.picky .allocations ol {
+ margin-bottom: 10px;
+}
+.picky ol {
+ cursor: pointer;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+.picky li:hover {
+ background-color: #eee;
+}
+.picky ol.more,
+.picky ol.hidden {
+ margin-top: 3px;
+}
+.picky .allocations ol.hidden {
+ display: none; }
+.picky .allocations ol.more:hover {
+ background-color: #ccc;
+ cursor: pointer; }
+.picky .allocations ol {
+ list-style-position: outside;
+ list-style: none;
+ padding: 0;}
+
+.picky .allocations li {
+ font-size: 1.2em;
+ padding: 24px;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(0,0,0,0.1);
+}
+.picky .allocations li:last-child {
+ border-bottom: 0px;
+ margin-bottom: 0;
+}
+.picky .allocations .text {
+ max-width: 90%;
+ float: left; }
+.picky .allocations .count {
+ float: right;
+ color: #cccccc; }
+
+.picky .results .header {
+ padding: 0.5em;
+ background-color: rgba(0, 0, 0, 0.04);
+ background: -webkit-gradient(radial, 0% 100%, 90, 0% 100%, 600, from(rgba(0, 0, 0, 0.02)), to(rgba(0, 0, 0, 0.1)));
+ text-align: right;
+}
+.picky .allocations,
+.picky .no_results,
+.picky .results,
+.picky .more {
+ display: none;
+ margin: 0 1.5em;
+ padding: 0 0 0 0;
+ background-color: rgba(0, 0, 0, 0.02);
+ border-bottom-left-radius: 1em;
+ border-bottom-right-radius: 1em;
+ border-bottom: solid 1px #b8b8ba;
+ box-shadow: inset 0 1px 3px rgba(255,255,255,0), 0 1px 3px rgba(0,0,0,0.16);
+}
+.picky ol.more, .picky .no_results {
+ display: none;
+}
+.picky ol.more h3, .picky .no_results h3 {
+ margin: 0;
+ text-align: center;
+}
+.picky .allocations .more {
+ position: absolute;
+ font-weight: bold;
+ line-height: 1.1em;
+ padding: 0.2em 1em 0.4em;
+ margin: 0 16.5%;
+ -moz-border-radius-bottomleft: 20px;
+ -webkit-border-bottom-left-radius: 20px;
+ -o-border-bottom-left-radius: 20px;
+ -ms-border-bottom-left-radius: 20px;
+ -khtml-border-bottom-left-radius: 20px;
+ border-bottom-left-radius: 20px;
+ -moz-border-radius-bottomright: 20px;
+ -webkit-border-bottom-right-radius: 20px;
+ -o-border-bottom-right-radius: 20px;
+ -ms-border-bottom-right-radius: 20px;
+ -khtml-border-bottom-right-radius: 20px;
+ border-bottom-right-radius: 20px;
+ border-left-width: 1px;
+ border-right-width: 1px;
+ border-bottom-width: 2px;
+}
+
+/* Results */
+.picky .results li {
+ margin: 0;
+ padding: 1em;
+ border-bottom: 1px solid #aaa;
+}
+.picky .results li:last-child {
+ border-bottom: 0px;
+}
+.picky .results li h3 {
+ margin-top: 0;
+}
+.picky .results li h3 a:link,
+.picky .results li h3 a:visited {
+ color: black;
+ text-decoration: none;
+}
+.picky .results li h3 a:hover {
+ text-decoration: underline;
+}
+.picky .no_results {
+ padding: 1em;
+}
View
188 generators/prototypes/all_in_one/sinatra/views/configure.haml
@@ -1,188 +0,0 @@
-!!!
-%html{ :lang => 'en' }
- %head
- %link{:href => "stylesheets/application.css", :media => "screen", :rel => "stylesheet", :type => "text/css"}/
- %body
- %img{:src => "images/picky.png"}/
- %p
- %a{:href => "http://floere.github.com/picky"} To the Picky Homepage
- \/
- %a{:href => '/' } Back to the example
- .content
- %h1 Already made it this far? You're good!
- %p I think you're ready for configuring me for your own purposes.
- %h2 Configuring the Picky client.
- %p
- There are two places where you configure the Picky client:
- %ol
- %li
- %a{ :href => '#controller' } In the controller.
- (client to Picky server)
- %li
- %a{ :href => '#view' } In the view.
- (javascript client interface)
- %h2#controller Controller
- %p
- Open the file
- %strong app.rb
- and take a peek inside.
- %p
- First you need a client instance.
- %p
- In the example, I called it
- %strong BookSearch
- respectively.
- %code
- %pre
- :preserve
- BookSearch = Picky::Client.new :host => 'localhost',
- :port => 8080,
- :path => '/books'
- %p
- Both clients offer the options:
- %dl
- %dt
- %strong host
- %dd The Picky search server host.
- %dt
- %strong port
- %dd The Picky search server port (see unicorn.rb in the server).
- %dt
- %strong path
- %dd The Picky search path (see app/application.rb in the server for the mapping path => query).
- %p
- Then, use these Client instances in your actions. For example like this:
- %code
- %pre
- :preserve
- get '/search/full' do
- results = BookSearch.search params[:query],
- :ids => params[:ids],
- :offset => params[:offset]
- results.extend Picky::Convenience
- results.populate_with Book do |book|
- book.to_s
- end
- ActiveSupport::JSON.encode results
- end
- %p
- This part gets a
- %strong hash
- with the results:
- %code
- %pre
- :preserve
- results = BookSearch.search params[:query],
- :ids => params[:ids],
- :offset => params[:offset]
- %p
- This part takes the
- %strong hash
- and extends it with a few useful and convenient methods:
- %code
- %pre
- results.extend Picky::Convenience
- %p
- One of these methods is the
- %strong populate_with
- method which takes a
- %strong model
- as parameter, and then gets the corresponding
- %strong model instances
- for each id in the result.
- %code
- %pre
- :preserve
- results.populate_with Book do |book|
- book.to_s
- end
- The
- %strong book.to_s
- simulates rendering a book.
- You can do whatever with the book instance if you just return a rendered thing that's supposed to be shown in the front end.
- %p
- If you don't want to render in the controller, you can do so in a view. In the controller just call
- %code
- %pre
- results.populate_with Book
- and then render the books in a view using:
- %code
- %pre
- :preserve
- results.entries do |book|
- # Or use book.to_s, or however you like
- # to render the book.
- #
- render book
- end
- %p
- At the end, encode the hash in JSON:
- %code
- %pre
- ActiveSupport::JSON.encode results
- That's it for the controller.
- %p
- All the steps in one:
- %code
- %pre
- :preserve
- BookSearch = Picky::Client.new :host => 'localhost',
- :port => 8080,
- :path => '/books'
-
- get '/search/full' do
- results = BookSearch.search params[:query],
- :ids => params[:ids],
- :offset => params[:offset]
-
- results.extend Picky::Convenience
- results.populate_with Book do |book|
- book.to_s
- end
-
- ActiveSupport::JSON.encode results
- end
- %h2#view View
- %p
- The view is even easier. Just add the line
- %code
- %pre
- :preserve
- = Picky::Helper.cached_interface
- if you use just one language, or
- %code
- %pre
- :preserve
- = Picky::Helper.interface :button => 'search',
- :no_results => 'No results!',
- :more => 'more'
- if you use multiple languages.
- (You'd use the options
- %code
- %pre
- :preserve
- :button => t(:'search.button'),
- :no_results => t(:'search.no_results'),
- :more => t(:'search.more')
- of course, with proper i18n)
- The same options can be used for
- %strong #cached_interface
- but they will be cached, so you can only set them once and then reused.
- %p
- You're almost finished. Take a look at the file
- %strong views/search.haml
- where you'll find javascript at the end. It looks something like this:
- %code
- %pre
- :preserve
- :javascript
- pickyClient = new PickyClient({
- // A full query displays the rendered results.
- //
- full: '/search/full',
-
- // etc.
- //
- Just take a look at the possible javascript client options in that file.
- %p
- %strong Good luck my friend! *waves several stubby pink tentacles*
View
290 generators/prototypes/all_in_one/sinatra/views/search.haml
@@ -1,60 +1,232 @@
!!!
%html{ :lang => 'en' }
%head
- %link{:href => "stylesheets/picky.css", :media => "screen", :rel => "stylesheet", :type => "text/css"}/
%link{:href => "stylesheets/application.css", :media => "screen", :rel => "stylesheet", :type => "text/css"}/
-
+ %link{:href => "stylesheets/picky.css", :media => "screen", :rel => "stylesheet", :type => "text/css"}/
= js 'jquery-1.5.0.min'
= js 'history.min'
= js 'history.adapter.jquery.min'
= js 'picky.min'
%body
- %img{:src => "images/picky.png"}/
- %p
- %a{:href => "http://florianhanke.com/picky"} To the Picky Homepage
- \/
- %a{:href => '/configure' } Configuring this app server
- %p
- Try a few examples
- = succeed ":" do
- %span.explanation (on a simple database with 540 books - note that the server is on Heroku and needs a little time to ramp up)
- %p
- A simple word,
- = succeed "." do
- %a{:href => "#", :onclick => "pickyClient.insert('alan');"} alan
- %span.explanation
- (Finds Alan in the title, and Alans who wrote books. The title is ranked higher due to weighing.)
- %span
- %p
- With qualifier,
- = succeed "." do
- %a{:href => "#", :onclick => "pickyClient.insert('title:women');"} title:women
- %span.explanation
- (Finds "women*" just in titles.)
- %span
- %p
- With similarity,
- = succeed "." do
- %a{:href => "#", :onclick => "pickyClient.insert('pinchn~');"} pinchn~
- %span.explanation (Finds "pynchon", note: Only title in example with similarity. Uses a combination of double metaphone and Levenshtein.)
- %p
- More complex,
- = succeed "." do
- %a{:href => "#", :onclick => "pickyClient.insert('title:lyterature~');"} title:lyterature~
- %span.explanation (Finds similar titles)
- %p
- With choice,
- = succeed "." do
- %a{:href => "#", :onclick => "pickyClient.insert('sp');"} sp
- %span.explanation (Finds "sp*" in multiple categories. Choose the one you're looking for.)
- %p
- More complex,
- = succeed "." do
- %a{:href => "#", :onclick => "pickyClient.insert('soc* p');"} soc* p
- %span.explanation (This is where Picky really shines, "the title started with soc, and the author starts with p")
+ %hgroup
+ / Replace these headers with your code
+ %img{ :class => 'picky', :src => "images/picky.png"}/
+ %h1 Picky
+ %h2
+ Scaffold: A great start into your
+ %em fantastic
+ search engine!
+ ☛
+ %a{ :href => "http://florianhanke.com/picky" } Picky Homepage
.content
= Picky::Helper.cached_interface
+ %section
+ %h1 Examples:
+ %p
+ %a{:href => "", :onclick => "pickyClient.insert('alan');"} alan
+ finds Alan in the title, and Alans who wrote books. The title is ranked higher due to weighing.
+ %p
+ %a{:href => "", :onclick => "pickyClient.insert('title:women');"} title:women
+ finds "women*" just in titles.
+ %p
+ %a{:href => "", :onclick => "pickyClient.insert('pinchn~');"} pinchn~
+ finds the similar "pynchon".
+ %p
+ %a{:href => "", :onclick => "pickyClient.insert('title:lyterature~');"} title:lyterature~
+ finds similar titles.
+ %p
+ %a{:href => "", :onclick => "pickyClient.insert('sp');"} sp
+ finds "sp*" in multiple categories. Choose the one you're looking for.
+ %p
+ %a{:href => "", :onclick => "pickyClient.insert('soc* p');"} soc* p
+ means "find something that starts with soc, and another thing starting with p".
+ %section
+ %h1 Already made it this far? You're good!
+ %p I think you're ready for configuring me for your own purposes.
+ %h2 Configuring the Picky client.
+ %p
+ There are two places where you configure the Picky client:
+ %ol
+ %li
+ %a{ :href => '#controller' } In the controller.
+ (client to Picky server)
+ %li
+ %a{ :href => '#view' } In the view.
+ (javascript client interface)
+ %h2#controller Controller
+ %p
+ Open the file
+ %strong app.rb
+ and take a peek inside.
+ %p
+ First you need both a client instance for a
+ %strong full
+ or a
+ %strong live search
+ depending on what you need (Full gets results with IDs, Live without and is used for updating the counter).
+ %p
+ In the example, I called it
+ %strong BookSearch
+ \.
+ %code
+ %pre
+ :preserve
+ BookSearch = Picky::Client.new host: 'localhost',
+ port: 8080,
+ path: '/books'
+ %p
+ Both clients offer the options:
+ %dl
+ %dt
+ %strong host
+ %dd The Picky search server host.
+ %dt
+ %strong port
+ %dd The Picky search server port (see unicorn.rb in the server).
+ %dt
+ %strong path
+ %dd The Picky search path (see app.rb in the server).
+ %p
+ Then, use these Client instances in your actions. For example like this:
+ %code
+ %pre
+ :preserve
+ get '/search/full' do
+ results = BookSearch.search params[:query],
+ :ids => params[:ids],
+ :offset => params[:offset]
+ results.extend Picky::Convenience
+ results.populate_with Book do |book|
+ book.to_s
+ end
+ ActiveSupport::JSON.encode results
+ end
+ %p
+ This part gets a
+ %strong hash
+ with the results:
+ %code
+ %pre
+ :preserve
+ results = BookSearch.search params[:query],
+ :ids => params[:ids],
+ :offset => params[:offset]
+ %p
+ This part takes the
+ %strong hash
+ and extends it with a few useful and convenient methods:
+ %code
+ %pre results.extend Picky::Convenience
+ %p
+ One of these methods is the
+ %strong populate_with
+ method which takes a
+ %strong model
+ as parameter, and then gets the corresponding
+ %strong model instances
+ for each id in the result.
+ %code
+ %pre
+ :preserve
+ results.populate_with Book do |book|
+ book.to_s
+ end
+ The
+ %strong book.to_s
+ simulates rendering a book.
+ You can do whatever with the book instance if you just return a rendered thing that's supposed to be shown in the front end.
+ %p
+ If you don't want to render in the controller, you can do so in a view. In the controller just call
+ %code
+ %pre
+ results.populate_with Book
+ and then render the books in a view using:
+ %code
+ %pre
+ :preserve
+ results.entries do |book|
+ render book # or book.to_s, or however you like to render the book.
+ end
+ %p
+ At the end, encode the hash in JSON:
+ %code
+ %pre
+ ActiveSupport::JSON.encode results
+ That's it for the controller.
+ %p
+ All the steps in one:
+ %code
+ %pre
+ :preserve
+ BookSearch = Picky::Client.new host: 'localhost',
+ port: 8080,
+ path: '/books'
+
+ get '/search/full' do
+ results = BookSearch.search params[:query],
+ ids: params[:ids],
+ offset: params[:offset]
+
+ results.extend Picky::Convenience
+ results.populate_with Book do |book|
+ book.to_s
+ end
+
+ ActiveSupport::JSON.encode results
+ end
+ %h2#view View
+ %p
+ The view is even easier. Just add the line
+ %code
+ %pre
+ :preserve
+ = Picky::Helper.cached_interface
+ if you use just one language, or
+ %code
+ %pre
+ :preserve
+ = Picky::Helper.interface button: 'search',
+ no_results: 'No results!',
+ more: 'more'
+ if you use multiple languages.
+ (You'd use the options
+ %code
+ %pre
+ :preserve
+ button: t(:'search.button'),
+ no_results: t(:'search.no_results'),
+ more: t(:'search.more')
+ of course, with proper i18n)
+ The same options can be used for
+ %strong #cached_interface
+ but they will be cached, so you can only set them once and then reused.
+ %p
+ You're almost finished. Take a look at the file
+ %strong views/search.haml
+ where you'll find javascript at the end. It looks something like this:
+ %code
+ %pre
+ :preserve
+ :javascript
+ pickyClient = new PickyClient({
+ // A full query displays the rendered results.
+ //
+ full: '/search/full',
+
+ // etc.
+ Just take a look at the possible javascript client options in that file.
+ %p
+ %strong Good luck my friend!
+ %em *waves several stubby pink tentacles*
+ %footer
+ Website design by
+ %a{ :href => 'http://twitter.com/thijs' } Thijs van der Vossen
+ of
+ %a{ :href => 'http://fngtps.com' } Fingertips
+ with modifications by
+ = succeed('.') do
+ %a{ :href => 'http://twitter.com/hanke' } Florian Hanke
:javascript
$(window).load(function() {
pickyClient = new PickyClient({
@@ -63,13 +235,12 @@
full: '/search/full',
// fullResults: 100, // Optional. Amount of ids to search for, default 20.
- // A live query just updates the count and does not need
- // to render (could go straight to the search server).
+ // A live query just updates the count.
//
live: '/search/live',
// liveResults: 0, // Optional. Amount of ids to search for, default 0.
- // showResultsLimit: 10, // Optional. Default is 10.
+ // showResultsLimit: 100, // Optional. Default is 10.
// Wrap each li group (like author-title, or title-isbn etc.) of results
// in this element.
@@ -77,7 +248,7 @@
//
// wrapResults: '<div class="hello"><ol class="world"></ol></div>',
- // before: function(params, query) { }, // Optional. Before Picky sends any data.
+ // before: function(query, params) { }, // Optional. Before Picky sends any data. Return modified query.
// success: function(data, query) { }, // Optional. Just after Picky receives data. (Get a PickyData object)
// after: function(data, query) { }, // Optional. After Picky has handled the data and updated the view.
@@ -103,14 +274,17 @@
choices: {
en:{
'title': {
- format: "<strong>%1$s</strong>",
+ format: "Called <strong>%1$s</strong>",
filter: function(text) { return text.toUpperCase(); },
- ignoreSingle: false
+ ignoreSingle: true
},
- 'author,title': '%1$s, who wrote %2$s',
- 'title,author': '%2$s, written by %2$s',
- 'title,subjects': '%1$s, about %2$s',
- 'author,subjects': '%1$s, who wrote about %2$s'
+ 'author': 'Written by %1$s',
+ 'subjects': 'Being about %1$s',
+ 'publisher': 'Published by %1$s',
+ 'author,title': 'Called %1$s, written by %2$s',
+ 'title,author': 'Called %2$s, written by %1$s',
+ 'title,subjects': 'Called %1$s, about %2$s',
+ 'author,subjects': '%1$s who wrote about %2$s'
}
},
@@ -122,9 +296,9 @@
en:{
title: 'titled',
author: 'written by',
- year: 'published in'
- // publisher: 'published by',
- // subjects: 'topics'
+ year: 'published in',
+ publisher: 'published by',
+ subjects: 'with subjects'
}
}
});
View
49 generators/prototypes/client/sinatra/app.rb
@@ -2,22 +2,21 @@
require 'bundler'
Bundler.require
-# Sinatra settings.
+# Load the "model".
#
-set :static, true
-set :public, File.dirname(__FILE__)
-set :views, File.expand_path('../views', __FILE__)
-set :haml, :format => :html5
+require File.expand_path 'book', File.dirname(__FILE__)
-# Load the simplified "model".
-#
-require File.expand_path '../book', __FILE__
+set :haml, { :format => :html5 }
-# Sets up a search instance to the server.
+# Sets up two query instances.
#
-BookSearch = Picky::Client.new :host => 'localhost', :port => 8080, :path => '/books'
+BooksSearch = Picky::Client.new :host => 'localhost', :port => 8080, :path => '/csv'
+
+set :static, true
+set :public, File.dirname(__FILE__)
+set :views, File.expand_path('views', File.dirname(__FILE__))
-# Root, the search page.
+# Root, the search interface.
#
get '/' do
@query = params[:q]
@@ -25,41 +24,31 @@
haml :'/search'
end
-# Renders the results into the json.
-#
-# You get the results from the picky server and then
-# populate the result hash with rendered models.
+# For full results, you get the ids from the picky server
+# and then populate the result with models (rendered, even).
#
get '/search/full' do
- results = BookSearch.search params[:query], :ids => params[:ids], :offset => params[:offset]
+ results = BooksSearch.search params[:query], :ids => params[:ids], :offset => params[:offset]
results.extend Picky::Convenience
results.populate_with Book do |book|
- book.render
+ book.to_s
end
#
- # Or, to populate with the model instances, use:
+ # Or use:
# results.populate_with Book
#
- # Then to render:
+ # Then:
# rendered_entries = results.entries.map do |book| (render each book here) end
#
- Yajl::Encoder.encode results
+ ActiveSupport::JSON.encode results
end
-# Updates the search count while the user is typing.
-#
-# We don't parse/reencode the returned json string using search_unparsed.
+# For live results, you'd actually go directly to the search server without taking the detour.
#
get '/search/live' do
- BookSearch.search_unparsed params[:query], :ids => params[:ids], :offset => params[:offset]
-end
-
-# Configure. The configuration info page.
-#
-get '/configure' do
- haml :'/configure'
+ BooksSearch.search_unparsed params[:query], :offset => params[:offset]
end
helpers do
View
18 generators/prototypes/client/sinatra/book.rb
@@ -9,34 +9,34 @@
# * a number of subjects
#
class Book
-
+
@@books_mapping = {}
-
+
# Load the books on startup.
#
file_name = File.expand_path 'library.csv', File.dirname(__FILE__)
CSV.open(file_name, 'r').each do |row|
@@books_mapping[row.shift.to_i] = row
end
-
+
# Find uses a lookup table.
#
def self.find ids, _ = {}
ids.map { |id| new(id, *@@books_mapping[id]) }
end
-
+
attr_reader :id
-
+
def initialize id, title, author, year, publisher, subjects
@id, @title, @author, @year, @publisher, @subjects = id, title, author, year, publisher, subjects
end
-
+
# "Rendering" ;)
#
# Note: This is just an example. Please do not render in the model.
#
- def render
- "<li class='book'><p>\"#{@title}\", by #{@author}</p><p>#{@year}, #{@publisher}</p><p>#{@subjects}</p></li>"
+ def to_s
+ "<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
View
BIN  generators/prototypes/client/sinatra/images/picky.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
100 generators/prototypes/client/sinatra/stylesheets/application.css
@@ -1,22 +1,86 @@
-body {
- text-align: center;
- font-family: Lucida Grande; }
- body .content {
- width: 560px;
- margin: 0 auto;
- text-align: left; }
-
-img {
- margin: 0px 0px -210px; }
+* {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+@font-face /* TODO: Replace with images */
+{
+ font-family: 'myriad';
+ src: url('MyriadPro-Semibold.otf') format('opentype');
+}
+body,
+html
+{
+ margin: 0;
+ padding: 0;
+}
+body
+{
+ font: 15px/20px "HelveticaNeue", arial, sans-serif;
+ text-rendering: optimizeLegibility;
+ background: url(images/background.png), #f8f8fc;
+ background-size: 64px;
+}
+body > div
+{
+ width: 728px;
+ padding: 20px;
+ margin: 0 auto;
+}
+pre {
+ padding: 10px;
+ background-color: #efede5;
+}
-p span.explanation {
- color: #999999; }
+/* Headers */
+hgroup {
+ width: 728px;
+ height: 61px;
+ margin: 0 auto;
+}
+hgroup img.picky {
+ float: left;
+ margin-left: 30px;
+}
+hgroup h1 {
+ font-size: 1.5em;
+}
+hgroup h2 {
+ font-size: 1.0em;
+}
+hgroup h1, hgroup h2 {
+ margin: 10px 0px 0px 150px;
+}
+hgroup a {
+ color: #999;
+}
-pre {
+/* Content */
+.content
+{
+ padding: 20px;
+ background: rgba(0,0,0,0.08);
+ border: 1px solid #cacacb;
+ border-top-color: #d1d1d2;
+ border-bottom-color: #b8b8ba;
+ border-radius: 6px;
+ box-shadow: inset 0 1px 3px rgba(255,255,255,0.4), 0 1px 3px rgba(0,0,0,0.16);
+}
+section {
padding: 10px;
- background-color: #efede5; }
+}
-#picky ol.results li.book {
- background-color: #ffeeee;
- padding: 5px 25px;
- margin: 3px 0px; }
+/* Footer */
+footer
+{
+ text-align: center;
+}
+footer,
+footer a
+{
+ color: #a0a0a8;
+}
+footer a:hover
+{
+ color: #808088;
+}
View
BIN  generators/prototypes/client/sinatra/stylesheets/images/background.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
10 generators/prototypes/client/sinatra/stylesheets/images/cancel.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="32px" height="64px" viewBox="0 0 32 64" enable-background="new 0 0 32 64" xml:space="preserve">
+<path fill="#C0C0C8" d="M16,2C8.268,2,2,8.268,2,16s6.268,14,14,14s14-6.268,14-14S23.732,2,16,2z M24.5,21.5l-3,3L16,19l-5.5,5.5
+ l-3-3L13,16l-5.5-5.5l3-3L16,13l5.5-5.5l3,3L19,16L24.5,21.5z"/>
+<path fill="#A0A0A8" d="M16,34C8.268,34,2,40.268,2,48s6.268,14,14,14s14-6.268,14-14S23.732,34,16,34z M24.5,53.5l-3,3L16,51
+ l-5.5,5.5l-3-3L13,48l-5.5-5.5l3-3L16,45l5.5-5.5l3,3L19,48L24.5,53.5z"/>
+</svg>
View
412 generators/prototypes/client/sinatra/stylesheets/picky.css
@@ -1,135 +1,277 @@
-.picky {
- overflow: hidden; }
- .picky > div.header {
- display: none; }
-/* .picky form {
- position: relative;
- overflow: hidden;
- background-color: lightGrey;
- padding: 5px 5px 7px 5px;
- height: 26px;
- margin-bottom: 3px; }*/
- .picky form.empty .status {
- background-color: hsl(215, 51%, 70%); }
- .picky form.empty .feedback {
- background-color: #d0e2ff; }
- .picky form.none .status {
- background-color: hsl(6, 51%, 70%); }
- .picky form.none .feedback {
- background-color: #ffdddd; }
- .picky form.support .status {
- background-color: hsl(29, 51%, 70%); }
- .picky form.support .feedback {
- background-color: #faf3d0; }
- .picky form.ok .status {
- background-color: hsl(82, 51%, 70%); }
- .picky form.ok .feedback {
- background-color: #bcf0b3; }
- .picky form .feedback {
- width: 85%;
- float: left;
- border: 1px solid #cccccc;
- padding: 0;
- margin: 0; }
- .picky form .feedback .status {
- float: left;
- width: 45px;
- height: 26px;
- line-height: 26px;
- text-align: center;
- padding: 0 0 0 2px;
- font-weight: bold;
- color: white;
- margin-right: 5px; }
- .picky form .feedback .status.alert {
- background-color: lightgreen; }
- .picky form .feedback input.query {
- float: left;
- width: 80%;
- height: 100%;
- font-size: 1em;
- font-weight: bold;
- border-style: solid;
- border-width: 0px 0px 3px 0px;
- border-color: transparent;
- margin: 0;
- padding: 4px 0 0 0;
- outline: none;
- background: none; }
- .picky form .feedback .reset {
- float: right;
- width: 18px;
- height: 18px;
- margin: 3px 3px 0px 0px;
- cursor: pointer;
- 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 {
- color: #555555;
- background-color: #eeeeee;
- padding: 6px 5px 5px 8px; }
- .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 {
- display: block;
- width: 20px;
- height: 20px; }
- .picky div.results ol.results {
- list-style-type: none;
- padding: 0px;
- margin: 0px; }
- .picky div.results div.addination {
- position: relative;
- text-align: center;
- color: #276abb;
- cursor: pointer; }
- .picky .no_results {
- display: none; }
- .picky .allocations {
- clear: both;
- overflow: hidden;
- background-color: white;
- padding-bottom: 2px; }
- .picky .allocations ol.hidden {
- display: none; }
- .picky .allocations ol.more:hover {
- background-color: #cccccc;
- cursor: pointer; }
- .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 {
- 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 {
- max-width: 90%;
- float: left; }
- .picky .allocations ol li .count {
- float: right;
- color: #cccccc; }
- .picky .allocations ol li:hover {
- background-color: #d0e2ff; }*/
+/* Form */
+form
+{
+ display: block;
+ position: relative;
+ height: 46px;
+ background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.08))), rgba(255,255,255,0.4);
+ background: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.08)), rgba(255,255,255,0.4);
+ border-radius: 99px;
+ box-shadow: inset 0 1px 0 rgba(0,0,0,0.08), inset 0 0 4px rgba(0,0,0,0.6), 0 0px 0 rgba(255,255,255,0.6);
+ -webkit-user-select: none;
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+form input[type=search],
+form input[type=button],
+form .status
+{
+ height: 46px;
+ border: 1px solid #98989f;
+ -webkit-appearance: none;
+ border-radius: 99px;
+ box-shadow: inset 0 2px 4px rgba(0,0,0,0.12);
+ background: #fff;
+ line-height: 1;
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+form input[type=search] {
+ font-size: 30px;
+ z-index: 3;
+ display: block;
+ position: absolute;
+ margin: 0 0 0 2em;
+ padding: 0 8px 0 13px;
+ width: 526px;
+}
+form input[type=search]::-webkit-input-placeholder
+{
+ color: #c0c0c8;
+ font-size: 30px;
+ line-height: 36px; /* Fixes placeholder vertical alignment in Chrome and Webkit Nightly (535.*) */
+}
+form input[type=search]:-moz-placeholder
+{
+ color: #c0c0c8;
+}
+form input[type=search]:focus
+{
+ outline: none;
+ border-color: #6e96c7;
+ box-shadow: inset 0 0 4px #6e96c7, inset 0 0 4px #6e96c7, 0 0 4px #6e96c7, 0 0 4px #6e96c7, inset 0 2px 4px rgba(0,0,0,0.16);
+}
+form input[type=search]::-webkit-search-cancel-button
+{
+ z-index: 9;
+ position: absolute;
+ right: 6px;
+ top: 6px;
+ width: 32px;
+ height: 32px;
+ margin: 0;
+ padding: 0;
+ background: url(images/cancel.svg);
+ -webkit-appearance: none;
+}
+form input[type=search]::-webkit-search-cancel-button:active
+{
+ background-position: 0 -32px;
+}
+form input[type=search]::-webkit-search-cancel-button
+{
+/* outline: 1px dashed red !important;*/
+}
+form input[type=button]
+{
+ background: rgba(0,0,0,0.01);
+ font-size: 1.2em;
+ z-index: 2;
+ display: block;
+ position: absolute;
+ padding-right: 0.8em;
+ right: 0;
+ width: 130px;
+ color: #606068;
+ text-align: right;
+ text-shadow: 0 1px 0 rgba(255,255,255,0.8);
+ -webkit-transition: background 0.15s ease-in;
+}
+form input[type=button]:active
+{
+ background: rgba(0,0,0,0.08);
+ -webkit-transition-duration: 0;
+}
+form .status {
+ background: rgba(0,0,0,0.0);
+ z-index: 2;
+ display: block;
+ position: absolute;
+ left: 0;
+ width: 100px;
+ line-height: 46px;
+ padding-right: 2em;
+ text-align: right;
+ font-size: 1.5em;
+}
+.picky form.empty .status {
+ background-color: hsl(215, 51%, 70%); }
+.picky form.empty .feedback {
+ background-color: #d0e2ff; }
+.picky form.none .status {
+ background-color: hsl(6, 51%, 70%); }
+.picky form.none .feedback {
+ background-color: #ffdddd; }
+.picky form.support .status {
+ background-color: hsl(29, 51%, 70%); }
+.picky form.support .feedback {
+ background-color: #faf3d0; }
+.picky form.ok .status {
+ background-color: hsl(82, 51%, 70%); }
+.picky form.ok .feedback {
+ background-color: #bcf0b3; }
+.picky form .feedback {
+ width: 85%;
+ float: left;
+ border: 1px solid #cccccc;
+ padding: 0;
+ margin: 0; }
+
+/* To the top */
+.picky .header .tothetop {
+ float: right;
+}
+.picky .header .tothetop a {
+ display: block;
+ width: 20px;
+ height: 20px;
+ text-align: center;
+ margin-left: 1em;
+ border-radius: 5px;
+ background-color: #EEE;
+ text-decoration: none;
+ font-size: 1em;
+ font-weight: bold;
+ color: #777;
+}
+.picky .header .tothetop a:hover {
+ background-color: white;
+}
+
+/* Addination */
+.picky .addination {
+ line-height: 2em;
+ text-align: center;
+ cursor: pointer;
+}
+.picky .addination:hover {
+ background-color: #eee;
+}
+
+/* Allocations */
+.picky .allocations ol {
+ margin-bottom: 10px;
+}
+.picky ol {
+ cursor: pointer;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+.picky li:hover {
+ background-color: #eee;
+}
+.picky ol.more,
+.picky ol.hidden {
+ margin-top: 3px;
+}
+.picky .allocations ol.hidden {
+ display: none; }
+.picky .allocations ol.more:hover {
+ background-color: #ccc;
+ cursor: pointer; }
+.picky .allocations ol {
+ list-style-position: outside;
+ list-style: none;
+ padding: 0;}
+
+.picky .allocations li {
+ font-size: 1.2em;
+ padding: 24px;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(0,0,0,0.1);
+}
+.picky .allocations li:last-child {
+ border-bottom: 0px;
+ margin-bottom: 0;
+}
+.picky .allocations .text {
+ max-width: 90%;
+ float: left; }
+.picky .allocations .count {
+ float: right;
+ color: #cccccc; }
+
+.picky .results .header {
+ padding: 0.5em;
+ background-color: rgba(0, 0, 0, 0.04);
+ background: -webkit-gradient(radial, 0% 100%, 90, 0% 100%, 600, from(rgba(0, 0, 0, 0.02)), to(rgba(0, 0, 0, 0.1)));
+ text-align: right;
+}
+.picky .allocations,
+.picky .no_results,
+.picky .results,
+.picky .more {
+ display: none;
+ margin: 0 1.5em;
+ padding: 0 0 0 0;
+ background-color: rgba(0, 0, 0, 0.02);
+ border-bottom-left-radius: 1em;
+ border-bottom-right-radius: 1em;
+ border-bottom: solid 1px #b8b8ba;
+ box-shadow: inset 0 1px 3px rgba(255,255,255,0), 0 1px 3px rgba(0,0,0,0.16);
+}
+.picky ol.more, .picky .no_results {
+ display: none;
+}
+.picky ol.more h3, .picky .no_results h3 {
+ margin: 0;
+ text-align: center;
+}
+.picky .allocations .more {
+ position: absolute;
+ font-weight: bold;
+ line-height: 1.1em;
+ padding: 0.2em 1em 0.4em;
+ margin: 0 16.5%;
+ -moz-border-radius-bottomleft: 20px;
+ -webkit-border-bottom-left-radius: 20px;
+ -o-border-bottom-left-radius: 20px;
+ -ms-border-bottom-left-radius: 20px;
+ -khtml-border-bottom-left-radius: 20px;
+ border-bottom-left-radius: 20px;
+ -moz-border-radius-bottomright: 20px;
+ -webkit-border-bottom-right-radius: 20px;
+ -o-border-bottom-right-radius: 20px;
+ -ms-border-bottom-right-radius: 20px;
+ -khtml-border-bottom-right-radius: 20px;
+ border-bottom-right-radius: 20px;
+ border-left-width: 1px;