responsive self service

This commit is contained in:
Roland Gruber 2015-08-05 17:03:32 +00:00
parent a2f5dae6b3
commit 5342ee41ad
5 changed files with 26 additions and 21 deletions

View File

@ -19,6 +19,7 @@
@ -43,10 +44,16 @@ This is a list of API changes for all LAM releases.
<br> <br>
<h2>5.0 -&gt; 5.1</h2>Module interface - getPDFEntries(): It is no <h2>5.0 -&gt; 5.1</h2>Module interface<br>
<ul>
<li><span style="font-weight: bold;">getPDFEntries(): </span>It is no
longer supported that modules generate PDF XML on their own. You must longer supported that modules generate PDF XML on their own. You must
use addSimplePDFField/addPDFKeyValue/addPDFTable() from baseModule for use addSimplePDFField/addPDFKeyValue/addPDFTable() from baseModule for
this.<br> this.</li>
<li><span style="font-weight: bold;">getSelfServiceOptions:</span> the function must now return an array of htmlResponsiveRow instead of htmlTableRow<br>
</li>
</ul>
<br> <br>
<h2>4.8 -&gt; 4.9</h2> <h2>4.8 -&gt; 4.9</h2>
API changes<br> API changes<br>

View File

@ -989,7 +989,9 @@ Have fun!
<section> <section>
<title>5.0 -&gt; 5.1</title> <title>5.0 -&gt; 5.1</title>
<para>No special actions needed.</para> <para>Self Service: There were large changes to provide a responsive
design that works for desktop and mobile. If you use custom CSS to
style Self Service then this must be updated.</para>
</section> </section>
<section> <section>

View File

@ -1428,8 +1428,8 @@ abstract class baseModule {
} }
} }
$row = new htmlResponsiveRow(); $row = new htmlResponsiveRow();
$row->add(new htmlOutputText($this->getSelfServiceLabel($name, $label)), 12, 6, 6, 'tabletPlus-align-right mobile-align-left'); $row->add(new htmlOutputText($this->getSelfServiceLabel($name, $label)), 12, 6, 6, 'responsiveLabel');
$row->add($field, 12, 6, 6, 'tabletPlus-align-left'); $row->add($field, 12, 6, 6, 'responsiveField');
$container[$name] = $row; $container[$name] = $row;
} }

View File

@ -3408,14 +3408,14 @@ class htmlResponsiveInputField extends htmlInputField {
if (is_dir("../graphics")) $graphicsPath = "../graphics"; if (is_dir("../graphics")) $graphicsPath = "../graphics";
$labelGroup->addElement(new htmlImage($graphicsPath . '/required.png', 16, 16, _('required'), _('required'))); $labelGroup->addElement(new htmlImage($graphicsPath . '/required.png', 16, 16, _('required'), _('required')));
} }
$row->add($labelGroup, 12, 6, 6, 'tabletPlus-align-right mobile-align-left'); $row->add($labelGroup, 12, 6, 6, 'responsiveLabel');
// input field // input field
$fieldGroup = new htmlGroup(); $fieldGroup = new htmlGroup();
$fieldGroup->addElement($this); $fieldGroup->addElement($this);
if (!empty($this->helpID)) { if (!empty($this->helpID)) {
$fieldGroup->addElement(new htmlHelpLink($this->helpID)); $fieldGroup->addElement(new htmlHelpLink($this->helpID));
} }
$row->add($fieldGroup, 12, 6, 6, 'tabletPlus-align-left'); $row->add($fieldGroup, 12, 6, 6, 'responsiveField');
return $row->generateHTML($module, $input, $values, $restricted, $tabindex, $scope); return $row->generateHTML($module, $input, $values, $restricted, $tabindex, $scope);
} }

View File

@ -667,25 +667,21 @@ div.dialog-page {
/* mobile */ /* mobile */
@media only screen and (max-width: 40.0625em) { @media only screen and (max-width: 40.0625em) {
.mobile-align-left { .responsiveLabel {
text-align: left; text-align: left;
} }
.mobile-align-right {
text-align: right;
}
} }
/* tablet */ /* tablet */
@media only screen and (min-width: 40.0625em) and (max-width: 64.0625em) { @media only screen and (min-width: 40.0625em) and (max-width: 64.0625em) {
.tablet-align-left,.tabletPlus-align-left { .responsiveLabel {
text-align: left; text-align: right;
} }
.tablet-align-right,.tabletPlus-align-right { .responsiveField {
text-align: right; text-align: left;
} }
} }
@ -693,12 +689,12 @@ div.dialog-page {
/* desktop */ /* desktop */
@media only screen and (min-width: 64.0625em) { @media only screen and (min-width: 64.0625em) {
.desktop-align-left,.tabletPlus-align-left { .responsiveLabel {
text-align: left;
}
.desktop-align-right,.tabletPlus-align-right {
text-align: right; text-align: right;
} }
.responsiveField {
text-align: left;
}
} }