Ability to rotate the mobile preview in side-by-side preview.

silverstripe · Dec 10, 2012 · 747346b · 747346b
1 parent 00f1ba4
commit 747346b
Show file tree

Hide file tree

Showing 9 changed files with 353 additions and 181 deletions.
diff --git a/admin/css/ie7.css b/admin/css/ie7.css
@@ -54,7 +54,9 @@ fieldset.switch-states .switch .slide-button { display: none; }
 
 html { overflow: hidden; }
 
-.field input.text, .field textarea, .field .TreeDropdownField { padding-left: 0; padding-right: 0; }
+.field input.text, .field textarea, .field .TreeDropdownField { width: 94%; }
+
+select { padding: 10px 0; height: 30px; }
 
 .ss-uploadfield-item-name { display: block; }
 
@@ -101,12 +103,9 @@ table.ss-gridfield-table tr.ss-gridfield-item.even { background: #F0F4F7; }
 .ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content .cms-search-form { overflow: hidden; }
 .ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content .cms-search-form input { width: 160px; }
 
-.cms .cms-content-tools { border-right: 1px solid #CCC; }
-
 .cms .ss-gridfield table.ss-gridfield-table tbody td.col-listChildrenLink { width: 16px; }
 .cms .ss-gridfield table.ss-gridfield-table tbody td.col-listChildrenLink .list-children-link { background: transparent url(../images/sitetree_ss_default_icons.png) no-repeat 4px -4px; display: block; }
 
-.cms-content-header { min-height: 40px; }
 .cms-content-header h2 { float: left; }
 .cms-content-header h2 .section-icon { display: none; }
 .cms-content-header .cms-content-header-tabs { position: absolute; right: 0; }

diff --git a/admin/css/screen.css b/admin/css/screen.css
diff --git a/admin/javascript/LeftAndMain.Preview.js b/admin/javascript/LeftAndMain.Preview.js
@@ -636,5 +636,15 @@
 
 		});
 
+		/**
+		 * Rotate preview to landscape
+		 */
+		$('.preview-device-outer').click(function() {
+			if(!$('.preview-device-outer').hasClass('rotate')) {
+				$('.preview-device-outer').addClass('rotate');
+			} else {
+				$('.preview-device-outer').removeClass('rotate');
+			}
+		});
 	});
 }(jQuery));
diff --git a/admin/scss/_forms.scss b/admin/scss/_forms.scss
@@ -107,6 +107,7 @@ form.nostyle {
 	textarea,
 	select,
 	.TreeDropdownField {
+		margin-left: 10px;
 		width: 100%;
 		max-width: $grid-x * 64;
 		@include box-sizing(border-box);

diff --git a/admin/scss/_mixins.scss b/admin/scss/_mixins.scss
@@ -29,6 +29,20 @@
 }
 
 
+//**----------------------------------------------------
+//Clearfix mixin clears the float of it's parent element
+//----------------------------------------------------**/
+@mixin clearfix{
+	&:after{
+		content: ".";
+		display: block;
+		height: 0;
+		clear: both;
+		visibility: hidden;
+	}
+	*:first-child &{ zoom:1;}
+}
+
 
 
 //** ----------------------------------------------------
@@ -87,23 +101,110 @@
 }
 
 
