From 143b67bc308926438f1b8c6860fc44993de50a5b Mon Sep 17 00:00:00 2001
From: Eric Bidelman
Date: Fri, 13 Apr 2012 13:00:00 -0700
Subject: Removing extra width setter
---
js/slides.js | 27 +++++++++++++++++++++++++++
template.html | 5 ++++-
theme/css/default.css | 40 ++++++++++++++++++----------------------
theme/sass/default.scss | 5 +----
4 files changed, 50 insertions(+), 27 deletions(-)
diff --git a/js/slides.js b/js/slides.js
index d1b094b..5363183 100644
--- a/js/slides.js
+++ b/js/slides.js
@@ -75,6 +75,33 @@ SlideDeck.prototype.onDomLoaded_ = function(e) {
SlideDeck.prototype.addEventListeners_ = function() {
document.addEventListener('keydown', this.onBodyKeyDown_.bind(this), false);
window.addEventListener('popstate', this.onPopState_.bind(this), false);
+
+ var slides = document.querySelector('slides');
+ slides.addEventListener('slideenter',
+ this.handleSlideMovement_.bind(this), false);
+ slides.addEventListener('slideleave',
+ this.handleSlideMovement_.bind(this), false);
+};
+
+/**
+ * @private
+ * Callback to perform generic tasks on slideenter/slideleave events.
+ */
+SlideDeck.prototype.handleSlideMovement_ = function(e) {
+ var slide = e.target;
+ var gdbar = slide.querySelector('aside[is="x-gdbar"]');
+ if (gdbar) {
+ if (e.type == 'slideenter') {
+ // Need slight delay here for case where you're on the current slide
+ // and the animation needs to run. This is because the web compontents
+ // polyfill fires on DOMContentLoaded (e.g. a race condition).
+ setTimeout(function() {
+ gdbar.classList.add('active');
+ }, 5);
+ } else {
+ gdbar.classList.remove('active');
+ }
+ }
};
/**
diff --git a/template.html b/template.html
index 973666a..e119ad1 100644
--- a/template.html
+++ b/template.html
@@ -12,6 +12,8 @@ URL: https://code.google.com/p/io-2012-slides
Title
+
+
@@ -24,7 +26,8 @@ URL: https://code.google.com/p/io-2012-slides
-
+
+
diff --git a/theme/css/default.css b/theme/css/default.css
index ba79793..bb77b38 100644
--- a/theme/css/default.css
+++ b/theme/css/default.css
@@ -1140,31 +1140,27 @@ input, button {
line-height: 2.8;
}
/* line 736, ../sass/default.scss */
-.segue aside {
- width: 215px !important;
-}
-/* line 739, ../sass/default.scss */
.segue hgroup {
position: absolute;
bottom: 225px;
}
-/* line 745, ../sass/default.scss */
+/* line 742, ../sass/default.scss */
.thank-you-slide {
background: #4387fd;
color: white;
}
-/* line 749, ../sass/default.scss */
+/* line 746, ../sass/default.scss */
.thank-you-slide h2 {
font-size: 60px;
color: inherit;
}
-/* line 754, ../sass/default.scss */
+/* line 751, ../sass/default.scss */
.thank-you-slide article > p {
margin-top: 2em;
font-size: 20pt;
}
-/* line 759, ../sass/default.scss */
+/* line 756, ../sass/default.scss */
.thank-you-slide > p {
position: absolute;
bottom: 80px;
@@ -1172,10 +1168,10 @@ input, button {
line-height: 1.3;
}
-/* line 767, ../sass/default.scss */
+/* line 764, ../sass/default.scss */
aside.gdbar {
height: 97px;
- width: 155px;
+ width: 215px;
position: absolute;
left: 0;
top: 125px;
@@ -1201,7 +1197,7 @@ aside.gdbar {
transition: all 0.5s ease-out 0.5s;
/* Better to transition only on background-size, but not sure how to do that with the mixin. */
}
-/* line 778, ../sass/default.scss */
+/* line 775, ../sass/default.scss */
aside.gdbar.right {
right: 0;
left: -moz-initial;
@@ -1214,7 +1210,7 @@ aside.gdbar.right {
-o-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}
-/* line 785, ../sass/default.scss */
+/* line 782, ../sass/default.scss */
aside.gdbar.right img {
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
@@ -1222,13 +1218,13 @@ aside.gdbar.right img {
-o-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}
-/* line 790, ../sass/default.scss */
+/* line 787, ../sass/default.scss */
aside.gdbar.bottom {
top: -moz-initial;
top: initial;
bottom: 60px;
}
-/* line 796, ../sass/default.scss */
+/* line 793, ../sass/default.scss */
aside.gdbar img {
width: 85px;
height: 85px;
@@ -1237,24 +1233,24 @@ aside.gdbar img {
margin: 8px 15px;
}
-/* line 807, ../sass/default.scss */
+/* line 804, ../sass/default.scss */
.title-slide hgroup {
bottom: 100px;
}
-/* line 810, ../sass/default.scss */
+/* line 807, ../sass/default.scss */
.title-slide hgroup h1 {
font-size: 65px;
line-height: 1.4;
letter-spacing: -3px;
color: #515151;
}
-/* line 817, ../sass/default.scss */
+/* line 814, ../sass/default.scss */
.title-slide hgroup h2 {
font-size: 34px;
color: #a9a9a9;
font-weight: inherit;
}
-/* line 823, ../sass/default.scss */
+/* line 820, ../sass/default.scss */
.title-slide hgroup p {
font-size: 20px;
color: #797979;
@@ -1262,11 +1258,11 @@ aside.gdbar img {
margin-top: 2em;
}
-/* line 832, ../sass/default.scss */
+/* line 829, ../sass/default.scss */
.quote {
color: #e6e6e6;
}
-/* line 835, ../sass/default.scss */
+/* line 832, ../sass/default.scss */
.quote .author {
font-size: 24px;
position: absolute;
@@ -1274,12 +1270,12 @@ aside.gdbar img {
line-height: 1.4;
}
-/* line 844, ../sass/default.scss */
+/* line 841, ../sass/default.scss */
[data-config-contact] a {
color: white;
border-bottom: none;
}
-/* line 848, ../sass/default.scss */
+/* line 845, ../sass/default.scss */
[data-config-contact] span {
width: 115px;
display: inline-block;
diff --git a/theme/sass/default.scss b/theme/sass/default.scss
index 4dcbb7a..89d38d0 100644
--- a/theme/sass/default.scss
+++ b/theme/sass/default.scss
@@ -733,9 +733,6 @@ input, button {
color: $gray-1;
line-height: 2.8;
}
- aside {
- width: 215px !important;
- }
hgroup {
position: absolute;
bottom: 225px;
@@ -766,7 +763,7 @@ input, button {
aside.gdbar {
height: 97px;
- width: 155px;
+ width: 215px;
position: absolute;
left: 0;
top: 125px;
--
cgit v1.2.3