Skip to content

Commit

Permalink
Add labels to form inputs
Browse files Browse the repository at this point in the history
  • Loading branch information
@canac
canac committed Oct 29, 2024
1 parent dd2c382 commit d08bb2e
Show file tree
Hide file tree
Showing 12 changed files with 300 additions and 222 deletions.
12 changes: 8 additions & 4 deletions src/app/designationEditor/pageOptionsModal/pageOptionsModal.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,10 @@
<div class="tab-content">
<div class="tab-pane active" ng-if="$ctrl.tab === 'parentDesignation'">
<div class="form-group">
<label>Parent Designation</label>
<input name="parentDesignationNumber" type="text" class="form-control" ng-model="$ctrl.parentDesignationNumber">
<label>
Parent Designation
<input name="parentDesignationNumber" type="text" class="form-control" ng-model="$ctrl.parentDesignationNumber">
</label>
</div>
<div class="form-group">
<label>Organization ID</label>
Expand Down Expand Up @@ -62,8 +64,10 @@

<div class="tab-pane active" ng-if="$ctrl.tab === 'other'">
<div class="form-group">
<label>Facebook Pixel ID</label>
<input name="facebookPixelId" type="text" class="form-control" ng-model="$ctrl.facebookPixelId">
<label>
Facebook Pixel ID
<input name="facebookPixelId" type="text" class="form-control" ng-model="$ctrl.facebookPixelId">
</label>
</div>


Expand Down
3 changes: 2 additions & 1 deletion src/app/designationEditor/personalOptionsModal/personalOptionsModal.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,12 +76,13 @@
<div class="form-group">
<label>
<input type="checkbox"
aria-describedby="newsletter-help"
ng-disabled="!$ctrl.hasNewsletter"
ng-checked="$ctrl.showNewsletterForm"
ng-model="$ctrl.showNewsletterForm"/> Display Newsletter Form?
</label>
</div>
<div class="form-group">
<div id="newsletter-help" class="form-group">
<h6 ng-if="$ctrl.hasNewsletter">This form will allow donors to subscribe to your MPDX newsletter.</h6>
<h6 ng-if="!$ctrl.hasNewsletter">This option is disabled because you do not have an MPDX account. To sign up for one, visit <a href="https://mpdx.org" target="_blank">mpdx.org</a>.</h6>
</div>
Expand Down
14 changes: 9 additions & 5 deletions src/app/designationEditor/titleModal/titleModal.tpl.html
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
<div class="modal-body">
<div class="form-group">
<label>Receipt Title</label>
<input name="receiptTitle" type="text" class="form-control" ng-model="$ctrl.receiptTitle" disabled>
<span class="help-block">
<label>
Receipt Title
<input name="receiptTitle" type="text" class="form-control" aria-describedby="receipt-help" ng-model="$ctrl.receiptTitle" disabled>
</label>
<span id="receipt-help" class="help-block">
<strong>Email <a href="mailto:[email protected]">[email protected]</a> to update/change.</strong>
</span>
</div>

<div class="form-group">
<label translate>Give.Cru.org Title</label>
<input name="giveTitle" type="text" class="form-control" ng-model="$ctrl.giveTitle">
<label>
<span translate>Give.Cru.org Title</span>
<input name="giveTitle" type="text" class="form-control" ng-model="$ctrl.giveTitle">
</label>
</div>
</div>
<div class="modal-footer">
Expand Down
8 changes: 5 additions & 3 deletions src/app/designationEditor/websiteModal/websiteModal.tpl.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
<div class="modal-body">
<div class="form-group">
<label>Website Address</label>
<input name="website" type="text" class="form-control" placeholder="http://" ng-model="$ctrl.website">
<span class="help-block">Fill in this field to add a website link.</span>
<label>
Website Address
<input name="website" type="text" class="form-control" placeholder="https://" aria-describedby="website-help" ng-model="$ctrl.website">
</label>
<span id="website-help" class="help-block">Fill in this field to add a website link.</span>
</div>
</div>
<div class="modal-footer">
Expand Down
65 changes: 37 additions & 28 deletions src/app/profile/profile.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ <h2 class="mb_x" translate>Your Profile</h2>
<div class="col-md-7 mb">

