Permalink
Browse files

Style toolbar controls. In sepia theme, for now.

  • Loading branch information...
moll committed May 19, 2012
1 parent 964d2b8 commit 18771768ae5592fd9d182605b965834e0f276f5b
View
@@ -16,21 +16,24 @@ $(function() {
$(function() {
var readingTimer, fetchingTimer,
- quotesEl = $("#quotes"),
- sliderOptions = {
- infiniteLoop: false,
- hideControlOnEnd: true,
- onAfterSlide: slideChange
- };
+ quotesEl = $("#quotes");
+
+ var sliderOptions = {
+ infiniteLoop: false,
+ hideControlOnEnd: true,
+ onAfterSlide: slideChange,
+ prevText: '',
+ nextText: '',
+ prevSelector: '#toolbar',
+ nextSelector: '#toolbar'
+ };
var slider = quotesEl.bxSlider(sliderOptions);
- $(".pause, .resume").click(function(ev) {
+ $("#toolbar .play").click(function(ev) {
ev.preventDefault();
- var el = $(ev.target);
- $(".container").toggleClass("paused", el.hasClass("pause"));
- if (el.hasClass("pause"))
+ if ($(this).toggleClass("paused").hasClass("pause"))
clearTimeout(readingTimer);
else
slider.goToNextSlide();
View
@@ -1,22 +1,13 @@
@import "compass/reset";
@import "compass/css3/box-sizing";
@import "compass/css3/transition";
+@import "compass/css3/border-radius";
+
html { min-height: 100%; }
body { background-color: white; color: black; }
a { color: inherit; text-decoration: inherit; outline: 0; }
strong { font-weight: bolder; }
* { @include box-sizing(border-box); }
-.container {
- overflow: hidden;
- width: 75%;
- margin: 0 auto;
- .play { display: none; }
- &.paused {
- .play { display: block; }
- .pause { display: none; }
- }
-}
-#template { display: none; }
#themes {
position: absolute; top: 90px; right: 40px;
@@ -42,3 +33,45 @@ strong { font-weight: bolder; }
&:hover { opacity: 1; }
&:hover ul { opacity: 1; }
}
+
+#container {
+ overflow: hidden;
+ width: 75%;
+ margin: 0 auto;
+}
+#template { display: none; }
+
+#toolbar {
+ $w: 180px;
+ overflow: hidden;
+ height: 60px;
+ width: $w;
+ position: absolute; bottom: 10px; left: 50%; margin-left: -$w / 2;
+ line-height: 60px;
+ text-align: center;
+
+ a {
+ @include border-radius(50px);
+ border: 1px solid lighten(#e8e3d1, 10%);
+ width: 50px; height: 50px;
+ display: inline-block;
+ background-color: #d2ccb5;
+ background-position: center;
+ background-repeat: no-repeat;
+ }
+ a.play {
+ width: 60px; height: 60px;
+ background-image: inline-image("control-play.png");
+ &.paused { background-image: inline-image("control-pause.png"); }
+ }
+
+ .bx-prev, .prev {
+ float: left; margin-top: 5px;
+ background-image: inline-image("control-prev.png");
+ }
+ .bx-next, .next {
+ float: right; margin-top: 5px;
+ background-image: inline-image("control-next.png");
+ }
+}
+
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
View
@@ -57,16 +57,17 @@
%a{:title => "Switch to #{title}"}
%img{:alt => title, :src => "/themes/#{theme}/icon.png"}
- .container
+ #container
%ul#quotes{:class => @quote_by_id ? "via-link" : ""}
- @selected_quotes.each do |quote|
%li{"data-id" => quote[:id]}
%blockquote.quote
%p
%span= quote[:c]
%cite= quote[:a]
- %a.pause(href="#") pause
- %a.play(href="#") play
+
+ #toolbar
+ %a.play(href="#")
#share
.addthis_toolbox.addthis_default_style

0 comments on commit 1877176

Please sign in to comment.