diff --git a/LearningHub.Nhs.WebUI/Models/SideMenu/SideNavigationConfiguration.cs b/LearningHub.Nhs.WebUI/Models/SideMenu/SideNavigationConfiguration.cs index bc000237c..e39f9463e 100644 --- a/LearningHub.Nhs.WebUI/Models/SideMenu/SideNavigationConfiguration.cs +++ b/LearningHub.Nhs.WebUI/Models/SideMenu/SideNavigationConfiguration.cs @@ -63,14 +63,14 @@ public static IEnumerable GetGroupedMenus() Text = "Recent learning", Controller = "MyLearning", Action = "Index", - IsActive = route => MatchRoute(route, "Activity", "Recent"), + IsActive = route => MatchRoute(route, "MyLearning", "Index"), }, new SideNavigationItem { Text = "Bookmarks", - Controller = "MyLearning", - Action = "Bookmark", - IsActive = route => MatchRoute(route, "Activity", "Bookmark"), + Controller = "Bookmark", + Action = "Index", + IsActive = route => MatchRoute(route, "Bookmark", "Index"), }, new SideNavigationItem { @@ -84,7 +84,7 @@ public static IEnumerable GetGroupedMenus() Text = "Learning history", Controller = "MyLearning", Action = "LearningHistory", - IsActive = route => MatchRoute(route, "Activity", "LearningHistory"), + IsActive = route => MatchRoute(route, "MyLearning", "LearningHistory"), }, }, }, diff --git a/LearningHub.Nhs.WebUI/Styles/nhsuk/layout.scss b/LearningHub.Nhs.WebUI/Styles/nhsuk/layout.scss index 473cfaa24..4448f4ee9 100644 --- a/LearningHub.Nhs.WebUI/Styles/nhsuk/layout.scss +++ b/LearningHub.Nhs.WebUI/Styles/nhsuk/layout.scss @@ -5,11 +5,141 @@ body { overflow-wrap: break-word; } +.nhsuk-header { + padding: 0 px2rem(32); +} + +.nhsuk-hero { + background-color: $color_nhsuk-blue; + color: #fff; + position: relative; +} + +.nhsuk-hero a, +.nhsuk-hero a:visited, +.nhsuk-hero a:hover, +.nhsuk-hero a:active, +.nhsuk-hero i { + color: $color_nhsuk-white; +} + + +.nhsuk-width-container.app-width-container { + max-width: px2rem(1208); + margin: 0 auto; + padding-left: px2rem(32); + padding-right: px2rem(32); +} + +.nhsuk-header .nhsuk-width-container.app-width-container { + max-width: px2rem(1144); + margin: 0 auto; +} + +.nhsuk-width-container.app-width-container.beta-banner { + padding: px2rem(8) px2rem(32); + max-width: px2rem(1208); + margin: 0 auto; +} + +.nhsuk-header .nhsuk-header__container::after { + content: none; +} + +.nhsuk-header__navigation.app-width-container { + max-width: px2rem(1144); +} + +.app-width-container--full { + margin: 0; + max-width: none +} .app-main-wrapper--no-padding { padding: 0 } +.nhsuk-header__container.app-width-container { + display: flex; + justify-content: space-between; + gap: 0 px2rem(24); + padding: px2rem(16) 0; +} + +.nhsuk-header__content { + display: flex; + align-items: center; + min-height: px2rem(40); + margin-left: auto; +} + +.nhsuk-header__logo { + flex: 1 0 0; +} + +.nhsuk-header__logo .nhsuk-header__link--service { + display: inline-flex; +} + +.nhsuk-header__service-name { + font-size: px2rem(19); +} + +.nhsuk-account__login { + font-size: px2rem(14); + float: right; + position: relative; + z-index: 2; + display: flex; + justify-content: space-between; + align-items: center; + gap: px2rem(24); +} + +.nhsuk-header__notification-dot { + position: absolute; + top: px2rem(8); + right: px2rem(-10); + font-size: px2rem(11); + line-height: px2rem(18); + font-weight: 900; + background: $nhsuk-error-color; + color: white; + min-width: px2rem(18); + height: px2rem(18); + text-align: center; + border-radius: px2rem(9); + padding: px2rem(1) px2rem(3) 0; +} + +.nhsuk-header__menu { + display: none; +} + +.nhsuk-header__search .nhsuk-search__input { + width: px2rem(260); +} + +.nhsuk-header__search { + .nhsuk-search__input { + width: px2rem(260); + + &::-moz-placeholder { + opacity: 1; + } + } + + #search > label.nhsuk-u-visually-hidden { + background-color: $nhsuk-white; + } +} + +.nhsuk-account__login--link, +.nhsuk-account__login--link:visited, +.nhsuk-account__login--link:hover { + color: #fff; +} + .beta-banner { background-color: $color_nhsuk-grey-5; color: $nhsuk-text-color; @@ -40,6 +170,42 @@ body { font-size: px2rem(16); } +.nhsuk-footer { + padding: px2rem(48) 0; +} + + +#header-dropdown-menu-control { + opacity: 0; + position: absolute; +} + +#header-dropdown-menu-control:checked ~ .nhsuk-header__navigation:not(.js-show) { + display: block +} + +#header-mobile-search-control { + display: none; +} + +.nhsuk-header__break { + display: none; +} + +.nhsuk-header__mobile-only-nav { + display: none; +} + +.nhsuk-header__mobile-break { + display: none; +} + +.nhsuk-header__navigation-item--current { + a { + font-weight: bold; + } +} + button[data-toggle="modal"] { color: #005eb8; padding: 0; @@ -104,26 +270,489 @@ li.autosuggestion-option:last-of-type { border-bottom: none !important; } -.form-group-wrapper--error { - border-left: none; - padding-left: 0; + +/* side navigation styles */ +.side-nav__list { + list-style: none; + margin: 0; + padding: 0; + border-right: 1px solid #d8dde0; +} + +.side-nav__item { + border-bottom: 1px solid #d8dde0; + margin-bottom: 0 !important; + padding: 0; +} + + + + +.side-nav__item:last-child { + border-bottom: none; +} + +.side-nav__item a { + font-weight: 700; + display: block; + padding: 22px 12px; +} + + + +.side-nav__item--active a { + text-decoration: none; + color: $nhsuk-black; +} + +.side-nav__item--active { + background-color: #e8f0f7; +} + + + +.side-nav__toggle, +.side-nav__close { + display: none; + background: #e8f0f7; + color: #005eb8; + border: none; + font-size: 16px; + padding: 10px 16px; + border-radius: 25px; + margin: 10px; + cursor: pointer; +} + +.menu-icon { + display: inline-flex; + justify-content: center; + align-items: center; + width: 20px; + height: 20px; + box-sizing: border-box; + padding: 0; + border: 1px solid #d8dde0; + border-radius: 50%; + background-color: white; + transition: background-color 0.3s ease; +} + + +.side-nav__container { + position: fixed; + top: 0; + left: 0; + width: 80%; + max-width: 320px; + height: 100%; + background-color: #e8f0f7; + border-right: 40px solid #005eb8; + box-sizing: border-box; + transform: translateX(-100%); + transition: transform 0.3s ease-in-out; + z-index: 1000; + box-shadow: 4px 0 10px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + overflow: visible; +} + + +.side-nav__close { + position: relative; + right: -35px; + z-index: 2; + align-self: flex-end; + text-align: right; +} + + +.nav-toggle:checked + label.side-nav__toggle + .side-nav__container { + transform: translateX(0); +} + + +.nav-toggle:checked + label .menu-icon { + transform: rotate(180deg); +} + + + +/* large desktop */ +@media (min-width: px2rem(990)) { + + .nhsuk-header__navigation-item--current a { + border-bottom: 4px solid $nhsuk-grey-lighter; + font-weight: normal; + } + + .nhsuk-header__navigation-link { + position: relative; + } + + .nhsuk-header__navigation-item:last-child { + margin-right: 16px; + } +} + +@media (min-width: px2rem(768)) { + .nav-toggle, + .side-nav__toggle, + .side-nav__close { + display: none !important; + } + + .side-nav__container { + position: static; + transform: none !important; + height: auto; + box-shadow: none; + display: block; + width: auto; + background-color: #ffffff; + border-right: none; + } } + /* small desktop */ @media (max-width: px2rem(989)) { + + .nhsuk-header__container { + flex-wrap: wrap; + } + + .nhsuk-header { + padding: 0; + } + + .nhsuk-header__container.app-width-container { + flex-wrap: wrap; + gap: 0 0; + padding: px2rem(16) px2rem(32); + } + + .nhsuk-header__link--service { + align-items: center; + -ms-flex-align: center; + margin-bottom: 0; + width: auto; + } + + .nhsuk-header__service-name { + padding-left: px2rem(16); + } + + .nhsuk-header__logo { + order: 0; + } + + .nhsuk-account__login { + order: 1; + margin-left: auto; + margin-right: 0px; + } + + .nhsuk-header__break { + display: block; + width: 100%; + height: px2rem(24); + order: 2 + } + + .nhsuk-header__search { + order: 3; + flex-grow: 1; + margin-left: 0; + margin-right: px2rem(24); + } + + .nhsuk-header__menu { + display: block; + position: relative; + order: 4; + flex: 0 0 px2rem(74); + } + + .nhsuk-header__navigation-list .nhsuk-header__navigation-item, + .nhsuk-header__navigation .nhsuk-header__navigation-title { + border-top: 1px solid $color_nhsuk-grey-4; + } + + .nhsuk-header__menu-toggle { + text-align: center; + margin: 0; + right: 0; + font-weight: 600; + } + + .nhsuk-header__search-form { + display: flex; + } + + .nhsuk-header__search .nhsuk-search__input { + flex: 1 0 0; + } + + #header-dropdown-menu-control:checked ~ .nhsuk-header__navigation:not(.js-show) { + display: block; + } + + .nhsuk-header__notification-dot { + position: absolute; + top: px2rem(15); + left: px2rem(115); + font-size: px2rem(11); + line-height: px2rem(18); + font-weight: 900; + background: $nhsuk-error-color; + color: $nhsuk-white; + min-width: px2rem(18); + width: fit-content; + height: px2rem(18); + text-align: center; + border-radius: px2rem(9); + } + + .nhsuk-header__navigation-item--current .nhsuk-header__notification-dot { + left: px2rem(125); + } + + .nhsuk-header__menu-notification-dot { + position: absolute; + top: px2rem(-5); + right: px2rem(-6); + background: $nhsuk-error-color; + width: px2rem(12); + height: px2rem(12); + border-radius: px2rem(6); + box-shadow: 0 0 0 2px white; + z-index: 10; + } + .autosuggestion-menu { top: 100%; } } + /* tablet */ @media (max-width: px2rem(768)) { + + .nhsuk-width-container.app-width-container, + .nhsuk-width-container.app-width-container.beta-banner { + padding-left: px2rem(16); + padding-right: px2rem(16); + } + + .nhsuk-back-link { + padding: 0.5rem 0; + } + + .nhsuk-header__menu .nhsuk-header__not-mobile { + display: none; + } + .autosuggestion-menu { top: 100%; } + + .nhsuk-header__not-mobile { + display: none; + } + + .nhsuk-header__mobile-only-nav { + display: flex; + order: 1; + justify-content: space-around; + gap: 0 px2rem(16); + align-items: flex-start; + flex-wrap: wrap; + width: px2rem(166); + } + + .nhsuk-header__mobile-only-nav .nhsuk-header__menu { + margin-right: px2rem(12); + } + + .nhsuk-header__mobile-only-nav .nhsuk-header__search-toggle { + margin-left: px2rem(12); + } + + .nhsuk-header__break { + display: none; + } + + .nhsuk-header__mobile-break { + display: block; + width: 100%; + height: 0; + } + + .nhsuk-header__link--service { + flex-direction: column; + align-items: flex-start; + } + + .nhsuk-header__notification-dot { + top: px2rem(13); + left: px2rem(100); + } + + .nhsuk-header__service-name { + padding: px2rem(12) 0 0; + } + + .nhsuk-header__search-toggle { + position: relative; + height: px2rem(40); + order: 2; + padding: px2rem(7) px2rem(10) 0; + margin: 0 + } + + .nhsuk-header__search .nhsuk-search__submit { + padding-top: nhsuk-spacing(1); + } + + .nhsuk-header__menu { + order: 3; + } + + .nhsuk-header__search { + order: 4; + width: 100%; + flex-grow: 1; + margin: px2rem(16) px2rem(-16) 0; + border-bottom: 1px solid $color_nhsuk-grey-4; + } + + #header-mobile-search-control { + display: block; + opacity: 0; + position: absolute; + } + + #header-mobile-search-control:checked ~ .nhsuk-header__search .nhsuk-header__search-wrap { + display: block; + } + + .nhsuk-width-container.nhsuk-header__container.app-width-container { + padding-bottom: 0; + } + + + .side-nav__toggle, .side-nav__close { + display: inline-block; + } + + .side-nav__close { + background-color: transparent; + } + + .nav-toggle:checked + label.side-nav__toggle .menu-icon, + .nav-toggle:checked + label.side-nav__toggle + .side-nav__container .side-nav__close .menu-icon { + background-color: #e8f0f7; + } } /* mobile */ @media (max-width: px2rem(640)) { + + .nhsuk-header__not-mobile { + display: none; + } + + .nhsuk-header__logo { + max-width: none; + } + + .nhsuk-header__mobile-only-nav { + display: flex; + order: 1; + justify-content: space-around; + gap: 0 px2rem(16); + align-items: flex-start; + flex-wrap: wrap; + width: px2rem(166); + } + + .nhsuk-header__pre-login .nhsuk-header__mobile-only-nav { + align-items: center; + justify-content: flex-end; + padding-bottom: px2rem(16); + } + + .nhsuk-header__mobile-only-nav .nhsuk-header__menu { + margin-right: px2rem(12); + } + + .nhsuk-header__mobile-only-nav .nhsuk-header__search-toggle { + margin-left: px2rem(12); + } + + .nhsuk-header__break { + display: none; + } + + .nhsuk-header__mobile-break { + display: block; + width: 100%; + height: 0; + } + + .nhsuk-header__link--service { + flex-direction: column; + align-items: flex-start; + } + + .nhsuk-header__notification-dot { + top: px2rem(13); + left: px2rem(100); + } + + .nhsuk-header__service-name { + padding: px2rem(12) 0 0; + } + + .nhsuk-header__search-toggle { + position: relative; + height: px2rem(40); + order: 2; + padding: px2rem(7) px2rem(10) 0; + margin: 0 + } + + .nhsuk-header__search .nhsuk-search__submit { + padding-top: nhsuk-spacing(1); + } + + .nhsuk-header__menu { + order: 3; + } + + .nhsuk-header__search { + order: 4; + width: 100%; + flex-grow: 1; + margin: px2rem(16) px2rem(-16) 0; + border-bottom: 1px solid $color_nhsuk-grey-4; + } + + #header-mobile-search-control { + display: block; + opacity: 0; + position: absolute; + } + + #header-mobile-search-control:checked ~ .nhsuk-header__search .nhsuk-header__search-wrap { + display: block; + } + + .nhsuk-width-container.nhsuk-header__container.app-width-container { + padding-bottom: 0; + } + .autosuggestion-menu { top: 100%; } diff --git a/LearningHub.Nhs.WebUI/Views/Bookmark/Index.cshtml b/LearningHub.Nhs.WebUI/Views/Bookmark/Index.cshtml index 13cd985c2..8e5b75045 100644 --- a/LearningHub.Nhs.WebUI/Views/Bookmark/Index.cshtml +++ b/LearningHub.Nhs.WebUI/Views/Bookmark/Index.cshtml @@ -2,7 +2,7 @@ @using LearningHub.Nhs.WebUI.Models.Bookmark @model List -@section styles{ +@section styles { } @@ -25,101 +25,112 @@ }; } } +@section NavBreadcrumbs { -
-
- - -

@ViewData["Title"]

- -
-
-

Save and organise your learning resources as bookmarks.

- -

Bookmarks can be displayed individually or you can create folders to organise your learning resources.

+
+
+
+
-
- - - Learn how to manage your bookmarks - - -
-

You can add as many learning resources as required to your bookmark manager, and have the option to rename, move or delete each one.

-

To move a bookmark into a folder, select the learning resource and select ‘Move’.

+
+ Home +
-
+
+

My learning activity

+
+
+
+} +
+
+
+ +
+ @await Component.InvokeAsync("SideNav", new { groupTitle = "Activity" }) +
- - Add a folder - -
- - - - - - - - - - - - @{ - var topLevelBookmarks = Model.Where(m => m.ParentId == null).ToList(); - - if (!topLevelBookmarks.Any()) - { - - - - } - else - { - for (var i = 0; i < topLevelBookmarks.Count; i++) - { - var bookmark = topLevelBookmarks[i]; - var bookmarkAction = GetBookmarkAction(bookmark, i, topLevelBookmarks.Count); - - @if (bookmark.BookmarkTypeId == 1) // Folder. - { - var childBookmarks = Model.Where(m => m.ParentId == bookmark.Id).ToList(); - var bookmarkFolderViewModel = new BookmarkFolderViewModel() +
+
+

Bookmarks

+
+
+

Save and organise your learning resources as bookmarks.

+
+ + + Learn how to manage your bookmarks + + +
+

You can add as many learning resources as required to your bookmark manager, and have the option to rename, move or delete each one.

+

To move a bookmark into a folder, select the learning resource and select ‘Move’.

+
+
+
+
+ + Add a folder + +
+ +
Learning resourceTypeOrganise your bookmarks
- Your bookmarks will appear here. -
+ + + + + + + + + + @{ + var topLevelBookmarks = Model.Where(m => m.ParentId == null).ToList(); + + if (!topLevelBookmarks.Any()) + { + + + + } + else { - FolderBookmark = new BookmarkItemViewModel { Bookmark = bookmark, Action = bookmarkAction }, - ChildBookmarkItems = childBookmarks.Select((item, j) => new BookmarkItemViewModel + for (var i = 0; i < topLevelBookmarks.Count; i++) { - Bookmark = item, - Action = GetBookmarkAction(item, j, childBookmarks.Count), - IsChild = true, - }).ToList() - }; + var bookmark = topLevelBookmarks[i]; + var bookmarkAction = GetBookmarkAction(bookmark, i, topLevelBookmarks.Count); - - } - else - { - + @if (bookmark.BookmarkTypeId == 1) // Folder. + { + var childBookmarks = Model.Where(m => m.ParentId == bookmark.Id).ToList(); + var bookmarkFolderViewModel = new BookmarkFolderViewModel() + { + FolderBookmark = new BookmarkItemViewModel { Bookmark = bookmark, Action = bookmarkAction }, + ChildBookmarkItems = childBookmarks.Select((item, j) => new BookmarkItemViewModel + { + Bookmark = item, + Action = GetBookmarkAction(item, j, childBookmarks.Count), + IsChild = true, + }).ToList() + }; + + + } + else + { + + } + } + } } - } - } - } - -
Learning resourceTypeOrganise your bookmarks
+ Your bookmarks will appear here. +
-
- -
-
-
-

Get help

-

- Find further guidance and support on how to manage bookmarks at the Learning Hub help centre. -

+ + +