[tipos commit] r1604 - in branches/FreeForm/Tipos/App: Forms/View Public/styles
codesite...@google.com
Date: Sat Oct 4 06:38:09 2008
New Revision: 1604
Modified:
branches/FreeForm/Tipos/App/Forms/View/_formElement.php
branches/FreeForm/Tipos/App/Public/styles/forms.css
Log:
By default, use dl/dt/dd for the form elements, as in
Solar_View_Helper_Form. Changed styles to follow this.
Modified: branches/FreeForm/Tipos/App/Forms/View/_formElement.php
==============================================================================
--- branches/FreeForm/Tipos/App/Forms/View/_formElement.php (original)
+++ branches/FreeForm/Tipos/App/Forms/View/_formElement.php Sat Oct 4
06:38:09 2008
@@ -18,39 +18,55 @@
*/
?>
<?php
- // Get element.
+ // get element
$elem = $helper->getElem();
-
- // Set a class for the element type.
+
+ // set a class for the element type
$class = 'input-' . $elem['type'];
- // Add the element id as class for further overrides.
+ // add the element id as class for further overrides
$class .= ' ' . $elem['attribs']['id'];
- // Required field?
+ // required field?
if ($elem['require']) {
$class .= ' require';
}
- // Passed or failed validation?
- if ($elem['status'] === true) {
+ // passed or failed validation?
+ if ($elem['status'] === true) {
$class .= ' success';
} elseif ($elem['status'] === false) {
$class .= ' failure';
}
- // Done!
+ // done!
$elem->addAttribs('class', $class);
- // Set some shortcuts.
+ // set some shortcuts
$field = $helper->getField();
$label = $helper->getLabel();
- $descr = $helper->getDescr();
+ $descr = $helper->getDescr();
?>
-
-<label for="<?php echo $elem['attribs']['id']; ?>">
- <em><?php echo $label; if($elem['require']) { ?> <abbr title="<?php
echo $this->getText('LABEL_REQUIRED'); ?>">*</abbr><?php } ?></em>
- <?php echo $field; ?>
- <?php if (! empty($descr)) { ?><span><?php echo $descr; ?></span><?php
} ?>
- <?php if (! empty($elem['invalid'])) { foreach ((array)
$elem['invalid'] as $text) { ?><strong><?php echo
$this->escape($text); ?></strong><?php } } ?>
-</label>
+<dl>
+ <dt>
+ <label for="<?php echo $elem['attribs']['id']; ?>">
+ <?php echo $label; ?>
+ <?php if($elem['require']) { ?>
+ <abbr title="<?php echo
$this->getText('LABEL_REQUIRED'); ?>">*</abbr>
+ <?php } ?>
+ </label>
+ </dt>
+ <dd>
+ <?php echo $field; ?>
+ <?php if (! empty($descr)) { ?>
+ <p class="descr"><?php echo $descr; ?></p>
+ <?php } ?>
+ <?php if (! empty($elem['invalid'])) { ?>
+ <ul class="invalid">
+ <?php foreach ((array) $elem['invalid'] as $text) { ?>
+ <li><?php echo $this->escape($text); ?></li>
+ <?php } ?>
+ </ul>
+ <?php } ?>
+ </dd>
+</dl>
Modified: branches/FreeForm/Tipos/App/Public/styles/forms.css
==============================================================================
--- branches/FreeForm/Tipos/App/Public/styles/forms.css (original)
+++ branches/FreeForm/Tipos/App/Public/styles/forms.css Sat Oct 4 06:38:09
2008
@@ -1,9 +1,8 @@
/* @version $Id$ */
/* ----- General form ----- */
-fieldset, label {
+fieldset {
position: relative;
- float: left;
clear: both;
width: 100%;
text-align: left;
@@ -16,52 +15,64 @@
legend em {
position: absolute;
- left: .5em;
+ left: 1em;
font-size: 131%;
font-weight: bold;
margin-top: .5em;
}
-/* Element container: label, field, description and feedback */
-label {
- margin: 0 0 .5em 1em;
- width: auto;
+/* ----- Element structure ----- */
+dl {
+ clear: both;
}
-label em, label strong, label span {
+dl dt {
+ position: relative;
+ float: left;
+ clear: both;
+ width: 10em;
+ font-weight: bold;
+ text-align: right;
+ padding-top: .3em;
+ margin-bottom: .8em;
+}
+
+dl dd {
+ position: relative;
+ clear: right;
+ margin-right: 2em;
+ margin-bottom: .8em;
+ margin-left: 10.8em;
+}
+
+dl dd:after {
+ visibility: hidden;
display: block;
+ clear: both;
+ height: 0;
+ content: ".";
}
-/* Label */
-label em {
- margin: 0 1em 0.1em 0;
+dl dt label {
}
-/* Required mark */
-label em abbr {
+/* "Required" mark */
+dl dt label abbr {
color: #FF0000;
font-weight: bold;
}
/* Description */
-label span {
+dl dd p.descr {
font-size: 93%;
- margin: 0.1em 0 0;
+ margin: 0.2em 0 0;
}
-/* Feedback */
-label strong {
+/* Invalid messages */
+ul.invalid li {
font-size: 93%;
color: #FF0000;
- margin: 0.1em 0 0;
-}
-
-/* Submit buttons */
-fieldset.submit {
- clear: both;
- padding: 1em 0;
- border-top: 1px solid #E6E6E6;
- text-align: right;
+ margin: 0.2em 0 0;
}
/* ----- Input-fields ----- */
@@ -75,61 +86,47 @@
.input-text, .input-textarea, .input-password {
border: 1px solid #CCC;
- padding: 2px;
+ padding: .3em;
}
-.input-radio,
-.input-checkbox,
-.input-submit {
- margin-right: 5px;
+.input-text {
+ width: 100%;
}
-/* ----- Horizontal-left and horizontal-right forms ----- */
-.horiz-lt label em, .horiz-rt label em {
- float: left;
- width: 10em;
+.input-textarea {
+ width: 100%;
+ height: 200px;
}
-.horiz-lt label span, .horiz-lt label strong,
-.horiz-rt label span, .horiz-rt label strong {
- margin-left: 11.8em;
+.input-radio,
+.input-checkbox,
+.input-submit {
+ margin-right: 5px;
}
-/* ----- Horizontal-right form ----- */
-.horiz-rt label em {
+/* Submit buttons */
+fieldset.submit {
+ clear: both;
+ padding: 1em 0;
+ border-top: 1px solid #E6E6E6;
text-align: right;
}
-/* ----- Horizontal-left form (back to default) ----- */
-fieldset.horiz-lt label em {
- text-align: left;
-}
-
-/* ----- Vertical form (back to default) ----- */
-fieldset.vert label em, fieldset.vert label strong, fieldset.vert label
span {
- float: none;
- text-align: left;
-}
-
-fieldset.vert label span, fieldset.vert label strong {
- margin-left: 0;
-}
-
/* ----- Messages ----- */
-ul.success, ul.failure, ul.alert, ul.info {
+ul.success, ul.failure {
clear: both;
display: block;
margin: 0 0 1em;
padding: 2px 0;
- border: 1px solid #58A538;
+ border: 1px solid #FF0000;
border-width: 1px 0;
}
-ul.success li, ul.failure li, ul.alert li, ul.info li {
+ul.success li, ul.failure li {
clear: both;
display: block;
padding: 1em 1.5em;
- background-color:#DBF8CC;
+ background-color:#FFE5E5;
}
ul.success {
@@ -140,30 +137,15 @@
background-color: #DBE9FF;
}
-ul.failure {
- border-color: #FF0000;
-}
-
-ul.failure li {
- background-color: #FFE5E5;
-}
-
-ul.alert {
- border-color: #F5BA24;
-}
-
-ul.alert li {
- background-color:#FFFECC;
-}
-
/* ----- Theme: blue ----- */
-.form-blue fieldset, .form-blue fieldset.reg, .form-blue fieldset.alt {
- background-color: #F2F9FF;
- border-top: 1px solid #CDDFEF;
+.form-blue fieldset, .form-blue fieldset.reg {
+ background-color: #F7FBFF;
+ border-top: 1px solid #B3DBFF;
}
.form-blue fieldset.alt {
background-color: #E6F3FF;
+ border-top: 1px solid #B3DBFF;
}
.form-blue fieldset legend, .form-blue fieldset.reg legend, .form-blue
fieldset.alt legend {
@@ -172,5 +154,12 @@
.form-blue fieldset.submit {
background-color: inherit;
- border-top: 1px solid #CDDFEF;
+ border-top: 1px solid #B3DBFF;
+}
+
+/* ----- Testing: checkboxes in columns ----- */
+dd ul {
+ float: left;
+ clear: right;
+ width: 33%;
}