<!--Donor Details-->
<h4 class="panel-title border-bottom-small visible" translate>Your Name</h4>
<h4 id="name-heading" class="panel-title border-bottom-small visible" translate>Your Name</h4>
<div class="loading-overlay-parent">
<loading type="overlay" ng-if="$ctrl.donorDetailsLoading"></loading>
<ul class="list-unstyled people-fields">
Expand All @@ -50,15 +50,16 @@ <h4 class="panel-title border-bottom-small visible" translate>Your Name</h4>

<select name="nameTitle"
class="form-control form-control-subtle prefix"
aria-label="Your name title"
ng-model="$ctrl.donorDetails.name.title"
ng-options="value as label for (value , label) in $ctrl.availableTitles">
</select>

<input name="nameGivenName" type="text" class="form-control form-control-subtle first" disabled ng-model="$ctrl.donorDetails.name['given-name']">
<input name="nameMiddleInitial" type="text" class="form-control form-control-subtle middle" ng-model="$ctrl.donorDetails.name['middle-initial']" ng-maxlength="15">
<input name="nameFamilyName" type="text" class="form-control form-control-subtle last" disabled ng-model="$ctrl.donorDetails.name['family-name']">
<input name="nameGivenName" type="text" class="form-control form-control-subtle first" disabled aria-label="Your given name" ng-model="$ctrl.donorDetails.name['given-name']">
<input name="nameMiddleInitial" type="text" class="form-control form-control-subtle middle" aria-label="Your middle initial" ng-model="$ctrl.donorDetails.name['middle-initial']" ng-maxlength="15">
<input name="nameFamilyName" type="text" class="form-control form-control-subtle last" disabled aria-label="Your family name" ng-model="$ctrl.donorDetails.name['family-name']">

<select name="nameSuffix" class="form-control form-control-subtle suffix" ng-model="$ctrl.donorDetails.name.suffix">
<select name="nameSuffix" class="form-control form-control-subtle suffix" aria-label="Your name suffix" ng-model="$ctrl.donorDetails.name.suffix">
<option value=""></option>
<option value="Jr." translate>Jr</option>
<option value="Sr." translate>Sr</option>
Expand All @@ -85,15 +86,16 @@ <h4 class="panel-title border-bottom-small visible" translate>Your Name</h4>
<i class="fa fa-lock"></i>
<select name="title"
class="form-control form-control-subtle prefix"
aria-label="Spouse's name title"
ng-model="$ctrl.donorDetails['spouse-name'].title"
ng-options="value as label for (value , label) in $ctrl.availableTitles">
</select>

<input name="spouseName" type="text" class="form-control form-control-subtle first" ng-model="$ctrl.donorDetails['spouse-name']['given-name']" ng-maxlength="50" ng-disabled="$ctrl.hasSpouse" ng-required="$ctrl.addingSpouse">
<input name="spouseInitial" type="text" class="form-control form-control-subtle middle" ng-model="$ctrl.donorDetails['spouse-name']['middle-initial']" ng-maxlength="15">
<input name="spouseLastName" type="text" class="form-control form-control-subtle last" ng-model="$ctrl.donorDetails['spouse-name']['family-name']" ng-maxlength="50" ng-disabled="$ctrl.hasSpouse" ng-required="$ctrl.addingSpouse">
<input name="spouseName" type="text" class="form-control form-control-subtle first" aria-label="Spouse's given name" ng-model="$ctrl.donorDetails['spouse-name']['given-name']" ng-maxlength="50" ng-disabled="$ctrl.hasSpouse" ng-required="$ctrl.addingSpouse">
<input name="spouseInitial" type="text" class="form-control form-control-subtle middle" aria-label="Spouse's middle initial" ng-model="$ctrl.donorDetails['spouse-name']['middle-initial']" ng-maxlength="15">
<input name="spouseLastName" type="text" class="form-control form-control-subtle last" aria-label="Spouse's family name" ng-model="$ctrl.donorDetails['spouse-name']['family-name']" ng-maxlength="50" ng-disabled="$ctrl.hasSpouse" ng-required="$ctrl.addingSpouse">