-//**----------------------------------------------------
-//Clearfix mixin clears the float of it's parent element
-//----------------------------------------------------**/
-@mixin clearfix{
-	&:after{
-		content: ".";
-		display: block;
-		height: 0;
-		clear: both;
-		visibility: hidden;
-	}
-	*:first-child &{ zoom:1;}
+@mixin delay($time, $webkit:true){
+  @if($webkit){
+    -webkit-transition-delay: $time;
+  }
+  -moz-transition-delay: $time;
+  -o-transition-delay: $time;
+
 }
 
+
+
 @mixin transition($properties: margin 0.3s ease-in 0s){
    	-moz-transition: $properties; 
 	-webkit-transition: $properties;
 	-o-transition: $properties; 
 	transition: $properties;
 }
+
+
+@mixin animateNone{
+  animation-name:none;
+  -moz-animation-name:none; /* Firefox */
+  -webkit-animation-name:none; /* Safari and Chrome */
+  -o-animation-name:none; /* Opera */
+  -ms-animation-name:none;
+}
+
+
+@mixin keyframeSettings($name){
+  @if($name == "rotate"){
+    0% {
+    	-webkit-transform-origin: center center;
+    	margin-top:20px;   
+		@include rotate(90deg);
+    } 
+	100% {   
+		width: 583px;
+		height: 320px;    
+	    @include rotate(0deg);	   
+    }
+  }@else if($name == "rotate_secondary"){
+    0% {
+
+    	@include delay(0.5s);    		
+    } 
+    1%{
+
+    }
+    50%{
+		-webkit-transform-origin: center center;
+    	margin-top:20px;   
+		//@include rotate(-90deg);
+    }
+	100% {   
+	    @include rotate(0deg);	   
+    }
+  }
+}
+
+
+@mixin keyframes($name){
+//Animation keyframes
+  @-webkit-keyframes $name {
+    @include keyframeSettings($name);
+  }
+  @-moz-keyframes $name {
+    @include keyframeSettings($name);
+  }
+  @-ms-keyframes $name {
+    @include keyframeSettings($name);
+  }
+  @-o-keyframes $name {
+    @include keyframeSettings($name);
+  }
+  @keyframes $name {
+    @include keyframeSettings($name);
+  }
+}
+
+
+
+// $effect needs a corrosponding keyframe, (such as rotate) 
+// with corrosponding keyframeSettings. Called below this mixin
+// eg @include keyframes(grow); 
+@mixin animateOptions($effect, $time:0.2s, $function:linear) {
+  -moz-animation-fill-mode: both;
+  -ms-animation-fill-mode: both;
+  -o-animation-fill-mode: both;
+  -webkit-animation:$effect $time $function both; //webkit supports this short-hand, moz doesn't yet
+  -moz-animation:$effect $time $function;
+  -ms-animation:$effect $time $function;
+  -o-animation:$effect $time $function;
+  animation:$effect $time $function both;
+}
+
+// Shorthand call to animateOptions
+// $effect needs a corrosponding keyframe, (such as rotate)  
+// with corrosponding keyframeSettings. Called below this mixin
+// eg @include keyframes(grow); 
+@mixin animateEffect($effect) {
+   @include animateOptions($effect);
+}
+
+@include keyframes(rotate);
+@include keyframes(rotate_secondary);    
+
+
diff --git a/admin/scss/_preview.scss b/admin/scss/_preview.scss
@@ -58,17 +58,18 @@
 	}
 
 	/* Preview selectors. Overrides default chosen styles and applies its own */
