ENHANCEMENT: Improved behaviour for flexbox on smaller screens

This commit is contained in:
Damian Mooyman 2016-10-31 14:17:56 +13:00 committed by GitHub
commit 741c515cb2
10 changed files with 41 additions and 18 deletions

View File

@ -153,7 +153,7 @@ t("#Form_EditForm_LinkToID_Holder").show()):(t("#Form_EditForm_ExternalURL_Holde
function i(t){return t&&t.__esModule?t:{"default":t}}var a=n(2),o=i(a) function i(t){return t&&t.__esModule?t:{"default":t}}var a=n(2),o=i(a)
o["default"].entwine("ss",function(t){t(".field.urlsegment:not(.readonly)").entwine({MaxPreviewLength:55,Ellipsis:"...",onmatch:function e(){this.find(":text").length&&this.toggleEdit(!1),this.redraw(), o["default"].entwine("ss",function(t){t(".field.urlsegment:not(.readonly)").entwine({MaxPreviewLength:55,Ellipsis:"...",onmatch:function e(){this.find(":text").length&&this.toggleEdit(!1),this.redraw(),
this._super()},redraw:function n(){var t=this.find(":text"),e=decodeURI(t.data("prefix")+t.val()),n=e this._super()},redraw:function n(){var t=this.find(":text"),e=decodeURI(t.data("prefix")+t.val()),n=e
e.length>this.getMaxPreviewLength()&&(n=this.getEllipsis()+e.substr(e.length-this.getMaxPreviewLength(),e.length)),this.find(".preview").attr("href",encodeURI(e+t.data("suffix"))).text(n)},toggleEdit:function i(t){ e.length>this.getMaxPreviewLength()&&(n=this.getEllipsis()+e.substr(e.length-this.getMaxPreviewLength(),e.length)),this.find(".URL-link").attr("href",encodeURI(e+t.data("suffix"))).text(n)},toggleEdit:function i(t){
var e=this.find(":text") var e=this.find(":text")
this.find(".preview-holder")[t?"hide":"show"](),this.find(".edit-holder")[t?"show":"hide"](),t&&(e.data("origval",e.val()),e.focus())},update:function a(){var t=this,e=this.find(":text"),n=e.data("origval"),i=arguments[0],a=i&&""!==i?i:e.val() this.find(".preview-holder")[t?"hide":"show"](),this.find(".edit-holder")[t?"show":"hide"](),t&&(e.data("origval",e.val()),e.focus())},update:function a(){var t=this,e=this.find(":text"),n=e.data("origval"),i=arguments[0],a=i&&""!==i?i:e.val()

View File

@ -10,6 +10,10 @@
cursor:pointer; cursor:pointer;
} }
.CMSPageHistoryController{
overflow:hidden;
}
.CMSPageHistoryController ins{ .CMSPageHistoryController ins{
background-color:#dfd; background-color:#dfd;
padding:2px; padding:2px;
@ -22,6 +26,15 @@
color:#f44; color:#f44;
} }
.CMSPageHistoryController .htmleditorfield.readonly img{
max-width:100%;
height:auto;
}
.CMSPageHistoryController .cms-content-tools.collapsed{
overflow:hidden;
}
#cms-content-listview .cms-tree-expand-trigger,#cms-content-treeview .cms-tree-expand-trigger{ #cms-content-listview .cms-tree-expand-trigger,#cms-content-treeview .cms-tree-expand-trigger{
display:none; display:none;
} }
@ -54,7 +67,7 @@
background:url(../images/loading.gif) no-repeat 162px 8px; background:url(../images/loading.gif) no-repeat 162px 8px;
} }
.field.urlsegment .preview{ .field.urlsegment .URL-link{
padding-top:8px; padding-top:8px;
display:inline-block; display:inline-block;
} }

View File

@ -19,7 +19,7 @@ $.entwine('ss', function($) {
// This ensures we don't get bogus previews on readonly fields. // This ensures we don't get bogus previews on readonly fields.
if(this.find(':text').length) this.toggleEdit(false); if(this.find(':text').length) this.toggleEdit(false);
this.redraw(); this.redraw();
this._super(); this._super();
}, },
@ -34,7 +34,7 @@ $.entwine('ss', function($) {
} }
// Transfer current value to holder // Transfer current value to holder
this.find('.preview').attr('href', encodeURI(url + field.data('suffix'))).text(previewUrl); this.find('.URL-link').attr('href', encodeURI(url + field.data('suffix'))).text(previewUrl);
}, },
/** /**
@ -51,7 +51,7 @@ $.entwine('ss', function($) {
field.focus(); field.focus();
} }
}, },
/** /**
* Commits the change of the URLSegment to the field * Commits the change of the URLSegment to the field
* Optional: pass in (String) to update the URLSegment * Optional: pass in (String) to update the URLSegment
@ -62,7 +62,7 @@ $.entwine('ss', function($) {
currentVal = field.data('origval'), currentVal = field.data('origval'),
title = arguments[0], title = arguments[0],
updateVal = (title && title !== "") ? title : field.val(); updateVal = (title && title !== "") ? title : field.val();
if (currentVal != updateVal) { if (currentVal != updateVal) {
this.addClass('loading'); this.addClass('loading');
this.suggest(updateVal, function(data) { this.suggest(updateVal, function(data) {
@ -76,7 +76,7 @@ $.entwine('ss', function($) {
this.redraw(); this.redraw();
} }
}, },
/** /**
* Cancels any changes to the field * Cancels any changes to the field
*/ */

View File

@ -31,6 +31,8 @@
} }
.CMSPageHistoryController { .CMSPageHistoryController {
overflow: hidden; // Fixes weird bug for double scroll in history area on browser resize
ins { ins {
background-color: #DFD; background-color: #DFD;
padding: 2px; padding: 2px;
@ -42,6 +44,15 @@
padding: 2px; padding: 2px;
color: darken(#FDD, 30%); color: darken(#FDD, 30%);
} }
.htmleditorfield.readonly img {
max-width: 100%;
height: auto;
}
.cms-content-tools.collapsed {
overflow: hidden;
}
} }
/** -------------------------------------------- /** --------------------------------------------
@ -99,7 +110,7 @@
background: url(../../images/loading.gif) no-repeat 162px 8px; background: url(../../images/loading.gif) no-repeat 162px 8px;
} }
.preview { .URL-link {
padding-top: 8px; padding-top: 8px;
display: inline-block; display: inline-block;
} }

View File

@ -1961,7 +1961,6 @@ class SiteTree extends DataObject implements PermissionProvider,i18nEntityProvid
? $this->fieldLabel('LinkChangeNote') ? $this->fieldLabel('LinkChangeNote')
: ''; : '';
if(!Config::inst()->get('SilverStripe\\View\\Parsers\\URLSegmentFilter', 'default_allow_multibyte')) { if(!Config::inst()->get('SilverStripe\\View\\Parsers\\URLSegmentFilter', 'default_allow_multibyte')) {
$helpText .= $helpText ? '<br />' : '';
$helpText .= _t('SiteTreeURLSegmentField.HelpChars', ' Special characters are automatically converted or removed.'); $helpText .= _t('SiteTreeURLSegmentField.HelpChars', ' Special characters are automatically converted or removed.');
} }
$urlsegment->setHelpText($helpText); $urlsegment->setHelpText($helpText);

View File

@ -5,7 +5,8 @@
<div class="fill-height flexbox-area-grow"> <div class="fill-height flexbox-area-grow">
<div class="cms-content-header north"> <div class="cms-content-header north">
<div class="cms-content-header-nav fill-width"> <div class="cms-content-header-nav fill-width">
<% include SilverStripe\\Admin\\CMSBreadcrumbs %> <a href="/admin/pages" class="btn btn-secondary btn--no-text font-icon-left-open-big hidden-lg-up toolbar__back-button"></a>
<% include SilverStripe\\Admin\\CMSBreadcrumbs %>
<div class="cms-content-header-tabs cms-tabset"> <div class="cms-content-header-tabs cms-tabset">
<ul class="cms-tabset-nav-primary nav nav-tabs"> <ul class="cms-tabset-nav-primary nav nav-tabs">

View File

@ -1,4 +1,4 @@
<div class="cms-content-view fill-height flexbox-display" data-pjax-fragment="Content-PageList"> <div class="flexbox-area-grow cms-content-view" data-pjax-fragment="Content-PageList">
<% if $ViewState == 'listview' %> <% if $ViewState == 'listview' %>
<% include SilverStripe\\CMS\\Controllers\\CMSMain_ListView %> <% include SilverStripe\\CMS\\Controllers\\CMSMain_ListView %>
<% else %> <% else %>

View File

@ -1,3 +1,3 @@
<div class="panel panel--padded panel--scrollable flexbox-area-grow fill-height cms-content-view cms-tree-view-sidebar" data-pjax-fragment="Content-PageList-Sidebar"> <div class="panel panel--padded panel--scrollable flexbox-area-grow fill-height flexbox-display cms-content-view cms-tree-view-sidebar" data-pjax-fragment="Content-PageList-Sidebar">
<% include SilverStripe\\CMS\\Controllers\\CMSMain_TreeView %> <% include SilverStripe\\CMS\\Controllers\\CMSMain_TreeView %>
</div> </div>

View File

@ -7,9 +7,8 @@
</div> </div>
</div> </div>
<div class="cms-content-fields center ui-widget-content cms-panel-padded flexbox-area-grow fill-height"> <div class="flexbox-area-grow fill-height cms-content-fields ui-widget-content cms-panel-padded">
$Tools $Tools
$PageList $PageList
</div> </div>
</div> </div>

View File

@ -1,19 +1,19 @@
<div class="preview-holder"> <div class="preview-holder">
<a class="preview" href="$URL" target="_blank"> <a class="URL-link" href="$URL" target="_blank">
$URL $URL
</a> </a>
<% if not $IsReadonly %> <% if not $IsReadonly %>
<button role="button" type="button" class="btn ui-button-text-only ss-ui-button edit"> <button role="button" type="button" class="btn btn-sm ui-button-text-only ss-ui-button edit">
<% _t('URLSegmentField.Edit', 'Edit') %> <% _t('URLSegmentField.Edit', 'Edit') %>
</button> </button>
<% end_if %> <% end_if %>
</div> </div>
<div class="edit-holder"> <div class="edit-holder">
<input $AttributesHTML /> <input $AttributesHTML />
<button role="button" data-icon="accept" type="button" class="btn ui-button-text-icon-primary ss-ui-button update"> <button role="button" data-icon="accept" type="button" class="btn btn-sm ui-button-text-icon-primary ss-ui-button update">
<% _t('URLSegmentField.OK', 'OK') %> <% _t('URLSegmentField.OK', 'OK') %>
</button> </button>
<button role="button" data-icon="cancel" type="button" class="btn ui-button-text-icon-secondary ss-ui-button cancel"> <button role="button" data-icon="cancel" type="button" class="btn btn-sm ui-button-text-icon-secondary ss-ui-button cancel">
<% _t('URLSegmentField.Cancel', 'Cancel') %> <% _t('URLSegmentField.Cancel', 'Cancel') %>
</button> </button>
<% if $HelpText %><p class="form__field-description">$HelpText</p><% end_if %> <% if $HelpText %><p class="form__field-description">$HelpText</p><% end_if %>