From 9b2dcc295fd1ff97a72e758e305f41a90b4f317d Mon Sep 17 00:00:00 2001 From: micmania1 Date: Mon, 2 Feb 2015 10:32:40 +0000 Subject: [PATCH] Added more styling to blog post admin --- code/forms/BlogAdminSidebar.php | 8 +++ code/model/BlogPost.php | 23 ++++++-- css/cms.css | 75 ++++++++++++++++++++++--- scss/cms.scss | 84 +++++++++++++++++++++++++--- templates/BlogAdminSidebar_holder.ss | 5 +- templates/forms/TabSet_holder.ss | 4 ++ 6 files changed, 176 insertions(+), 23 deletions(-) create mode 100644 templates/forms/TabSet_holder.ss diff --git a/code/forms/BlogAdminSidebar.php b/code/forms/BlogAdminSidebar.php index 2a78db6..3c506b4 100644 --- a/code/forms/BlogAdminSidebar.php +++ b/code/forms/BlogAdminSidebar.php @@ -2,4 +2,12 @@ class BlogAdminSidebar extends FieldGroup { + public function isOpen() { + $sidebar = Cookie::get('blog-admin-sidebar'); + if($sidebar == 1 || is_null($sidebar)) { + return true; + } + return false; + } + } \ No newline at end of file diff --git a/code/model/BlogPost.php b/code/model/BlogPost.php index 0b9ee64..2fc19a0 100644 --- a/code/model/BlogPost.php +++ b/code/model/BlogPost.php @@ -64,23 +64,29 @@ class BlogPost extends Page { $this->beforeUpdateCMSFields(function($fields) use ($self) { // Add featured image - $fields->insertBefore( + $fields->insertAfter( $uploadField = UploadField::create("FeaturedImage", _t("BlogPost.FeaturedImage", "Featured Image")), "Content" ); $uploadField->getValidator()->setAllowedExtensions(array('jpg', 'jpeg', 'png', 'gif')); - // Now we're going to create the blog options panel. - $menuTitle = $fields->dataFieldByName('MenuTitle'); + // We're going to hide MenuTitle - Its not needed in blog posts. + $fields->push(HiddenField::create('MenuTitle')); + + // We're going to add the url segment to sidebar so we're making it a little lighter $urlSegment = $fields->dataFieldByName('URLSegment'); + $urlSegment->setURLPrefix('/' . Director::makeRelative($this->Parent()->Link())); + + // Remove the MenuTitle and URLSegment from the main tab $fields->removeFieldsFromTab('Root.Main', array( 'MenuTitle', 'URLSegment', )); + + // Build up our sidebar $options = BlogAdminSidebar::create( - $menuTitle, - $urlSegment, $publishDate = DatetimeField::create("PublishDate", _t("BlogPost.PublishDate", "Publish Date")), + $urlSegment, ListboxField::create( "Categories", _t("BlogPost.Categories", "Categories"), @@ -92,12 +98,17 @@ class BlogPost extends Page { $self->Parent()->Tags()->map()->toArray() )->setMultiple(true) )->setTitle('Post Options'); - $fields->insertBefore($options, 'Root'); $publishDate->getDateField()->setConfig("showcalendar", true); + + // Insert it before the TabSet + $fields->insertBefore($options, 'Root'); }); $fields = parent::getCMSFields(); + // We need to render an outer template to deal with our custom layout + $fields->fieldByName('Root')->setTemplate('TabSet_holder'); + return $fields; } diff --git a/css/cms.css b/css/cms.css index 23820c0..89bed44 100755 --- a/css/cms.css +++ b/css/cms.css @@ -24,19 +24,76 @@ /* line 23, ../scss/cms.scss */ .blog-admin-sidebar { - width: 280px !important; + width: 280px; border-right: none; border-left: 1px solid #C0C0C2; - height: 547px; - position: fixed; - right: 0; + position: absolute; + right: 0px; + bottom: 0px; + height: 100%; } -/* line 31, ../scss/cms.scss */ -.blog-admin-sidebar ~ .ss-tabset { - width: 866px; - float: left; +/* line 32, ../scss/cms.scss */ +.blog-admin-sidebar .cms-panel-toggle a { + text-align: left; } -/* line 37, ../scss/cms.scss */ +/* line 36, ../scss/cms.scss */ +.blog-admin-sidebar ~ .blog-admin-outer { + width: 100%; + padding-right: 280px; + position: absolute; + height: 100%; + overflow-y: hidden; + overflow-x: hidden; + box-sizing: border-box; +} +/* line 45, ../scss/cms.scss */ +.blog-admin-sidebar ~ .blog-admin-outer > .ss-tabset { + position: relative; + overflow: auto; + height: 100%; + width: 100%; +} +/* line 52, ../scss/cms.scss */ +.blog-admin-sidebar ~ .blog-admin-outer > .ss-tabset #Title label { + float: none; +} +/* line 55, ../scss/cms.scss */ +.blog-admin-sidebar ~ .blog-admin-outer > .ss-tabset #Title .middleColumn, .blog-admin-sidebar ~ .blog-admin-outer > .ss-tabset #Title input { + width: 100%; + max-width: 100%; + margin-left: 0; +} +/* line 66, ../scss/cms.scss */ +.blog-admin-sidebar .cms-content-view > .field + .field { + margin-top: 10px; +} +/* line 71, ../scss/cms.scss */ +.blog-admin-sidebar .cms-content-view > .field.urlsegment .preview { + padding-top: 0; + line-height: 25px; +} +/* line 76, ../scss/cms.scss */ +.blog-admin-sidebar .cms-content-view > .field.urlsegment .edit { + float: right; +} +/* line 83, ../scss/cms.scss */ +.blog-admin-sidebar .cms-content-view > .field.datetime > .middleColumn > .date { + width: 60%; +} +/* line 87, ../scss/cms.scss */ +.blog-admin-sidebar .cms-content-view > .field.datetime > .middleColumn > .time { + width: 36%; + float: right; +} +/* line 92, ../scss/cms.scss */ +.blog-admin-sidebar .cms-content-view > .field.datetime > .middleColumn .middleColumn, .blog-admin-sidebar .cms-content-view > .field.datetime > .middleColumn input { + width: 100%; +} +/* line 101, ../scss/cms.scss */ +.blog-admin-sidebar.collapsed ~ .blog-admin-outer { + padding-right: 41px; +} +/* line 107, ../scss/cms.scss */ .blog-admin-sidebar.cms-content-tools .cms-panel-content { width: auto; } diff --git a/scss/cms.scss b/scss/cms.scss index f8e7f29..e22afe7 100755 --- a/scss/cms.scss +++ b/scss/cms.scss @@ -21,16 +21,86 @@ } .blog-admin-sidebar { - width: 280px !important; + width: 280px; border-right: none; border-left: 1px solid #C0C0C2; - height: 547px; - position: fixed; - right: 0; + position: absolute; + right: 0px; + bottom: 0px; + height: 100%; - ~ .ss-tabset { - width: 866px; - float:left; + .cms-panel-toggle a { + text-align: left; + } + + ~ .blog-admin-outer { + width: 100%; + padding-right: 280px; + position: absolute; + height: 100%; + overflow-y: hidden; + overflow-x: hidden; + box-sizing: border-box; + + > .ss-tabset { + position: relative; + overflow: auto; + height: 100%; + width: 100%; + + #Title { + label { + float: none; + } + .middleColumn, input { + width: 100%; + max-width:100%; + margin-left: 0; + } + } + } + } + + .cms-content-view { + > .field { + + .field { + margin-top: 10px; + } + + &.urlsegment { + .preview { + padding-top: 0; + line-height: 25px; + } + + .edit { + float: right; + } + } + + &.datetime { + > .middleColumn { + > .date { + width: 60%; + } + + > .time { + width: 36%; + float:right; + } + + .middleColumn, input { + width: 100%; + } + } + } + } + } + + &.collapsed { + ~ .blog-admin-outer { + padding-right: 41px; + } } &.cms-content-tools { diff --git a/templates/BlogAdminSidebar_holder.ss b/templates/BlogAdminSidebar_holder.ss index 54f2baf..b1dbf7b 100644 --- a/templates/BlogAdminSidebar_holder.ss +++ b/templates/BlogAdminSidebar_holder.ss @@ -1,4 +1,7 @@ -
+

$Title

diff --git a/templates/forms/TabSet_holder.ss b/templates/forms/TabSet_holder.ss new file mode 100644 index 0000000..85bc11c --- /dev/null +++ b/templates/forms/TabSet_holder.ss @@ -0,0 +1,4 @@ +
+ <%-- this resets ths template (from TabSet_holder) and renders using forTemplate --%> + $setTemplate('') +
\ No newline at end of file