Skip to content

HEEDLS-525 Refactor my account views to fix inconsistent spacing #441

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 23, 2021
Merged

HEEDLS-525 Refactor my account views to fix inconsistent spacing #441

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ee8914e
HEEDLS-525 Refactor my account views to fix inconsistent spacing
AlexJacksonDS Jun 22, 2021
d4249b7
HEEDLS-525 Fix formatting of section
AlexJacksonDS Jun 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 20 additions & 23 deletions DigitalLearningSolutions.Web/Views/MyAccount/EditDetails.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,26 +12,23 @@

@if (User.IsDelegateOnlyAccount()) {
ViewData["Application"] = "Learning Portal";

@section NavMenuItems {
<partial name="../LearningPortal/Shared/_NavMenuItems"/>
<partial name="../LearningPortal/Shared/_NavMenuItems" />
}
}

@if (errorHasOccurred) {
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-full">
<vc:error-summary order-of-property-names="@(new[] { nameof(Model.FirstName), nameof(Model.LastName), nameof(Model.Email), nameof(Model.Password) })"/>
</div>
</div>
}

<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-full">
@if (errorHasOccurred) {
<vc:error-summary order-of-property-names="@(new[] { nameof(Model.FirstName), nameof(Model.LastName), nameof(Model.Email), nameof(Model.Password) })" />
}

<h1 class="nhsuk-heading-xl" id="app-page-heading">Edit details</h1>
</div>
</div>

<form class="nhsuk-u-margin-bottom-8" method="post" novalidate asp-action="EditDetails" enctype="multipart/form-data">
<form class="nhsuk-u-margin-bottom-3" method="post" novalidate asp-action="EditDetails" enctype="multipart/form-data">
<div class="hidden-submit">
<button name="action" class="nhsuk-button" value="save">Save</button>
</div>
Expand All @@ -45,7 +42,7 @@
spell-check="false"
autocomplete="given-name"
hint-text=""
css-class="nhsuk-u-width-one-half"/>
css-class="nhsuk-u-width-one-half" />

<vc:text-input asp-for="LastName"
label="Last name"
Expand All @@ -54,7 +51,7 @@
spell-check="false"
autocomplete="family-name"
hint-text=""
css-class="nhsuk-u-width-one-half"/>
css-class="nhsuk-u-width-one-half" />

<vc:text-input asp-for="Email"
label="Email address"
Expand All @@ -63,12 +60,12 @@
spell-check="false"
autocomplete="email"
hint-text=""
css-class="nhsuk-u-width-one-half"/>
css-class="nhsuk-u-width-one-half" />
</div>
</div>

@if (Model.IsDelegateUser) {
<input type="hidden" asp-for="IsDelegateUser"/>
<input type="hidden" asp-for="IsDelegateUser" />
<div class="nhsuk-grid-row divider">
<div class="nhsuk-grid-column-full">
<vc:select-list asp-for="JobGroupId"
Expand All @@ -78,7 +75,7 @@
deselectable="false"
css-class="nhsuk-u-width-one-half"
default-option="Select a job group"
select-list-options="@ViewBag.JobGroupOptions"/>
select-list-options="@ViewBag.JobGroupOptions" />

@foreach (EditCustomFieldViewModel customField in ViewBag.CustomFields) {
@if (customField.Options.Any()) {
Expand All @@ -89,7 +86,7 @@
deselectable="@(!customField.Mandatory)"
css-class="nhsuk-u-width-one-half"
default-option="Select a @customField.CustomPrompt.ToLower()"
select-list-options="@customField.Options"/>
select-list-options="@customField.Options" />
} else {
<vc:text-input asp-for="@("Answer" + customField.CustomFieldId)"
label="@(customField.CustomPrompt + (customField.Mandatory ? "" : " (optional)"))"
Expand All @@ -98,7 +95,7 @@
spell-check="false"
autocomplete=""
hint-text=""
css-class="nhsuk-u-width-one-half"/>
css-class="nhsuk-u-width-one-half" />
}
}
</div>
Expand All @@ -110,14 +107,14 @@
@{ var hintText = @"To change your profile picture, select a new image and click the Preview button to preview it.
To remove your profile picture click the remove button.
Changes will not be made until the Save button below is clicked."; }
<input type="hidden" asp-for="ProfileImage"/>
<vc:file-input asp-for="ProfileImageFile" label="Profile picture (optional)" hint-text="@hintText" css-class="nhsuk-u-width-full"/>
<input type="hidden" asp-for="ProfileImage" />
<vc:file-input asp-for="ProfileImageFile" label="Profile picture (optional)" hint-text="@hintText" css-class="nhsuk-u-width-full" />
</div>
<div class="nhsuk-grid-column-one-half">
@if (Model.ProfileImage != null) {
<img class="profile-picture__image" src="data:image;base64,@Convert.ToBase64String(Model.ProfileImage)" alt="Profile Picture"/>
<img class="profile-picture__image" src="data:image;base64,@Convert.ToBase64String(Model.ProfileImage)" alt="Profile Picture" />
} else {
<img class="profile-picture__image" src="@Url.Content("~/images/avatar.png")" alt="Default Profile Picture"/>
<img class="profile-picture__image" src="@Url.Content("~/images/avatar.png")" alt="Default Profile Picture" />
}
</div>
</div>
Expand All @@ -138,14 +135,14 @@
spell-check="false"
autocomplete=""
hint-text=""
css-class="nhsuk-u-width-one-half"/>
css-class="nhsuk-u-width-one-half" />

<button name="action" class="nhsuk-button" value="save">Save</button>
</div>
</div>
</form>
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-full">
<vc:back-link asp-controller="MyAccount" asp-action="Index" link-text="Cancel"/>
<vc:back-link asp-controller="MyAccount" asp-action="Index" link-text="Cancel" />
</div>
</div>
24 changes: 12 additions & 12 deletions DigitalLearningSolutions.Web/Views/NotificationPreferences/Index.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,18 +21,18 @@
<div class="nhsuk-grid-column-full">
<h1 class="nhsuk-heading-xl">Notification preferences</h1>

@if (Model.AdminNotifications.Notifications.Any())
{
<partial name="_UserNotificationPreferences" model="Model.AdminNotifications"/>
}

@if (Model.DelegateNotifications.Notifications.Any())
{
<partial name="_UserNotificationPreferences" model="Model.DelegateNotifications"/>
}

<div class="top-spaced-goback">
<vc:back-link asp-controller="MyAccount" asp-action="Index" link-text="Go back" />
<div class="nhsuk-u-margin-bottom-7">
@if (Model.AdminNotifications.Notifications.Any())
{
<partial name="_UserNotificationPreferences" model="Model.AdminNotifications" />
}

@if (Model.DelegateNotifications.Notifications.Any())
{
<partial name="_UserNotificationPreferences" model="Model.DelegateNotifications" />
}
</div>

<vc:back-link asp-controller="MyAccount" asp-action="Index" link-text="Go back" />
</div>
</div>
67 changes: 34 additions & 33 deletions ...lLearningSolutions.Web/Views/NotificationPreferences/UpdateNotificationPreferences.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,40 +17,41 @@
}
}

