Organization improvements to the default admin theme CSS & JS files.

ryancramerdesign · May 5, 2012 · 13c1904 · 13c1904
1 parent ba6218c
commit 13c1904
Show file tree

Hide file tree

Showing 8 changed files with 237 additions and 208 deletions.
diff --git a/wire/modules/Inputfield/InputfieldCheckboxes/InputfieldCheckboxes.css b/wire/modules/Inputfield/InputfieldCheckboxes/InputfieldCheckboxes.css
@@ -5,7 +5,12 @@
 .InputfieldCheckboxesColumns {
 	width: 100%; 
 }
-.InputfieldCheckboxesColumns li {
+
+.Inputfields .InputfieldCheckboxes ul li {
+	list-style: none; 
+}
+
+.Inputfields .InputfieldCheckboxesColumns li {
 	display: block;
 	float: left; 
 	padding-right: 1%; 

diff --git a/wire/templates-admin/default.php b/wire/templates-admin/default.php
@@ -12,9 +12,11 @@
 $bodyClass = $input->get->modal ? 'modal' : '';
 if(!isset($content)) $content = '';
 
-$config->styles->prepend($config->urls->adminTemplates . "styles/main.css"); 
-$config->styles->append($config->urls->adminTemplates . "styles/ui.css?v=1"); 
-$config->scripts->append($config->urls->adminTemplates . "scripts/main.js"); 
+$config->styles->prepend($config->urls->adminTemplates . "styles/main.css?v=2"); 
+$config->styles->append($config->urls->adminTemplates . "styles/inputfields.css"); 
+$config->styles->append($config->urls->adminTemplates . "styles/ui.css?v=2"); 
+$config->scripts->append($config->urls->adminTemplates . "scripts/inputfields.js"); 
+$config->scripts->append($config->urls->adminTemplates . "scripts/main.js?v=2"); 
 
 $browserTitle = wire('processBrowserTitle'); 
 if(!$browserTitle) $browserTitle = __(strip_tags($page->get('title|name')), __FILE__) . ' &bull; ProcessWire';

diff --git a/wire/templates-admin/install-head.inc b/wire/templates-admin/install-head.inc
@@ -13,6 +13,7 @@ if(!isset($bgTitle)) $bgTitle = "Installer";
 
 	<link rel="stylesheet" type="text/css" href="wire/templates-admin/styles/main.css" />
 	<link rel="stylesheet" type="text/css" href="wire/templates-admin/styles/ui.css" />
+	<link rel="stylesheet" type="text/css" href="wire/templates-admin/styles/inputfields.css" />
 	<link rel="stylesheet" type="text/css" href="wire/templates-admin/styles/install.css" />
 
 	<script type="text/javascript" src="wire/modules/Jquery/JqueryCore/JqueryCore.js"></script>

diff --git a/wire/templates-admin/scripts/inputfields.js b/wire/templates-admin/scripts/inputfields.js
@@ -0,0 +1,23 @@
+/**
+ * JS specific to behavior of ProcessWire inputfields
+ *
+ */
+
+$(document).ready(function() {
+
+	// setup the toggles for Inputfields and the animations that occur between opening and closing
+	$(".Inputfields > li > label.ui-widget-header").addClass("InputfieldStateToggle")
+		.prepend("<span class='ui-icon ui-icon-triangle-1-s'></span>")
+		.click(function() {
+			var $li = $(this).parent('li'); 	
+			$li.toggleClass('InputfieldStateCollapsed', 100);
+			$(this).children('span.ui-icon').toggleClass('ui-icon-triangle-1-e ui-icon-triangle-1-s'); 
+			$li.children('.ui-widget-header').effect('highlight', {}, 300); 
+			return false;
+		})
+
+	// use different icon for open and closed
+	$(".Inputfields .InputfieldStateCollapsed > label.ui-widget-header span.ui-icon")
+		.removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e'); 
+
+}); 
diff --git a/wire/templates-admin/scripts/main.js b/wire/templates-admin/scripts/main.js
@@ -1,21 +1,5 @@
 $(document).ready(function() {
 
-	// setup the toggles for Inputfields and the animations that occur between opening and closing
-	$(".Inputfields > li > label.ui-widget-header").addClass("InputfieldStateToggle")
-		.prepend("<span class='ui-icon ui-icon-triangle-1-s'></span>")
-		.click(function() {
-			var $li = $(this).parent('li'); 	
-			$li.toggleClass('InputfieldStateCollapsed', 100);
-			$(this).children('span.ui-icon').toggleClass('ui-icon-triangle-1-e ui-icon-triangle-1-s'); 
-			$li.children('.ui-widget-header').effect('highlight', {}, 300); 
-			return false;
-		})
-
-	// use different icon for open and closed
-	$(".Inputfields .InputfieldStateCollapsed > label.ui-widget-header span.ui-icon")
-		.removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e'); 
-
-
 	// if there are buttons in the format "a button" without ID attributes, copy them into the masthead
 	// or buttons in the format button.head_button_clone with an ID attribute.
 	var $buttons = $("#content a[id=] button[id=], #content button.head_button_clone[id!=]"); 

diff --git a/wire/templates-admin/styles/inputfields.css b/wire/templates-admin/styles/inputfields.css
@@ -0,0 +1,183 @@
+/**********************************************************************************************
+ * ProcessWire Admin Control Panel - Skyscraper Theme - inputfields.css
+ *
+ * This file provides common styling for ProcessWire inputfields. All other Inputfield styles
+ * are provided by the Inputfield modules themselves.
+ *
+ * Copyright 2012 by Ryan Cramer
+ *
+ */
+
+.InputfieldForm ul.Inputfields,
+.InputfieldForm ul.Inputfields > li {
+	list-style: none; 
+	margin: 1em 0;
+	padding: 0;
+}
+	.InputfieldForm ul.Inputfields ul.Inputfields {
+		margin-top: 0;
+	}
+
+.Inputfields,
+.Inputfields li,
+.Inputfields input,
+.Inputfields select,
+.Inputfields textarea,
+.Inputfields table {
+	font-size: 12px; 
+}
+
+.Inputfields > li > div.ui-widget-content {
+	padding: 1em; 
+}
+
+.Inputfields .ui-widget-header {
+	padding: 0.25em 0 0.25em 1em; 
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-o-user-select: none;
+	user-select: none;
+}
+
+	.Inputfields .InputfieldStateToggle span.ui-icon {
+		float: right; 
+		padding-right: 0.25em; 
+	}
+
+.Inputfields label {
+	display: block;
+}
+
+.Inputfields > li {
+	display: block;
+	margin: 1em 0;
+	clear: both; 
+}
+
+.InputfieldForm .Inputfields > li.InputfieldColumnWidth {
+	float: left; 
+	clear: none; 
+	margin-top: 0; 
+	margin-left: 1%; 
+}
+	.InputfieldForm .Inputfields li.InputfieldColumnWidthFirst {
+		clear: both; 
+		margin-left: 0; 
+	}
+
+.InputfieldForm .Inputfields > li > .ui-widget-content > ul:first-child,
+.InputfieldForm .Inputfields > li:first-child {
+	margin-top: 0;
+}
+
+.Inputfields > li > .ui-widget-content *:last-child {
+	margin-bottom: 0;
+}
+	.Inputfields > li > .ui-widget-content ul.ui-helper-clearfix:last-child {
+		margin-bottom: -1em; 
+	}
+
+.Inputfields > li > .ui-widget-content > p,
+.Inputfields > li > .ui-widget-content > div > p {
+	margin-top: 0; 
+}
+	.Inputfields > li > .ui-widget-content > p:last-child {
+		margin-bottom: 0; 
+	}
+
+.Inputfields > li > .ui-widget-content > .Inputfields > li {
+	margin-top: 0; 
+}
+	.Inputfields > li > .ui-widget-content > .Inputfields > li:first-child {
+		margin-top: 0; 
+	}
+	.Inputfields li > .ui-widget-content > .Inputfields > li:last-child {
+		margin-bottom: 0;
+	}
+
+.Inputfields > li .notes {
+	margin-bottom: 0; 
+}
+	.Inputfields > li > .ui-widget-content input + p.notes {
+		margin-top: 1em; 
+	}
+
+.Inputfields .InputfieldHidden {
+	display: none; 
+}
+
+.Inputfields .InputfieldSubmit,
+.Inputfields .InputfieldButton {
+	clear: none; 
+}
+	.Inputfields .InputfieldSubmit .ui-widget-content,
+	.Inputfields .InputfieldButton .ui-widget-content {
+		padding: 0; 
+		background: none; 
+		border: none; 
+	}
+
+	.Inputfields .InputfieldSubmit .ui-widget-header,
+	.Inputfields .InputfieldButton .ui-widget-header {
+		display: none; 
+	}
+
+
+.Inputfields .InputfieldCheckboxes ul li,
+.Inputfields .InputfieldRadios ul li {
+	list-style: none; 
+}
+
+	.Inputfields .InputfieldCheckboxes input,
+	.Inputfields .InputfieldRadios input {
+		margin-right: 0.25em; 
+	}
+		.Inputfields .InputfieldCheckboxes li,
+		.Inputfields .InputfieldRadios li {
+			margin: 0; 
+		}
+
+.Inputfields .InputfieldCheckbox {
+}
+	.Inputfields .InputfieldCheckbox .notes,
+	.Inputfields .InputfieldCheckboxes .notes,
+	.Inputfields .InputfieldRadios .notes {
+		margin-top: 1em; 
+	}
+
+
+.Inputfields textarea, 
+.InputfieldMaxWidth {
+	width: 99%; 
+}
+	.Inputfields textarea {
+		display: block;
+	}
+
+.Inputfields .InputfieldStateToggle {
+	cursor: pointer;
+}
+
+	.Inputfields > .InputfieldStateCollapsed {
+	}
+
+		.Inputfields > .InputfieldStateCollapsed .ui-widget-header {
+			opacity: 0.6; 
+		}
+		.Inputfields > .InputfieldStateCollapsed .ui-widget-header:hover {
+			opacity: 1.0; 
+		}
+
+		.Inputfields > .InputfieldStateCollapsed .ui-widget-content {
+			display: none;
+		}
+
+.InputfieldPageNameURL {
+	font-family: Monaco, Courier, Monaco, monospace; 
+}
+
+.InputfieldForm ul.Inputfields li.InputfieldStateError {
+	border: none; 
+}
+
diff --git a/wire/templates-admin/styles/main.css b/wire/templates-admin/styles/main.css
@@ -11,7 +11,6 @@
  *
  */
 
-
 /***********************************************************************************************
  * GENERAL
  *