Added more styling to blog post admin

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

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.
+			// We're going to hide MenuTitle - Its not needed in blog posts.
-			$menuTitle = $fields->dataFieldByName('MenuTitle');
+			$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;
 	}
 

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: absolute;
-  position: fixed;
+  right: 0px;
-  right: 0;
+  bottom: 0px;
+  height: 100%;
 }
-/* line 31, ../scss/cms.scss */
+/* line 32, ../scss/cms.scss */
-.blog-admin-sidebar ~ .ss-tabset {
+.blog-admin-sidebar .cms-panel-toggle a {
-  width: 866px;
+  text-align: left;
-  float: 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;
 }

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: absolute;
-	position: fixed;
+	right: 0px;
-	right: 0;
+	bottom: 0px;
+	height: 100%;
 
-	~ .ss-tabset {
+	.cms-panel-toggle a {
-		width: 866px;
+		text-align: left;
-		float: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 {

templates/BlogAdminSidebar_holder.ss

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

templates/forms/TabSet_holder.ss

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