Permalink
Browse files

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

  • Loading branch information...
1 parent ba6218c commit 13c19042cf5cdb9af691044d5532fac5885dead6 @ryancramerdesign committed May 5, 2012
View
7 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%;
View
8 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__) . ' • ProcessWire';
View
1 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>
View
23 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');
+
+});
View
16 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!=]");
View
183 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;
+}
+
View
1 wire/templates-admin/styles/main.css
@@ -11,7 +11,6 @@
*
*/
-
/***********************************************************************************************
* GENERAL
*
View
206 wire/templates-admin/styles/ui.css
@@ -1,18 +1,16 @@
-
/**********************************************************************************************
* ProcessWire Admin Control Panel - Skyscraper Theme - ui.css
*
- * This file provides the final layout styling and overdies for the admin control panel.
- * This is typically the last CSS file loaded, so it is used for overriding any default
- * styles provided by ProcessWire modules.
+ * 1. jQuery UI overrides.
+ * 2. Theming of specific user interface elements (MarkupPagerNav and PageList)
*
- * Copyright 2010 by Ryan Cramer
+ * Copyright 2012 by Ryan Cramer
*
*/
/****************************************************************************************
- * Theme specific jQuery UI overrides and additions
+ * 1. Theme specific jQuery UI overrides and additions
*
*/
@@ -48,197 +46,31 @@
background: #000;
}
-
-/****************************************************************************************
- * Theme specific Inputfield module overrides
- *
- */
-
-.Inputfields {
+.ui-button {
+ font-size: 1em;
+ margin: 0 1em 0 0;
+ padding: 3px 9px;
+ cursor: pointer;
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
- .Inputfields,
- .Inputfields li,
- .Inputfields input,
- .Inputfields select,
- .Inputfields textarea {
- 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;
+ p > a > .ui-button {
+ font-size: 0.923076923076923em;
}
- .Inputfields .InputfieldStateToggle span.ui-icon {
- float: right;
- padding-right: 0.25em;
- }
-
- .Inputfields > li {
+ a .ui-button {
display: block;
- margin: 1em 0;
- clear: both;
- }
-
- .Inputfields > li.InputfieldColumnWidth {
- float: left;
- clear: none;
- margin-top: 0;
- margin-left: 1%;
- }
- .Inputfields li.InputfieldColumnWidthFirst {
- clear: both;
- margin-left: 0;
- }
-
- .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 {
+button.ui-datepicker-trigger {
+ margin: 0 0 0 0.5em;
+}
+ #ui-datepicker-div {
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;
- }
-
- .ui-button {
- font-size: 1em;
- margin: 0 1em 0 0;
- padding: 3px 9px;
- cursor: pointer;
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
- }
-
- p > a > .ui-button {
- font-size: 0.923076923076923em;
- }
-
- a .ui-button {
- display: block;
- }
-
- button.ui-datepicker-trigger {
- margin: 0 0 0 0.5em;
- }
- #ui-datepicker-div {
- display: 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 label {
- display: block;
- }
-
- .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;
- }
-
- .Inputfields > .InputfieldStateCollapsed .InputfieldStateToggle {
- }
-
- .InputfieldPageNameURL {
- font-family: Monaco, Courier, Monaco, monospace;
- }
-
-
/***********************************************************************************************
- * Theme Specific Pagination Markup
+ * 2a. Theme Specific Pagination Markup
*
*/
@@ -286,7 +118,7 @@
/****************************************************************************************
- * Theme specific PageList overrides
+ * 2b. Theme specific PageList overrides
*
*/

0 comments on commit 13c1904

Please sign in to comment.