Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Style toolbar controls. In sepia theme, for now.

  • Loading branch information...
commit 18771768ae5592fd9d182605b965834e0f276f5b 1 parent 964d2b8
@moll moll authored
View
23 public/hackersays.js
@@ -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
55 public/themes/base.scss
@@ -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");
+ }
+}
+
View
BIN  public/themes/control-next.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/themes/control-pause.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/themes/control-play.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/themes/control-prev.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
7 views/index.haml
@@ -57,7 +57,7 @@
%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]}
@@ -65,8 +65,9 @@
%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
Please sign in to comment.
Something went wrong with that request. Please try again.