Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

trying to clean up a few things, this projects a mess

  • Loading branch information...
commit a9d1d018c4f9b626fb288cb3c547b6af3659cee5 1 parent a1de019
@cjstewart88 authored
View
8 Gemfile
@@ -1,15 +1,15 @@
source 'http://rubygems.org'
-gem 'rails', '3.1.0'
+gem 'rails', '3.1.4'
gem 'pg'
-gem 'httparty'
-gem 'rake'
gem 'devise'
+
gem 'jquery-rails', '1.0.12'
+gem 'compass-rails'
gem 'sass-rails'
+gem 'uglifier'
group :production do
gem 'therubyracer-heroku', '0.8.1.pre3'
- gem 'pg'
end
View
125 Gemfile.lock
@@ -1,118 +1,127 @@
GEM
remote: http://rubygems.org/
specs:
- actionmailer (3.1.0)
- actionpack (= 3.1.0)
+ actionmailer (3.1.4)
+ actionpack (= 3.1.4)
mail (~> 2.3.0)
- actionpack (3.1.0)
- activemodel (= 3.1.0)
- activesupport (= 3.1.0)
+ actionpack (3.1.4)
+ activemodel (= 3.1.4)
+ activesupport (= 3.1.4)
builder (~> 3.0.0)
erubis (~> 2.7.0)
i18n (~> 0.6)
- rack (~> 1.3.2)
- rack-cache (~> 1.0.3)
+ rack (~> 1.3.6)
+ rack-cache (~> 1.1)
rack-mount (~> 0.8.2)
rack-test (~> 0.6.1)
- sprockets (~> 2.0.0)
- activemodel (3.1.0)
- activesupport (= 3.1.0)
- bcrypt-ruby (~> 3.0.0)
+ sprockets (~> 2.0.3)
+ activemodel (3.1.4)
+ activesupport (= 3.1.4)
builder (~> 3.0.0)
i18n (~> 0.6)
- activerecord (3.1.0)
- activemodel (= 3.1.0)
- activesupport (= 3.1.0)
- arel (~> 2.2.1)
+ activerecord (3.1.4)
+ activemodel (= 3.1.4)
+ activesupport (= 3.1.4)
+ arel (~> 2.2.3)
tzinfo (~> 0.3.29)
- activeresource (3.1.0)
- activemodel (= 3.1.0)
- activesupport (= 3.1.0)
- activesupport (3.1.0)
+ activeresource (3.1.4)
+ activemodel (= 3.1.4)
+ activesupport (= 3.1.4)
+ activesupport (3.1.4)
multi_json (~> 1.0)
- arel (2.2.1)
+ arel (2.2.3)
bcrypt-ruby (3.0.1)
- builder (3.0.0)
- devise (1.5.1)
+ builder (3.0.4)
+ chunky_png (1.2.6)
+ compass (0.12.2)
+ chunky_png (~> 1.2)
+ fssm (>= 0.2.7)
+ sass (~> 3.1)
+ compass-rails (1.0.3)
+ compass (>= 0.12.2, < 0.14)
+ devise (2.1.2)
bcrypt-ruby (~> 3.0)
- orm_adapter (~> 0.0.3)
- warden (~> 1.1)
+ orm_adapter (~> 0.1)
+ railties (~> 3.1)
+ warden (~> 1.2.1)
erubis (2.7.0)
+ execjs (1.4.0)
+ multi_json (~> 1.0)
+ fssm (0.2.9)
hike (1.2.1)
- httparty (0.8.1)
- multi_json
- multi_xml
- i18n (0.6.0)
+ i18n (0.6.1)
jquery-rails (1.0.12)
railties (~> 3.0)
thor (~> 0.14)
- json (1.6.1)
- mail (2.3.0)
+ json (1.7.5)
+ mail (2.3.3)
i18n (>= 0.4.0)
mime-types (~> 1.16)
treetop (~> 1.4.8)
- mime-types (1.17.2)
- multi_json (1.0.3)
- multi_xml (0.4.1)
- orm_adapter (0.0.5)
- pg (0.11.0)
+ mime-types (1.19)
+ multi_json (1.3.7)
+ orm_adapter (0.4.0)
+ pg (0.14.1)
polyglot (0.3.3)
- rack (1.3.5)
- rack-cache (1.0.3)
+ rack (1.3.6)
+ rack-cache (1.2)
rack (>= 0.4)
rack-mount (0.8.3)
rack (>= 1.0.0)
rack-ssl (1.3.2)
rack
- rack-test (0.6.1)
+ rack-test (0.6.2)
rack (>= 1.0)
- rails (3.1.0)
- actionmailer (= 3.1.0)
- actionpack (= 3.1.0)
- activerecord (= 3.1.0)
- activeresource (= 3.1.0)
- activesupport (= 3.1.0)
+ rails (3.1.4)
+ actionmailer (= 3.1.4)
+ actionpack (= 3.1.4)
+ activerecord (= 3.1.4)
+ activeresource (= 3.1.4)
+ activesupport (= 3.1.4)
bundler (~> 1.0)
- railties (= 3.1.0)
- railties (3.1.0)
- actionpack (= 3.1.0)
- activesupport (= 3.1.0)
+ railties (= 3.1.4)
+ railties (3.1.4)
+ actionpack (= 3.1.4)
+ activesupport (= 3.1.4)
rack-ssl (~> 1.3.2)
rake (>= 0.8.7)
rdoc (~> 3.4)
thor (~> 0.14.6)
- rake (0.9.2.2)
- rdoc (3.11)
+ rake (10.0.0)
+ rdoc (3.12)
json (~> 1.4)
- sass (3.1.20)
+ sass (3.2.3)
sass-rails (3.1.6)
actionpack (~> 3.1.0)
railties (~> 3.1.0)
sass (>= 3.1.10)
tilt (~> 1.3.2)
- sprockets (2.0.3)
+ sprockets (2.0.4)
hike (~> 1.2)
rack (~> 1.0)
tilt (~> 1.1, != 1.3.0)
therubyracer-heroku (0.8.1.pre3)
thor (0.14.6)
tilt (1.3.3)
- treetop (1.4.10)
+ treetop (1.4.12)
polyglot
polyglot (>= 0.3.1)
- tzinfo (0.3.31)
- warden (1.1.0)
+ tzinfo (0.3.35)
+ uglifier (1.3.0)
+ execjs (>= 0.3.0)
+ multi_json (~> 1.0, >= 1.0.2)
+ warden (1.2.1)
rack (>= 1.0)
PLATFORMS
ruby
DEPENDENCIES
+ compass-rails
devise
- httparty
jquery-rails (= 1.0.12)
pg
- rails (= 3.1.0)
- rake
+ rails (= 3.1.4)
sass-rails
therubyracer-heroku (= 0.8.1.pre3)
+ uglifier
View
BIN  app/assets/images/facebook.png
Deleted file not rendered
View
BIN  app/assets/images/info-icon.png
Deleted file not rendered
View
BIN  app/assets/images/loading-list.gif
Deleted file not rendered
View
BIN  app/assets/images/twitter.png
Deleted file not rendered
View
4 app/assets/javascripts/application.js
@@ -1,5 +1,5 @@
+//= require_tree ../../../vendor/assets/javascripts/
//= require main
//= require random-playlists
//= require top-genres
-//= require recently-watched
-//= require auto-artist
+//= require recently-watched
View
168 app/assets/javascripts/auto-artist.js
@@ -1,168 +0,0 @@
-(function($){
- // For prowsers that dont support .filter
- if (!Array.prototype.filter) {
- Array.prototype.filter = function(fun /*, thisp */) {
- "use strict";
-
- if (this == null) throw new TypeError();
-
- var t = Object(this);
- var len = t.length >>> 0;
- if (typeof fun != "function") throw new TypeError();
-
- var res = [];
- var thisp = arguments[1];
- for (var i = 0; i < len; i++) {
- if (i in t) {
- var val = t[i];
- if (fun.call(thisp, val, i, t)) res.push(val);
- }
- }
-
- return res;
- };
- }
- // end support for dumb browsers
-
- $.fn.autoArtist = function () {
- var self = this;
-
- self.el = $(this);
- self.cache = [];
- self.suggestions = $("<ul>").attr("id", "auto-artists-suggestions");
- self.inputVal = null;
-
- self.init();
-
- self.init = function () {
- self.typingListener();
- }
-
- self.setupTimeout = function () {
- if (self.timeout) {
- clearTimeout(self.timeout);
- delete self.timeout;
- }
- }
-
- self.typingListener = function () {
- self.el.keyup(function (e) {
- self.inputVal = self.el.val();
-
- switch (e.keyCode) {
- case 13:
- // press enter
- self.setupTimeout();
- self.suggestions.hide();
- break;
- case 8:
- // backspace
- self.cache = [];
-
- if (self.inputVal.length > 2) {
- self.setupTimeout();
- self.timeout = setTimeout(self.search, 1000);
- }
- else {
- self.render();
- }
-
- break;
- default:
- // typing normal
- if (self.inputVal.length > 2) {
- self.setupTimeout();
- self.timeout = setTimeout(self.search, 1000);
- }
-
- break;
- }
- });
- }
-
- self.search = function () {
- if (self.cache.length == 0) {
- self.echoNestSearch();
- }
- else {
- self.useCache();
- }
- }
-
- self.echoNestSearch = function () {
- var apiCall = $.getJSON("http://developer.echonest.com/api/v4/artist/suggest?api_key=OYJRQNQMCGIOZLFIW&format=jsonp&name=" + self.inputVal + "&results=10&callback=?", function (data) {
- $.each(data.response.artists, function () {
- self.cache.push(this.name);
- });
- });
-
- $.when(apiCall).done(self.render);
- }
-
- self.useCache = function () {
- self.cache = self.cache.filter(function (element, index, array) {
- var pattern = new RegExp(self.inputVal, 'i');
- return element.match(pattern);
- });
-
- self.render();
- }
-
- self.render = function () {
- self.suggestions.html("");
-
- if (self.cache.length == 0) {
- self.suggestions.hide();
- return;
- }
-
- $.each(self.cache, function (i, artist) {
- var suggestion = $("<li>");
-
- suggestion.text(artist)
- .addClass("auto-artists-suggestions-suggestion");
-
- self.suggestions.append(suggestion);
- });
-
- self.el.after(self.suggestions);
-
- var lPadding = parseInt(self.el.css('paddingLeft'));
- var rPadding = parseInt(self.el.css('paddingRight'));
- var tPadding = parseInt(self.el.css('paddingTop'));
- var bPadding = parseInt(self.el.css('paddingBottom'));
-
- var height = self.el.height() + tPadding + bPadding;
- var width = self.el.width() + lPadding + rPadding;
-
- var offset = self.el.offset();
- var top = offset.top + height + "px";
- var left = offset.left + "px";
-
- self.suggestions.css({ "top" : top, "left" : left, "width" : width })
- .show();
-
- self.events();
- }
-
- self.events = function () {
- $('html').click(function () {
- self.cache = [];
- self.suggestions.hide();
- });
-
- $(window).blur(function () {
- self.cache = [];
- self.suggestions.hide();
- });
-
- $('.auto-artists-suggestions-suggestion').click(function (e) {
- e.stopPropagation();
- $("#q").val($(this).text());
- self.suggestions.hide();
- });
- }
-
- self.init();
- }
-})(jQuery);
View
7 app/assets/javascripts/main.js
@@ -111,7 +111,7 @@ function prepare_search (who, type_of_search) {
if (thePlayer) thePlayer.stopVideo();
$('#player').hide();
$('#empty-playlist').hide();
- $('#explore').hide();
+ $('#welcome').hide();
$('#loading-playlist').show();
videos = [];
@@ -420,7 +420,7 @@ function initPlaylist () {
}
$('#loading-playlist').hide();
- $('#explore').fadeOut();
+ $('#welcome').fadeOut();
videosCopy = "";
$.each(videos, function(i) {
@@ -740,7 +740,6 @@ function detect_mobile () {
$('#ytplayerid').addClass('mobile-ytplayerid');
$('#explore section').addClass('mobile');
$('body').addClass('mobile-body');
- $('#inner-main').addClass('mobile-inner-main');
$('#listenForm input').addClass('mobile');
$('.why-register').remove();
$('#rain').addClass('mobile');
@@ -984,6 +983,4 @@ $(document).ready(function () {
title: 'Search Methods'
});
$('#searching-info').click(function () { $('#searching-info-dialog').dialog('open'); });
-
- $('#q').autoArtist();
});
View
2  app/assets/stylesheets/application.css
@@ -1,3 +1,5 @@
/*
+ *= require_tree ../../../vendor/assets/stylesheets/
*= require main
+ *= require_tree
*/
View
27 app/assets/stylesheets/header.scss
@@ -0,0 +1,27 @@
+#main-header {
+ width: 100%;
+ height: 40px;
+ margin-bottom: 20px;
+ line-height: 40px;
+
+ #logo {
+ float: left;
+ margin-left: 20px;
+ font: 30px 'PT Sans';
+ font-weight: 700;
+
+ a {
+ color: #000000;
+ }
+ }
+
+ #main-nav {
+ float: right;
+ margin-right: 20px;
+ font-size: 12px;
+
+ a {
+ margin-left: 30px;
+ }
+ }
+}
View
168 app/assets/stylesheets/main.scss
@@ -1,3 +1,5 @@
+@import "compass";
+
*:focus { outline: none !important; }
* { margin: 0px; padding: 0px; }
@@ -5,8 +7,9 @@ html { overflow-y: scroll; }
body {
background: url('/assets/bg.png');
- font: 11px HelveticaNeue, Helvetica, Arial, sans-serif;
- color: #464646;
+ font-family: 'Open Sans', sans-serif;
+ font-size: 12px;
+ color: #000;
padding-bottom: 20px;
}
@@ -31,7 +34,7 @@ a {
input {
color: #464646;
- font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
+ font: 12px 'Open Sans', sans-serif;
&:focus {
outline: 0;
@@ -76,39 +79,16 @@ h2 {
display: none;
width: 100%;
max-width: 800px;
- margin: 0 auto;
- margin-top: 20px;
+ margin: 25px auto;
+
+ #inner-main {
+ margin: 10px;
+ }
}
+
.mobile-body {
overflow-x: hidden !important;
}
-.mobile-inner-main {
- margin: 15px !important;
-}
-
-header {
- width: 100%;
- height: 40px;
- margin-bottom: 20px;
-
- h1 {
- float: left;
- margin-left: 20px;
- font: 30px 'PT Sans';
- font-weight: 700;
- }
-
- nav {
- float: right;
- margin-right: 20px;
- margin-top: 15px;
- font-size: 12px;
-
- a {
- margin-left: 30px;
- }
- }
-}
/* Stuff for devise forms */
form input[type=text], form input[type=email], form input[type=password] { margin-top: 15px; margin-bottom: 15px; }
@@ -120,24 +100,26 @@ form a { display: inline-block; margin-top: 15px; }
form .remember-me { margin-bottom: 15px; }
input[type=text], input[type=email], input[type=password], textarea {
+ padding: 8px;
width: 250px;
- border: solid 1px #cecfd1;
+ border: solid 1px #ccc;
font-size: 12px;
font-weight: bold;
- line-height: normal;
- padding: 8px;
- border-radius: 3px;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- moz-transition: all .218s;
- -o-transition: all .218s;
- -webkit-transition: all .218s;
- transition: all .218s;
+ @include border-radius(3px);
+ background: #FFFFFF;
+
+ &:focus {
+ box-shadow: 0 1px 1px rgba(0,0,0,.1);
+ -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);
+ -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1);
+ border-color: #999;
+ }
}
-input[type=button], input[type=submit] {
+input[type=button], input[type=submit], a.button {
text-transform: lowercase;
font-size: 12px;
+ color: #464646;
font-weight: bold;
line-height: normal;
padding: 8px 25px;
@@ -155,14 +137,33 @@ input[type=button], input[type=submit] {
-o-transition: all .3s;
-webkit-transition: all .3s;
transition: all .3s;
+
+ &:hover {
+ box-shadow: 0 1px 1px rgba(0,0,0,.1);
+ -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);
+ -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1);
+ border-color: #999;
+ }
+
+ &.has-icon-left span {
+ margin-right: 10px;
+ line-height: normal;
+ }
+
+ &.has-icon-right span {
+ margin-left: 10px;
+ line-height: normal;
+ }
}
-input[type=button]:hover, input[type=submit]:hover {
- box-shadow: 0 1px 1px rgba(0,0,0,.1);
- -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);
- -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1);
- border-color: #999;
-}
-#listenForm {
+
+#listenForm {
+ text-align: center;
+ margin-bottom: 20px;
+ background: #efefef;
+ background: rgba(255, 255, 255, .3);
+ border-radius: 3px;
+ border: solid 1px #ccc;
+
input[type=button], input[type=submit] {
background-image: -webkit-gradient(linear,left top,left bottom,from(#548FF4),to(#2667D4));
background-image: -webkit-linear-gradient(top,#548FF4,#2667D4);
@@ -178,15 +179,6 @@ input[type=button]:hover, input[type=submit]:hover {
}
}
-#listenForm {
- text-align: center;
- margin-bottom: 20px;
- background: #efefef;
- background: rgba(255, 255, 255, .3);
- border-radius: 3px;
- border: solid 1px #ccc;
-}
-
#listenForm input { margin-right: 10px; }
#listenForm input[type=button].mobile {
padding: 8px !important;
@@ -197,12 +189,6 @@ input[type=button]:hover, input[type=submit]:hover {
#q {
width: 400px;
}
-#q:focus, input:focus, textarea:focus {
- box-shadow: 0 1px 1px rgba(0,0,0,.1);
- -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);
- -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1);
- border-color: #999;
-}
#empty-playlist {
display: none;
@@ -216,10 +202,18 @@ input[type=button]:hover, input[type=submit]:hover {
text-align: right;
margin-bottom: 10px;
- img {
- width: 16px;
+ span {
+ font-size: 18px;
cursor: pointer;
- vertical-align: middle;
+ margin-left: 10px;
+
+ &#facebook:hover {
+ color: #3B5999;
+ }
+
+ &#twitter:hover {
+ color: #4099FF;
+ }
}
}
@@ -311,7 +305,6 @@ input[type=button]:hover, input[type=submit]:hover {
font-weight: normal;
}
#player-controls-right { float: right; }
-#remove-video:hover { color: red; }
table {
margin-bottom: 20px;
@@ -493,7 +486,7 @@ ul#playlists li.already-in-playlist {
section {
float: left;
- width: 211px;
+ width: 204px;
margin-right: 20px;
margin-bottom: 20px;
@@ -522,7 +515,7 @@ ul#playlists li.already-in-playlist {
min-height: 150px;
&.loading-list {
- background: url("/assets/loading-list.gif") no-repeat center center;
+ background: url("/assets/loading.gif") no-repeat center center;
li {
display: none;
@@ -638,9 +631,7 @@ ul#playlists li.already-in-playlist {
}
#searching-info {
- position: absolute;
- margin-top: 25px;
- width: 14px;
+ font-size: 14px;
cursor: pointer;
}
@@ -665,33 +656,4 @@ ul#playlists li.already-in-playlist {
}
}
}
-}
-
-#auto-artists-suggestions {
- display: none;
- position: absolute;
- list-style: none;
- text-align: left;
- background: #fff;
- border: solid 1px #999;
- border-top: none;
- box-shadow: 0 1px 1px rgba(0,0,0,.1);
- -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);
- -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1);
- -webkit-border-bottom-right-radius: 2px;
- -webkit-border-bottom-left-radius: 2px;
- -moz-border-radius-bottomright: 2px;
- -moz-border-radius-bottomleft: 2px;
- border-bottom-right-radius: 2px;
- border-bottom-left-radius: 2px;
- z-index: 100;
-
- .auto-artists-suggestions-suggestion {
- padding: 8px;
-
- &:hover {
- cursor: pointer;
- background: #efefef;
- }
- }
}
View
58 app/assets/stylesheets/welcome.scss
@@ -0,0 +1,58 @@
+@import "compass";
+
+#welcome-main-message, #welcome-overview, #welcome-sign-in {
+ margin-top: 30px;
+}
+
+#welcome-main-message {
+ font-size: 25px;
+ font-weight: bold;
+ text-align: center;
+}
+
+#welcome-overview {
+ text-align: center;
+
+ div {
+ float: left;
+ width: 206px;
+ padding: 20px;
+ font-size: 18px;
+ @include border-radius(3px);
+
+ span {
+ display: block;
+ margin-bottom: 10px;
+ font-size: 34px;
+ }
+ }
+}
+
+#welcome-sign-in {
+ clear: both;
+ padding-top: 60px;
+ margin-bottom: 20px;
+ line-height: 35px;
+ text-align: center;
+
+ #welcome-instructions {
+ width: 60%;
+ margin: 0 auto;
+ margin-bottom: 20px;
+ font-size: 14px;
+ font-weight: bold;
+ line-height: 22px;
+ }
+
+ a.button {
+ margin-right: 10px;
+ }
+
+ .twitter {
+ background: #4099FF;
+ }
+
+ .facebook {
+ background: #3B5999;
+ }
+}
View
82 app/views/index.html.erb
@@ -2,38 +2,57 @@
<input type="text" name="q" autocomplete="off" id="q" value="<%= params[:artist_band].gsub('+',' ') if params[:artist_band].present? %>" tabindex="1" placeholder="search for artists or bands"/>
<input type="button" name="just" value="only" class="listen just tooltip" tabindex="2" original-title="This search method is to search for a single artist or band."/>
<input type="button" name="similar" value="similar" class="listen similar tooltip" tabindex="3" original-title="This search method will find artists and bands similar to your search."/>
- <img id="searching-info" class="tooltip" src='/assets/info-icon.png' original-title="See what we provide as search options!">
+ <span id="searching-info" class="icon-info-sign tooltip" original-title="See what we provide as search options!"></span>
</form>
-<% if !request.path.index("similar") && !request.path.index("just") && !request.path.index("video") && !request.path.index("genre") && !request.path.index("multi") && !@playlist_name %>
- <div id="explore">
- <section id="random-playlists">
- <h2>
- <a href="/explore#bottom">more...</a>
- random playlists
- </h2>
- <ul id="random-playlists-list" class="loading-list"></ul>
- <script>$('#random-playlists-list').randomPlaylists({ limit: 15, font_page: true });</script>
- </section>
-
- <section id="top-genres">
- <h2>
- <a href="/explore#bottom">more...</a>
- top genres
- </h2>
- <ul id="top-genres-list" class="loading-list"></ul>
- <script>$('#top-genres-list').topGenres({ limit: 15, font_page: true });</script>
- </section>
-
- <section id="recently-watched">
- <h2>
- <a href="/explore#bottom">more...</a>
- Recently Watched
- </h2>
- <ul id="recently-watched-list" class="loading-list"></ul>
- <script>$('#recently-watched-list').recentlyWatched({ limit: 15, font_page: true });</script>
- </section>
- </div>
+<% if !request.path.index("similar") && !request.path.index("just") && !request.path.index("video") && !request.path.index("genre") && !request.path.index("multi") && !@playlist_name %>
+ <section id="welcome">
+ <div id="welcome-main-message">
+ Lets take advantage of YouTube's music videos.
+ </div>
+
+ <div id="welcome-overview">
+ <div>
+ <span class="icon-music"></span>
+ Enjoy just the music content YouTube has to offer, leave the rest behind.
+ </div>
+
+ <div>
+ <span class="icon-list"></span>
+ Create custom playlists, making sure your favorite videos are at your every need.
+ </div>
+
+ <div>
+ <span class="icon-share-alt"></span>
+ Share your custom playlists or searches, everyone deserves the experience!
+ </div>
+ </div>
+
+ <div id="welcome-sign-in">
+ <% if !user_signed_in? %>
+ <div id="welcome-instructions">
+ Get started by searching above. If you interested in creating account, please
+ register below, or login if you already have one!
+ </div>
+ <%= link_to('<span class="icon-flag"></span> Register'.html_safe, '/users/sign_up', :class => 'sign-up-link button has-icon-left') %>
+ <%= link_to('<span class="icon-user"></span> Login'.html_safe, '/users/sign_in', :class => 'sign-in-link button has-icon-left') %>
+ <% else %>
+ <div id="welcome-instructions">
+ Get started by searching above or accessing your playlists.
+ </div>
+ <%= link_to('<span class="icon-list"></span> Your Playlists'.html_safe, "/#{current_user.username}/playlists", :class => 'my-playlists-link button has-icon-left') %>
+ <% end %>
+ <!--
+ <a href="/auth/facebook" id="sign-in" class="button has-icon large facebook">
+ <span class="icon-facebook"></span> Sign in with Facebook
+ </a>
+
+ <a href="/auth/twitter" id="sign-in" class="button has-icon large twitter">
+ <span class="icon-twitter"></span> Sign in with Twitter
+ </a>
+ -->
+ </div>
+ </section>
<% end %>
<section id="loading-playlist"></section>
@@ -44,7 +63,8 @@
<section id="player">
<div id="share">
- <img src="/assets/facebook.png" id="facebook"> <img src="/assets/twitter.png" id="twitter">
+ <span id="facebook" class="icon-facebook-sign" ></span>
+ <span id="twitter" class="icon-twitter-sign"></span>
</div>
<div id="ytplayerid"></div>
View
8 app/views/layouts/application.html.erb
@@ -3,7 +3,7 @@
<head>
<title>Tubalr - A simple tool for enjoying music videos!</title>
<META NAME="Description" CONTENT="Tubalr is a simple way to enjoy great music videos.">
- <%= stylesheet_link_tag "http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic", "vendor", "application" %>
+ <%= stylesheet_link_tag "http://fonts.googleapis.com/css?family=PT+Sans:400,700,800,400italic,700italic", "http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600,800", "vendor", "application" %>
<%= javascript_include_tag "http://connect.facebook.net/en_US/all.js", "vendor", "application" %>
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<meta name="viewport" content="width=500px, user-scalable=no">
@@ -19,12 +19,12 @@
<%= "<aside class='flash-msg'>#{flash[:notice]}</aside>".html_safe if !flash[:notice].nil? %>
</div>
- <header>
- <h1>
+ <header id="main-header">
+ <h1 id="logo">
<a href='/' class="tooltip" original-title="Pronounced: tuba-ler">tubalr</a>
</h1>
- <nav>
+ <nav id="main-nav">
<%= link_to('explore', '/explore', :class => 'explore-link') %>
<%= link_to('blog', 'http://www.tubalr.tumblr.com/', :target => '_blank', :class => 'blog-link') %>
<%= link_to('about', '#', :class => 'about-link about-tubalr') %>
View
29 config/application.rb
@@ -2,43 +2,18 @@
require 'rails/all'
-# If you have a Gemfile, require the gems listed there, including any gems
-# you've limited to :test, :development, or :production.
Bundler.require(:default, Rails.env) if defined?(Bundler)
module Tubalr
class Application < Rails::Application
- # Settings in config/environments/* take precedence over those specified here.
- # Application configuration should go into files in config/initializers
- # -- all .rb files in that directory are automatically loaded.
-
- # Custom directories with classes and modules you want to be autoloadable.
- # config.autoload_paths += %W(#{config.root}/extras)
-
- # Only load the plugins named here, in the order given (default is alphabetical).
- # :all can be used as a placeholder for all plugins not explicitly named.
- # config.plugins = [ :exception_notification, :ssl_requirement, :all ]
-
- # Activate observers that should always be running.
- # config.active_record.observers = :cacher, :garbage_collector, :forum_observer
-
- # Set Time.zone default to the specified zone and make Active Record auto-convert to this zone.
- # Run "rake -D time" for a list of tasks for finding time zone names. Default is UTC.
- # config.time_zone = 'Central Time (US & Canada)'
-
- # The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded.
- # config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
- # config.i18n.default_locale = :de
-
- # JavaScript files you want as :defaults (application.js is always included).
- # config.action_view.javascript_expansions[:defaults] = %w(jquery rails)
-
# Configure the default encoding used in templates for Ruby 1.9.
config.encoding = "utf-8"
# Configure sensitive parameters which will be filtered from the log file.
config.filter_parameters += [:password]
+
config.assets.precompile += %w( *.css *.js )
config.assets.enabled = true
+ config.assets.paths << "#{Rails.root}/vendor/assets/fonts"
end
end
View
BIN  vendor/assets/fonts/fontawesome-webfont.eot
Binary file not shown
View
255 vendor/assets/fonts/fontawesome-webfont.svg
255 additions, 0 deletions not shown
View
BIN  vendor/assets/fonts/fontawesome-webfont.ttf
Binary file not shown
View
BIN  vendor/assets/fonts/fontawesome-webfont.woff
Binary file not shown
View
303 vendor/assets/stylesheets/font-awesome.css
@@ -0,0 +1,303 @@
+/* Font Awesome
+ the iconic font designed for use with Twitter Bootstrap
+ -------------------------------------------------------
+ The full suite of pictographic icons, examples, and documentation
+ can be found at: http://fortawesome.github.com/Font-Awesome/
+
+ License
+ -------------------------------------------------------
+ The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0:
+ http://creativecommons.org/licenses/by/3.0/ A mention of
+ 'Font Awesome - http://fortawesome.github.com/Font-Awesome' in human-readable
+ source code is considered acceptable attribution (most common on the web).
+ If human readable source code is not available to the end user, a mention in
+ an 'About' or 'Credits' screen is considered acceptable (most common in desktop
+ or mobile software).
+
+ Contact
+ -------------------------------------------------------
+ Email: dave@davegandy.com
+ Twitter: http://twitter.com/fortaweso_me
+ Work: http://lemonwi.se co-founder
+
+ */
+@font-face {
+ font-family: "FontAwesome";
+ src: url('/assets/fontawesome-webfont.eot');
+ src: url('/assets/fontawesome-webfont.eot?#iefix') format('eot'), url('/assets/fontawesome-webfont.woff') format('woff'), url('/assets/fontawesome-webfont.ttf') format('truetype'), url('/assets/fontawesome-webfont.svg#FontAwesome') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+/* Font Awesome styles
+ ------------------------------------------------------- */
+[class^="icon-"]:before, [class*=" icon-"]:before {
+ font-family: FontAwesome;
+ font-weight: normal;
+ font-style: normal;
+ display: inline-block;
+ text-decoration: inherit;
+}
+a [class^="icon-"], a [class*=" icon-"] {
+ display: inline-block;
+ text-decoration: inherit;
+}
+/* makes the font 33% larger relative to the icon container */
+.icon-large:before {
+ vertical-align: top;
+ font-size: 1.3333333333333333em;
+}
+.btn [class^="icon-"], .btn [class*=" icon-"] {
+ /* keeps button heights with and without icons the same */
+
+ line-height: .9em;
+}
+li [class^="icon-"], li [class*=" icon-"] {
+ display: inline-block;
+ width: 1.25em;
+ text-align: center;
+}
+li .icon-large[class^="icon-"], li .icon-large[class*=" icon-"] {
+ /* 1.5 increased font size for icon-large * 1.25 width */
+
+ width: 1.875em;
+}
+li[class^="icon-"], li[class*=" icon-"] {
+ margin-left: 0;
+ list-style-type: none;
+}
+li[class^="icon-"]:before, li[class*=" icon-"]:before {
+ text-indent: -2em;
+ text-align: center;
+}
+li[class^="icon-"].icon-large:before, li[class*=" icon-"].icon-large:before {
+ text-indent: -1.3333333333333333em;
+}
+/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
+ readers do not read off random characters that represent icons */
+.icon-glass:before { content: "\f000"; }
+.icon-music:before { content: "\f001"; }
+.icon-search:before { content: "\f002"; }
+.icon-envelope:before { content: "\f003"; }
+.icon-heart:before { content: "\f004"; }
+.icon-star:before { content: "\f005"; }
+.icon-star-empty:before { content: "\f006"; }
+.icon-user:before { content: "\f007"; }
+.icon-film:before { content: "\f008"; }
+.icon-th-large:before { content: "\f009"; }
+.icon-th:before { content: "\f00a"; }
+.icon-th-list:before { content: "\f00b"; }
+.icon-ok:before { content: "\f00c"; }
+.icon-remove:before { content: "\f00d"; }
+.icon-zoom-in:before { content: "\f00e"; }
+
+.icon-zoom-out:before { content: "\f010"; }
+.icon-off:before { content: "\f011"; }
+.icon-signal:before { content: "\f012"; }
+.icon-cog:before { content: "\f013"; }
+.icon-trash:before { content: "\f014"; }
+.icon-home:before { content: "\f015"; }
+.icon-file:before { content: "\f016"; }
+.icon-time:before { content: "\f017"; }
+.icon-road:before { content: "\f018"; }
+.icon-download-alt:before { content: "\f019"; }
+.icon-download:before { content: "\f01a"; }
+.icon-upload:before { content: "\f01b"; }
+.icon-inbox:before { content: "\f01c"; }
+.icon-play-circle:before { content: "\f01d"; }
+.icon-repeat:before { content: "\f01e"; }
+
+/* \f020 doesn't work in Safari. all shifted one down */
+.icon-refresh:before { content: "\f021"; }
+.icon-list-alt:before { content: "\f022"; }
+.icon-lock:before { content: "\f023"; }
+.icon-flag:before { content: "\f024"; }
+.icon-headphones:before { content: "\f025"; }
+.icon-volume-off:before { content: "\f026"; }
+.icon-volume-down:before { content: "\f027"; }
+.icon-volume-up:before { content: "\f028"; }
+.icon-qrcode:before { content: "\f029"; }
+.icon-barcode:before { content: "\f02a"; }
+.icon-tag:before { content: "\f02b"; }
+.icon-tags:before { content: "\f02c"; }
+.icon-book:before { content: "\f02d"; }
+.icon-bookmark:before { content: "\f02e"; }
+.icon-print:before { content: "\f02f"; }
+
+.icon-camera:before { content: "\f030"; }
+.icon-font:before { content: "\f031"; }
+.icon-bold:before { content: "\f032"; }
+.icon-italic:before { content: "\f033"; }
+.icon-text-height:before { content: "\f034"; }
+.icon-text-width:before { content: "\f035"; }
+.icon-align-left:before { content: "\f036"; }
+.icon-align-center:before { content: "\f037"; }
+.icon-align-right:before { content: "\f038"; }
+.icon-align-justify:before { content: "\f039"; }
+.icon-list:before { content: "\f03a"; }
+.icon-indent-left:before { content: "\f03b"; }
+.icon-indent-right:before { content: "\f03c"; }
+.icon-facetime-video:before { content: "\f03d"; }
+.icon-picture:before { content: "\f03e"; }
+
+.icon-pencil:before { content: "\f040"; }
+.icon-map-marker:before { content: "\f041"; }
+.icon-adjust:before { content: "\f042"; }
+.icon-tint:before { content: "\f043"; }
+.icon-edit:before { content: "\f044"; }
+.icon-share:before { content: "\f045"; }
+.icon-check:before { content: "\f046"; }
+.icon-move:before { content: "\f047"; }
+.icon-step-backward:before { content: "\f048"; }
+.icon-fast-backward:before { content: "\f049"; }
+.icon-backward:before { content: "\f04a"; }
+.icon-play:before { content: "\f04b"; }
+.icon-pause:before { content: "\f04c"; }
+.icon-stop:before { content: "\f04d"; }
+.icon-forward:before { content: "\f04e"; }
+
+.icon-fast-forward:before { content: "\f050"; }
+.icon-step-forward:before { content: "\f051"; }
+.icon-eject:before { content: "\f052"; }
+.icon-chevron-left:before { content: "\f053"; }
+.icon-chevron-right:before { content: "\f054"; }
+.icon-plus-sign:before { content: "\f055"; }
+.icon-minus-sign:before { content: "\f056"; }
+.icon-remove-sign:before { content: "\f057"; }
+.icon-ok-sign:before { content: "\f058"; }
+.icon-question-sign:before { content: "\f059"; }
+.icon-info-sign:before { content: "\f05a"; }
+.icon-screenshot:before { content: "\f05b"; }
+.icon-remove-circle:before { content: "\f05c"; }
+.icon-ok-circle:before { content: "\f05d"; }
+.icon-ban-circle:before { content: "\f05e"; }
+
+.icon-arrow-left:before { content: "\f060"; }
+.icon-arrow-right:before { content: "\f061"; }
+.icon-arrow-up:before { content: "\f062"; }
+.icon-arrow-down:before { content: "\f063"; }
+.icon-share-alt:before { content: "\f064"; }
+.icon-resize-full:before { content: "\f065"; }
+.icon-resize-small:before { content: "\f066"; }
+.icon-plus:before { content: "\f067"; }
+.icon-minus:before { content: "\f068"; }
+.icon-asterisk:before { content: "\f069"; }
+.icon-exclamation-sign:before { content: "\f06a"; }
+.icon-gift:before { content: "\f06b"; }
+.icon-leaf:before { content: "\f06c"; }
+.icon-fire:before { content: "\f06d"; }
+.icon-eye-open:before { content: "\f06e"; }
+
+.icon-eye-close:before { content: "\f070"; }
+.icon-warning-sign:before { content: "\f071"; }
+.icon-plane:before { content: "\f072"; }
+.icon-calendar:before { content: "\f073"; }
+.icon-random:before { content: "\f074"; }
+.icon-comment:before { content: "\f075"; }
+.icon-magnet:before { content: "\f076"; }
+.icon-chevron-up:before { content: "\f077"; }
+.icon-chevron-down:before { content: "\f078"; }
+.icon-retweet:before { content: "\f079"; }
+.icon-shopping-cart:before { content: "\f07a"; }
+.icon-folder-close:before { content: "\f07b"; }
+.icon-folder-open:before { content: "\f07c"; }
+.icon-resize-vertical:before { content: "\f07d"; }
+.icon-resize-horizontal:before { content: "\f07e"; }
+
+.icon-bar-chart:before { content: "\f080"; }
+.icon-twitter-sign:before { content: "\f081"; }
+.icon-facebook-sign:before { content: "\f082"; }
+.icon-camera-retro:before { content: "\f083"; }
+.icon-key:before { content: "\f084"; }
+.icon-cogs:before { content: "\f085"; }
+.icon-comments:before { content: "\f086"; }
+.icon-thumbs-up:before { content: "\f087"; }
+.icon-thumbs-down:before { content: "\f088"; }
+.icon-star-half:before { content: "\f089"; }
+.icon-heart-empty:before { content: "\f08a"; }
+.icon-signout:before { content: "\f08b"; }
+.icon-linkedin-sign:before { content: "\f08c"; }
+.icon-pushpin:before { content: "\f08d"; }
+.icon-external-link:before { content: "\f08e"; }
+
+.icon-signin:before { content: "\f090"; }
+.icon-trophy:before { content: "\f091"; }
+.icon-github-sign:before { content: "\f092"; }
+.icon-upload-alt:before { content: "\f093"; }
+.icon-lemon:before { content: "\f094"; }
+.icon-phone:before { content: "\f095"; }
+.icon-check-empty:before { content: "\f096"; }
+.icon-bookmark-empty:before { content: "\f097"; }
+.icon-phone-sign:before { content: "\f098"; }
+.icon-twitter:before { content: "\f099"; }
+.icon-facebook:before { content: "\f09a"; }
+.icon-github:before { content: "\f09b"; }
+.icon-unlock:before { content: "\f09c"; }
+.icon-credit-card:before { content: "\f09d"; }
+.icon-rss:before { content: "\f09e"; }
+
+.icon-hdd:before { content: "\f0a0"; }
+.icon-bullhorn:before { content: "\f0a1"; }
+.icon-bell:before { content: "\f0a2"; }
+.icon-certificate:before { content: "\f0a3"; }
+.icon-hand-right:before { content: "\f0a4"; }
+.icon-hand-left:before { content: "\f0a5"; }
+.icon-hand-up:before { content: "\f0a6"; }
+.icon-hand-down:before { content: "\f0a7"; }
+.icon-circle-arrow-left:before { content: "\f0a8"; }
+.icon-circle-arrow-right:before { content: "\f0a9"; }
+.icon-circle-arrow-up:before { content: "\f0aa"; }
+.icon-circle-arrow-down:before { content: "\f0ab"; }
+.icon-globe:before { content: "\f0ac"; }
+.icon-wrench:before { content: "\f0ad"; }
+.icon-tasks:before { content: "\f0ae"; }
+
+.icon-filter:before { content: "\f0b0"; }
+.icon-briefcase:before { content: "\f0b1"; }
+.icon-fullscreen:before { content: "\f0b2"; }
+
+.icon-group:before { content: "\f0c0"; }
+.icon-link:before { content: "\f0c1"; }
+.icon-cloud:before { content: "\f0c2"; }
+.icon-beaker:before { content: "\f0c3"; }
+.icon-cut:before { content: "\f0c4"; }
+.icon-copy:before { content: "\f0c5"; }
+.icon-paper-clip:before { content: "\f0c6"; }
+.icon-save:before { content: "\f0c7"; }
+.icon-sign-blank:before { content: "\f0c8"; }
+.icon-reorder:before { content: "\f0c9"; }
+.icon-list-ul:before { content: "\f0ca"; }
+.icon-list-ol:before { content: "\f0cb"; }
+.icon-strikethrough:before { content: "\f0cc"; }
+.icon-underline:before { content: "\f0cd"; }
+.icon-table:before { content: "\f0ce"; }
+
+.icon-magic:before { content: "\f0d0"; }
+.icon-truck:before { content: "\f0d1"; }
+.icon-pinterest:before { content: "\f0d2"; }
+.icon-pinterest-sign:before { content: "\f0d3"; }
+.icon-google-plus-sign:before { content: "\f0d4"; }
+.icon-google-plus:before { content: "\f0d5"; }
+.icon-money:before { content: "\f0d6"; }
+.icon-caret-down:before { content: "\f0d7"; }
+.icon-caret-up:before { content: "\f0d8"; }
+.icon-caret-left:before { content: "\f0d9"; }
+.icon-caret-right:before { content: "\f0da"; }
+.icon-columns:before { content: "\f0db"; }
+.icon-sort:before { content: "\f0dc"; }
+.icon-sort-down:before { content: "\f0dd"; }
+.icon-sort-up:before { content: "\f0de"; }
+
+.icon-envelope-alt:before { content: "\f0e0"; }
+.icon-linkedin:before { content: "\f0e1"; }
+.icon-undo:before { content: "\f0e2"; }
+.icon-legal:before { content: "\f0e3"; }
+.icon-dashboard:before { content: "\f0e4"; }
+.icon-comment-alt:before { content: "\f0e5"; }
+.icon-comments-alt:before { content: "\f0e6"; }
+.icon-bolt:before { content: "\f0e7"; }
+.icon-sitemap:before { content: "\f0e8"; }
+.icon-umbrella:before { content: "\f0e9"; }
+.icon-paste:before { content: "\f0ea"; }
+
+.icon-user-md:before { content: "\f200"; }
View
572 vendor/assets/stylesheets/select2.css
@@ -0,0 +1,572 @@
+/*
+Version: @@ver@@ Timestamp: @@timestamp@@
+*/
+.select2-container {
+ position: relative;
+ display: inline-block;
+ /* inline-block for ie7 */
+ zoom: 1;
+ *display: inline;
+ vertical-align: top;
+}
+
+.select2-container,
+.select2-drop,
+.select2-search,
+.select2-search input{
+ /*
+ Force border-box so that % widths fit the parent
+ container without overlap because of margin/padding.
+
+ More Info : http://www.quirksmode.org/css/box.html
+ */
+ -webkit-box-sizing: border-box; /* webkit */
+ -khtml-box-sizing: border-box; /* konqueror */
+ -moz-box-sizing: border-box; /* firefox */
+ -ms-box-sizing: border-box; /* ie */
+ box-sizing: border-box; /* css3 */
+}
+
+.select2-container .select2-choice {
+ display: block;
+ height: 26px;
+ padding: 0 0 0 8px;
+ overflow: hidden;
+ position: relative;
+
+ border: 1px solid #aaa;
+ white-space: nowrap;
+ line-height: 26px;
+ color: #444;
+ text-decoration: none;
+
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
+
+ background-color: #fff;
+ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
+ background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
+ background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
+ background-image: -o-linear-gradient(bottom, #eeeeee 0%, #ffffff 50%);
+ background-image: -ms-linear-gradient(top, #eeeeee 0%, #ffffff 50%);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#ffffff', GradientType = 0);
+ background-image: linear-gradient(top, #eeeeee 0%, #ffffff 50%);
+}
+
+.select2-container.select2-drop-above .select2-choice {
+ border-bottom-color: #aaa;
+
+ -webkit-border-radius:0 0 4px 4px;
+ -moz-border-radius:0 0 4px 4px;
+ border-radius:0 0 4px 4px;
+
+ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.9, white));
+ background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 90%);
+ background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 90%);
+ background-image: -o-linear-gradient(bottom, #eeeeee 0%, white 90%);
+ background-image: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 90%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 );
+ background-image: linear-gradient(top, #eeeeee 0%,#ffffff 90%);
+}
+
+.select2-container .select2-choice span {
+ margin-right: 26px;
+ display: block;
+ overflow: hidden;
+
+ white-space: nowrap;
+
+ -ms-text-overflow: ellipsis;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+}
+
+.select2-container .select2-choice abbr {
+ display: block;
+ width: 12px;
+ height: 12px;
+ position: absolute;
+ right: 26px;
+ top: 8px;
+
+ font-size: 1px;
+ text-decoration: none;
+
+ border: 0;
+ background: url('select2.png') right top no-repeat;
+ cursor: pointer;
+ outline: 0;
+}
+.select2-container .select2-choice abbr:hover {
+ background-position: right -11px;
+ cursor: pointer;
+}
+
+.select2-drop {
+ width: 100%;
+ margin-top:-1px;
+ position: absolute;
+ z-index: 9999;
+ top: 100%;
+
+ background: #fff;
+ color: #000;
+ border: 1px solid #aaa;
+ border-top: 0;
+
+ -webkit-border-radius: 0 0 4px 4px;
+ -moz-border-radius: 0 0 4px 4px;
+ border-radius: 0 0 4px 4px;
+
+ -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
+ -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
+ -o-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
+ box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
+}
+
+.select2-drop.select2-drop-above {
+ margin-top: 1px;
+ border-top: 1px solid #aaa;
+ border-bottom: 0;
+
+ -webkit-border-radius: 4px 4px 0 0;
+ -moz-border-radius: 4px 4px 0 0;
+ border-radius: 4px 4px 0 0;
+
+ -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
+ -moz-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
+ -o-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
+ box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
+}
+
+.select2-container .select2-choice div {
+ display: block;
+ width: 18px;
+ height: 100%;
+ position: absolute;
+ right: 0;
+ top: 0;
+
+ border-left: 1px solid #aaa;
+ -webkit-border-radius: 0 4px 4px 0;
+ -moz-border-radius: 0 4px 4px 0;
+ border-radius: 0 4px 4px 0;
+
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
+
+ background: #ccc;
+ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
+ background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
+ background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
+ background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%);
+ background-image: -ms-linear-gradient(top, #cccccc 0%, #eeeeee 60%);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#cccccc', endColorstr = '#eeeeee', GradientType = 0);
+ background-image: linear-gradient(top, #cccccc 0%, #eeeeee 60%);
+}
+
+.select2-container .select2-choice div b {
+ display: block;
+ width: 100%;
+ height: 100%;
+ background: url('select2.png') no-repeat 0 1px;
+}
+
+.select2-search {
+ display: inline-block;
+ width: 100%;
+ min-height: 26px;
+ margin: 0;
+ padding-left: 4px;
+ padding-right: 4px;
+
+ position: relative;
+ z-index: 10000;
+
+ white-space: nowrap;
+}
+
+.select2-search-hidden {
+ display: block;
+ position: absolute;
+ left: -10000px;
+}
+
+.select2-search input {
+ width: 100%;
+ height: auto !important;
+ min-height: 26px;
+ padding: 4px 20px 4px 5px;
+ margin: 0;
+
+ outline: 0;
+ font-family: sans-serif;
+ font-size: 1em;
+
+ border: 1px solid #aaa;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ border-radius: 0;
+
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+
+ background: #fff url('select2.png') no-repeat 100% -22px;
+ background: url('select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
+ background: url('select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
+ background: url('select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
+ background: url('select2.png') no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
+ background: url('select2.png') no-repeat 100% -22px, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
+ background: url('select2.png') no-repeat 100% -22px, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
+}
+
+.select2-drop.select2-drop-above .select2-search input {
+ margin-top: 4px;
+}
+
+.select2-search input.select2-active {
+ background: #fff url('select2-spinner.gif') no-repeat 100%;
+ background: url('select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
+ background: url('select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
+ background: url('select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
+ background: url('select2-spinner.gif') no-repeat 100%, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
+ background: url('select2-spinner.gif') no-repeat 100%, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
+ background: url('select2-spinner.gif') no-repeat 100%, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
+}
+
+.select2-container-active .select2-choice,
+.select2-container-active .select2-choices {
+ border: 1px solid #5897fb;
+ outline: none;
+
+ -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
+ -moz-box-shadow: 0 0 5px rgba(0,0,0,.3);
+ -o-box-shadow: 0 0 5px rgba(0,0,0,.3);
+ box-shadow: 0 0 5px rgba(0,0,0,.3);
+}
+
+.select2-dropdown-open .select2-choice {
+ border: 1px solid #aaa;
+ border-bottom-color: transparent;
+ -webkit-box-shadow: 0 1px 0 #fff inset;
+ -moz-box-shadow: 0 1px 0 #fff inset;
+ -o-box-shadow: 0 1px 0 #fff inset;
+ box-shadow: 0 1px 0 #fff inset;
+
+ -webkit-border-bottom-left-radius: 0;
+ -moz-border-radius-bottomleft: 0;
+ border-bottom-left-radius: 0;
+
+ -webkit-border-bottom-right-radius: 0;
+ -moz-border-radius-bottomright: 0;
+ border-bottom-right-radius: 0;
+
+ background-color: #eee;
+ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee));
+ background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%);
+ background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%);
+ background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%);
+ background-image: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 50%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
+ background-image: linear-gradient(top, #ffffff 0%,#eeeeee 50%);
+}
+
+.select2-dropdown-open .select2-choice div {
+ background: transparent;
+ border-left: none;
+}
+.select2-dropdown-open .select2-choice div b {
+ background-position: -18px 1px;
+}
+
+/* results */
+.select2-results {
+ max-height: 200px;
+ padding: 0 0 0 4px;
+ margin: 4px 4px 4px 0;
+ position: relative;
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+
+.select2-results ul.select2-result-sub {
+ margin: 0;
+}
+
+.select2-results ul.select2-result-sub > li .select2-result-label { padding-left: 20px }
+.select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 40px }
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 60px }
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 80px }
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 100px }
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 110px }
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 120px }
+
+.select2-results li {
+ list-style: none;
+ display: list-item;
+}
+
+.select2-results li.select2-result-with-children > .select2-result-label {
+ font-weight: bold;
+}
+
+.select2-results .select2-result-label {
+ padding: 3px 7px 4px;
+ margin: 0;
+ cursor: pointer;
+}
+
+.select2-results .select2-highlighted {
+ background: #3875d7;
+ color: #fff;
+}
+.select2-results li em {
+ background: #feffde;
+ font-style: normal;
+}
+.select2-results .select2-highlighted em {
+ background: transparent;
+}
+.select2-results .select2-no-results,
+.select2-results .select2-searching,
+.select2-results .select2-selection-limit {
+ background: #f4f4f4;
+ display: list-item;
+}
+
+/*
+disabled look for already selected choices in the results dropdown
+.select2-results .select2-disabled.select2-highlighted {
+ color: #666;
+ background: #f4f4f4;
+ display: list-item;
+ cursor: default;
+}
+.select2-results .select2-disabled {
+ background: #f4f4f4;
+ display: list-item;
+ cursor: default;
+}
+*/
+.select2-results .select2-disabled {
+ display: none;
+}
+
+.select2-more-results.select2-active {
+ background: #f4f4f4 url('select2-spinner.gif') no-repeat 100%;
+}
+
+.select2-more-results {
+ background: #f4f4f4;
+ display: list-item;
+}
+
+/* disabled styles */
+
+.select2-container.select2-container-disabled .select2-choice {
+ background-color: #f4f4f4;
+ background-image: none;
+ border: 1px solid #ddd;
+ cursor: default;
+}
+
+.select2-container.select2-container-disabled .select2-choice div {
+ background-color: #f4f4f4;
+ background-image: none;
+ border-left: 0;
+}
+
+.select2-container.select2-container-disabled .select2-choice abbr {
+ display: none
+}
+
+
+/* multiselect */
+
+.select2-container-multi .select2-choices {
+ height: auto !important;
+ height: 1%;
+ margin: 0;
+ padding: 0;
+ position: relative;
+
+ border: 1px solid #aaa;
+ cursor: text;
+ overflow: hidden;
+
+ background-color: #fff;
+ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
+ background-image: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+ background-image: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+ background-image: -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+ background-image: -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+ background-image: linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+}
+
+.select2-locked {
+ padding: 3px 5px 3px 5px !important;
+}
+
+.select2-container-multi .select2-choices {
+ min-height: 26px;
+}
+
+.select2-container-multi.select2-container-active .select2-choices {
+ border: 1px solid #5897fb;
+ outline: none;
+
+ -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
+ -moz-box-shadow: 0 0 5px rgba(0,0,0,.3);
+ -o-box-shadow: 0 0 5px rgba(0,0,0,.3);
+ box-shadow: 0 0 5px rgba(0,0,0,.3);
+}
+.select2-container-multi .select2-choices li {
+ float: left;
+ list-style: none;
+}
+.select2-container-multi .select2-choices .select2-search-field {
+ margin: 0;
+ padding: 0;
+ white-space: nowrap;
+}
+
+.select2-container-multi .select2-choices .select2-search-field input {
+ height: 15px;
+ padding: 5px;
+ margin: 1px 0;
+
+ font-family: sans-serif;
+ font-size: 100%;
+ color: #666;
+ outline: 0;
+ border: 0;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ -o-box-shadow: none;
+ box-shadow: none;
+ background: transparent !important;
+}
+
+.select2-container-multi .select2-choices .select2-search-field input.select2-active {
+ background: #fff url('select2-spinner.gif') no-repeat 100% !important;
+}
+
+.select2-default {
+ color: #999 !important;
+}
+
+.select2-container-multi .select2-choices .select2-search-choice {
+ padding: 3px 5px 3px 18px;
+ margin: 3px 0 3px 5px;
+ position: relative;
+
+ line-height: 13px;
+ color: #333;
+ cursor: default;
+ border: 1px solid #aaaaaa;
+
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+
+ -webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
+ -moz-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
+ box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
+
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
+
+ background-color: #e4e4e4;
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0 );
+ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
+ background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+ background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+ background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+ background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+ background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+}
+.select2-container-multi .select2-choices .select2-search-choice span {
+ cursor: default;
+}
+.select2-container-multi .select2-choices .select2-search-choice-focus {
+ background: #d4d4d4;
+}
+
+.select2-search-choice-close {
+ display: block;
+ width: 12px;
+ height: 13px;
+ position: absolute;
+ right: 3px;
+ top: 4px;
+
+ font-size: 1px;
+ outline: none;
+ background: url('select2.png') right top no-repeat;
+}
+
+.select2-container-multi .select2-search-choice-close {
+ left: 3px;
+}
+
+.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
+ background-position: right -11px;
+}
+.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
+ background-position: right -11px;
+}
+
+/* disabled styles */
+.select2-container-multi.select2-container-disabled .select2-choices{
+ background-color: #f4f4f4;
+ background-image: none;
+ border: 1px solid #ddd;
+ cursor: default;
+}
+
+.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
+ padding: 3px 5px 3px 5px;
+ border: 1px solid #ddd;
+ background-image: none;
+ background-color: #f4f4f4;
+}
+
+.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {
+ display: none;
+}
+/* end multiselect */
+
+
+.select2-result-selectable .select2-match,
+.select2-result-unselectable .select2-result-selectable .select2-match {
+ text-decoration: underline;
+}
+.select2-result-unselectable .select2-match {
+ text-decoration: none;
+}
+
+.select2-offscreen {
+ position: absolute;
+ left: -10000px;
+}
+
+/* Retina-ize icons */
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
+ .select2-search input, .select2-search-choice-close, .select2-container .select2-choice abbr, .select2-container .select2-choice div b {
+ background-image: url('select2x2.png') !important;
+ background-repeat: no-repeat !important;
+ background-size: 60px 40px !important;
+ }
+ .select2-search input {
+ background-position: 100% -21px !important;
+ }
+}
Please sign in to comment.
Something went wrong with that request. Please try again.