-	.preview-selector{
+	.preview-selector {
 		float:right;
 		border-bottom:none;
 		position:relative;
 		@include box-shadow(none);
 		margin: 3px 0 0 4px;
 		padding: 0;
+		height: 28px;
 
 		a.chzn-single {						
 			width: 20px;
-			padding: 6px 5px;
+			padding: 6px 5px 5px;
 			height: 18px;
 			margin: -3px 0 0;
 			filter: none;	/* remove ie background */
@@ -77,9 +78,9 @@
 			@include box-shadow(none);
 			@include border-radius(3px);
 
-
-			&:hover, &:focus, &.chzn-single-with-drop  {
+			&:hover, &.chzn-single-with-drop  {
 				background-color: darken($color-widget-bg,6%);
+				@include box-shadow(0 0 3px rgba(0, 0, 0, 0.05) inset, 0 1px 0 $box-shadow-shine);
 			}
 			&.chzn-single-with-drop {
 				@include border-radius(0 0 3px 3px);
@@ -157,6 +158,15 @@
 							border-bottom: none;
 							@include border-radius(0 0 0 3px);
 						}
+						&.restricted { /* disable option (eg.split mode for smaller screen sizes) */
+							color: #CCC;
+							background-color: #EEE;
+							pointer-events: none;
+							/*text-decoration: line-through;*/
+							&:before {
+								opacity: 0.2;
+							}
+						}
 
 						/* Description styling */
 						span { 
@@ -202,6 +212,143 @@
 			}
 		}
 	}
+}
+
+.cms-preview {
+	background-color: $tab-panel-texture-color;
+	height: 100%;
+	width: 100%;
+
+	.preview-note {
+		font-weight: 18px;
+		display: block;
+		position: absolute;
+		text-align: center;
+		width: 300px;
+		height: 82px;
+		left: 50%;
+		top: 50%;
+		margin-top: -50px; 				
+		margin-left: -150px;				/* half of width */
+		color: #CDD7DC;
+		font-weight: bold;
+		font-size: 22px;
+		text-shadow: 0 1px 0 #fff;
+		span {
+			background: sprite($sprites64, preview) no-repeat;
+			width: 50px;
+			height: 41px;
+			margin: 0 auto 20px;
+			display: block;
+		}
+	}
+
+	.preview-scroll {
+		height: 100%;
+		width: 100%;
+		overflow: auto;
+		position: relative;
+
+		.preview-device-outer {
+			height: 100%;
+			width: 100%;
+
+			.preview-device-inner {
+				height: 100%;
+				width: 100%;
+
+				iframe {
+					height: 100%;
+					width: 100%;
+					overflow-y: auto;
+				}
+			}
+		}
+	}
+	&.mobile, &.mobileLandscape, &.tablet, &.tabletLandscape, &.desktop {
+		.preview-scroll {
+			background-color: $tab-panel-texture-color; 		/* hide website preview icon */
+			.preview-device-outer {
+				padding: 0 16px 16px;
+				background-color: #414141;
+			}
+		}
+	}
 
+	&.mobile {
+		.preview-scroll .preview-device-outer {
+			width: 335px; 										/* add 15px for desktop scrollbar */
+			height: 568px;
+			margin: 20px auto 20px;
+			padding-top: 16px;
+			overflow:hidden;
+			@include rotate(0deg);
+			@include transition(all 0.3s ease-out 1s);
+			.preview-device-inner {
+				width: 335px;
+				@include transition(all 0.3s ease-in 1s);
+				@include rotate(0deg);
+			}
+			&.rotate {				
+				width: 320px; 
+				height: 583px;
+				margin: 0px auto 0px;
+				@include rotate(-90deg); 
+				@include transition(all 0.3s ease-in 1s);
+				.preview-device-inner {
+					width: 583px;
+					height: 320px; 
+					@include rotate(90deg);
+					@include transition(all 0.3s ease-out 1s); 
+					@include apply-origin(160px 160px, false);					
+				}
+
+			}
+		}
+	}
+	&.mobileLandscape .preview-scroll .preview-device-outer {
+		width: 583px;							/* add 15px for desktop scrollbar */
+		height: 320px;
+		margin: 12% auto;
+		padding-top: 16px;
+		@include transition(all 0.3s ease-out 1s);
+		.preview-device-inner {
+			width: 583px;
+			@include transition(all 0.3s ease-out 1s);
+		}
+	}
+	&.tablet .preview-scroll .preview-device-outer { 
+		width: 783px;								/* add 15px for desktop scrollbar */
+		height: 1024px;
+		margin: 0 auto;
+		@include transition(all 0.3s ease-out 1s);
+		.preview-device-inner {
+			width: 783px;
+			@include transition(all 0.3s ease-out 1s);
+		}
+	}
+	&.tabletLandscape .preview-scroll .preview-device-outer {
+		width: 1039px;								/* add 15px for desktop scrollbar */
+		height: 768px;
+		margin: 0 auto;
+		@include transition(all 0.3s ease-out 1s);
+
+		.preview-device-inner {
+			width: 1039px;
+			@include transition(all 0.3s ease-out 1s);
+		}
+	}
+	&.desktop .preview-scroll .preview-device-outer {
+		width: 1024px;
+		height: 800px;
+		margin: 0 auto;
+		@include transition(all 0.3s ease-out 1s);
+	}
 }
 
+
+
+
+
+
+