Added more responsive behavior for touch devices and skinny embeds.

Content will fill the slider more and the next and back arrows will hide until you mouseover them when the width is 640 or below
fenicento · Aug 31, 2012 · 27dadfd · 27dadfd
1 parent 2648f7e
commit 27dadfd
Show file tree

Hide file tree

Showing 11 changed files with 159 additions and 79 deletions.
diff --git a/compiled/css/themes/dark.css b/compiled/css/themes/dark.css
diff --git a/compiled/css/themes/timeline-dark.png b/compiled/css/themes/timeline-dark.png
diff --git a/compiled/css/timeline.css b/compiled/css/timeline.css
diff --git a/compiled/css/timeline.png b/compiled/css/timeline.png
diff --git a/examples/example_googlespreadsheet.html b/examples/example_googlespreadsheet.html
@@ -19,12 +19,13 @@
     <meta name="description" content="TimelineJS example">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-touch-fullscreen" content="yes">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
     <!-- Style-->
     <style>
       html, body {
-      height:100%;
-      padding: 0px;
-      margin: 0px;
+       height:100%;
+       padding: 0px;
+       margin: 0px;
       }
     </style>
     <!-- HTML5 shim, for IE6-8 support of HTML elements--><!--[if lt IE 9]>

diff --git a/examples/example_json.html b/examples/example_json.html
@@ -19,12 +19,13 @@
     <meta name="description" content="TimelineJS example">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-touch-fullscreen" content="yes">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
     <!-- Style-->
     <style>
       html, body {
-      height:100%;
-      padding: 0px;
-      margin: 0px;
+       height:100%;
+       padding: 0px;
+       margin: 0px;
       }
     </style>
     <!-- HTML5 shim, for IE6-8 support of HTML elements--><!--[if lt IE 9]>

diff --git a/examples/example_jsonp.html b/examples/example_jsonp.html
@@ -19,12 +19,13 @@
     <meta name="description" content="TimelineJS example">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-touch-fullscreen" content="yes">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
     <!-- Style-->
     <style>
       html, body {
-      height:100%;
-      padding: 0px;
-      margin: 0px;
+       height:100%;
+       padding: 0px;
+       margin: 0px;
       }
     </style>
     <!-- HTML5 shim, for IE6-8 support of HTML elements--><!--[if lt IE 9]>

diff --git a/examples/example_storify.html b/examples/example_storify.html
@@ -19,12 +19,13 @@
     <meta name="description" content="TimelineJS example">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-touch-fullscreen" content="yes">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
     <!-- Style-->
     <style>
       html, body {
-      height:100%;
-      padding: 0px;
-      margin: 0px;
+       height:100%;
+       padding: 0px;
+       margin: 0px;
       }
     </style>
     <!-- HTML5 shim, for IE6-8 support of HTML elements--><!--[if lt IE 9]>

diff --git a/source/gfx/timeline-dark.psd b/source/gfx/timeline-dark.psd
diff --git a/source/gfx/timeline.psd b/source/gfx/timeline.psd
diff --git a/source/less/VMM.Timeline.less b/source/less/VMM.Timeline.less
@@ -13,7 +13,7 @@
 ----------------------------------------------------- */
 	//GFX
 	.base-sprite() {
-		background-image: url(timeline.png?v3.4);
+		background-image: url(timeline.png?v4.3);
 	}
 	.loading-sprite() {
 		background-image: url(loading.gif?v3.4);
@@ -42,3 +42,70 @@
 @import "VMM.Timeline.TimeNav.less";
 
 
+/* MEDIA QUERIES
+================================================== */
+
+/* Mobile and iPhone
+================================================== */
+
+/* Non-Retina */
+@media screen and (-webkit-max-device-pixel-ratio: 1) {
+
+}
+
+/* Retina */
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
+
+}
+/* iPhone Portrait
+================================================== */
+@media screen and (max-device-width: 480px) and (orientation:portrait) {
+	.storyjs-embed.full-embed {
+		height:557px !important;
+		width:320px !important;
+		.vco-feature {
+			height:356px !important;
+		}
+	}
+} 
+/* iPhone Landscape
+================================================== */
+@media screen and (max-device-width: 480px) and (orientation:landscape) {
+	.storyjs-embed.full-embed {
+		height:409px !important;
+		width:480px !important;
+		.vco-feature {
+			height:208px !important;
+		}
+	}
+}
+
+/* iPad Portrait */
+@media screen and (min-device-width: 481px) and (orientation:portrait) {
+
+}
+
+/* iPad Landscape */
+@media screen and (min-device-width: 481px) and (orientation:landscape) {
+
+}
+
+@media (max-width: 480px) {
+
+
+}
+
+
+/* Skinny
+================================================== */
+@media only screen and (max-width: 480px) {
+	.storyjs-embed.full-embed {
+		//max-width: 480px !important;
+	}
+	.vco-timeline {
+		//max-width: 480px !important;
+		.vco-slider {
+
+		}
+	}
+}