<select name="suffix" class="form-control form-control-subtle suffix" ng-model="$ctrl.donorDetails['spouse-name'].suffix">
<select name="suffix" class="form-control form-control-subtle suffix" aria-label="Spouse's name suffix" ng-model="$ctrl.donorDetails['spouse-name'].suffix">
<option value=""></option>
<option value="Jr." translate>Jr</option>
<option value="Sr." translate>Sr</option>
Expand Down Expand Up @@ -144,14 +146,16 @@ <h4 class="panel-title border-bottom-small visible mt" translate>Email Addresse
<loading type="overlay" ng-if="$ctrl.emailLoading"></loading>
<form name="$ctrl.donorEmailForm" novalidate>
<div class="form-group is-required" ng-class="{'has-error': ($ctrl.donorEmailForm.donorsEmail | showErrors)}">
<label>{{$ctrl.donorDetails.name['given-name'] + ' ' + $ctrl.donorDetails.name['family-name']}} Email</label>
<input type="email"
name="donorsEmail"
class="form-control form-control-subtle"
ng-model="$ctrl.donorEmail.email"
maxlength="100"
required
ng-disabled="$ctrl.donorDetails.staff">
<label>
<span>{{$ctrl.donorDetails.name['given-name'] + ' ' + $ctrl.donorDetails.name['family-name']}} Email</span>
<input type="email"
name="donorsEmail"
class="form-control form-control-subtle"
ng-model="$ctrl.donorEmail.email"
maxlength="100"
required
ng-disabled="$ctrl.donorDetails.staff">
</label>
<div role="alert" ng-messages="$ctrl.donorEmailForm.$error" ng-if="($ctrl.donorEmailForm.donorsEmail | showErrors)">
<div class="help-block" ng-message="required" translate>You must enter an email address</div>
<div class="help-block" ng-message="email" translate>You must enter a valid email address</div>
Expand All @@ -163,15 +167,15 @@ <h4 class="panel-title border-bottom-small visible mt" translate>Email Addresse

