Permalink
Browse files

! specs

  • Loading branch information...
1 parent 9cefa3b commit 6c1447720fe1f269f06aff3300686b65333bd874 @floere committed Mar 9, 2012
@@ -5,12 +5,13 @@ module Picky
class Helper
@@localized_input = lambda { |options|
- search_button_text = options[:button] || 'search'
+ search_button_text = options[:button] || 'search'
+ placeholder_text = options[:placeholder] || 'Search here...'
<<-HTML
<form class="empty" onkeypress="return event.keyCode != 13;">
<!-- <div class="feedback"> -->
<div class="status"></div>
- <input type="search" autocorrect="off" class="query"/>
+ <input type="search" placeholder="#{placeholder_text}" autocorrect="off" class="query"/>
<a class="reset" title="clear"></a>
<!-- </div> -->
<input type="button" value="#{search_button_text}"/>
@@ -19,28 +19,28 @@
describe "input" do
it "should return good html" do
- Picky::Helper.input.should == "<div class=\"dashboard empty\">\n <div class=\"feedback\">\n <div class=\"status\"></div>\n <input type=\"text\" autocorrect=\"off\" class=\"query\"/>\n <div class=\"reset\" title=\"clear\"></div>\n </div>\n <input type=\"button\" class=\"search_button\" value=\"search\">\n</div>\n"
+ Picky::Helper.input.should == "<form class=\"empty\" onkeypress=\"return event.keyCode != 13;\">\n <!-- <div class=\"feedback\"> -->\n <div class=\"status\"></div>\n <input type=\"search\" placeholder=\"Search here...\" autocorrect=\"off\" class=\"query\"/>\n <a class=\"reset\" title=\"clear\"></a>\n <!-- </div> -->\n <input type=\"button\" value=\"search\"/>\n</form>\n"
end
it "should return good html" do
- Picky::Helper.input(:button => 'find').should == "<div class=\"dashboard empty\">\n <div class=\"feedback\">\n <div class=\"status\"></div>\n <input type=\"text\" autocorrect=\"off\" class=\"query\"/>\n <div class=\"reset\" title=\"clear\"></div>\n </div>\n <input type=\"button\" class=\"search_button\" value=\"find\">\n</div>\n"
+ Picky::Helper.input(:button => 'find').should == "<form class=\"empty\" onkeypress=\"return event.keyCode != 13;\">\n <!-- <div class=\"feedback\"> -->\n <div class=\"status\"></div>\n <input type=\"search\" placeholder=\"Search here...\" autocorrect=\"off\" class=\"query\"/>\n <a class=\"reset\" title=\"clear\"></a>\n <!-- </div> -->\n <input type=\"button\" value=\"find\"/>\n</form>\n"
end
end
describe "results" do
it "should return good html" do
- Picky::Helper.input.should == "<div class=\"dashboard empty\">\n <div class=\"feedback\">\n <div class=\"status\"></div>\n <input type=\"text\" autocorrect=\"off\" class=\"query\"/>\n <div class=\"reset\" title=\"clear\"></div>\n </div>\n <input type=\"button\" class=\"search_button\" value=\"search\">\n</div>\n"
+ Picky::Helper.input.should == "<form class=\"empty\" onkeypress=\"return event.keyCode != 13;\">\n <!-- <div class=\"feedback\"> -->\n <div class=\"status\"></div>\n <input type=\"search\" placeholder=\"Search here...\" autocorrect=\"off\" class=\"query\"/>\n <a class=\"reset\" title=\"clear\"></a>\n <!-- </div> -->\n <input type=\"button\" value=\"search\"/>\n</form>\n"
end
it "should return good html" do
- Picky::Helper.input(:no_results => 'SORRY!', :more => 'Click for more!').should == "<div class=\"dashboard empty\">\n <div class=\"feedback\">\n <div class=\"status\"></div>\n <input type=\"text\" autocorrect=\"off\" class=\"query\"/>\n <div class=\"reset\" title=\"clear\"></div>\n </div>\n <input type=\"button\" class=\"search_button\" value=\"search\">\n</div>\n"
+ Picky::Helper.input(:no_results => 'SORRY!', :more => 'Click for more!').should == "<form class=\"empty\" onkeypress=\"return event.keyCode != 13;\">\n <!-- <div class=\"feedback\"> -->\n <div class=\"status\"></div>\n <input type=\"search\" placeholder=\"Search here...\" autocorrect=\"off\" class=\"query\"/>\n <a class=\"reset\" title=\"clear\"></a>\n <!-- </div> -->\n <input type=\"button\" value=\"search\"/>\n</form>\n"
end
end
describe "interface" do
it "should return good html" do
- Picky::Helper.interface.should == "<div id=\"picky\">\n <div class=\"dashboard empty\">\n <div class=\"feedback\">\n <div class=\"status\"></div>\n <input type=\"text\" autocorrect=\"off\" class=\"query\"/>\n <div class=\"reset\" title=\"clear\"></div>\n </div>\n <input type=\"button\" class=\"search_button\" value=\"search\">\n</div>\n\n <div class=\"results\"></div>\n<div class=\"no_results\">Sorry, no results found!</div>\n<div class=\"allocations\">\n <ol class=\"shown\"></ol>\n <ol class=\"more\">more</ol>\n <ol class=\"hidden\"></ol>\n</div>\n\n</div>\n"
+ Picky::Helper.interface.should == "<section class=\"picky\">\n <form class=\"empty\" onkeypress=\"return event.keyCode != 13;\">\n <!-- <div class=\"feedback\"> -->\n <div class=\"status\"></div>\n <input type=\"search\" placeholder=\"Search here...\" autocorrect=\"off\" class=\"query\"/>\n <a class=\"reset\" title=\"clear\"></a>\n <!-- </div> -->\n <input type=\"button\" value=\"search\"/>\n</form>\n\n <div class=\"results\"></div>\n<div class=\"no_results\">Sorry, no results found!</div>\n<div class=\"allocations\">\n <ol class=\"shown\"></ol>\n <ol class=\"more\">more</ol>\n <ol class=\"hidden\"></ol>\n</div>\n\n</section>\n"
end
it "should return good html" do
- Picky::Helper.interface(:button => 'find', :no_results => 'SORRY!', :more => 'Click for more!').should == "<div id=\"picky\">\n <div class=\"dashboard empty\">\n <div class=\"feedback\">\n <div class=\"status\"></div>\n <input type=\"text\" autocorrect=\"off\" class=\"query\"/>\n <div class=\"reset\" title=\"clear\"></div>\n </div>\n <input type=\"button\" class=\"search_button\" value=\"find\">\n</div>\n\n <div class=\"results\"></div>\n<div class=\"no_results\">SORRY!</div>\n<div class=\"allocations\">\n <ol class=\"shown\"></ol>\n <ol class=\"more\">Click for more!</ol>\n <ol class=\"hidden\"></ol>\n</div>\n\n</div>\n"
+ Picky::Helper.interface(:button => 'find', :no_results => 'SORRY!', :more => 'Click for more!').should == "<section class=\"picky\">\n <form class=\"empty\" onkeypress=\"return event.keyCode != 13;\">\n <!-- <div class=\"feedback\"> -->\n <div class=\"status\"></div>\n <input type=\"search\" placeholder=\"Search here...\" autocorrect=\"off\" class=\"query\"/>\n <a class=\"reset\" title=\"clear\"></a>\n <!-- </div> -->\n <input type=\"button\" value=\"find\"/>\n</form>\n\n <div class=\"results\"></div>\n<div class=\"no_results\">SORRY!</div>\n<div class=\"allocations\">\n <ol class=\"shown\"></ol>\n <ol class=\"more\">Click for more!</ol>\n <ol class=\"hidden\"></ol>\n</div>\n\n</section>\n"
end
end
@@ -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;
+}
@@ -1,26 +0,0 @@
-body
- :text-align center
- :font-family Lucida Grande
-
- .content
- :width 560px
- :margin 0 auto
- :text-align left
-
-img
- :margin 0px 0px -210px
-
-p
- span.explanation
- :color #999
-
-pre
- :padding 10px
- :background-color #EFEDE5
-
-#picky
- ol.results
- li.book
- :background-color #ffeeee
- :padding 5px 25px
- :margin 3px 0px
@@ -1,135 +0,0 @@
-#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; }
Oops, something went wrong.

0 comments on commit 6c14477

Please sign in to comment.