Skip to content
This repository
Browse code

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

  • Loading branch information...
commit 13c19042cf5cdb9af691044d5532fac5885dead6 1 parent ba6218c
Ryan Cramer authored
7 wire/modules/Inputfield/InputfieldCheckboxes/InputfieldCheckboxes.css
@@ -5,7 +5,12 @@
5 5 .InputfieldCheckboxesColumns {
6 6 width: 100%;
7 7 }
8   -.InputfieldCheckboxesColumns li {
  8 +
  9 +.Inputfields .InputfieldCheckboxes ul li {
  10 + list-style: none;
  11 +}
  12 +
  13 +.Inputfields .InputfieldCheckboxesColumns li {
9 14 display: block;
10 15 float: left;
11 16 padding-right: 1%;
8 wire/templates-admin/default.php
@@ -12,9 +12,11 @@
12 12 $bodyClass = $input->get->modal ? 'modal' : '';
13 13 if(!isset($content)) $content = '';
14 14
15   -$config->styles->prepend($config->urls->adminTemplates . "styles/main.css");
16   -$config->styles->append($config->urls->adminTemplates . "styles/ui.css?v=1");
17   -$config->scripts->append($config->urls->adminTemplates . "scripts/main.js");
  15 +$config->styles->prepend($config->urls->adminTemplates . "styles/main.css?v=2");
  16 +$config->styles->append($config->urls->adminTemplates . "styles/inputfields.css");
  17 +$config->styles->append($config->urls->adminTemplates . "styles/ui.css?v=2");
  18 +$config->scripts->append($config->urls->adminTemplates . "scripts/inputfields.js");
  19 +$config->scripts->append($config->urls->adminTemplates . "scripts/main.js?v=2");
18 20
19 21 $browserTitle = wire('processBrowserTitle');
20 22 if(!$browserTitle) $browserTitle = __(strip_tags($page->get('title|name')), __FILE__) . ' • ProcessWire';
1  wire/templates-admin/install-head.inc
@@ -13,6 +13,7 @@ if(!isset($bgTitle)) $bgTitle = "Installer";
13 13
14 14 <link rel="stylesheet" type="text/css" href="wire/templates-admin/styles/main.css" />
15 15 <link rel="stylesheet" type="text/css" href="wire/templates-admin/styles/ui.css" />
  16 + <link rel="stylesheet" type="text/css" href="wire/templates-admin/styles/inputfields.css" />
16 17 <link rel="stylesheet" type="text/css" href="wire/templates-admin/styles/install.css" />
17 18
18 19 <script type="text/javascript" src="wire/modules/Jquery/JqueryCore/JqueryCore.js"></script>
23 wire/templates-admin/scripts/inputfields.js
... ... @@ -0,0 +1,23 @@
  1 +/**
  2 + * JS specific to behavior of ProcessWire inputfields
  3 + *
  4 + */
  5 +
  6 +$(document).ready(function() {
  7 +
  8 + // setup the toggles for Inputfields and the animations that occur between opening and closing
  9 + $(".Inputfields > li > label.ui-widget-header").addClass("InputfieldStateToggle")
  10 + .prepend("<span class='ui-icon ui-icon-triangle-1-s'></span>")
  11 + .click(function() {
  12 + var $li = $(this).parent('li');
  13 + $li.toggleClass('InputfieldStateCollapsed', 100);
  14 + $(this).children('span.ui-icon').toggleClass('ui-icon-triangle-1-e ui-icon-triangle-1-s');
  15 + $li.children('.ui-widget-header').effect('highlight', {}, 300);
  16 + return false;
  17 + })
  18 +
  19 + // use different icon for open and closed
  20 + $(".Inputfields .InputfieldStateCollapsed > label.ui-widget-header span.ui-icon")
  21 + .removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
  22 +
  23 +});
16 wire/templates-admin/scripts/main.js
... ... @@ -1,21 +1,5 @@
1 1 $(document).ready(function() {
2 2
3   - // setup the toggles for Inputfields and the animations that occur between opening and closing
4   - $(".Inputfields > li > label.ui-widget-header").addClass("InputfieldStateToggle")
5   - .prepend("<span class='ui-icon ui-icon-triangle-1-s'></span>")
6   - .click(function() {
7   - var $li = $(this).parent('li');
8   - $li.toggleClass('InputfieldStateCollapsed', 100);
9   - $(this).children('span.ui-icon').toggleClass('ui-icon-triangle-1-e ui-icon-triangle-1-s');
10   - $li.children('.ui-widget-header').effect('highlight', {}, 300);
11   - return false;
12   - })
13   -
14   - // use different icon for open and closed
15   - $(".Inputfields .InputfieldStateCollapsed > label.ui-widget-header span.ui-icon")
16   - .removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
17   -
18   -
19 3 // if there are buttons in the format "a button" without ID attributes, copy them into the masthead
20 4 // or buttons in the format button.head_button_clone with an ID attribute.
21 5 var $buttons = $("#content a[id=] button[id=], #content button.head_button_clone[id!=]");
183 wire/templates-admin/styles/inputfields.css
... ... @@ -0,0 +1,183 @@
  1 +/**********************************************************************************************
  2 + * ProcessWire Admin Control Panel - Skyscraper Theme - inputfields.css
  3 + *
  4 + * This file provides common styling for ProcessWire inputfields. All other Inputfield styles
  5 + * are provided by the Inputfield modules themselves.
  6 + *
  7 + * Copyright 2012 by Ryan Cramer
  8 + *
  9 + */
  10 +
  11 +.InputfieldForm ul.Inputfields,
  12 +.InputfieldForm ul.Inputfields > li {
  13 + list-style: none;
  14 + margin: 1em 0;
  15 + padding: 0;
  16 +}
  17 + .InputfieldForm ul.Inputfields ul.Inputfields {
  18 + margin-top: 0;
  19 + }
  20 +
  21 +.Inputfields,
  22 +.Inputfields li,
  23 +.Inputfields input,
  24 +.Inputfields select,
  25 +.Inputfields textarea,
  26 +.Inputfields table {
  27 + font-size: 12px;
  28 +}
  29 +
  30 +.Inputfields > li > div.ui-widget-content {
  31 + padding: 1em;
  32 +}
  33 +
  34 +.Inputfields .ui-widget-header {
  35 + padding: 0.25em 0 0.25em 1em;
  36 + -webkit-user-select: none;
  37 + -khtml-user-select: none;
  38 + -moz-user-select: none;
  39 + -o-user-select: none;
  40 + user-select: none;
  41 +}
  42 +
  43 + .Inputfields .InputfieldStateToggle span.ui-icon {
  44 + float: right;
  45 + padding-right: 0.25em;
  46 + }
  47 +
  48 +.Inputfields label {
  49 + display: block;
  50 +}
  51 +
  52 +.Inputfields > li {
  53 + display: block;
  54 + margin: 1em 0;
  55 + clear: both;
  56 +}
  57 +
  58 +.InputfieldForm .Inputfields > li.InputfieldColumnWidth {
  59 + float: left;
  60 + clear: none;
  61 + margin-top: 0;
  62 + margin-left: 1%;
  63 +}
  64 + .InputfieldForm .Inputfields li.InputfieldColumnWidthFirst {
  65 + clear: both;
  66 + margin-left: 0;
  67 + }
  68 +
  69 +.InputfieldForm .Inputfields > li > .ui-widget-content > ul:first-child,
  70 +.InputfieldForm .Inputfields > li:first-child {
  71 + margin-top: 0;
  72 +}
  73 +
  74 +.Inputfields > li > .ui-widget-content *:last-child {
  75 + margin-bottom: 0;
  76 +}
  77 + .Inputfields > li > .ui-widget-content ul.ui-helper-clearfix:last-child {
  78 + margin-bottom: -1em;
  79 + }
  80 +
  81 +.Inputfields > li > .ui-widget-content > p,
  82 +.Inputfields > li > .ui-widget-content > div > p {
  83 + margin-top: 0;
  84 +}
  85 + .Inputfields > li > .ui-widget-content > p:last-child {
  86 + margin-bottom: 0;
  87 + }
  88 +
  89 +.Inputfields > li > .ui-widget-content > .Inputfields > li {
  90 + margin-top: 0;
  91 +}
  92 + .Inputfields > li > .ui-widget-content > .Inputfields > li:first-child {
  93 + margin-top: 0;
  94 + }
  95 + .Inputfields li > .ui-widget-content > .Inputfields > li:last-child {
  96 + margin-bottom: 0;
  97 + }
  98 +
  99 +.Inputfields > li .notes {
  100 + margin-bottom: 0;
  101 +}
  102 + .Inputfields > li > .ui-widget-content input + p.notes {
  103 + margin-top: 1em;
  104 + }
  105 +
  106 +.Inputfields .InputfieldHidden {
  107 + display: none;
  108 +}
  109 +
  110 +.Inputfields .InputfieldSubmit,
  111 +.Inputfields .InputfieldButton {
  112 + clear: none;
  113 +}
  114 + .Inputfields .InputfieldSubmit .ui-widget-content,
  115 + .Inputfields .InputfieldButton .ui-widget-content {
  116 + padding: 0;
  117 + background: none;
  118 + border: none;
  119 + }
  120 +
  121 + .Inputfields .InputfieldSubmit .ui-widget-header,
  122 + .Inputfields .InputfieldButton .ui-widget-header {
  123 + display: none;
  124 + }
  125 +
  126 +
  127 +.Inputfields .InputfieldCheckboxes ul li,
  128 +.Inputfields .InputfieldRadios ul li {
  129 + list-style: none;
  130 +}
  131 +
  132 + .Inputfields .InputfieldCheckboxes input,
  133 + .Inputfields .InputfieldRadios input {
  134 + margin-right: 0.25em;
  135 + }
  136 + .Inputfields .InputfieldCheckboxes li,
  137 + .Inputfields .InputfieldRadios li {
  138 + margin: 0;
  139 + }
  140 +
  141 +.Inputfields .InputfieldCheckbox {
  142 +}
  143 + .Inputfields .InputfieldCheckbox .notes,
  144 + .Inputfields .InputfieldCheckboxes .notes,
  145 + .Inputfields .InputfieldRadios .notes {
  146 + margin-top: 1em;
  147 + }
  148 +
  149 +
  150 +.Inputfields textarea,
  151 +.InputfieldMaxWidth {
  152 + width: 99%;
  153 +}
  154 + .Inputfields textarea {
  155 + display: block;
  156 + }
  157 +
  158 +.Inputfields .InputfieldStateToggle {
  159 + cursor: pointer;
  160 +}
  161 +
  162 + .Inputfields > .InputfieldStateCollapsed {
  163 + }
  164 +
  165 + .Inputfields > .InputfieldStateCollapsed .ui-widget-header {
  166 + opacity: 0.6;
  167 + }
  168 + .Inputfields > .InputfieldStateCollapsed .ui-widget-header:hover {
  169 + opacity: 1.0;
  170 + }
  171 +
  172 + .Inputfields > .InputfieldStateCollapsed .ui-widget-content {
  173 + display: none;
  174 + }
  175 +
  176 +.InputfieldPageNameURL {
  177 + font-family: Monaco, Courier, Monaco, monospace;
  178 +}
  179 +
  180 +.InputfieldForm ul.Inputfields li.InputfieldStateError {
  181 + border: none;
  182 +}
  183 +
1  wire/templates-admin/styles/main.css
@@ -11,7 +11,6 @@
11 11 *
12 12 */
13 13
14   -
15 14 /***********************************************************************************************
16 15 * GENERAL
17 16 *
206 wire/templates-admin/styles/ui.css
... ... @@ -1,18 +1,16 @@
1   -
2 1 /**********************************************************************************************
3 2 * ProcessWire Admin Control Panel - Skyscraper Theme - ui.css
4 3 *
5   - * This file provides the final layout styling and overdies for the admin control panel.
6   - * This is typically the last CSS file loaded, so it is used for overriding any default
7   - * styles provided by ProcessWire modules.
  4 + * 1. jQuery UI overrides.
  5 + * 2. Theming of specific user interface elements (MarkupPagerNav and PageList)
8 6 *
9   - * Copyright 2010 by Ryan Cramer
  7 + * Copyright 2012 by Ryan Cramer
10 8 *
11 9 */
12 10
13 11
14 12 /****************************************************************************************
15   - * Theme specific jQuery UI overrides and additions
  13 + * 1. Theme specific jQuery UI overrides and additions
16 14 *
17 15 */
18 16
@@ -48,197 +46,31 @@
48 46 background: #000;
49 47 }
50 48
51   -
52   -/****************************************************************************************
53   - * Theme specific Inputfield module overrides
54   - *
55   - */
56   -
57   -.Inputfields {
  49 +.ui-button {
  50 + font-size: 1em;
  51 + margin: 0 1em 0 0;
  52 + padding: 3px 9px;
  53 + cursor: pointer;
  54 + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
58 55 }
59 56
60   - .Inputfields,
61   - .Inputfields li,
62   - .Inputfields input,
63   - .Inputfields select,
64   - .Inputfields textarea {
65   - font-size: 12px;
66   - }
67   -
68   - .Inputfields > li > div.ui-widget-content {
69   - padding: 1em;
70   - }
71   -
72   - .Inputfields .ui-widget-header {
73   - padding: 0.25em 0 0.25em 1em;
74   - -webkit-user-select: none;
75   - -khtml-user-select: none;
76   - -moz-user-select: none;
77   - -o-user-select: none;
78   - user-select: none;
  57 + p > a > .ui-button {
  58 + font-size: 0.923076923076923em;
79 59 }
80 60
81   - .Inputfields .InputfieldStateToggle span.ui-icon {
82   - float: right;
83   - padding-right: 0.25em;
84   - }
85   -
86   - .Inputfields > li {
  61 + a .ui-button {
87 62 display: block;
88   - margin: 1em 0;
89   - clear: both;
90   - }
91   -
92   - .Inputfields > li.InputfieldColumnWidth {
93   - float: left;
94   - clear: none;
95   - margin-top: 0;
96   - margin-left: 1%;
97   - }
98   - .Inputfields li.InputfieldColumnWidthFirst {
99   - clear: both;
100   - margin-left: 0;
101   - }
102   -
103   - .Inputfields > li:first-child {
104   - margin-top: 0;
105 63 }
106 64
107   - .Inputfields > li > .ui-widget-content *:last-child {
108   - margin-bottom: 0;
109   - }
110   - .Inputfields > li > .ui-widget-content ul.ui-helper-clearfix:last-child {
111   - margin-bottom: -1em;
112   - }
113   -
114   - .Inputfields > li > .ui-widget-content > p,
115   - .Inputfields > li > .ui-widget-content > div > p {
116   - margin-top: 0;
117   - }
118   - .Inputfields > li > .ui-widget-content > p:last-child {
119   - margin-bottom: 0;
120   - }
121   -
122   - .Inputfields > li > .ui-widget-content > .Inputfields > li {
123   - margin-top: 0;
124   - }
125   - .Inputfields > li > .ui-widget-content > .Inputfields > li:first-child {
126   - margin-top: 0;
127   - }
128   - .Inputfields li > .ui-widget-content > .Inputfields > li:last-child {
129   - margin-bottom: 0;
130   - }
131   -
132   - .Inputfields > li .notes {
133   - margin-bottom: 0;
134   - }
135   - .Inputfields > li > .ui-widget-content input + p.notes {
136   - margin-top: 1em;
137   - }
138   -
139   - .Inputfields .InputfieldHidden {
  65 +button.ui-datepicker-trigger {
  66 + margin: 0 0 0 0.5em;
  67 +}
  68 + #ui-datepicker-div {
140 69 display: none;
141 70 }
142 71
143   - .Inputfields .InputfieldSubmit,
144   - .Inputfields .InputfieldButton {
145   - clear: none;
146   - }
147   - .Inputfields .InputfieldSubmit .ui-widget-content,
148   - .Inputfields .InputfieldButton .ui-widget-content {
149   - padding: 0;
150   - background: none;
151   - border: none;
152   - }
153   -
154   - .Inputfields .InputfieldSubmit .ui-widget-header,
155   - .Inputfields .InputfieldButton .ui-widget-header {
156   - display: none;
157   - }
158   -
159   - .ui-button {
160   - font-size: 1em;
161   - margin: 0 1em 0 0;
162   - padding: 3px 9px;
163   - cursor: pointer;
164   - box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
165   - }
166   -
167   - p > a > .ui-button {
168   - font-size: 0.923076923076923em;
169   - }
170   -
171   - a .ui-button {
172   - display: block;
173   - }
174   -
175   - button.ui-datepicker-trigger {
176   - margin: 0 0 0 0.5em;
177   - }
178   - #ui-datepicker-div {
179   - display: none;
180   - }
181   -
182   -
183   - .Inputfields .InputfieldCheckboxes input,
184   - .Inputfields .InputfieldRadios input {
185   - margin-right: 0.25em;
186   - }
187   - .Inputfields .InputfieldCheckboxes li,
188   - .Inputfields .InputfieldRadios li {
189   - margin: 0;
190   - }
191   -
192   - .Inputfields .InputfieldCheckbox {
193   - }
194   - .Inputfields .InputfieldCheckbox .notes,
195   - .Inputfields .InputfieldCheckboxes .notes,
196   - .Inputfields .InputfieldRadios .notes {
197   - margin-top: 1em;
198   - }
199   -
200   -
201   - .Inputfields label {
202   - display: block;
203   - }
204   -
205   - .Inputfields textarea,
206   - .InputfieldMaxWidth {
207   - width: 99%;
208   - }
209   -
210   - .Inputfields textarea {
211   - display: block;
212   - }
213   -
214   - .Inputfields .InputfieldStateToggle {
215   - cursor: pointer;
216   - }
217   -
218   - .Inputfields > .InputfieldStateCollapsed {
219   - }
220   -
221   - .Inputfields > .InputfieldStateCollapsed .ui-widget-header {
222   - opacity: 0.6;
223   - }
224   - .Inputfields > .InputfieldStateCollapsed .ui-widget-header:hover {
225   - opacity: 1.0;
226   - }
227   -
228   - .Inputfields > .InputfieldStateCollapsed .ui-widget-content {
229   - display: none;
230   - }
231   -
232   - .Inputfields > .InputfieldStateCollapsed .InputfieldStateToggle {
233   - }
234   -
235   - .InputfieldPageNameURL {
236   - font-family: Monaco, Courier, Monaco, monospace;
237   - }
238   -
239   -
240 72 /***********************************************************************************************
241   - * Theme Specific Pagination Markup
  73 + * 2a. Theme Specific Pagination Markup
242 74 *
243 75 */
244 76
@@ -286,7 +118,7 @@
286 118
287 119
288 120 /****************************************************************************************
289   - * Theme specific PageList overrides
  121 + * 2b. Theme specific PageList overrides
290 122 *
291 123 */
292 124

0 comments on commit 13c1904

Please sign in to comment.
Something went wrong with that request. Please try again.