Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

improved dynamic creation/modification of channel properties

  • Loading branch information...
commit 0b10eadb6aa2c252f3423d7b9de0dbd6df66d132 1 parent 700c515
Steffen Vogel authored
3  htdocs/frontend/index.html
@@ -27,6 +27,7 @@
27 27 <script type="text/javascript" src="javascripts/entities.js"></script>
28 28 <script type="text/javascript" src="javascripts/wui.js"></script>
29 29 <script type="text/javascript" src="javascripts/entity.js"></script>
  30 + <script type="text/javascript" src="javascripts/property.js"></script>
30 31
31 32 <link rel="stylesheet" type="text/css" href="stylesheets/jquery-ui-vz/jquery-ui-1.8.17.css" />
32 33 <link rel="stylesheet" type="text/css" href="stylesheets/jquery-treeTable.css">
@@ -156,7 +157,7 @@ <h2 id="title"></h2>
156 157 <p><input type="button" value="Abonnieren" /> <label for="entity-public-cookie">Cookie:</label> <input id="entity-public-cookie" type="checkbox" /></p>
157 158 </div>
158 159 <div id="entity-create">
159   - <form method="get" target="_blank">
  160 + <form>
160 161 <table>
161 162 <tr class="property"><th>Eigenschaft</th><th>Wert</th></tr>
162 163 <tr class="property"><td>Middleware:</td><td><input type="text" id="entity-create-middleware" /></td></tr>
169 htdocs/frontend/javascripts/entity.js
@@ -127,74 +127,71 @@ Entity.prototype.loadData = function() {
127 127 */
128 128 Entity.prototype.showDetails = function() {
129 129 var entity = this;
130   - var dialog = $('<div>');
131   -
132   - dialog.addClass('details')
133   - .append(this.getDOMDetails())
134   - .dialog({
135   - title: 'Details f&uuml;r ' + this.title,
136   - width: 480,
137   - resizable: false,
138   - buttons : {
139   - 'Schließen': function() {
140   - $(this).dialog('close');
141   - },
142   - 'Löschen' : function() {
143   - $('#entity-delete').dialog({ // confirm prompt
144   - resizable: false,
145   - modal: true,
146   - title: 'Löschen',
147   - width: 400,
148   - buttons: {
149   - 'Löschen': function() {
150   - entity.delete().done(function() {
151   - entity.cookie = false;
152   - vz.entities.saveCookie();
  130 + var dialog = $('<div>')
  131 + .addClass('details')
  132 + .append(this.getDOMDetails())
  133 + .dialog({
  134 + title: 'Details f&uuml;r ' + this.title,
  135 + width: 480,
  136 + resizable: false,
  137 + buttons : {
  138 + 'Bearbeiten' : function() {
  139 + $('table', this).remove();
  140 + $(this).append(entity.getDOMDetails(true));
  141 + },
  142 + 'Löschen' : function() {
  143 + $('#entity-delete').dialog({ // confirm prompt
  144 + resizable: false,
  145 + modal: true,
  146 + title: 'Löschen',
  147 + width: 400,
  148 + buttons: {
  149 + 'Löschen': function() {
  150 + entity.delete().done(function() {
  151 + entity.cookie = false;
  152 + vz.entities.saveCookie();
153 153
154   - vz.entities.each(function(it, parent) { // remove from tree
155   - if (entity.uuid == it.uuid) {
156   - var array = (parent) ? parent.children : vz.entities;
157   - array.remove(it);
158   - }
159   - }, true);
  154 + vz.entities.each(function(it, parent) { // remove from tree
  155 + if (entity.uuid == it.uuid) {
  156 + var array = (parent) ? parent.children : vz.entities;
  157 + array.remove(it);
  158 + }
  159 + }, true);
160 160
161   - vz.entities.showTable();
162   - vz.wui.drawPlot();
163   - dialog.dialog('close');
164   - });
  161 + vz.entities.showTable();
  162 + vz.wui.drawPlot();
  163 + dialog.dialog('close');
  164 + });
165 165
166   - $(this).dialog('close');
167   - },
168   - 'Abbrechen': function() {
169   - $(this).dialog('close');
  166 + $(this).dialog('close');
  167 + },
  168 + 'Abbrechen': function() {
  169 + $(this).dialog('close');
  170 + }
170 171 }
171   - }
172   - });
  172 + });
  173 + }
173 174 }
174   - }
175   - });
  175 + });
176 176 };
177 177
178 178 /**
179 179 * Show from for new Channel
180 180 * used to create info dialog
181 181 */
182   -Entity.prototype.getDOMDetails = function(edit) {
  182 +Entity.prototype.getDOMDetails = function(editable) {
183 183 var table = $('<table><thead><tr><th>Eigenschaft</th><th>Wert</th></tr></thead></table>');
184 184 var data = $('<tbody>');
185 185
186   - // general properties
187   - var general = ['title', 'type', 'uuid', 'middleware', 'color', 'style', 'active', 'cookie'];
188   - var sections = ['required', 'optional'];
189   -
  186 + // frontend properties
  187 + var general = ['type', 'uuid', 'middleware', 'cookie'];
190 188 general.each(function(index, property) {
191   - var definition = vz.capabilities.definitions.get('properties', property);
192   - var title = (definition) ? definition.translation[vz.options.language] : property;
193 189 var value = this[property];
  190 + var title;
194 191
195 192 switch(property) {
196 193 case 'type':
197   - var title = 'Typ';
  194 + title = 'Typ';
198 195 var icon = $('<img>').
199 196 attr('src', 'images/types/' + this.definition.icon)
200 197 .css('margin-right', 4);
@@ -202,39 +199,21 @@ Entity.prototype.getDOMDetails = function(edit) {
202 199 .text(this.definition.translation[vz.options.language])
203 200 .prepend(icon);
204 201 break;
205   -
  202 +
206 203 case 'middleware':
207   - var title = 'Middleware';
208   - var value = '<a href="' + this.middleware + '/capabilities.json">' + this.middleware + '</a>';
  204 + title = 'Middleware';
  205 + value = '<a href="' + this.middleware + '/capabilities.json">' + this.middleware + '</a>';
209 206 break;
210   -
  207 +
211 208 case 'uuid':
212   - var title = 'UUID';
213   - var value = '<a href="' + this.middleware + '/entity/' + this.uuid + '.json">' + this.uuid + '</a>';
  209 + title = 'UUID';
  210 + value = '<a href="' + this.middleware + '/entity/' + this.uuid + '.json">' + this.uuid + '</a>';
214 211 break;
215   -
216   - case 'color':
217   - var value = $('<span>')
218   - .text(this.color)
219   - .css('background-color', this.color)
220   - .css('padding-left', 5)
221   - .css('padding-right', 5);
222   - break;
223   -
  212 +
224 213 case 'cookie':
225   - var title = 'Cookie';
  214 + title = 'Cookie';
226 215 value = '<img src="images/' + ((this.cookie) ? 'tick' : 'cross') + '.png" alt="' + ((value) ? 'ja' : 'nein') + '" />';
227 216 break;
228   - case 'active':
229   - var value = '<img src="images/' + ((this.active) ? 'tick' : 'cross') + '.png" alt="' + ((this.active) ? 'ja' : 'nein') + '" />';
230   - break;
231   - case 'style':
232   - switch (this.style) {
233   - case 'lines': var value = 'Linien'; break;
234   - case 'steps': var value = 'Stufen'; break;
235   - case 'points': var value = 'Punkte'; break;
236   - }
237   - break;
238 217 }
239 218
240 219 data.append($('<tr>')
@@ -251,21 +230,46 @@ Entity.prototype.getDOMDetails = function(edit) {
251 230 );
252 231 }, this);
253 232
  233 + // middleware properties
  234 + var sections = ['required', 'optional'];
254 235 sections.each(function(index, section) {
255 236 this.definition[section].each(function(index, property) {
256   - if (this.hasOwnProperty(property) && !general.contains(property)) {
257   - var definition = vz.capabilities.definitions.get('properties', property);
258   - var title = definition.translation[vz.options.language];
  237 + if (editable || this.hasOwnProperty(property)) {
  238 + var propDef = vz.capabilities.definitions.get('properties', property);
  239 +
  240 + var title = (propDef) ? propDef.translation[vz.options.language] : property;
259 241 var value = this[property];
260 242
261   - if (definition.type == 'boolean') {
  243 + if (propDef && propDef.type == 'boolean') {
262 244 value = '<img src="images/' + ((value) ? 'tick' : 'cross') + '.png" alt="' + ((value) ? 'ja' : 'nein') + '" />';
263 245 }
264 246
265   - if (property == 'cost') {
266   - value = (value * 1000 * 100) + ' ct/k' + this.definition.unit + 'h'; // ct per kWh
  247 + switch (property) {
  248 + case 'cost':
  249 + value = (value * 1000 * 100) + ' ct/k' + this.definition.unit + 'h'; // ct per kWh
  250 + break;
  251 +
  252 + case 'color':
  253 + value = $('<span>')
  254 + .text(this.color)
  255 + .css('background-color', this.color)
  256 + .css('padding-left', 5)
  257 + .css('padding-right', 5);
  258 + break;
  259 +
  260 + case 'style':
  261 + switch (this.style) {
  262 + case 'lines': value = 'Linien'; break;
  263 + case 'steps': value = 'Stufen'; break;
  264 + case 'points': value = 'Punkte'; break;
  265 + }
  266 + break;
267 267 }
268   -
  268 +
  269 + if (editable && propDef) {
  270 + value = propDef.getInput(this[property]);
  271 + }
  272 +
269 273 data.append($('<tr>')
270 274 .addClass('property')
271 275 .addClass(section)
@@ -281,6 +285,7 @@ Entity.prototype.getDOMDetails = function(edit) {
281 285 }
282 286 }, this);
283 287 }, this);
  288 +
284 289 return table.append(data);
285 290 };
286 291
4 htdocs/frontend/javascripts/functions.js
@@ -200,6 +200,10 @@ vz.capabilities.load = function() {
200 200 controller: 'capabilities',
201 201 success: function(json) {
202 202 $.extend(true, vz.capabilities, json.capabilities);
  203 +
  204 + vz.capabilities.definitions.properties.each(function(index, propdef) {
  205 + vz.capabilities.definitions.properties[index] = new Property(propdef);
  206 + });
203 207 }
204 208 });
205 209 };
2  htdocs/frontend/javascripts/init.js
@@ -39,7 +39,7 @@ var vz = {
39 39 timeout: null
40 40 },
41 41 capabilities: { // debugging and runtime information from middleware
42   - definitions: {} // definitions of entities & properties
  42 + definitions: { }
43 43 },
44 44 plot: { }, // flot instance
45 45 options: { } // options loaded from cookies in options.js
95 htdocs/frontend/javascripts/property.js
@@ -38,69 +38,94 @@ var Property = function(json) {
38 38 * @todo implement/test
39 39 */
40 40 Property.prototype.validate = function(value) {
  41 + var invalid = false;
  42 +
41 43 switch (this.type) {
42 44 case 'string':
43 45 case 'text':
44   - // TODO check pattern
45   - // TODO check string length
46   - return true;
  46 + invalid |= (this.pattern != undefined) && value.match(this.pattern);
  47 + invalid |= (this.min != undefined) && value.length < this.min;
  48 + invalid |= (this.max != undefined) && value.length > this.max;
  49 + break;
  50 +
  51 + case 'integer':
  52 + invalid |= !value.match(/^[+-]?\d*$/);
47 53
48 54 case 'float':
49   - // TODO check format
50   - // TODO check min/max
51   - return true;
52   -
53   - case 'integer':
54   - // TODO check format
55   - // TODO check min/max
56   - return true;
  55 + invalid |= !value.match(/^[+-]?\d*(\.\d*)?$/);
  56 + invalid |= (this.min != undefined) && value < this.min;
  57 + invalid |= (this.max != undefined) && value > this.max;
  58 + break;
57 59
58 60 case 'boolean':
59   - return value == '1' || value == '';
  61 + invalid |= value != '1' && value != '';
  62 + break;
60 63
61 64 case 'multiple':
62   - return this.options.contains(value);
  65 + invalid |= !this.options.contains(value);
  66 + break;
63 67
64 68 default:
65 69 throw new Exception('EntityException', 'Unknown property');
66 70 }
  71 +
  72 + return !invalid;
67 73 };
68 74
69 75 /**
70   - *
71   - * @todo implement/test
  76 + * Get form element for property
72 77 */
73 78 Property.prototype.getInput = function(value) {
  79 + var elm;
  80 +
74 81 switch (this.type) {
75   - case 'string':
76 82 case 'float':
77 83 case 'integer':
78   - return $('<input>')
79   - .attr('type', 'text')
80   - .attr('name=', this.name)
81   - .attr('maxlength', (property.type == 'string') ? this.max : 0);
  84 + case 'string':
  85 + elm = $('<input>').attr('type', 'text');
82 86
  87 + if (this.type == 'string' && this.max) {
  88 + elm.attr('maxlength', this.max);
  89 + }
  90 + break;
  91 +
83 92 case 'text':
84   - return $('<textarea>')
85   - .attr('name', this.name);
86   -
  93 + elm = $('<textarea>');
  94 + break;
  95 +
87 96 case 'boolean':
88   - return $('<input>')
89   - .attr('type', 'checkbox')
90   - .attr('name', this.name)
91   - .attr('checked', true);
92   -
  97 + elm = $('<input>').attr('type', 'checkbox');
  98 + break;
  99 +
93 100 case 'multiple':
94   - var dom = $('<select>').attr('name', property.name)
95   - property.options.each(function(index, option) {
96   - dom.append($('<option>')
97   - .value(option)
98   - .text(option)
  101 + elm = $('<select>').attr('size', 1);
  102 + this.options.each(function(index, option) {
  103 + elm.append(
  104 + $('<option>')
  105 + .val(option)
  106 + .text(option)
99 107 );
100 108 });
101   - return dom;
102   -
  109 + break;
  110 +
103 111 default:
104 112 throw new Exception('PropertyException', 'Unknown property');
105 113 }
  114 +
  115 + elm
  116 + .attr('name', this.name)
  117 + .val(value)
  118 + .bind('keyup keydown change', this, function(event) { // live validation
  119 + var propdef = event.data;
  120 + var elm = $(this);
  121 +
  122 + if (propdef.validate(elm.val()) == false && elm.val() != '') {
  123 + elm.addClass('invalid');
  124 + }
  125 + else {
  126 + elm.removeClass('invalid');
  127 + }
  128 + });
  129 +
  130 + return elm;
106 131 };
65 htdocs/frontend/javascripts/wui.js
@@ -197,49 +197,22 @@ vz.wui.dialogs.init = function() {
197 197
198 198 // show available properties for selected type
199 199 function addProperties(proplist, className) {
200   - proplist.each(function(index, def) {
201   - vz.capabilities.definitions.properties.each(function(propindex, propdef) {
202   - if (def == propdef.name) {
203   - var cntrl = null;
204   - var row = $('<tr>')
205   - .addClass("property")
206   - .append(
207   - $('<td>').text(propdef.translation[vz.options.language])
208   - );
209   -
210   - switch (propdef.type) {
211   - case 'float':
212   - case 'integer':
213   - case 'string':
214   - cntrl = $('<input>').attr("type", "text");
215   - break;
216   -
217   - case 'text':
218   - cntrl = $('<textarea>');
219   - break;
220   -
221   - case 'boolean':
222   - cntrl = $('<input>').attr("type", "checkbox");
223   - break;
  200 + proplist.each(function(index, name) {
  201 + var propdef = vz.capabilities.definitions.get('properties', name);
  202 +
  203 + if (propdef) {
  204 + var row = $('<tr>')
  205 + .addClass("property")
  206 + .addClass(className)
  207 + .append(
  208 + $('<td>').text(propdef.translation[vz.options.language])
  209 + )
  210 + .append(
  211 + $('<td>').append(propdef.getInput())
  212 + );
224 213
225   - case 'multiple':
226   - cntrl = $('<select>').attr("Size", "1");
227   - propdef.options.each(function(optindex, optdef) {
228   - cntrl.append(
229   - $('<option>').html(optdef)
230   - );
231   - });
232   - break;
233   - }
234   -
235   - if (cntrl != null) {
236   - row.addClass(className);
237   - cntrl.attr("name", propdef.name);
238   - row.append($('<td>').append(cntrl));
239   - $('#entity-create form table').append(row);
240   - }
241   - }
242   - });
  214 + $('#entity-create form table').append(row);
  215 + }
243 216 });
244 217 }
245 218
@@ -256,10 +229,10 @@ vz.wui.dialogs.init = function() {
256 229 $('#entity-create form').submit(function() {
257 230 var def = $('select[name=type] option:selected', this).data('definition');
258 231 var properties = [];
259   -
260   - $(this).serializeArray().each(function(index, value) {
261   - if (value.value != '') {
262   - properties.push(value);
  232 +
  233 + $(this).serializeArray().each(function(index, prop) {
  234 + if (prop.value != '') { // strip empty properties
  235 + properties.push(prop);
263 236 }
264 237 });
265 238
439 htdocs/frontend/stylesheets/normalize.css
... ... @@ -0,0 +1,439 @@
  1 +/*! normalize.css 2011-08-31T22:02 UTC · http://github.com/necolas/normalize.css */
  2 +
  3 +/* =============================================================================
  4 + HTML5 display definitions
  5 + ========================================================================== */
  6 +
  7 +/*
  8 + * Corrects block display not defined in IE6/7/8/9 & FF3
  9 + */
  10 +
  11 +article,
  12 +aside,
  13 +details,
  14 +figcaption,
  15 +figure,
  16 +footer,
  17 +header,
  18 +hgroup,
  19 +nav,
  20 +section {
  21 + display: block;
  22 +}
  23 +
  24 +/*
  25 + * Corrects inline-block display not defined in IE6/7/8/9 & FF3
  26 + */
  27 +
  28 +audio,
  29 +canvas,
  30 +video {
  31 + display: inline-block;
  32 + *display: inline;
  33 + *zoom: 1;
  34 +}
  35 +
  36 +/*
  37 + * Prevents modern browsers from displaying 'audio' without controls
  38 + */
  39 +
  40 +audio:not([controls]) {
  41 + display: none;
  42 +}
  43 +
  44 +/*
  45 + * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
  46 + * Known issue: no IE6 support
  47 + */
  48 +
  49 +[hidden] {
  50 + display: none;
  51 +}
  52 +
  53 +
  54 +/* =============================================================================
  55 + Base
  56 + ========================================================================== */
  57 +
  58 +/*
  59 + * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
  60 + * http://clagnut.com/blog/348/#c790
  61 + * 2. Keeps page centred in all browsers regardless of content height
  62 + * 3. Prevents iOS text size adjust after orientation change, without disabling user zoom
  63 + * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
  64 + */
  65 +
  66 +html {
  67 + font-size: 100%; /* 1 */
  68 + overflow-y: scroll; /* 2 */
  69 + -webkit-text-size-adjust: 100%; /* 3 */
  70 + -ms-text-size-adjust: 100%; /* 3 */
  71 +}
  72 +
  73 +/*
  74 + * Addresses margins handled incorrectly in IE6/7
  75 + */
  76 +
  77 +body {
  78 + margin: 0;
  79 +}
  80 +
  81 +/*
  82 + * Addresses font-family inconsistency between 'textarea' and other form elements.
  83 + */
  84 +
  85 +body,
  86 +button,
  87 +input,
  88 +select,
  89 +textarea {
  90 + font-family: sans-serif;
  91 +}
  92 +
  93 +
  94 +/* =============================================================================
  95 + Links
  96 + ========================================================================== */
  97 +
  98 +a {
  99 + color: #00e;
  100 +}
  101 +
  102 +a:visited {
  103 + color: #551a8b;
  104 +}
  105 +
  106 +/*
  107 + * Addresses outline displayed oddly in Chrome
  108 + */
  109 +
  110 +a:focus {
  111 + outline: thin dotted;
  112 +}
  113 +
  114 +/*
  115 + * Improves readability when focused and also mouse hovered in all browsers
  116 + * people.opera.com/patrickl/experiments/keyboard/test
  117 + */
  118 +
  119 +a:hover,
  120 +a:active {
  121 + outline: 0;
  122 +}
  123 +
  124 +
  125 +/* =============================================================================
  126 + Typography
  127 + ========================================================================== */
  128 +
  129 +/*
  130 + * Addresses styling not present in IE7/8/9, S5, Chrome
  131 + */
  132 +
  133 +abbr[title] {
  134 + border-bottom: 1px dotted;
  135 +}
  136 +
  137 +/*
  138 + * Addresses style set to 'bolder' in FF3/4, S4/5, Chrome
  139 +*/
  140 +
  141 +b,
  142 +strong {
  143 + font-weight: bold;
  144 +}
  145 +
  146 +blockquote {
  147 + margin: 1em 40px;
  148 +}
  149 +
  150 +/*
  151 + * Addresses styling not present in S5, Chrome
  152 + */
  153 +
  154 +dfn {
  155 + font-style: italic;
  156 +}
  157 +
  158 +/*
  159 + * Addresses styling not present in IE6/7/8/9
  160 + */
  161 +
  162 +mark {
  163 + background: #ff0;
  164 + color: #000;
  165 +}
  166 +
  167 +/*
  168 + * Corrects font family set oddly in IE6, S4/5, Chrome
  169 + * en.wikipedia.org/wiki/User:Davidgothberg/Test59
  170 + */
  171 +
  172 +pre,
  173 +code,
  174 +kbd,
  175 +samp {
  176 + font-family: monospace, serif;
  177 + _font-family: 'courier new', monospace;
  178 + font-size: 1em;
  179 +}
  180 +
  181 +/*
  182 + * Improves readability of pre-formatted text in all browsers
  183 + */
  184 +
  185 +pre {
  186 + white-space: pre;
  187 + white-space: pre-wrap;
  188 + word-wrap: break-word;
  189 +}
  190 +
  191 +/*
  192 + * 1. Addresses CSS quotes not supported in IE6/7
  193 + * 2. Addresses quote property not supported in S4
  194 + */
  195 +
  196 +/* 1 */
  197 +
  198 +q {
  199 + quotes: none;
  200 +}
  201 +
  202 +/* 2 */
  203 +
  204 +q:before,
  205 +q:after {
  206 + content: '';
  207 + content: none;
  208 +}
  209 +
  210 +small {
  211 + font-size: 75%;
  212 +}
  213 +
  214 +/*
  215 + * Prevents sub and sup affecting line-height in all browsers
  216 + * gist.github.com/413930
  217 + */
  218 +
  219 +sub,
  220 +sup {
  221 + font-size: 75%;
  222 + line-height: 0;
  223 + position: relative;
  224 + vertical-align: baseline;
  225 +}
  226 +
  227 +sup {
  228 + top: -0.5em;
  229 +}
  230 +
  231 +sub {
  232 + bottom: -0.25em;
  233 +}
  234 +
  235 +
  236 +/* =============================================================================
  237 + Lists
  238 + ========================================================================== */
  239 +
  240 +ul,
  241 +ol {
  242 + margin: 1em 0;
  243 + padding: 0 0 0 40px;
  244 +}
  245 +
  246 +dd {
  247 + margin: 0 0 0 40px;
  248 +}
  249 +
  250 +nav ul,
  251 +nav ol {
  252 + list-style: none;
  253 + list-style-image: none;
  254 +}
  255 +
  256 +
  257 +/* =============================================================================
  258 + Embedded content
  259 + ========================================================================== */
  260 +
  261 +/*
  262 + * 1. Removes border when inside 'a' element in IE6/7/8/9, F3
  263 + * 2. Improves image quality when scaled in IE7
  264 + * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
  265 + */
  266 +
  267 +img {
  268 + border: 0; /* 1 */
  269 + -ms-interpolation-mode: bicubic; /* 2 */
  270 +}
  271 +
  272 +/*
  273 + * Corrects overflow displayed oddly in IE9
  274 + */
  275 +
  276 +svg:not(:root) {
  277 + overflow: hidden;
  278 +}
  279 +
  280 +
  281 +/* =============================================================================
  282 + Figures
  283 + ========================================================================== */
  284 +
  285 +/*
  286 + * Addresses margin not present in IE6/7/8/9, S5, O11
  287 + */
  288 +
  289 +figure {
  290 + margin: 0;
  291 +}
  292 +
  293 +
  294 +/* =============================================================================
  295 + Forms
  296 + ========================================================================== */
  297 +
  298 +/*
  299 + * Corrects margin displayed oddly in IE6/7
  300 + */
  301 +
  302 +form {
  303 + margin: 0;
  304 +}
  305 +
  306 +/*
  307 + * Define consistent margin and padding
  308 + */
  309 +
  310 +fieldset {
  311 + margin: 0 2px;
  312 + padding: 0.35em 0.625em 0.75em;
  313 +}
  314 +
  315 +/*
  316 + * 1. Corrects color not being inherited in IE6/7/8/9
  317 + * 2. Corrects alignment displayed oddly in IE6/7
  318 + */
  319 +
  320 +legend {
  321 + border: 0; /* 1 */
  322 + *margin-left: -7px; /* 2 */
  323 +}
  324 +
  325 +/*
  326 + * 1. Corrects font size not being inherited in all browsers
  327 + * 2. Addresses margins set differently in IE6/7, F3/4, S5, Chrome
  328 + * 3. Improves appearance and consistency in all browsers
  329 + */
  330 +
  331 +button,
  332 +input,
  333 +select,
  334 +textarea {
  335 + font-size: 100%; /* 1 */
  336 + margin: 0; /* 2 */
  337 + vertical-align: baseline; /* 3 */
  338 + *vertical-align: middle; /* 3 */
  339 +}
  340 +
  341 +/*
  342 + * 1. Addresses FF3/4 setting line-height using !important in the UA stylesheet
  343 + * 2. Corrects inner spacing displayed oddly in IE6/7
  344 + */
  345 +
  346 +button,
  347 +input {
  348 + line-height: normal; /* 1 */
  349 + *overflow: visible; /* 2 */
  350 +}
  351 +
  352 +/*
  353 + * Corrects overlap and whitespace issue for buttons and inputs in IE6/7
  354 + * Known issue: reintroduces inner spacing
  355 + */
  356 +
  357 +table button,
  358 +table input {
  359 + *overflow: auto;
  360 +}
  361 +
  362 +/*
  363 + * 1. Improves usability and consistency of cursor style between image-type 'input' and others
  364 + * 2. Corrects inability to style clickable 'input' types in iOS
  365 + */
  366 +
  367 +button,
  368 +html input[type="button"],
  369 +input[type="reset"],
  370 +input[type="submit"] {
  371 + cursor: pointer; /* 1 */
  372 + -webkit-appearance: button; /* 2 */
  373 +}
  374 +
  375 +/*
  376 + * 1. Addresses box sizing set to content-box in IE8/9
  377 + * 2. Addresses excess padding in IE8/9
  378 + */
  379 +
  380 +input[type="checkbox"],
  381 +input[type="radio"] {
  382 + box-sizing: border-box; /* 1 */
  383 + padding: 0; /* 2 */
  384 +}
  385 +
  386 +/*
  387 + * 1. Addresses appearance set to searchfield in S5, Chrome
  388 + * 2. Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof)
  389 + */
  390 +
  391 +input[type="search"] {
  392 + -webkit-appearance: textfield; /* 1 */
  393 + -moz-box-sizing: content-box;
  394 + -webkit-box-sizing: content-box; /* 2 */
  395 + box-sizing: content-box;
  396 +}
  397 +
  398 +/*
  399 + * Corrects inner padding displayed oddly in S5, Chrome on OSX
  400 + */
  401 +
  402 +input[type="search"]::-webkit-search-decoration {
  403 + -webkit-appearance: none;
  404 +}
  405 +
  406 +/*
  407 + * Corrects inner padding and border displayed oddly in FF3/4
  408 + * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
  409 + */
  410 +
  411 +button::-moz-focus-inner,
  412 +input::-moz-focus-inner {
  413 + border: 0;
  414 + padding: 0;
  415 +}
  416 +
  417 +/*
  418 + * 1. Removes default vertical scrollbar in IE6/7/8/9
  419 + * 2. Improves readability and alignment in all browsers
  420 + */
  421 +
  422 +textarea {
  423 + overflow: auto; /* 1 */
  424 + vertical-align: top; /* 2 */
  425 +}
  426 +
  427 +
  428 +/* =============================================================================
  429 + Tables
  430 + ========================================================================== */
  431 +
  432 +/*
  433 + * Remove most spacing between table cells
  434 + */
  435 +
  436 +table {
  437 + border-collapse: collapse;
  438 + border-spacing: 0;
  439 +}
17 htdocs/frontend/stylesheets/style.css
@@ -11,15 +11,28 @@ table {
11 11 width: 100%;
12 12 }
13 13
  14 +.property input,
  15 +.property textarea {
  16 + border: 1px solid grey;
  17 + -moz-border-radius: 5px;
  18 + -webkit-border-radius: 5px;
  19 + border-radius: 5px;
  20 + width: 100%;
  21 +}
  22 +
  23 +.invalid {
  24 + background-color: #A20000;
  25 + color: white;
  26 +}
  27 +
14 28 tr th {
15 29 border-bottom: 2px solid grey;
16   -
17 30 text-align: left;
18 31 font-size: 0.9em;
19 32 }
20 33
21 34 tr.optional {
22   - color: silver;
  35 + color: #7A7A7A;
23 36 }
24 37
25 38 tr.property td {

0 comments on commit 0b10ead

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