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)
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
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")
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;
}
.CMSPageHistoryController{
overflow:hidden;
}
.CMSPageHistoryController ins{
background-color:#dfd;
padding:2px;
@ -22,6 +26,15 @@
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{
display:none;
}
@ -54,7 +67,7 @@
background:url(../images/loading.gif) no-repeat 162px 8px;
}
.field.urlsegment .preview{
.field.urlsegment .URL-link{
padding-top:8px;
display:inline-block;
}

View File

@ -34,7 +34,7 @@ $.entwine('ss', function($) {
}
// 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);
},
/**

View File

@ -31,6 +31,8 @@
}
.CMSPageHistoryController {
overflow: hidden; // Fixes weird bug for double scroll in history area on browser resize
ins {
background-color: #DFD;
padding: 2px;
@ -42,6 +44,15 @@
padding: 2px;
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;
}
.preview {
.URL-link {
padding-top: 8px;
display: inline-block;
}

View File

@ -1961,7 +1961,6 @@ class SiteTree extends DataObject implements PermissionProvider,i18nEntityProvid
? $this->fieldLabel('LinkChangeNote')
: '';
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.');
}
$urlsegment->setHelpText($helpText);

View File

@ -5,7 +5,8 @@
<div class="fill-height flexbox-area-grow">
<div class="cms-content-header north">
<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">
<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' %>
<% include SilverStripe\\CMS\\Controllers\\CMSMain_ListView %>
<% 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 %>
</div>

View File

@ -7,9 +7,8 @@
</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
$PageList
</div>
</div>

View File

@ -1,19 +1,19 @@
<div class="preview-holder">
<a class="preview" href="$URL" target="_blank">
<a class="URL-link" href="$URL" target="_blank">
$URL
</a>
<% 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') %>
</button>
<% end_if %>
</div>
<div class="edit-holder">
<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') %>
</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') %>
</button>
<% if $HelpText %><p class="form__field-description">$HelpText</p><% end_if %>