Added more styling to blog post admin

This commit is contained in:
micmania1 2015-02-02 10:32:40 +00:00
parent f6c35d67e6
commit 9b2dcc295f
6 changed files with 176 additions and 23 deletions

View File

@ -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;
}
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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 {

View File

@ -1,4 +1,7 @@
<div class="cms-content-tools west cms-panel cms-panel-layout blog-admin-sidebar" data-expandOnClick="true" data-layout-type="border" id="blog-admin-sidebar">
<div class="cms-content-tools east cms-panel cms-panel-layout blog-admin-sidebar<% if $isOpen %> open<% end_if %>"
data-expandOnClick="true"
data-layout-type="border"
id="blog-admin-sidebar">
<div class="cms-panel-content center">
<div class="cms-content-view cms-tree-view-sidebar" id="blog-admin-content">
<h3 class="cms-panel-header">$Title</h3>

View File

@ -0,0 +1,4 @@
<div class="blog-admin-outer">
<%-- this resets ths template (from TabSet_holder) and renders using forTemplate --%>
$setTemplate('')
</div>