<form method="post" asp-controller="NotificationPreferences" asp-action="SaveNotificationPreferences" asp-route-userType="@Model.UserType">
<div class="nhsuk-form-group">
<div class="nhsuk-fieldset" aria-describedby="notification-hint">
<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
<h1 class="nhsuk-fieldset__heading">
Update notification preferences
</h1>
</legend>
<div class="nhsuk-hint update-notification-hint" id="notification-hint">Please tick the boxes for all the notifications you would like to receive.</div>
<div class="nhsuk-checkboxes">
@foreach (var (notification, index) in Model.Notifications.Select((item, index) => (item, index)))
{
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input"
id="notification-@index.ToString()"
name="notificationIds"
type="checkbox"
value="@notification.NotificationId"
aria-describedby="notification-@index.ToString()-item-hint"
@(notification.Accepted ? "checked" : "")>
<label class="nhsuk-label nhsuk-checkboxes__label" for="notification-@index.ToString()">
@notification.NotificationName
</label>
<div class="nhsuk-hint nhsuk-checkboxes__hint" id="notification-@index.ToString()-item-hint">
@Html.Raw(notification.Description)
</div>
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-full">
<h1 class="nhsuk-heading-xl">Update notification preferences</h1>

<form class="nhsuk-u-margin-bottom-3" method="post" asp-controller="NotificationPreferences" asp-action="SaveNotificationPreferences" asp-route-userType="@Model.UserType">
<div class="nhsuk-form-group">
<div class="nhsuk-fieldset" aria-describedby="notification-hint">
<div class="nhsuk-hint update-notification-hint" id="notification-hint">Please tick the boxes for all the notifications you would like to receive.</div>
<div class="nhsuk-checkboxes">
@foreach (var (notification, index) in Model.Notifications.Select((item, index) => (item, index)))
{
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input"
id="notification-@index.ToString()"
name="notificationIds"
type="checkbox"
value="@notification.NotificationId"
aria-describedby="notification-@index.ToString()-item-hint"
@(notification.Accepted ? "checked" : "")>
<label class="nhsuk-label nhsuk-checkboxes__label" for="notification-@index.ToString()">
@notification.NotificationName
</label>
<div class="nhsuk-hint nhsuk-checkboxes__hint" id="notification-@index.ToString()-item-hint">
@Html.Raw(notification.Description)
</div>
</div>
}
</div>
}
</div>

<button class="nhsuk-button" type="submit">Save</button>
<div class="top-spaced-goback">
<vc:back-link asp-controller="NotificationPreferences" asp-action="Index" link-text="Cancel" />
<button class="nhsuk-button" type="submit">Save</button>
</div>
</div>
</div>
</form>

<vc:back-link asp-controller="NotificationPreferences" asp-action="Index" link-text="Cancel" />
</div>
</form>
</div>