From 4096c6bdc266b5f960088c710a2bbd98facf4899 Mon Sep 17 00:00:00 2001
From: Neil Lalonde <neillalonde@gmail.com>
Date: Thu, 4 Apr 2013 12:46:38 -0400
Subject: [PATCH] Use a font-awesome icon in category search field instead of
the default hideous one
---
.../javascripts/external/chosen.jquery.js | 2 +-
.../stylesheets/application/compose.css.scss | 10 ++---
.../stylesheets/application/topic.css.scss | 2 +-
app/assets/stylesheets/vendor/chosen.css.erb | 42 ++++++++++++-------
4 files changed, 34 insertions(+), 22 deletions(-)
diff --git a/app/assets/javascripts/external/chosen.jquery.js b/app/assets/javascripts/external/chosen.jquery.js
index 4abf8b78f..66be45a44 100644
--- a/app/assets/javascripts/external/chosen.jquery.js
+++ b/app/assets/javascripts/external/chosen.jquery.js
@@ -365,7 +365,7 @@ Copyright (c) 2011 by Harvest
if (this.is_multiple) {
container_div.html('<ul class="chzn-choices"><li class="search-field"><input type="text" value="' + this.default_text + '" class="default" autocomplete="off" style="width:25px;" /></li></ul><div class="chzn-drop" style="left:-9000px;"><ul class="chzn-results"></ul></div>');
} else {
- container_div.html('<a href="javascript:void(0)" class="chzn-single chzn-default"><span>' + this.default_text + '</span><div><b></b></div></a><div class="chzn-drop" style="left:-9000px;"><div class="chzn-search"><input type="text" autocomplete="off" /></div><ul class="chzn-results"></ul></div>');
+ container_div.html('<a href="javascript:void(0)" class="chzn-single chzn-default"><span>' + this.default_text + '</span><div><b></b></div></a><div class="chzn-drop" style="left:-9000px;"><div class="chzn-search"><input type="text" autocomplete="off" /><div class="chzn-search-icon"><i class="icon icon-search"></i></div></div><ul class="chzn-results"></ul></div>');
}
this.form_field_jq.hide().after(container_div);
this.container = $('#' + this.container_id);
diff --git a/app/assets/stylesheets/application/compose.css.scss b/app/assets/stylesheets/application/compose.css.scss
index 7ffbbc7c1..001368267 100644
--- a/app/assets/stylesheets/application/compose.css.scss
+++ b/app/assets/stylesheets/application/compose.css.scss
@@ -216,9 +216,9 @@
height: 400px;
}
.contents {
- input[type=text] {
+ input#reply-title {
padding: 7px 10px;
- margin: 6px 0 3px 0;
+ margin: 6px 10px 3px 0;
}
.wmd-controls {
top: 100px;
@@ -252,9 +252,9 @@
@include small-width { width: 218px; }
}
.chzn-search input {
- width: 398px;
- @include medium-width { width: 253px; }
- @include small-width { width: 188px; }
+ width: 378px;
+ @include medium-width { width: 233px; }
+ @include small-width { width: 168px; }
}
}
}
diff --git a/app/assets/stylesheets/application/topic.css.scss b/app/assets/stylesheets/application/topic.css.scss
index ca7082c09..672948439 100644
--- a/app/assets/stylesheets/application/topic.css.scss
+++ b/app/assets/stylesheets/application/topic.css.scss
@@ -78,7 +78,7 @@
width: 328px;
}
.chzn-search input {
- width: 298px;
+ width: 278px;
}
}
button {
diff --git a/app/assets/stylesheets/vendor/chosen.css.erb b/app/assets/stylesheets/vendor/chosen.css.erb
index 996a2acfe..b7481a22d 100644
--- a/app/assets/stylesheets/vendor/chosen.css.erb
+++ b/app/assets/stylesheets/vendor/chosen.css.erb
@@ -99,16 +99,28 @@
white-space: nowrap;
z-index: 1010;
}
+.chzn-container-single .chzn-search .chzn-search-icon {
+ display: inline-block;
+ width: auto;
+ height: auto;
+ font-size: 18px;
+ font-weight: normal;
+ position: absolute;
+ right: 10px;
+ top: 12px;
+ z-index: 3;
+ color: #888;
+}
.chzn-container-single .chzn-search input {
- background: #fff url(<%=asset_path "chosen-sprite.png"%>) no-repeat 100% -22px;
- background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat 100% -22px, -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
- background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat 100% -22px, -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
- background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat 100% -22px, -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
- background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat 100% -22px, -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
- background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat 100% -22px, -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
- background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat 100% -22px, linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+ background: #fff;
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
+ background: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+ background: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+ background: -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+ background: -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+ background: linear-gradient(top, #eeeeee 1%, #ffffff 15%);
margin: 1px 0;
- padding: 4px 20px 4px 5px;
+ padding: 7px 30px 7px 10px;
outline: 0;
border: 1px solid #aaa;
font-family: sans-serif;
@@ -382,13 +394,13 @@
.chzn-rtl .chzn-results .group-option { padding-left: 0; padding-right: 15px; }
.chzn-rtl.chzn-container-active .chzn-single-with-drop div { border-right: none; }
.chzn-rtl .chzn-search input {
- background: #fff url(<%=asset_path "chosen-sprite.png"%>) no-repeat -38px -22px;
- background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat -38px -22px, -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
- background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat -38px -22px, -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
- background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat -38px -22px, -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
- background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat -38px -22px, -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
- background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat -38px -22px, -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
- background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat -38px -22px, linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+ background: #fff;
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
+ background: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+ background: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+ background: -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+ background: -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+ background: linear-gradient(top, #eeeeee 1%, #ffffff 15%);
padding: 4px 5px 4px 20px;
direction: rtl;
}