tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 12:05:37 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #6303 from open-sausages/pulls/4.0/safari-layout-bugs

Browse Source 
Safari layout bugs
This commit is contained in:
Daniel Hensby 2016-11-08 10:46:32 +00:00 committed by GitHub
commit a2c34fbb02
6 changed files with 309 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
admin/client/dist/js/bundle.js vendored
View File

@ -1433,8 +1433,9 @@ if("split"==t)r.splitViewMode(),this.setIsPreviewEnabled(!0),this._loadCurrentSt
else if("content"==t)r.contentViewMode(),this.setIsPreviewEnabled(!1)
else{if("preview"!=t)throw"Invalid mode: "+t
r.previewMode(),this.setIsPreviewEnabled(!0),this._loadCurrentState()}return i!==!1&&this.saveState("mode",t),this.redraw(),this},changeSize:function i(e){var t=this.getSizes()
return this.setCurrentSizeName(e),this.removeClass("auto desktop tablet mobile").addClass(e),this.find(".preview-device-outer").width(t[e].width).height(t[e].height),this.find(".preview-device-inner").width(t[e].width),
this.saveState("size",e),this.redraw(),this},redraw:function r(){window.debug&&console.log("redraw",this.attr("class"),this.get(0))
return this.setCurrentSizeName(e),this.removeClass("auto desktop tablet mobile").addClass(e),this.saveState("size",e),this.redraw(),this},redraw:function r(){window.debug&&console.log("redraw",this.attr("class"),this.get(0))
var t=this.getCurrentStateName()
t&&this.find(".cms-preview-states").changeVisibleState(t)
var n=e(".cms-container").entwine(".ss").getLayoutOptions()
@ -1497,7 +1498,7 @@ e(".cms-preview").changeSize(n)}}),e(".preview-selector select.preview-dropdown"
return"undefined"!=typeof i&&n.removeClass(i),n.addClass(t),n.attr("data-icon",t),this}}),e(".preview-mode-selector .chosen-drop li:last-child").entwine({onmatch:function U(){e(".preview-mode-selector").hasClass("split-disabled")?this.parent().append('<div class="disabled-tooltip"></div>'):this.parent().append('<div class="disabled-tooltip" style="display: none;"></div>')
}}),e(".preview-device-outer").entwine({onclick:function L(){this.toggleClass("rotate")}})})},function(e,t,n){(function(e){"use strict"
}}),e(".preview-device-outer").entwine({onclick:function L(){this.parent(".preview__device").toggleClass("rotate")}})})},function(e,t,n){(function(e){"use strict"
function t(e){return e&&e.__esModule?e:{"default":e}}var i=n(1),r=t(i),o=n(164),a=t(o)
r["default"].entwine("ss.tree",function(t){t("#Form_BatchActionsForm").entwine({Actions:[],getTree:function n(){return t(".cms-tree")},fromTree:{oncheck_node:function i(e,t){this.serializeFromTree()},onuncheck_node:function r(e,t){
this.serializeFromTree()}},onmatch:function o(){var e=this

195
admin/client/dist/styles/bundle.css vendored
View File

@ -4812,8 +4812,8 @@ input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-
.nav-tabs .nav-link{
display:block;
padding:1.2308rem .3077rem 1.077rem;
border:.1538rem solid transparent;
padding:1.2308rem .3077rem 1.07695rem;
border:.15385rem solid transparent;
border-radius:.25rem .25rem 0 0;
}
@ -4849,7 +4849,7 @@ input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-
.nav-pills .nav-link{
display:block;
padding:1.2308rem .3077rem 1.077rem;
padding:1.2308rem .3077rem 1.07695rem;
border-radius:.25rem;
}
@ -9759,7 +9759,7 @@ body.cms{
float:none;
font-weight:400;
color:#66727d;
padding:1.2308rem .3077rem 1.077rem;
padding:1.2308rem .3077rem 1.07695rem;
line-height:20px;
}
@ -9783,7 +9783,7 @@ body.cms{
.ui-tabs .ui-tabs-nav .ui-state-default a{
color:#7f8c97;
border-bottom:.1538rem solid transparent;
border-bottom:.15385rem solid transparent;
}
.ui-tabs .ui-tabs-nav .ui-state-default a:hover{
@ -9862,8 +9862,8 @@ body.cms{
}
.ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-state-active .nav-link,.ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-state-active a,.ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-state-active .nav-link,.ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-state-active a,.ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-state-active .nav-link,.ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-state-active a{
border-bottom:.1538rem solid #4f5861;
padding:1.2308rem .3077rem 1.077rem;
border-bottom:.15385rem solid #4f5861;
padding:1.2308rem .3077rem 1.07695rem;
}
.cms-content-header-tabs{
@ -9896,7 +9896,7 @@ body.cms{
}
.panel--padded .ui-tabs-nav .nav-link{
padding:1.2308rem .3077rem 1.077rem;
padding:1.2308rem .3077rem 1.07695rem;
}
.cms-content-loading-overlay{
@ -12561,6 +12561,10 @@ li.class-ErrorPage>a .jstree-pageicon{
max-width:150px;
}
.preview__device{
height:100%;
}
.cms-preview{
background-color:#f6f7f8;
border-left:1px solid #ced3d9;
@ -12599,118 +12603,181 @@ li.class-ErrorPage>a .jstree-pageicon{
width:50px;
}
.cms-preview .panel--scrollable{
.cms-preview .panel{
position:relative;
height:calc(100vh - 53px);
}
.cms-preview .panel--scrollable .preview-device-outer{
.cms-preview .panel .preview-device-outer{
height:100%;
width:100%;
overflow:hidden;
}
.cms-preview .panel--scrollable .preview-device-outer .preview-device-inner{
.cms-preview .panel .preview-device-inner{
box-sizing:border-box;
width:100%;
height:100%;
background-color:#fff;
}
.cms-preview .panel--scrollable .preview-device-outer .preview-device-inner iframe{
.cms-preview .panel .preview-device-inner iframe{
height:100%;
overflow-y:auto;
width:100%;
border:0;
}
.cms-preview.desktop .panel--scrollable,.cms-preview.mobile .panel--scrollable,.cms-preview.mobileLandscape .panel--scrollable,.cms-preview.tablet .panel--scrollable,.cms-preview.tabletLandscape .panel--scrollable{
.cms-preview.desktop .panel,.cms-preview.mobile .panel,.cms-preview.tablet .panel{
background-color:#f6f7f8;
overflow:auto;
}
.cms-preview.desktop .panel--scrollable .preview-device-outer,.cms-preview.mobile .panel--scrollable .preview-device-outer,.cms-preview.mobileLandscape .panel--scrollable .preview-device-outer,.cms-preview.tablet .panel--scrollable .preview-device-outer,.cms-preview.tabletLandscape .panel--scrollable .preview-device-outer{
.cms-preview.desktop .preview__device,.cms-preview.mobile .preview__device,.cms-preview.tablet .preview__device{
margin:auto;
text-align:center;
height:auto;
}
.cms-preview.desktop .preview__device:after,.cms-preview.mobile .preview__device:after,.cms-preview.tablet .preview__device:after{
color:#7f8b97;
position:relative;
top:-24px;
-webkit-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}
.cms-preview.desktop .preview-device-outer,.cms-preview.mobile .preview-device-outer,.cms-preview.tablet .preview-device-outer{
-webkit-transition:all .3s ease-out;
transition:all .3s ease-out;
border-radius:7px;
background:#d5dde2;
border:1px solid transparent;
border-left:1px solid #cfd9de;
padding:16px;
padding:1.2308rem;
box-sizing:content-box;
text-align:left;
margin:1.2308rem auto 2.4616rem;
}
.cms-preview.desktop .panel--scrollable .preview-device-outer .preview-device-inner,.cms-preview.mobile .panel--scrollable .preview-device-outer .preview-device-inner,.cms-preview.mobileLandscape .panel--scrollable .preview-device-outer .preview-device-inner,.cms-preview.tablet .panel--scrollable .preview-device-outer .preview-device-inner,.cms-preview.tabletLandscape .panel--scrollable .preview-device-outer .preview-device-inner{
border-top:2px solid #e1e7ea;
border-right:1px solid transparent;
border-bottom:1px solid #e1e7ea;
border-left:1px solid #c3cfd6;
}
.cms-preview.mobile .panel--scrollable .preview-device-outer{
.cms-preview.mobile .preview-device-outer,.cms-preview.tablet .preview-device-outer{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
-webkit-transition:all .3s ease-in 1s;
transition:all .3s ease-in 1s;
margin:20px auto;
-webkit-transition:all .3s ease-in;
transition:all .3s ease-in;
overflow:hidden;
padding-top:16px;
}
.cms-preview.mobile .panel--scrollable .preview-device-outer .preview-device-inner{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
-webkit-transition:all .3s ease-out 1s;
transition:all .3s ease-out 1s;
.cms-preview.mobile .preview-device-outer:after,.cms-preview.tablet .preview-device-outer:after{
content:'Rotate';
font-size:.769rem;
text-transform:uppercase;
color:#879fac;
top:0;
right:1.2308rem;
position:absolute;
letter-spacing:.5px;
}
.cms-preview.mobile .panel--scrollable .preview-device-outer.rotate{
.cms-preview.mobile .preview-device-outer:hover,.cms-preview.tablet .preview-device-outer:hover{
background:#b4c3cb;
cursor:pointer;
}
.cms-preview.mobile .preview-device-outer:hover:after,.cms-preview.tablet .preview-device-outer:hover:after{
color:#fff;
}
.cms-preview.mobile .rotate:after,.cms-preview.tablet .rotate:after{
top:-148px;
}
.cms-preview.mobile .rotate .preview-device-outer,.cms-preview.tablet .rotate .preview-device-outer{
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg);
-webkit-transition:all .3s ease-in 1s;
transition:all .3s ease-in 1s;
height:583px;
margin:0 auto;
width:320px;
}
.cms-preview.mobile .panel--scrollable .preview-device-outer.rotate .preview-device-inner{
-webkit-transform-origin:160px 160px;
transform-origin:160px 160px;
.cms-preview.mobile .rotate .preview-device-outer .preview-device-inner,.cms-preview.tablet .rotate .preview-device-outer .preview-device-inner{
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
-webkit-transition:all .3s ease-out 1s;
transition:all .3s ease-out 1s;
}
.cms-preview.mobile .preview-device-inner,.cms-preview.tablet .preview-device-inner{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
-webkit-transition:all .3s ease-out;
transition:all .3s ease-out;
}
.cms-preview.mobile .preview__device{
min-width:calc(320px + 1.2308rem * 4);
}
.cms-preview.mobile .preview__device:after{
content:"320px x 568px";
}
.cms-preview.mobile .preview-device-outer{
min-height:568px;
width:320px;
height:568px;
text-align:left;
}
.cms-preview.mobile .rotate{
min-width:calc(568px + 1.2308rem * 4);
}
.cms-preview.mobile .rotate:after{
content:"568px x 320px";
}
.cms-preview.mobile .rotate .preview-device-inner{
-webkit-transform-origin:160px;
transform-origin:160px;
height:320px;
width:583px;
width:568px;
}
.cms-preview.mobileLandscape .panel--scrollable .preview-device-outer{
margin:12% auto;
padding-top:16px;
.cms-preview.tablet .preview__device{
min-width:calc(768px + 1.2308rem * 4);
}
.cms-preview.mobileLandscape .panel--scrollable .preview-device-outer,.cms-preview.mobileLandscape .panel--scrollable .preview-device-outer .preview-device-inner,.cms-preview.tablet .panel--scrollable .preview-device-outer{
-webkit-transition:all .3s ease-out 1s;
transition:all .3s ease-out 1s;
.cms-preview.tablet .preview__device:after{
content:"768px x 1024px";
}
.cms-preview.tablet .panel--scrollable .preview-device-outer{
margin:0 auto;
.cms-preview.tablet .preview-device-outer{
min-height:1024px;
width:768px;
height:1024px;
}
.cms-preview.tablet .panel--scrollable .preview-device-outer .preview-device-inner,.cms-preview.tabletLandscape .panel--scrollable .preview-device-outer{
-webkit-transition:all .3s ease-out 1s;
transition:all .3s ease-out 1s;
.cms-preview.tablet .rotate{
min-width:calc(1024px + 1.2308rem * 4);
}
.cms-preview.tabletLandscape .panel--scrollable .preview-device-outer{
margin:0 auto;
.cms-preview.tablet .rotate:after{
content:"1024px x 768px";
}
.cms-preview.desktop .panel--scrollable .preview-device-outer,.cms-preview.tabletLandscape .panel--scrollable .preview-device-outer .preview-device-inner{
-webkit-transition:all .3s ease-out 1s;
transition:all .3s ease-out 1s;
.cms-preview.tablet .rotate .preview-device-inner{
-webkit-transform-origin:384px;
transform-origin:384px;
height:768px;
width:1024px;
}
.cms-preview.desktop .panel--scrollable .preview-device-outer{
margin:0 auto;
.cms-preview.desktop .preview__device{
min-width:calc(1366px + 1.2308rem * 4);
}
.cms-preview.desktop .preview__device:after{
content:"1366px x 768px";
}
.cms-preview.desktop .preview-device-outer{
min-height:768px;
width:1366px;
height:768px;
}
.cms .ss-ui-action-tabset{

7
admin/client/src/legacy/LeftAndMain.Preview.js
View File

@ -134,11 +134,6 @@ $.entwine('ss.preview', function($){
this.setCurrentSizeName(sizeName);
this.removeClass('auto desktop tablet mobile').addClass(sizeName);
this.find('.preview-device-outer')
.width(sizes[sizeName].width)
.height(sizes[sizeName].height);
this.find('.preview-device-inner')
.width(sizes[sizeName].width);
this.saveState('size', sizeName);
@ -737,7 +732,7 @@ $.entwine('ss.preview', function($){
*/
$('.preview-device-outer').entwine({
onclick: function () {
this.toggleClass('rotate');
this.parent('.preview__device').toggleClass('rotate');
}
});
});

12
admin/client/src/styles/_variables.scss
View File

@ -433,7 +433,7 @@ $navbar-padding-vertical: ($spacer / 2);
// Navs
$nav-tabs-link-border-width: .1538rem; // 2px
$nav-tabs-link-border-width: .15385rem; // 2px
$nav-tabs-link-hover-border-color: $gray-light;
$nav-link-padding: $spacer-y #{$spacer-x / 4} #{$spacer-y - $nav-tabs-link-border-width};
@ -758,6 +758,16 @@ $gallery-folder-height: 54px;
$gallery-folder-title-height: $gallery-folder-height - 2;
// Preview panel screen sizes
$mobile-height: 568px;
$mobile-width: 320px;
$tablet-height: 1024px;
$tablet-width: 768px;
$desktop-height: 768px;
$desktop-width: 1366px;
// Transition speeds
$transition-speed-slow: 1s;

230
admin/client/src/styles/legacy/_preview.scss
View File

@ -230,6 +230,10 @@
}
/* Styling for the preview screen sizes */
.preview__device {
height: 100%;
}
.cms-preview {
background-color: $tab-panel-texture-color;
border-left: 1px solid $border-color-dark;
@ -264,98 +268,186 @@
width: 50px;
}
}
.panel--scrollable {
.panel {
position: relative;
height: calc(100vh - #{$toolbar-total-height});
.preview-device-outer {
height: 100%;
width: 100%;
overflow: hidden;
.preview-device-inner {
box-sizing: border-box;
width: 100%;
height:100%;
background-color: #FFF;
iframe {
height: 100%;
overflow-y: auto;
width: 100%;
border: 0;
}
}
}
}
&.mobile, &.mobileLandscape, &.tablet, &.tabletLandscape, &.desktop {
.panel--scrollable {
background-color: $tab-panel-texture-color; /* cover website preview icon */
.preview-device-outer {
border-radius: 7px;
background: lighten(#D2DBE0, 1%);
border: 1px solid transparent;
border-left:1px solid darken(#D2DBE0, 1%);
padding: 16px;
box-sizing: content-box;
.preview-device-inner {
border-top:2px solid lighten(#D2DBE0,5%);
border-right: 1px solid transparent;
border-bottom:1px solid lighten(#D2DBE0,5%);
border-left:1px solid darken(#D2DBE0, 5%);
}
.preview-device-inner {
box-sizing: border-box;
width: 100%;
height: 100%;
background-color: $white;
iframe {
height: 100%;
overflow-y: auto;
width: 100%;
border: 0;
}
}
}
&.mobile {
.panel--scrollable .preview-device-outer {
transform: rotate(0deg);
transition: all .3s ease-in 1s;
margin: 20px auto 20px;
overflow:hidden;
padding-top: 16px;
.preview-device-inner {
transform: rotate(0deg);
transition: all .3s ease-out 1s;
&.mobile,
&.tablet,
&.desktop {
.panel {
background-color: $tab-panel-texture-color; /* cover website preview icon */
overflow: auto;
}
.preview__device {
margin: auto;
text-align: center;
height: auto;
&::after {
color: $body-color-lighter;
position: relative;
top: -24px;
transition: all .3s ease-in-out;
}
&.rotate {
}
.preview-device-outer {
transition: all .3s ease-out;
border-radius: 7px;
background: lighten(#D2DBE0, 1%);
border: 1px solid transparent;
padding: $spacer-y;
box-sizing: content-box;
text-align: left;
margin: $spacer-y auto #{$spacer-y * 2};
}
}
&.mobile,
&.tablet {
.preview-device-outer {
transform: rotate(0deg);
transition: all .3s ease-in;
overflow: hidden;
&::after {
content: 'Rotate';
font-size: $font-size-xxs;
text-transform: uppercase;
color: darken(#D2DBE0, 25%);
top: 0;
right: $spacer-x;
position: absolute;
letter-spacing: .5px;
}
&:hover {
background: darken(#D2DBE0, 10%);
cursor: pointer;
}
&:hover::after {
color: $white;
}
}
.rotate {
&::after {
top: -148px;
}
.preview-device-outer {
transform: rotate(-90deg);
transition: all .3s ease-in 1s;
height: 583px;
margin: 0px auto 0px;
width: 320px;
.preview-device-inner {
transform-origin: 160px 160px;
transform: rotate(90deg);
transition: all .3s ease-out 1s;
height: 320px;
width: 583px;
}
}
}
}
&.mobileLandscape .panel--scrollable .preview-device-outer {
transition: all .3s ease-out 1s;
margin: 12% auto;
padding-top: 16px;
.preview-device-inner {
transition: all .3s ease-out 1s;
transform: rotate(0deg);
transition: all .3s ease-out;
}
}
&.tablet .panel--scrollable .preview-device-outer {
transition: all .3s ease-out 1s;
margin: 0 auto;
.preview-device-inner {
transition: all .3s ease-out 1s;
&.mobile {
.preview__device {
min-width: calc(#{$mobile-width} + #{$spacer-x} * 4);
&::after {
content: '#{$mobile-width} x #{$mobile-height}';
}
}
.preview-device-outer {
min-height: $mobile-height;
width: $mobile-width;
height: $mobile-height;
text-align: left;
}
.rotate {
min-width: calc(#{$mobile-height} + #{$spacer-x} * 4);
&::after {
content: '#{$mobile-height} x #{$mobile-width}';
}
.preview-device-inner {
transform-origin: $mobile-width / 2;
height: $mobile-width;
width: $mobile-height;
}
}
}
&.tabletLandscape .panel--scrollable .preview-device-outer {
transition: all .3s ease-out 1s;
margin: 0 auto;
.preview-device-inner {
transition: all .3s ease-out 1s;
&.tablet {
.preview__device {
min-width: calc(#{$tablet-width} + #{$spacer-x} * 4);
&::after {
content: '#{$tablet-width} x #{$tablet-height}';
}
}
.preview-device-outer {
min-height: $tablet-height;
width: $tablet-width;
height: $tablet-height;
}
.rotate {
min-width: calc(#{$tablet-height} + #{$spacer-x} * 4);
&::after {
content: '#{$tablet-height} x #{$tablet-width}';
}
.preview-device-inner {
transform-origin: $tablet-width / 2;
height: $tablet-width;
width: $tablet-height;
}
}
}
&.desktop .panel--scrollable .preview-device-outer {
transition: all .3s ease-out 1s;
margin: 0 auto;
&.desktop {
.preview__device {
min-width: calc(#{$desktop-width} + #{$spacer-x} * 4);
&::after {
content: '#{$desktop-width} x #{$desktop-height}';
}
}
.preview-device-outer {
min-height: $desktop-height;
width: $desktop-width;
height: $desktop-height;
}
}
}

2
admin/templates/SilverStripe/Admin/Includes/CampaignAdmin_Content.ss
View File

@ -1,2 +1,2 @@
<div class="cms-content flexbox-area-grow $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content">
<div class="cms-content flexbox-area-grow fill-height $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content">
</div>