Merge pull request silverstripe#79 from adrexia/ui

Style site selector dropdown
antons- · May 2, 2013 · 36f9547 · 36f9547
2 parents ffaaed0 + 1a8122e
commit 36f9547
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 14 deletions.
diff --git a/code/extensions/LeftAndMainSubsites.php b/code/extensions/LeftAndMainSubsites.php
@@ -85,29 +85,31 @@ public function SubsiteList() {
 		$currentSubsiteID = Subsite::currentSubsiteID();
 
 		if($list->Count() > 1) {
-			$output = '<select id="SubsitesSelect">';
+			$output = '<div class="field dropdown">';
+			$output .= '<select id="SubsitesSelect">';
 
 			foreach($list as $subsite) {
 				$selected = $subsite->ID == $currentSubsiteID ? ' selected="selected"' : '';
 
 				$output .= "\n<option value=\"{$subsite->ID}\"$selected>". Convert::raw2xml($subsite->Title) . "</option>";
 			}
 
-			$output .= '</select>';
+			$output .= '</select></div>';
 
 			Requirements::javascript('subsites/javascript/LeftAndMain_Subsites.js');
 			return $output;
 		} else if($list->Count() == 1) {
 			if($list->First()->DefaultSite==false) {
-				$output = '<select id="SubsitesSelect">';
+				$output = '<div class="field dropdown">';
+				$output .= '<select id="SubsitesSelect">';
 				$output .= "\n<option value=\"0\">". _t('LeftAndMainSubsites.DEFAULT_SITE', '_Default Site') . "</option>";
 				foreach($list as $subsite) {
 					$selected = $subsite->ID == $currentSubsiteID ? ' selected="selected"' : '';
 
 					$output .= "\n<option value=\"{$subsite->ID}\"$selected>". Convert::raw2xml($subsite->Title) . "</option>";
 		}
 
-				$output .= '</select>';
+				$output .= '</select></div>';
 
 				Requirements::javascript('subsites/javascript/LeftAndMain_Subsites.js');
 				return $output;

diff --git a/css/LeftAndMain_Subsites.css b/css/LeftAndMain_Subsites.css
@@ -24,18 +24,38 @@
 			padding: 3px;
 		}
 
-.cms-login-status.subsites {
-	padding-bottom: 7px;
+.cms-menu .cms-subsites{
+	padding:3px 0px 15px;
+}
+.cms-menu .cms-subsites .field.dropdown{
+	padding-bottom:0;
+	margin-bottom:0;
 }
 
-#SubsitesSelect,
-#SubsitesSelect option {
-	font-size: 12px;
+/* Custom chzn styles for dark blue background */
+.cms-subsites .chzn-container-single .chzn-single,
+.cms-subsites .chzn-container-active .chzn-single {
+	border: 1px solid #152338;
+	background:#213557;
+	-webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+	box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
 }
-	#SubsitesSelect {
-		width: 145px;
-		padding: 3px;
-	}
+.cms-menu .cms-subsites .dropdown span{
+	padding-left:5px;
+}
+.cms-subsites .chzn-container-single .chzn-single div b{
+	background: url(../images/chosen-sprite-light.png) 3px 0 no-repeat;
+}
+.cms-subsites .chzn-container .chzn-drop{
+	padding-left:5px;
+	background:#213557;
+	border: 1px solid #152338;
+	border-top:0;
+	color:#fff;
+	-webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,.125);
+	box-shadow: inset 1px 0 0 rgba(255,255,255,.125);
+}
+
 
 #AddSubsiteLink {
 	display: block;

diff --git a/images/chosen-sprite-light.png b/images/chosen-sprite-light.png
diff --git a/templates/LeftAndMain_Menu.ss b/templates/LeftAndMain_Menu.ss
@@ -19,7 +19,7 @@
 			<% end_with %>
 		</div>
 
-		<div class="cms-login-status subsites">
+		<div class="cms-subsites">
 			$SubsiteList
 		</div>
 	</div>