<form name="$ctrl.spouseEmailForm" novalidate ng-if="$ctrl.donorDetails['donor-type'] === 'Household' && ($ctrl.hasSpouse || $ctrl.addingSpouse)">
<div class="form-group" ng-class="{'has-error': ($ctrl.spouseEmailForm.spouseEmail | showErrors)}">
<label translate>
{{$ctrl.hasSpouse ? ($ctrl.donorDetails['spouse-name']['given-name'] + ' ' + $ctrl.donorDetails['spouse-name']['family-name']) : 'Spouse'}} Email
<label>
<span translate>{{$ctrl.hasSpouse ? ($ctrl.donorDetails['spouse-name']['given-name'] + ' ' + $ctrl.donorDetails['spouse-name']['family-name']) : 'Spouse'}} Email</span>
<input type="email"
name="spouseEmail"
class="form-control form-control-subtle"
ng-model="$ctrl.spouseEmail.email"
maxlength="100"
ng-disabled="$ctrl.donorDetails.staff">
</label>
<input type="email"
name="spouseEmail"
class="form-control form-control-subtle"
ng-model="$ctrl.spouseEmail.email"
maxlength="100"
ng-disabled="$ctrl.donorDetails.staff">
<div role="alert" ng-messages="$ctrl.spouseEmailForm.spouseEmail.$error" ng-if="($ctrl.spouseEmailForm.spouseEmail | showErrors)">
<div class="help-block" ng-message="email" translate>You must enter a valid email address</div>
<div class="help-block" ng-message="maxlength" translate>This field cannot be longer than 100 characters</div>
Expand All @@ -191,6 +195,7 @@ <h4 class="panel-title border-bottom-small visible mt" translate>Phone Numbers<
<form name="$ctrl.phoneNumberForms[{{$index}}]" ng-hide="phone.delete" novalidate>
<select name="phoneNumberType"
class="form-control form-control-subtle"
aria-label="Phone number type"
ng-model="phone['phone-number-type']"
ng-disabled="$ctrl.donorDetails.staff">
<option translate>Home</option>
Expand All @@ -201,18 +206,20 @@ <h4 class="panel-title border-bottom-small visible mt" translate>Phone Numbers<
<input name="phoneNumber"
type="tel"
class="form-control form-control-subtle"
aria-label="Phone number"
ng-model="phone['phone-number']"
required
ng-disabled="$ctrl.donorDetails.staff">
<select name="spousePhoneNumber"
class="form-control form-control-subtle"
aria-label="Phone number person"
ng-model="phone['is-spouse']"
ng-change="phone.ownerChanged = !phone.ownerChanged"
ng-disabled="!$ctrl.hasSpouse || $ctrl.donorDetails.staff">
<option ng-value="true">{{$ctrl.donorDetails['spouse-name']['given-name']}}</option>
<option ng-value="false">{{$ctrl.donorDetails.name['given-name']}}</option>
</select>
<a id="removeSpousePhoneNumberLink" href="" ng-click="$ctrl.deletePhoneNumber(phone, $index)" ng-if="!$ctrl.donorDetails.staff">
<a id="removeSpousePhoneNumberLink" href="" aria-label="Delete phone number" ng-click="$ctrl.deletePhoneNumber(phone, $index)" ng-if="!$ctrl.donorDetails.staff">
<i class="fa fa-minus-circle" aria-hidden="true"></i>
</a>
</form>
Expand All @@ -235,8 +242,10 @@ <h4 class="panel-title border-bottom-small visible" translate>Your Mailing Addr
<div class="row" ng-if="$ctrl.donorDetails['donor-type'] == 'Organization'">
<div class="col-sm-12">
<div class="form-group">
<label translate>Organization Name</label>
<input type="text" class="form-control form-control-subtle" ng-model="$ctrl.donorDetails['organization-name']" disabled>
<label>
<span translate>Organization Name</span>
<input type="text" class="form-control form-control-subtle" ng-model="$ctrl.donorDetails['organization-name']" disabled>
</label>
</div>
</div>
</div>
Expand Down
6 changes: 5 additions & 1 deletion src/assets/crubrand/bootstrap-variations/_forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,10 @@ output {
// input[type="tel"]
// input[type="color"]

label:has(.form-control) {
width: 100%;
}

.form-control {
display: block;
width: 100%;
Expand Down Expand Up @@ -442,7 +446,7 @@ input[type="checkbox"] {
}

// Input groups need that 100% width though
.input-group > .form-control {
.input-group > label > .form-control {
width: 100%;
}

Expand Down
24 changes: 14 additions & 10 deletions src/assets/scss/_form.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
.form-control {
box-shadow: inset 0px 0px 0px 1px $state-danger-text;
}
label {
label > span {
color: $state-danger-text;
font-weight: 600;
&:before {
Expand All @@ -19,7 +19,7 @@
.form-control {
box-shadow: inset 0px 0px 0px 1px $colorHelper-success;
}
label {
label > span {
color: $colorHelper-success;
&:before {
content: "\f00c";
Expand All @@ -30,15 +30,19 @@
}
}

label > span {
display: block;
margin-bottom: 4px;
}

.is-required {
label {
&:after {
content: "*";
display: inline-block;
font-size: 115%;
font-family: "fontawesome", "Font Awesome 5 Pro";
margin-left: 6px;
}
label > span:after {
content: "*";
display: inline-block;
font-size: 115%;
line-height: 0;
font-family: "fontawesome", "Font Awesome 5 Pro";
margin-left: 6px;
}
input[type=text],
input[type=number],
Expand Down
4 changes: 4 additions & 0 deletions src/assets/scss/_gift-config.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@

}

label.custom-amount {
width: auto;
}



.radio,
Expand Down
Loading

0 comments on commit d08bb2e

Please sign in to comment.