From 4692eb5bd52b5b3ac24b6f59c37216e718d56051 Mon Sep 17 00:00:00 2001
From: Aspectis <tobias@aspectis.net>
Date: Tue, 5 Jan 2021 09:47:22 +0100
Subject: [PATCH] refs #18779 [fid_bbi] redesign registration forms
* Replace job title section
* Add JS-based fix for headings and checkbox/radio inputs
* Update form styles
* open registration form outside lightbox
---
themes/fid_bbi/languages/fid/de.ini | 1 +
themes/fid_bbi/scss/base/form.scss | 6 +
themes/fid_bbi/scss/blocks/alert.scss | 16 +-
themes/fid_bbi/scss/blocks/form.scss | 7 +
themes/fid_bbi/scss/blocks/required.scss | 7 +
.../templates/Auth/AbstractBase/login.phtml | 1 +
.../fid_bbi/templates/fid/user/create.phtml | 152 +++++++++---------
themes/fid_bbi/templates/layout/layout.phtml | 21 +++
8 files changed, 132 insertions(+), 79 deletions(-)
create mode 100644 themes/fid_bbi/scss/blocks/required.scss
diff --git a/themes/fid_bbi/languages/fid/de.ini b/themes/fid_bbi/languages/fid/de.ini
index 84c1b37636c..88710403b66 100644
--- a/themes/fid_bbi/languages/fid/de.ini
+++ b/themes/fid_bbi/languages/fid/de.ini
@@ -1,6 +1,7 @@
label_access_level_full_access = "Hochschullehrer*innen, wissenschaftliche Mitarbeiter*innen, Mitglieder von Fachgesellschaften, Doktorand*innen, Stipendiat*innen oder externe Wissenschaftler*innen (z. B. Lehrbeauftragte)"
auth_error_account_blocked = "Ihr Konto wurde aus Sicherheitsgründen gesperrt. Bitte kontaktieren Sie uns unter fid@hab.de, um eine Entsperrung vorzunehmen."
+job_title = Nutzergruppe
job_title_0 = "Hochschullehrer*innen, wissenschaftliche Mitarbeiter*innen, Mitglieder von Fachgesellschaften, Doktorand*innen, Stipendiat*innen, externe Wissenschaftler*innen (z. B. Lehrbeauftragte)"
job_title_1 = "Studierende und weitere Interessierte"
job_title_2 = "Berufspraktiker*innen, wissenschaftliche Mitarbeiter*innen an Bibliotheken, Archiven und Sammlungsinstitutionen (Fachreferent*innen, Referendar*innen)"
diff --git a/themes/fid_bbi/scss/base/form.scss b/themes/fid_bbi/scss/base/form.scss
index d51fcb622d0..df285a5062b 100644
--- a/themes/fid_bbi/scss/base/form.scss
+++ b/themes/fid_bbi/scss/base/form.scss
@@ -112,6 +112,12 @@ textarea {
opacity: 0;
position: absolute;
+ // Preventing inputs from being hidden just in case they are wrapped inside the label
+ label & {
+ opacity: 1;
+ position: static;
+ }
+
+ label {
cursor: pointer;
display: inline-block;
diff --git a/themes/fid_bbi/scss/blocks/alert.scss b/themes/fid_bbi/scss/blocks/alert.scss
index a83de1080c1..7ed908b92b2 100644
--- a/themes/fid_bbi/scss/blocks/alert.scss
+++ b/themes/fid_bbi/scss/blocks/alert.scss
@@ -8,19 +8,23 @@
padding-left: g(2.75);
position: relative;
- &.-success {
- color: $text-muted-color;
+ &.alert-danger {
+ color: $text-color;
}
- &.-info {
+ &.alert-error {
+ color: $text-color;
+ }
+
+ &.alert-info {
color: $text-muted-color;
}
- &.-warning {
- color: $text-color;
+ &.alert-success {
+ color: $text-muted-color;
}
- &.-error {
+ &.alert-warning {
color: $text-color;
}
diff --git a/themes/fid_bbi/scss/blocks/form.scss b/themes/fid_bbi/scss/blocks/form.scss
index 6a157ebdbb2..27e0b353642 100644
--- a/themes/fid_bbi/scss/blocks/form.scss
+++ b/themes/fid_bbi/scss/blocks/form.scss
@@ -3,6 +3,8 @@
}
.form_footer {
+ @include paragraph;
+
@media #{$bp3} {
align-items: center;
display: flex;
@@ -98,6 +100,11 @@
}
}
+ // Used for error messages
+ > ul {
+ margin: g(.5) 0 0;
+ }
+
// "Back" link on some forms
> .btn-link {
margin: g(.5) g(.5) g(.5) 0;
diff --git a/themes/fid_bbi/scss/blocks/required.scss b/themes/fid_bbi/scss/blocks/required.scss
new file mode 100644
index 00000000000..4a32162abf2
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/required.scss
@@ -0,0 +1,7 @@
+.required {
+ &::after {
+ color: $color-a;
+ content: '*';
+ font-weight: 500;
+ }
+}
diff --git a/themes/fid_bbi/templates/Auth/AbstractBase/login.phtml b/themes/fid_bbi/templates/Auth/AbstractBase/login.phtml
index 20f6ca46e6c..51f297fcbfe 100644
--- a/themes/fid_bbi/templates/Auth/AbstractBase/login.phtml
+++ b/themes/fid_bbi/templates/Auth/AbstractBase/login.phtml
@@ -30,6 +30,7 @@
<a
class="createAccountLink"
href="<?=$this->url('myresearch-account')?>?auth_method=<?=$account->getAuthMethod()?>"
+ data-lightbox-ignore
>
<?=$this->transEsc('Create New Account')?>
</a>
diff --git a/themes/fid_bbi/templates/fid/user/create.phtml b/themes/fid_bbi/templates/fid/user/create.phtml
index 93570c762ec..5b44ace6422 100644
--- a/themes/fid_bbi/templates/fid/user/create.phtml
+++ b/themes/fid_bbi/templates/fid/user/create.phtml
@@ -17,6 +17,7 @@
*
* @author Gregor Gawol <gawol@ub.uni-leipzig.de>
* @author Sebastian Kehr <kehr@ub.uni-leipzig.de>
+ * @author Tobias Schäfer <ts@aspectis.net>
* @license http://opensource.org/licenses/gpl-2.0.php GNU GPLv2
*/
@@ -50,13 +51,12 @@ $formElementErrors->setTranslatorTextDomain('fid');
$this->headTitle($title = $this->translate("fid::user_create_form_title"));
?>
-<h2><?= $title ?></h2>
-<div><?= $this->transEsc("fid::required_fields_note") ?></div>
-<?= $this->flashmessages() ?>
-<?= $this->form()->openTag($form) ?>
-<br/>
+<h2><?=$title?></h2>
+<p><?=$this->transEsc("fid::required_fields_note")?></p>
+<?=$this->flashmessages()?>
+<?=$this->form()->openTag($form)?>
-<? /* username */ ?>
+<?php // username ?>
<?php
/** @var Element\Text $elemUsername */
$elemUsername = $form->get('username');
@@ -64,17 +64,17 @@ $elemUsername->setLabelAttributes(['class' => 'col-md-4']);
$elemUsername->setAttributes(['class' => 'form-control', 'disabled' => 1]);
?>
<div class="form-group">
- <?= $this->formLabel($elemUsername) ?>
- <?= $this->formElement($elemUsername) ?>
- <?= $this->formElementErrors($elemUsername) ?>
+ <?=$this->formLabel($elemUsername)?>
+ <?=$this->formElement($elemUsername)?>
+ <?=$this->formElementErrors($elemUsername)?>
<?php
$elemUsername->removeAttribute('disabled');
$elemUsername->setAttribute('type', 'hidden');
?>
- <?= $this->formElement($elemUsername) ?>
+ <?=$this->formElement($elemUsername)?>
</div>
-<? /* password */ ?>
+<?php // password ?>
<?php
/** @var Element\Password $elemPassword */
$elemPassword = $form->get('password');
@@ -82,12 +82,12 @@ $elemPassword->setLabelAttributes(['class' => 'col-md-4']);
$elemPassword->setAttributes(['class' => 'form-control']);
?>
<div class="form-group">
- <?= $this->formLabel($elemPassword) ?>
- <?= $this->formElement($elemPassword) ?>
- <?= $this->formElementErrors($elemPassword) ?>
+ <?=$this->formLabel($elemPassword)?>
+ <?=$this->formElement($elemPassword)?>
+ <?=$this->formElementErrors($elemPassword)?>
</div>
-<? /* password confirmation */ ?>
+<?php // password confirmation ?>
<?php
/** @var Element\Password $elemPasswordConfirmation */
$elemPasswordConfirmation = $form->get('password_confirmation');
@@ -95,25 +95,24 @@ $elemPasswordConfirmation->setLabelAttributes(['class' => 'col-md-4']);
$elemPasswordConfirmation->setAttributes(['class' => 'form-control']);
?>
<div class="form-group">
- <?= $this->formLabel($elemPasswordConfirmation) ?>
- <?= $this->formElement($elemPasswordConfirmation) ?>
- <?= $this->formElementErrors($elemPasswordConfirmation) ?>
+ <?=$this->formLabel($elemPasswordConfirmation)?>
+ <?=$this->formElement($elemPasswordConfirmation)?>
+ <?=$this->formElementErrors($elemPasswordConfirmation)?>
</div>
-<? /* home library */ ?>
+<?php // salutation ?>
<?php
-/** @var Element\Select $elemHomeLibrary */
-$elemHomeLibrary = $form->get('home_library');
-$elemHomeLibrary->setLabelAttributes(['class' => 'col-md-4']);
-$elemHomeLibrary->setAttributes(['class' => 'form-control']);
+/** @var Element\Select $elemSalutation */
+$elemSalutation = $form->get('salutation');
+$elemSalutation->setLabelAttributes(['class' => 'col-md-4']);
+$elemSalutation->setAttributes(['class' => 'form-control']);
?>
<div class="form-group">
- <?= $this->formLabel($elemHomeLibrary) ?>
- <?= $this->formSelect($elemHomeLibrary) ?>
- <?= $this->formElementErrors($elemHomeLibrary) ?>
+ <?=$this->formLabel($elemSalutation)?>
+ <?=$this->formSelect($elemSalutation)?>
</div>
-<? /* academic title */ ?>
+<?php // academic title ?>
<?php
/** @var Element\Text $elemAcademicTitle */
$elemAcademicTitle = $form->get('academic_title');
@@ -121,19 +120,11 @@ $elemAcademicTitle->setLabelAttributes(['class' => 'col-md-4']);
$elemAcademicTitle->setAttributes(['class' => 'form-control']);
?>
<div class="form-group">
- <?= $this->formLabel($elemAcademicTitle) ?>
- <?= $this->formElement($elemAcademicTitle) ?>
+ <?=$this->formLabel($elemAcademicTitle)?>
+ <?=$this->formElement($elemAcademicTitle)?>
</div>
-<? /* salutation */ ?>
-<?php
-/** @var Element\Select $elemSalutation */
-$elemSalutation = $form->get('salutation');
-$elemSalutation->setAttribute('type', 'hidden');
-echo $this->formElement($elemSalutation);
-?>
-
-<? /* firstname */ ?>
+<?php // firstname ?>
<?php
/** @var Element\Text $elemFirstname */
$elemFirstname = $form->get('firstname');
@@ -141,12 +132,12 @@ $elemFirstname->setLabelAttributes(['class' => 'col-md-4']);
$elemFirstname->setAttributes(['class' => 'form-control']);
?>
<div class="form-group">
- <?= $this->formLabel($elemFirstname) ?>
- <?= $this->formElement($elemFirstname) ?>
- <?= $this->formElementErrors($elemFirstname) ?>
+ <?=$this->formLabel($elemFirstname)?>
+ <?=$this->formElement($elemFirstname)?>
+ <?=$this->formElementErrors($elemFirstname)?>
</div>
-<? /* lastname */ ?>
+<?php // lastname ?>
<?php
/** @var Element\Text $elemLastname */
$elemLastname = $form->get('lastname');
@@ -154,43 +145,58 @@ $elemLastname->setLabelAttributes(['class' => 'col-md-4']);
$elemLastname->setAttributes(['class' => 'form-control']);
?>
<div class="form-group">
- <?= $this->formLabel($elemLastname) ?>
- <?= $this->formElement($elemLastname) ?>
- <?= $this->formElementErrors($elemLastname) ?>
+ <?=$this->formLabel($elemLastname)?>
+ <?=$this->formElement($elemLastname)?>
+ <?=$this->formElementErrors($elemLastname)?>
</div>
-<? /* college */ ?>
+<?php // home library ?>
<?php
-/** @var Element\Text $elemCollege */
-$elemCollege = $form->get('college');
-$elemCollege->setLabelAttributes(['class' => 'col-md-4']);
-$elemCollege->setAttributes(['class' => 'form-control']);
+/** @var Element\Select $elemHomeLibrary */
+$elemHomeLibrary = $form->get('home_library');
+$elemHomeLibrary->setLabelAttributes(['class' => 'col-md-4']);
+$elemHomeLibrary->setAttributes(['class' => 'form-control']);
?>
<div class="form-group">
- <?= $this->formLabel($elemCollege) ?>
- <?= $this->formElement($elemCollege) ?>
- <?= $this->formElementErrors($elemCollege) ?>
+ <?=$this->formLabel($elemHomeLibrary)?>
+ <?=$this->formSelect($elemHomeLibrary)?>
+ <?=$this->formElementErrors($elemHomeLibrary)?>
</div>
-<? /* user group */ ?>
+<?php // user group ?>
<?php
/** @var Element\Radio $elemJobTitle */
$elemJobTitle = $form->get('job_title');
?>
<div class="form-group">
- <div class="col-md-4">
- <?= $this->formLabel($elemJobTitle)?>
+ <div class="form_label" id="job-title-legend">
+ <?=$this->translate("fid::{$elemJobTitle->getName()}")?>
+ <span class="required" title="benötigt" aria-label="benötigt"></span>
</div>
- <div class="col-md-8">
- <?= $this->formRadio($elemJobTitle)?>
+ <div class="form_control" aria-labelledby="job-title-legend">
+ <p><?=$this->translate("fid::{$elemJobTitle->getLabel()}")?>:</p>
+ <?=$this->formRadio($elemJobTitle)?>
</div>
- <?= $this->formElementErrors($elemJobTitle)?>
+ <?=$this->formElementErrors($elemJobTitle)?>
+</div>
+
+<?php // college ?>
+<?php
+/** @var Element\Text $elemCollege */
+$elemCollege = $form->get('college');
+$elemCollege->setLabelAttributes(['class' => 'col-md-4']);
+$elemCollege->setAttributes(['class' => 'form-control']);
+?>
+<div class="form-group">
+ <?=$this->formLabel($elemCollege)?>
+ <?=$this->formElement($elemCollege)?>
+ <?=$this->formElementErrors($elemCollege)?>
</div>
-<? /* addresses */ ?>
-<?= $this->render('address-collection.phtml') ?>
+<?php // addresses ?>
+<?=$this->render('address-collection.phtml')?>
-<? /* eula privacy policy */ ?>
+<?php // eula privacy policy ?>
<?php
/** @var Checkbox $elemEulaAccepted */
$elemEulaAccepted = $form->get('eula_accepted');
@@ -198,27 +204,27 @@ $elemEulaAccepted->setAttribute('id', 'eula-accepted');
?>
<div class="form-group eula">
<div>
- <?= $this->formElement($elemEulaAccepted) ?>
- <?= $this->formLabel()->openTag($elemEulaAccepted) ?>
- <?= $this->translate("fid::policy_text") ?>
+ <?=$this->formElement($elemEulaAccepted)?>
+ <?=$this->formLabel()->openTag($elemEulaAccepted)?>
+ <?=$this->translate("fid::policy_text")?>
<?php $url = $this->url('fid/user/policy') ?>
<a data-lightbox
- href="<?= $url ?>"><?= $this->translate("fid::policy") ?></a>
- <?= $this->translate("fid::terms_text") ?>
+ href="<?=$url?>"><?=$this->translate("fid::policy")?></a>
+ <?=$this->translate("fid::terms_text")?>
<?php $url = $this->url('fid/user/terms') ?>
<a data-lightbox
- href="<?= $url ?>"><?= $this->translate("fid::terms") ?></a>.
- <?= $this->formLabel()->closeTag($elemEulaAccepted) ?>
+ href="<?=$url?>"><?=$this->translate("fid::terms")?></a>.
+ <?=$this->formLabel()->closeTag($elemEulaAccepted)?>
</div>
- <?= $this->formElementErrors($elemEulaAccepted) ?>
+ <?=$this->formElementErrors($elemEulaAccepted)?>
</div>
-<? /* submit button */ ?>
+<?php // submit button ?>
<?php
/** @var Submit $elemSubmit */
$elemSubmit = $form->get('submit');
$elemSubmit->setAttributes(['class' => 'btn btn-primary']);
?>
-<div class="form-group"><?= $this->formSubmit($elemSubmit) ?></div>
-<?= $this->form()->closeTag($form) ?>
+<div class="form-group"><?=$this->formSubmit($elemSubmit)?></div>
+<?=$this->form()->closeTag($form)?>
diff --git a/themes/fid_bbi/templates/layout/layout.phtml b/themes/fid_bbi/templates/layout/layout.phtml
index 5717ae04a19..610fe11e98a 100644
--- a/themes/fid_bbi/templates/layout/layout.phtml
+++ b/themes/fid_bbi/templates/layout/layout.phtml
@@ -77,5 +77,26 @@
);
}
?>
+
+ <script>
+ // For styling checkbox and radio inputs, the label must be appended to the
+ // input, but Zend only generates inputs within labels.
+ const checkboxRadioInputs = document.querySelectorAll('[type=checkbox], [type=radio]')
+ for (let i = 0; i < checkboxRadioInputs.length; i++) {
+ const input = checkboxRadioInputs[i]
+ const parent = input.parentNode
+ if (parent.nodeName !== 'LABEL') {
+ continue
+ }
+
+ input.id = input.id || input.name + input.value
+
+ const newLabel = document.createElement('label')
+ newLabel.setAttribute('for', input.id)
+ newLabel.innerHTML = parent.textContent
+
+ parent.outerHTML = '<p>' + input.outerHTML + newLabel.outerHTML + '</p>'
+ }
+ </script>
</body>
<!-- fid_bbi: layout - layout - END -->
--
GitLab