From 32f207b326a2138c14e0502fcd58c5c3457cde35 Mon Sep 17 00:00:00 2001 From: Eric Bidelman Date: Mon, 16 Apr 2012 12:04:03 -0700 Subject: mobile tweaks. Modernizr touch detection --- js/modernizr.custom.76029.js | 4 ++ js/slides.js | 3 +- js/touch.js | 61 -------------------------- template.html | 2 + theme/css/default.css | 101 +++++++++++++++++++++---------------------- theme/css/phone.css | 8 +++- theme/sass/default.scss | 10 ++--- theme/sass/phone.scss | 8 ++++ 8 files changed, 76 insertions(+), 121 deletions(-) create mode 100644 js/modernizr.custom.76029.js delete mode 100644 js/touch.js diff --git a/js/modernizr.custom.76029.js b/js/modernizr.custom.76029.js new file mode 100644 index 0000000..6604275 --- /dev/null +++ b/js/modernizr.custom.76029.js @@ -0,0 +1,4 @@ +/* Modernizr 2.5.3 (Custom Build) | MIT & BSD + * Build: http://www.modernizr.com/download/#-fontface-backgroundsize-borderimage-borderradius-boxshadow-flexbox-flexbox_legacy-hsla-multiplebgs-opacity-rgba-textshadow-cssanimations-csscolumns-generatedcontent-cssgradients-cssreflections-csstransforms-csstransforms3d-csstransitions-applicationcache-canvas-canvastext-draganddrop-hashchange-history-audio-video-indexeddb-input-inputtypes-localstorage-postmessage-sessionstorage-websockets-websqldatabase-webworkers-geolocation-inlinesvg-smil-svg-svgclippaths-touch-webgl-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes + */ +;window.Modernizr=function(a,b,c){function B(a){i.cssText=a}function C(a,b){return B(m.join(a+";")+(b||""))}function D(a,b){return typeof a===b}function E(a,b){return!!~(""+a).indexOf(b)}function F(a,b){for(var d in a)if(i[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function G(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:D(f,"function")?f.bind(d||b):f}return!1}function H(a,b,c){var d=a.charAt(0).toUpperCase()+a.substr(1),e=(a+" "+o.join(d+" ")+d).split(" ");return D(b,"string")||D(b,"undefined")?F(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),G(e,b,c))}function J(){e.input=function(c){for(var d=0,e=c.length;d",a,""].join(""),k.id=g,(l?k:m).innerHTML+=h,m.appendChild(k),l||(m.style.background="",f.appendChild(m)),i=c(k,a),l?k.parentNode.removeChild(k):m.parentNode.removeChild(m),!!i},y=function(){function d(d,e){e=e||b.createElement(a[d]||"div"),d="on"+d;var f=d in e;return f||(e.setAttribute||(e=b.createElement("div")),e.setAttribute&&e.removeAttribute&&(e.setAttribute(d,""),f=D(e[d],"function"),D(e[d],"undefined")||(e[d]=c),e.removeAttribute(d))),e=null,f}var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return d}(),z={}.hasOwnProperty,A;!D(z,"undefined")&&!D(z.call,"undefined")?A=function(a,b){return z.call(a,b)}:A=function(a,b){return b in a&&D(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=v.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(v.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(v.call(arguments)))};return e});var I=function(c,d){var f=c.join(""),g=d.length;x(f,function(c,d){var f=b.styleSheets[b.styleSheets.length-1],h=f?f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"":"",i=c.childNodes,j={};while(g--)j[i[g].id]=i[g];e.touch="ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch||(j.touch&&j.touch.offsetTop)===9,e.csstransforms3d=(j.csstransforms3d&&j.csstransforms3d.offsetLeft)===9&&j.csstransforms3d.offsetHeight===3,e.generatedcontent=(j.generatedcontent&&j.generatedcontent.offsetHeight)>=1,e.fontface=/src/i.test(h)&&h.indexOf(d.split(" ")[0])===0},g,d)}(['@font-face {font-family:"font";src:url("https://")}',["@media (",m.join("touch-enabled),("),g,")","{#touch{top:9px;position:absolute}}"].join(""),["@media (",m.join("transform-3d),("),g,")","{#csstransforms3d{left:9px;position:absolute;height:3px;}}"].join(""),['#generatedcontent:after{content:"',k,'";visibility:hidden}'].join("")],["fontface","touch","csstransforms3d","generatedcontent"]);r.flexbox=function(){return H("flexOrder")},r["flexbox-legacy"]=function(){return H("boxDirection")},r.canvas=function(){var a=b.createElement("canvas");return!!a.getContext&&!!a.getContext("2d")},r.canvastext=function(){return!!e.canvas&&!!D(b.createElement("canvas").getContext("2d").fillText,"function")},r.webgl=function(){try{var d=b.createElement("canvas"),e;e=!(!a.WebGLRenderingContext||!d.getContext("experimental-webgl")&&!d.getContext("webgl")),d=c}catch(f){e=!1}return e},r.touch=function(){return e.touch},r.geolocation=function(){return!!navigator.geolocation},r.postmessage=function(){return!!a.postMessage},r.websqldatabase=function(){return!!a.openDatabase},r.indexedDB=function(){return!!H("indexedDB",a)},r.hashchange=function(){return y("hashchange",a)&&(b.documentMode===c||b.documentMode>7)},r.history=function(){return!!a.history&&!!history.pushState},r.draganddrop=function(){var a=b.createElement("div");return"draggable"in a||"ondragstart"in a&&"ondrop"in a},r.websockets=function(){for(var b=-1,c=o.length;++b 1) { - //this.cancelTouch(); - } else { - touchDX = e.touches[0].pageX - touchStartX; - touchDY = e.touches[0].pageY - touchStartY; - } -}; - -TouchManager.prototype.handleTouchEnd = function(e) { - var dx = Math.abs(touchDX); - var dy = Math.abs(touchDY); - - if ((dx > PM_TOUCH_SENSITIVITY) && (dy < (dx * 2 / 3))) { - if (touchDX > 0) { - this.deck_.prevSlide(); - } else { - this.deck_.nextSlide(); - } - } - - //this.cancelTouch(); -}; - -// TouchManager.prototype.cancelTouch = function() { -// console.log(touchDX) -// document.body.removeEventListener('touchmove', this.handleTouchMove.bind(this), false); -// document.body.removeEventListener('touchend', this.handleTouchMove.bind(this), false); -// }; - -exports.TouchManager = TouchManager; - -})(window); diff --git a/template.html b/template.html index c0a6bcd..6bfb029 100644 --- a/template.html +++ b/template.html @@ -366,7 +366,9 @@ function helloWorld(world) { + + diff --git a/theme/css/default.css b/theme/css/default.css index 7507b19..7c96455 100644 --- a/theme/css/default.css +++ b/theme/css/default.css @@ -884,25 +884,17 @@ article.smaller q:before, article.smaller q:after { } /* line 638, ../sass/default.scss */ -.with-notes slide.current { - -webkit-transform: rotateY(180deg) !important; - -moz-transform: rotateY(180deg) !important; - -ms-transform: rotateY(180deg) !important; - -o-transform: rotateY(180deg) !important; - transform: rotateY(180deg) !important; -} -/* line 641, ../sass/default.scss */ .with-notes .note { opacity: 1; - -webkit-transform: rotateY(180deg); - -moz-transform: rotateY(180deg); - -ms-transform: rotateY(180deg); - -o-transform: rotateY(180deg); - transform: rotateY(180deg); + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -ms-transform: translateY(0); + -o-transform: translateY(0); + transform: translateY(0); pointer-events: auto; } -/* line 648, ../sass/default.scss */ +/* line 645, ../sass/default.scss */ .note { position: absolute; z-index: 100; @@ -930,18 +922,23 @@ article.smaller q:before, article.smaller q:after { -moz-box-pack: center; -ms-box-pack: center; box-pack: center; - -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.1, 0.1, 0.25, 0.9), opacity 0.4s ease-in-out 0.4s; - -moz-transition: -moz-transform 0.2s cubic-bezier(0.1, 0.1, 0.25, 0.9), opacity 0.4s ease-in-out 0.4s; - -ms-transition: -ms-transform 0.2s cubic-bezier(0.1, 0.1, 0.25, 0.9), opacity 0.4s ease-in-out 0.4s; - -o-transition: -o-transform 0.2s cubic-bezier(0.1, 0.1, 0.25, 0.9), opacity 0.4s ease-in-out 0.4s; - transition: transform 0.2s cubic-bezier(0.1, 0.1, 0.25, 0.9), opacity 0.4s ease-in-out 0.4s; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -} -/* line 664, ../sass/default.scss */ + -webkit-transform: translateY(350px); + -moz-transform: translateY(350px); + -ms-transform: translateY(350px); + -o-transform: translateY(350px); + transform: translateY(350px); + -webkit-transition: all 0.4s ease-in-out; + -moz-transition: all 0.4s ease-in-out; + -ms-transition: all 0.4s ease-in-out; + -o-transition: all 0.4s ease-in-out; + transition: all 0.4s ease-in-out; +} +/* line 662, ../sass/default.scss */ .note > section { background: #fff; -webkit-border-radius: 5px; @@ -956,7 +953,7 @@ article.smaller q:before, article.smaller q:after { padding: 2em; } -/* line 673, ../sass/default.scss */ +/* line 671, ../sass/default.scss */ .source { font-size: 14px; color: #a9a9a9; @@ -965,7 +962,7 @@ article.smaller q:before, article.smaller q:after { left: 60px; } -/* line 681, ../sass/default.scss */ +/* line 679, ../sass/default.scss */ input, button { vertical-align: middle; } @@ -981,7 +978,7 @@ input, button { -ms-box-reflect: below 3px -ms-linear-gradient(rgba(255,255,255,0) 85%, white 150%); box-reflect: below 3px linear-gradient(rgba(255,255,255,0) 85%, white 150%); }*/ -/* line 697, ../sass/default.scss */ +/* line 695, ../sass/default.scss */ .flexbox { display: -webkit-box !important; display: -moz-box !important; @@ -990,7 +987,7 @@ input, button { display: box !important; } -/* line 701, ../sass/default.scss */ +/* line 699, ../sass/default.scss */ .flexbox.vcenter { -webkit-box-orient: vertical; -moz-box-orient: vertical; @@ -1008,7 +1005,7 @@ input, button { width: 100%; } -/* line 707, ../sass/default.scss */ +/* line 705, ../sass/default.scss */ .flexbox.vleft { -webkit-box-orient: vertical; -moz-box-orient: vertical; @@ -1026,7 +1023,7 @@ input, button { width: 100%; } -/* line 713, ../sass/default.scss */ +/* line 711, ../sass/default.scss */ .auto-fadein { -webkit-transition: opacity 0.6s ease-in 1s; -moz-transition: opacity 0.6s ease-in 1s; @@ -1037,7 +1034,7 @@ input, button { } /* Clickable/tappable areas */ -/* line 719, ../sass/default.scss */ +/* line 717, ../sass/default.scss */ .slide-area { z-index: 1000; position: absolute; @@ -1051,59 +1048,59 @@ input, button { margin-top: -350px; } -/* line 736, ../sass/default.scss */ +/* line 734, ../sass/default.scss */ #prev-slide-area { margin-left: -550px; } -/* line 741, ../sass/default.scss */ +/* line 739, ../sass/default.scss */ #next-slide-area { margin-left: 450px; } /* ===== SLIDE CONTENT ===== */ -/* line 749, ../sass/default.scss */ +/* line 747, ../sass/default.scss */ .logoslide img { width: 383px; height: 92px; } -/* line 755, ../sass/default.scss */ +/* line 753, ../sass/default.scss */ .segue { padding: 60px 120px; } -/* line 758, ../sass/default.scss */ +/* line 756, ../sass/default.scss */ .segue h2 { color: #e6e6e6; font-size: 60px; } -/* line 762, ../sass/default.scss */ +/* line 760, ../sass/default.scss */ .segue h3 { color: #e6e6e6; line-height: 2.8; } -/* line 766, ../sass/default.scss */ +/* line 764, ../sass/default.scss */ .segue hgroup { position: absolute; bottom: 225px; } -/* line 772, ../sass/default.scss */ +/* line 770, ../sass/default.scss */ .thank-you-slide { background: #4387fd; color: white; } -/* line 776, ../sass/default.scss */ +/* line 774, ../sass/default.scss */ .thank-you-slide h2 { font-size: 60px; color: inherit; } -/* line 781, ../sass/default.scss */ +/* line 779, ../sass/default.scss */ .thank-you-slide article > p { margin-top: 2em; font-size: 20pt; } -/* line 786, ../sass/default.scss */ +/* line 784, ../sass/default.scss */ .thank-you-slide > p { position: absolute; bottom: 80px; @@ -1111,7 +1108,7 @@ input, button { line-height: 1.3; } -/* line 794, ../sass/default.scss */ +/* line 792, ../sass/default.scss */ aside.gdbar { height: 97px; width: 215px; @@ -1140,7 +1137,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 805, ../sass/default.scss */ +/* line 803, ../sass/default.scss */ aside.gdbar.right { right: 0; left: -moz-initial; @@ -1153,7 +1150,7 @@ aside.gdbar.right { -o-transform: rotateZ(180deg); transform: rotateZ(180deg); } -/* line 812, ../sass/default.scss */ +/* line 810, ../sass/default.scss */ aside.gdbar.right img { -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); @@ -1161,13 +1158,13 @@ aside.gdbar.right img { -o-transform: rotateZ(180deg); transform: rotateZ(180deg); } -/* line 817, ../sass/default.scss */ +/* line 815, ../sass/default.scss */ aside.gdbar.bottom { top: -moz-initial; top: initial; bottom: 60px; } -/* line 823, ../sass/default.scss */ +/* line 821, ../sass/default.scss */ aside.gdbar img { width: 85px; height: 85px; @@ -1176,24 +1173,24 @@ aside.gdbar img { margin: 8px 15px; } -/* line 834, ../sass/default.scss */ +/* line 832, ../sass/default.scss */ .title-slide hgroup { bottom: 100px; } -/* line 837, ../sass/default.scss */ +/* line 835, ../sass/default.scss */ .title-slide hgroup h1 { font-size: 65px; line-height: 1.4; letter-spacing: -3px; color: #515151; } -/* line 844, ../sass/default.scss */ +/* line 842, ../sass/default.scss */ .title-slide hgroup h2 { font-size: 34px; color: #a9a9a9; font-weight: inherit; } -/* line 850, ../sass/default.scss */ +/* line 848, ../sass/default.scss */ .title-slide hgroup p { font-size: 20px; color: #797979; @@ -1201,11 +1198,11 @@ aside.gdbar img { margin-top: 2em; } -/* line 859, ../sass/default.scss */ +/* line 857, ../sass/default.scss */ .quote { color: #e6e6e6; } -/* line 862, ../sass/default.scss */ +/* line 860, ../sass/default.scss */ .quote .author { font-size: 24px; position: absolute; @@ -1213,12 +1210,12 @@ aside.gdbar img { line-height: 1.4; } -/* line 871, ../sass/default.scss */ +/* line 869, ../sass/default.scss */ [data-config-contact] a { color: white; border-bottom: none; } -/* line 875, ../sass/default.scss */ +/* line 873, ../sass/default.scss */ [data-config-contact] span { width: 115px; display: inline-block; diff --git a/theme/css/phone.css b/theme/css/phone.css index 3f211dd..51a43c7 100644 --- a/theme/css/phone.css +++ b/theme/css/phone.css @@ -1,6 +1,12 @@ +/*Smartphones (portrait and landscape) ----------- */ +/*@media only screen +and (min-width : 320px) +and (max-width : 480px) { + +}*/ /* Smartphones (portrait) ----------- */ /* Styles */ -/* line 9, ../sass/phone.scss */ +/* line 17, ../sass/phone.scss */ slides > slide { /* width: $slide-width !important; height: $slide-height !important; diff --git a/theme/sass/default.scss b/theme/sass/default.scss index 3645ca7..c7b4eab 100644 --- a/theme/sass/default.scss +++ b/theme/sass/default.scss @@ -635,12 +635,9 @@ article.smaller { // Speaker notes only show the current slide. .with-notes { - slide.current { - @include transform(rotateY(180deg) !important); - } .note { opacity: 1; - @include transform(rotateY(180deg)); + @include transform(translateY(0)); pointer-events: auto; } } @@ -657,10 +654,11 @@ article.smaller { pointer-events: none; @include flexbox; @include flex-center-center; - @include transition(transform 0.2s cubic-bezier(.10, .10, .25, .90), - opacity 0.4s ease-in-out 0.4s); @include border-radius($slide-border-radius); + @include transform(translateY($slide-height / 2)); + @include transition(all 0.4s ease-in-out); + > section { background: #fff; @include border-radius($slide-border-radius); diff --git a/theme/sass/phone.scss b/theme/sass/phone.scss index d291d9e..4cfb2b1 100644 --- a/theme/sass/phone.scss +++ b/theme/sass/phone.scss @@ -1,5 +1,13 @@ @import "compass/css3/transition"; + +/*Smartphones (portrait and landscape) ----------- */ +/*@media only screen +and (min-width : 320px) +and (max-width : 480px) { + +}*/ + /* Smartphones (portrait) ----------- */ //@media only screen and (max-device-width: 480px) { /* Styles */ -- cgit v1.2.3