Side-by-side preview options styling.

Thanks @adrexia for contributing.

admin/javascript/LeftAndMain.Content.js

@@ -89,7 +89,7 @@
 				if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
 
 				// Fix dimensions to actual extents, in preparation for a relayout via jslayout.
-				this.height('28px');
+				this.height('auto');
 				this.height(this.innerHeight()-this.css('padding-top')-this.css('padding-bottom'));
 			}
 		});

admin/javascript/LeftAndMain.Preview.js

@@ -213,6 +213,7 @@
 		});	
 
 
+
 		$('#cms-preview-mode-dropdown').entwine({
 			onchange: function(e) {
 				e.preventDefault();
@@ -225,28 +226,72 @@
 					content.addClass('is-collapsed');
 				}
 				content.parent().redraw();
+				this.addIcon(); //run generic addIcon, on select.preview-dropdown
 			}
 		});
 
 
-		// Preview selectors (screen size, screen mode)
-		$('.preview-selector .preview-selected').entwine({
-			onclick: function(e) {
-				e.preventDefault();
-				this.parents('.preview-selector').toggleClass('active');
+		/*
+		*	Add a class to the chzn select trigger based on the currently 
+		*	selected option. Update as this changes
+		*/
+		$('.preview-selector select.preview-dropdown').entwine({			
+			addIcon: function(){			
+				var selected = this.find(':selected');				
+				var iconClass = selected.attr('data-icon');	
+
+				var target = this.parent().find('.chzn-container a.chzn-single');
+				var oldIcon = target.attr('data-icon');
+				if(oldIcon != undefined){
+					target.removeClass(oldIcon);
+				}
+				target.addClass(iconClass);
+				target.attr('data-icon', iconClass);				
 			}
 		});
-		$(".preview-selector .preview-size-menu li").entwine({
-			onclick: function(e) {
-				var text = $(this).html();
-				this.parents('.preview-selector').removeClass('active').find('.preview-selected').html(text);
-				this.siblings().removeClass('active');
-				this.addClass('active');
-			}
-		}); 
 
+		/*
+		* When chzn initiated run select redraw
+		* Apply description text if applicable
+		*/
+		$('.preview-selector a.chzn-single').entwine({
+			onadd: function() {						
+				this.closest('.preview-selector').find('select').addIcon();				
+			},
+			onclick: function(){				
+				var parent = this.closest('.preview-selector');
+				if(parent.hasClass('open')){
+					parent.removeClass('open');
+				}else{
+					parent.addClass('open');
+				}				
+			}
+		});
 
-
+		/* 
+		* Means of having extra styled data in chzn 'preview-selector' selects 
+		* When chzn ul is ready, grab data-description from original select. 
+		* If it exists, append to option and add description class to list item
+		*/
+		$('.preview-selector .chzn-drop ul').entwine({
+			onmatch: function() {
+				this.redraw();
+			},
+			redraw: function(){
+				var that = this;
+				var options = this.closest('.preview-selector').find('select option');		
+
+				$.each(options, function(index, option){
+					var target = $(that).find("li:eq("+index+")");
+					var description = $(option).attr('data-description');								
+					if(description != undefined && !$(target).hasClass('description')){					
+						$(target).append('<span>' + description + '</span>');
+						$(target).addClass('description'); 
+					}
+				});
+
+			}
+		});	
 
 		$('.cms-edit-form').entwine({
 			/**
@@ -265,5 +310,21 @@
 			}
 		});
 
+
+		// Recalculate the preview space to allow for horizontal scrollbar and the preview actions panel
+		var toolbarSize = 53; 							// Height of the preview actions panel
+		$('.preview-scroll').entwine({
+			redraw: function() {
+				if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
+				var previewHeight = (this.height() - toolbarSize);
+				this.height(previewHeight);
+			}, 
+			onmatch: function() {
+				this.redraw();
+			}
+			// Todo: Need to recalculate on resize of browser
+
+		});
+
 	});
-}(jQuery));
+}(jQuery));

admin/scss/_ModelAdmin.scss

@@ -1,7 +1,7 @@
 .ModelAdmin .cms-content-fields {
 	overflow:hidden; //removes scrolling from filter panel
 	.cms-edit-form {
-		overflow-y:scroll; //adds scrolling only to the datagrid 
+		overflow-y:auto; //adds scrolling only to the datagrid 
 		overflow-x:hidden;
 	}
 	.cms-content-tools .cms-panel-content {

admin/scss/_forms.scss

@@ -165,6 +165,20 @@ form.stacked .field, .field.stacked {
 	}
 }
 
+form .fieldgroup {
+	border-bottom: 1px solid rgba(201, 205, 206, 0.8);
+    box-shadow: 0 1px 0 rgba(244, 245, 245, 0.8);
+    display: block;
+    margin: 0 0 8px;
+    padding: 0 0 7px;
+    .fieldgroup {
+    	border-bottom: none;
+    	box-shadow: none;
+    	padding-bottom: 0;
+    	margin-bottom: 0;
+    }
+}
+
 form.small .field, .field.small {
 	label {
 		&.left {
@@ -218,6 +232,7 @@ form.small .field, .field.small {
 
 	/* chzn override */
 	.chzn-container {
+		max-width: 416px;
 		.chzn-results {
 
 			li {
@@ -295,6 +310,10 @@ form.small .field, .field.small {
 	.Actions {
 		max-height: 28px;
 		overflow: auto;
+		padding: 8px 12px;
+	}
+	.south .Actions, .ui-tabs-panel .Actions,  .ui-tabs-panel iframe .Actions {
+		padding: 0;
 	}
 
 	input.loading, button.loading,
@@ -485,30 +504,44 @@ form.small .field, .field.small {
 }
 
 .ss-toggle {
-	margin-bottom: $grid-y;
+	margin: $grid-y 0;
 
 	.ui-accordion-header {
 		font-weight: bold;
+		font-size: 12px;
 
 		&.ui-state-default {
 			@include background-image(
 				linear-gradient(lighten($color-shadow-light, 15%), $color-shadow-light)
 			);
 			text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
 		}
+		.ui-accordion-header-icon {
+			margin-top: -9px;
+		}
 	}
 
 	.ui-accordion-content {
-		padding: $grid-y*2 0 $grid-y 0;
+		padding: $grid-y 0 $grid-y*1.5;
 
 		.field {
 			@include box-shadow(none);
-			padding-left: $grid-x*2;
-			padding-right: $grid-x*2;
+			padding-left: $grid-x*1.5;
+			padding-right: $grid-x*1.5;
 
 			&:last-child {
 				margin-bottom: 0;
 			}
+			.middleColumn {
+				margin-left: 0;
+			}
+			label {
+				float: none;
+				margin-left: 0;
+			}
+			.help {
+				margin-left: 0;
+			}
 		}
 	}
 }
@@ -547,12 +580,14 @@ input.radio {
  * ---------------------------------------------------- */
 .optionset {
 	padding-bottom: 8px;
+	padding-top: 8px;
 
 	li {
 		float: left;
 		display: block;
 		width: $grid-x * 27;
 		padding-bottom: $grid-x;
+		padding-top: 0;
 		line-height: $grid-y * 2;
 		list-style: none;
 
@@ -569,6 +604,9 @@ input.radio {
 		}
 
 	}
+	&.field {
+		padding-top: 0;
+	}
 
 }
 
@@ -599,6 +637,96 @@ input.radio {
 }
 
 
+/***************************************************************
+* On/Off Switch. 
+* Supports switching between two values (eg Draft/Published)
+* Example html set-up:
+* <div class="switch-states">
+*	    <input type="checkbox" class="state" id="switch" checked>
+*	    <label for="switch">
+*		    <span class="switch-options">*		    	   	
+*		    	<a href="" class="first active">On</a>
+*				<a href="" class="last">Off</a>				
+*		    </span>
+*		    <span class="switch"></span>
+*	    </label>
+*</div> 
+****************************************************************/
+.switch-states {
+	label { /* Single label includes both switch options*/
+    	display: block; 
+    	overflow: hidden; 
+    	cursor: pointer;
+    	@include border-radius(3px);
+	}
+	input:checked + label { 
+		.switch-options {
+	    	margin-left: 0;
+	    }
+	    .switch {
+	    	right: 0px;
+	    }
+	}
+	input.state{ /* Hidden checkbox records the state of the switch */
+		display:none;
+	}	
+	.switch-options{ /* span wrapping both switch options */
+		display:block;
+		width: 200%; 
+		margin-left: -100%;
+		@include transition(margin 0.3s ease-in 0s);
+	    a {			    
+			text-align: right;
+	    	width: 50%; 
+	    	float: left; 
+	    	display: block;
+	    	padding: 0 8px 0 0; 
+	    	height: 24px; 
+		    line-height: 24px;
+		    color: #FFF;
+		    background-color: #93BE42;
+	    	@include background-image(linear-gradient(
+				#2b9c32,
+				#64ab36
+			));
+
+			@include box-shadow(darken($color-menu-button, 15%) 0 0 2px inset);
+	    	@include box-sizing(border-box);   
+			&:hover {
+				text-decoration: none;
+			}
+			&.first {
+		    	text-align: left;
+		    	padding-left: 8px;
+		    	padding-right: 0;
+		    	background-color: $color-menu-button; 
+			    @include background-image(linear-gradient(
+					darken($color-menu-button, 10%),
+					$color-menu-button 
+				));
+	    	}
+
+		}
+	}
+	.switch { /* Divider, styled to look like a switch */
+		display:block;
+	    width: 8px; 
+	    margin: 0px;
+	    position: absolute; 
+	    top: 0; 
+	    bottom: 0; 
+	    right: 90px;
+	    border: 1px solid lighten($color-medium-separator,10%); 
+	    @include box-shadow(#FFF 0 0 2px inset);
+	    @include border-radius(3px);
+	    background: $color-widget-bg;
+	    @include background-image(linear-gradient(
+			rgba(0,0,0,0.2) 0%,
+			rgba(0,0,0,0) 100%
+		));
+		@include transition(all 0.3s ease-in 0s); 
+	}
+}