Skip to content

Commit 7955405

Browse files
swapnamol-abrahamswapnamol-abraham
authored
Merge pull request #1466 from TechnologyEnhancedLearning/Develop/Fixes/Notification-Count
Notification count design added
2 parents 316d455 + bcd2047 commit 7955405

File tree

3 files changed

+140
-20
lines changed

3 files changed

+140
-20
lines changed

‎LearningHub.Nhs.WebUI/Styles/nhsuk/nhsuk-overrides.scss‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,43 @@ form label.nhsuk-u-visually-hidden {
107107
background-color: $color_nhsuk-white;
108108
}
109109

110+
.nhsuk-account__myaccount {
111+
float: right;
112+
position: relative;
113+
z-index: 2;
114+
display: flex;
115+
align-items: center;
116+
gap: 0.5rem;
117+
flex-wrap: wrap;
118+
}
119+
120+
.nhsuk-account__icon-wrapper {
121+
position: relative;
122+
width: 26px;
123+
height: 26px;
124+
}
125+
126+
.nhsuk-header__notification-dot-mobile {
127+
position: absolute;
128+
top: -6px;
129+
right: -6px;
130+
background-color: #d5281b;
131+
color: white;
132+
font-size: 10px;
133+
font-weight: bold;
134+
padding: 2px 6px;
135+
border-radius: 50%;
136+
line-height: 1;
137+
white-space: nowrap;
138+
}
139+
140+
.nhsuk-account__links {
141+
display: flex;
142+
align-items: center;
143+
gap: 0.5rem;
144+
flex-wrap: wrap;
145+
}
146+
110147
/* One third column layout that switches to full width at the small desktop breakpoint (990px) instead of mobile. */
111148
.nhsuk-grid-column-one-third-small-desktop {
112149
@extend .nhsuk-grid-column-one-third;
@@ -591,7 +628,7 @@ form label.nhsuk-u-visually-hidden {
591628
gap: 0 px2rem(16);
592629
align-items: flex-start;
593630
flex-wrap: wrap;
594-
width: px2rem(166);
631+
width: px2rem(186);
595632
}
596633

597634
.nhsuk-header__pre-login .nhsuk-header__mobile-only-nav {

‎LearningHub.Nhs.WebUI/Views/Shared/Components/NavigationItems/MobileTopRightNav.cshtml‎

Lines changed: 63 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,24 +13,70 @@
1313
1414
else
1515
{*@
16-
@if (Model.ShowMyAccount)
17-
{
18-
<a class="nhsuk-account__login--link" asp-controller="Myaccount" asp-action="Index">My account</a>
19-
}
20-
@if (Model.ShowSignOut)
21-
{
22-
<a class="nhsuk-account__login--link" asp-controller="Home" asp-action="Logout">Log out</a>
23-
}
24-
<div class="nhsuk-header__mobile-break"></div>
25-
@if (Model.ShowSearch)
26-
{
27-
<button class="nhsuk-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
28-
<svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
29-
<path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
16+
17+
@if (Model.ShowMyAccount || Model.ShowSignOut)
18+
{
19+
<div class="nhsuk-account__myaccount">
20+
<div class="nhsuk-account__icon-wrapper">
21+
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
22+
<g clip-path="url(#clip0_5102_1890)">
23+
<path d="M12.9984 14.7859C10.4797 14.7859 8.36719 12.7547 8.36719 10.1547C8.36719 7.55469 10.3984 5.52344 12.9984 5.52344C15.5172 5.52344 17.6297 7.55469 17.6297 10.1547C17.6297 12.7547 15.5172 14.7859 12.9984 14.7859Z" fill="white" />
24+
<path d="M13 0C5.85 0 0 5.85 0 13C0 20.15 5.85 26 13 26C20.15 26 26 20.15 26 13C26 5.85 20.15 0 13 0ZM19.5813 22.3438V21.125C19.5813 18.2812 17.55 16.0063 14.95 16.0063H11.05C8.53125 15.925 6.5 18.2812 6.5 21.125V22.425C1.3 18.7688 0 11.6188 3.65625 6.5C7.3125 1.38125 14.3812 0 19.5 3.65625C24.6187 7.3125 26 14.3812 22.3438 19.5C21.6125 20.6375 20.6375 21.6125 19.5813 22.3438Z" fill="white" />
25+
</g>
26+
<defs>
27+
<clipPath id="clip0_5102_1890">
28+
<rect width="26" height="26" fill="white" />
29+
</clipPath>
30+
</defs>
3031
</svg>
31-
<span class="nhsuk-u-visually-hidden">Search</span>
32-
</button>
33-
}
32+
33+
@if (Model.NotificationCount > 0)
34+
{
35+
<div class="nhsuk-header__notification-dot-mobile">@NotificationDisplay()</div>
36+
}
37+
</div>
38+
39+
<div class="nhsuk-account__links">
40+
@if (Model.ShowMyAccount)
41+
{
42+
<a class="nhsuk-account__login--link" asp-controller="Myaccount" asp-action="Index">My account</a>
43+
}
44+
@if (Model.ShowSignOut)
45+
{
46+
<a class="nhsuk-account__login--link" asp-controller="Home" asp-action="Logout">Log out</a>
47+
}
48+
</div>
49+
</div>
50+
}
51+
<div class="nhsuk-header__mobile-break"></div>
52+
@if (Model.ShowSearch)
53+
{
54+
<button class="nhsuk-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
55+
<svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
56+
<path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
57+
</svg>
58+
<span class="nhsuk-u-visually-hidden">Search</span>
59+
</button>
60+
}
3461
@* } *@
3562

3663
<!-- end Mobile nav -->
64+
@functions {
65+
public string NotificationDisplay()
66+
{
67+
if (Model.NotificationCount < 1)
68+
{
69+
return "";
70+
}
71+
72+
var returnString = Model.NotificationCount.ToString();
73+
74+
if (Model.NotificationCount > 9)
75+
{
76+
returnString = "9+";
77+
}
78+
79+
return returnString;
80+
81+
}
82+
}

‎LearningHub.Nhs.WebUI/Views/Shared/Components/NavigationItems/Topnav.cshtml‎

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,25 @@
88
<!-- start Topnav -->
99
@if (Model.ShowMyAccount)
1010
{
11-
<a class="nhsuk-account__login--link" asp-controller="Myaccount" asp-action="Index">My account</a>
11+
<div class="nhsuk-account__myaccount">
12+
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
13+
<g clip-path="url(#clip0_5102_1890)">
14+
<path d="M12.9984 14.7859C10.4797 14.7859 8.36719 12.7547 8.36719 10.1547C8.36719 7.55469 10.3984 5.52344 12.9984 5.52344C15.5172 5.52344 17.6297 7.55469 17.6297 10.1547C17.6297 12.7547 15.5172 14.7859 12.9984 14.7859Z" fill="white" />
15+
<path d="M13 0C5.85 0 0 5.85 0 13C0 20.15 5.85 26 13 26C20.15 26 26 20.15 26 13C26 5.85 20.15 0 13 0ZM19.5813 22.3438V21.125C19.5813 18.2812 17.55 16.0063 14.95 16.0063H11.05C8.53125 15.925 6.5 18.2812 6.5 21.125V22.425C1.3 18.7688 0 11.6188 3.65625 6.5C7.3125 1.38125 14.3812 0 19.5 3.65625C24.6187 7.3125 26 14.3812 22.3438 19.5C21.6125 20.6375 20.6375 21.6125 19.5813 22.3438Z" fill="white" />
16+
</g>
17+
<defs>
18+
<clipPath id="clip0_5102_1890">
19+
<rect width="26" height="26" fill="white" />
20+
</clipPath>
21+
</defs>
22+
</svg>
23+
@if (Model.NotificationCount > 0)
24+
{
25+
<div class="nhsuk-header__notification-dot">@NotificationDisplay()</div>
26+
27+
}
28+
<a class="nhsuk-account__login--link" asp-controller="Myaccount" asp-action="Index">My account</a>
29+
</div>
1230
}
1331
@if (Model.ShowSignOut)
1432
{
@@ -19,4 +37,23 @@
1937
<a class="nhsuk-account__login--link" href="@(settings.Value.SupportUrls.SupportSite)" target="_blank">Help</a>
2038
} *@
2139

22-
<!-- end Topnav -->
40+
<!-- end Topnav -->
41+
@functions {
42+
public string NotificationDisplay()
43+
{
44+
if (Model.NotificationCount < 1)
45+
{
46+
return "";
47+
}
48+
49+
var returnString = Model.NotificationCount.ToString();
50+
51+
if (Model.NotificationCount > 9)
52+
{
53+
returnString = "9+";
54+
}
55+
56+
return returnString;
57+
58+
}
59+
}

0 commit comments

Comments
 (0)