Permalink
Browse files

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

  • Loading branch information...
1 parent 00f1ba4 commit 747346bb160852a019b15b6c0f0e7fb02fc0cda3 @clarkepaul clarkepaul committed with chillu Dec 6, 2012
View
@@ -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; }
View
Oops, something went wrong.
@@ -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));
@@ -107,6 +107,7 @@ form.nostyle {
textarea,
select,
.TreeDropdownField {
+ margin-left: 10px;
width: 100%;
max-width: $grid-x * 64;
@include box-sizing(border-box);
@@ -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);
+
+
@@ -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);
+ }
}
+
+
+
+
+
+
Oops, something went wrong.

0 comments on commit 747346b

Please sign in to comment.