Skip to content
Browse files

+ new css

  • Loading branch information...
1 parent 510faf7 commit 5189ee900e4b96029c9b8a62ee0d8b72751fac40 @floere committed
View
12 client/lib/picky-client/helper.rb
@@ -7,14 +7,14 @@ class Helper
@@localized_input = lambda { |options|
search_button_text = options[:button] || 'search'
<<-HTML
-<div class="dashboard empty">
- <div class="feedback">
+<form class="empty">
+ <!-- <div class="feedback"> -->
<div class="status"></div>
- <input type="text" autocorrect="off" class="query"/>
+ <input type="search" autocorrect="off" class="query"/>
<div class="reset" title="clear"></div>
- </div>
+ <!-- </div> -->
<input type="button" class="search_button" value="#{search_button_text}">
-</div>
+</form>
HTML
}
@@localized_results = lambda { |options|
@@ -32,7 +32,7 @@ class Helper
}
@@localized_interface = lambda { |options|
<<-HTML
-<div id="picky">
+<section class="picky">
#{@@localized_input[options]}
#{@@localized_results[options]}
</div>
View
19 client/test_project/Gemfile.lock
@@ -1,25 +1,26 @@
GEM
remote: http://rubygems.org/
specs:
- activesupport (3.1.3)
+ activesupport (3.2.2)
+ i18n (~> 0.6)
multi_json (~> 1.0)
backports (2.3.0)
eventmachine (0.12.10)
- haml (3.1.3)
+ haml (3.1.4)
i18n (0.6.0)
- multi_json (1.0.3)
- picky-client (3.6.1)
+ multi_json (1.1.0)
+ picky-client (4.2.4)
activesupport (>= 3.0.0)
yajl-ruby (>= 0.7.8)
- rack (1.3.5)
- rack-protection (1.1.4)
+ rack (1.4.1)
+ rack-protection (1.2.0)
rack
rack-test (0.6.1)
rack (>= 1.0)
rake (0.9.2.2)
- sinatra (1.3.1)
- rack (~> 1.3, >= 1.3.4)
- rack-protection (~> 1.1, >= 1.1.2)
+ sinatra (1.3.2)
+ rack (~> 1.3, >= 1.3.6)
+ rack-protection (~> 1.2)
tilt (~> 1.3, >= 1.3.3)
sinatra-contrib (1.3.1)
backports (>= 2.0)
View
BIN client/test_project/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 client/test_project/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
135 client/test_project/stylesheets/picky.old.css
@@ -0,0 +1,135 @@
+#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; }
View
0 client/test_project/stylesheets/picky.sass → ...t/test_project/stylesheets/picky.old.sass
File renamed without changes.
View
230 client/test_project/stylesheets/thijs.css
@@ -0,0 +1,230 @@
+* {
+ -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
+{
+ overflow: hidden;
+}
+.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);
+}
+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 1px 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;
+ font-size: 30px;
+ 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] {
+ z-index: 3;
+ display: block;
+ position: absolute;
+ margin: 0 0 0 2em;
+ padding: 0 8px 0 13px;
+ width: 546px;
+}
+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);
+ z-index: 2;
+ display: block;
+ position: absolute;
+ padding-right: 2em;
+ right: 0;
+ width: 130px;
+ font: 13px/1 "HelveticaNeue-Medium", arial, sans-serif;
+ 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;
+}
+footer
+{
+ text-align: center;
+}
+footer,
+footer a
+{
+ color: #a0a0a8;
+}
+footer a:hover
+{
+ color: #808088;
+}
+
+.content form ol.more,
+.content form ol.hidden {
+ margin-top: 3px;
+}
+.content form ol li:last-child {
+ margin-bottom: 0;
+}
+.content form div.results div.header {
+ display: none;
+ color: #eee;
+ padding: 0em;
+}
+.content form div.allocations,
+.content form div.no_results,
+.content form div.results:not(:empty) {
+ 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);
+}
+.content form div.no_results {
+ padding: 0.5em 0;
+}
+.content form ol.more, .content form div.no_results {
+ display: none;
+}
+.content form ol.more h3, .content form div.no_results h3 {
+ margin: 0;
+ text-align: center;
+}
+.results .pod {
+ margin: 0 1em;
+ padding: 1.5em 0;
+}
+.results .pod h3 {
+ margin-top: 0;
+}
+.results .pod h3 a:link,
+.results .pod h3 a:visited {
+ color: black;
+ text-decoration: none;
+}
+.results .pod h3 a:hover {
+ text-decoration: underline;
+}
+.results hr {
+ margin: 0;
+}
+.results hr:last-child {
+ display: none;
+}
+.content form .no_results {
+ margin: 0px 1em;
+ padding: 0.5em 1em 0;
+ background-color: rgba(0, 0, 0, 0.02);
+}
+.allocations ol {
+ list-style-type: none;
+}
+.content form .allocations {
+ margin: 0px 1.5em;
+ padding-bottom: 0px;
+ background-color: rgba(0, 0, 0, 0.02);
+ box-shadow: -2px 0px rgba(0,0,0,0.05), 2px 0px rgba(0,0,0,0.05);
+}
+form .allocations .shown li, form .allocations .hidden li {
+ font-size: 1.2em;
+}
View
88 client/test_project/views/search.haml
@@ -1,8 +1,9 @@
!!!
%html{ :lang => 'en' }
%head
+ %link{:href => "stylesheets/thijs.css", :media => "screen", :rel => "stylesheet", :type => "text/css"}/
%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/application.css", :media => "screen", :rel => "stylesheet", :type => "text/css"}/
= js 'jquery-1.5.0.min'
= js 'history.min'
= js 'history.adapter.jquery.min'
@@ -21,50 +22,51 @@
%body
%img{:src => "images/picky-new.png"}/
- %p
- %a{:href => "http://floere.github.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")
.content
= Picky::Helper.cached_interface
+ %section
+ %p
+ %a{:href => "http://floere.github.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")
:javascript
$(window).load(function() {
pickyClient = new PickyClient({

0 comments on commit 5189ee9

Please sign in to comment.
Something went wrong with that request. Please try again.