diff --git a/app/components/navigation_component.html.erb b/app/components/navigation_component.html.erb
deleted file mode 100644
index 3d192ef2b..000000000
--- a/app/components/navigation_component.html.erb
+++ /dev/null
@@ -1,17 +0,0 @@
-
diff --git a/app/components/navigation_component.rb b/app/components/navigation_component.rb
deleted file mode 100644
index e386e429f..000000000
--- a/app/components/navigation_component.rb
+++ /dev/null
@@ -1,13 +0,0 @@
-class NavigationComponent < ViewComponent::Base
- attr_reader :items, :level
-
- def initialize(items:, level: "primary")
- @items = items
- @level = level
- super
- end
-
- def highlighted_tab?(item, _path)
- item[:current]
- end
-end
diff --git a/app/components/primary_navigation_component.html.erb b/app/components/primary_navigation_component.html.erb
new file mode 100644
index 000000000..9cad3bc64
--- /dev/null
+++ b/app/components/primary_navigation_component.html.erb
@@ -0,0 +1,17 @@
+
diff --git a/app/components/primary_navigation_component.rb b/app/components/primary_navigation_component.rb
new file mode 100644
index 000000000..0389d30b3
--- /dev/null
+++ b/app/components/primary_navigation_component.rb
@@ -0,0 +1,12 @@
+class PrimaryNavigationComponent < ViewComponent::Base
+ attr_reader :items
+
+ def initialize(items:)
+ @items = items
+ super
+ end
+
+ def highlighted_item?(item, _path)
+ item[:current]
+ end
+end
diff --git a/app/components/sub_navigation_component.html.erb b/app/components/sub_navigation_component.html.erb
new file mode 100644
index 000000000..b9790d917
--- /dev/null
+++ b/app/components/sub_navigation_component.html.erb
@@ -0,0 +1,15 @@
+
diff --git a/app/components/sub_navigation_component.rb b/app/components/sub_navigation_component.rb
new file mode 100644
index 000000000..e4dd0654a
--- /dev/null
+++ b/app/components/sub_navigation_component.rb
@@ -0,0 +1,12 @@
+class SubNavigationComponent < ViewComponent::Base
+ attr_reader :items
+
+ def initialize(items:)
+ @items = items
+ super
+ end
+
+ def highlighted_item?(item, _path)
+ item[:current]
+ end
+end
diff --git a/app/frontend/styles/_primary-navigation.scss b/app/frontend/styles/_primary-navigation.scss
index 7409962ea..e6597ea2b 100644
--- a/app/frontend/styles/_primary-navigation.scss
+++ b/app/frontend/styles/_primary-navigation.scss
@@ -1,20 +1,14 @@
-.app-primary-navigation,
-.app-sub-navigation {
- @include govuk-font(19, $weight: bold);
- border-bottom: 1px solid $govuk-border-colour;
-}
-
.app-primary-navigation {
+ @include govuk-font(19, $weight: bold);
background-color: govuk-colour("light-grey");
+ border-bottom: 1px solid $govuk-border-colour;
}
-.govuk-phase-banner + .app-primary-navigation,
-.app-sub-navigation {
+.govuk-phase-banner + .app-primary-navigation {
margin-top: -1px;
}
-.app-primary-navigation__list,
-.app-sub-navigation__list {
+.app-primary-navigation__list {
@include govuk-clearfix;
left: govuk-spacing(-3);
list-style: none;
@@ -25,8 +19,7 @@
width: calc(100% + #{govuk-spacing(6)});
}
-.app-primary-navigation__item,
-.app-sub-navigation__item {
+.app-primary-navigation__item {
box-sizing: border-box;
display: block;
float: left;
@@ -36,8 +29,7 @@
position: relative;
}
-.app-primary-navigation__item--current,
-.app-sub-navigation__item--current {
+.app-primary-navigation__item--current {
border-bottom: $govuk-border-width-narrow solid $govuk-link-colour;
&:hover {
@@ -49,15 +41,13 @@
}
}
-.app-primary-navigation__item--align-right,
-.app-sub-navigation__item--align-right {
+.app-primary-navigation__item--align-right {
@include govuk-media-query($from: tablet) {
float: right;
}
}
-.app-primary-navigation__link,
-.app-sub-navigation__link {
+.app-primary-navigation__link {
@include govuk-link-common;
@include govuk-link-style-no-visited-state;
@include govuk-link-style-no-underline;
@@ -74,7 +64,6 @@
}
}
-.app-primary-navigation__item--current .app-primary-navigation__link:hover,
-.app-sub-navigation__item--current .app-sub-navigation__link:hover {
+.app-primary-navigation__item--current .app-primary-navigation__link:hover {
text-decoration: none;
}
diff --git a/app/frontend/styles/_sub-navigation.scss b/app/frontend/styles/_sub-navigation.scss
new file mode 100644
index 000000000..7940e4814
--- /dev/null
+++ b/app/frontend/styles/_sub-navigation.scss
@@ -0,0 +1,81 @@
+.app-sub-navigation {
+ @include govuk-font(19, $weight: bold);
+ @include govuk-responsive-margin(6, "bottom");
+}
+
+.app-sub-navigation__list {
+ @include govuk-clearfix;
+ left: govuk-spacing(-3);
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ position: relative;
+ right: govuk-spacing(-3);
+ width: calc(100% + #{govuk-spacing(6)});
+
+ @include govuk-media-query($from: tablet) {
+ box-shadow: inset 0 -1px 0 $govuk-border-colour;
+ }
+}
+
+.app-sub-navigation__item {
+ box-sizing: border-box;
+ display: block;
+ line-height: 40px;
+ height: 40px;
+ padding: 0 govuk-spacing(3);
+
+ @include govuk-media-query($from: tablet) {
+ box-shadow: none;
+ display: block;
+ float: left;
+ line-height: 50px;
+ height: 50px;
+ padding: 0 govuk-spacing(3);
+ position: relative;
+ }
+}
+
+.app-sub-navigation__item--current {
+ @include govuk-media-query($until: tablet) {
+ border-left: $govuk-border-width-narrow solid $govuk-link-colour;
+ padding-left: 11px;
+ }
+
+ @include govuk-media-query($from: tablet) {
+ border-bottom: $govuk-border-width-narrow solid $govuk-link-colour;
+ padding-left: govuk-spacing(3);
+ }
+
+ &:hover {
+ border-color: $govuk-link-hover-colour;
+ }
+
+ &:active {
+ border-color: $govuk-link-active-colour;
+ }
+}
+
+.app-sub-navigation__link {
+ @include govuk-link-common;
+ @include govuk-link-style-no-visited-state;
+ @include govuk-link-style-no-underline;
+ @include govuk-typography-weight-bold;
+ position: relative;
+
+ // Extend the touch area of the link to the list
+ &:after {
+ bottom: 0;
+ content: "";
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ }
+}
+
+.app-sub-navigation__item--current .app-sub-navigation__link {
+ &:hover {
+ text-decoration: none;
+ }
+}
diff --git a/app/frontend/styles/application.scss b/app/frontend/styles/application.scss
index 883ea5e63..487f2d893 100644
--- a/app/frontend/styles/application.scss
+++ b/app/frontend/styles/application.scss
@@ -40,6 +40,7 @@ $govuk-breakpoints: (
@import "panel";
@import "primary-navigation";
@import "search";
+@import "sub-navigation";
// App utilities
.app-\!-colour-muted {
diff --git a/app/helpers/tab_nav_helper.rb b/app/helpers/tab_nav_helper.rb
index 376424c7e..bc3e10f86 100644
--- a/app/helpers/tab_nav_helper.rb
+++ b/app/helpers/tab_nav_helper.rb
@@ -3,11 +3,11 @@ module TabNavHelper
def user_cell(user)
link_text = user.name.presence || user.email
- [govuk_link_to(link_text, user, class: "govuk-!-font-weight-bold"), user.email].join("\n")
+ [govuk_link_to(link_text, user), "#{user.email}"].join("\n")
end
def org_cell(user)
- role = "#{user.role.to_s.humanize}"
+ role = "#{user.role.to_s.humanize}"
[user.organisation.name, role].join("\n")
end
diff --git a/app/views/case_logs/_log_list.html.erb b/app/views/case_logs/_log_list.html.erb
index bf027896c..87c5c1ed7 100644
--- a/app/views/case_logs/_log_list.html.erb
+++ b/app/views/case_logs/_log_list.html.erb
@@ -1,58 +1,70 @@
-
+ <% end %>
+ <% end %>
-
-
-
+ <% end %>
+ <% end %>
+ <%= table.body do |body| %>
<% case_logs.map do |log| %>
- Log
- Tenant
- Property
- Tenancy starts
- Log created
- Status
+ <% end %>
+ <%= table.head do |head| %>
+ <%= head.row do |row| %>
+ <% row.cell(header: true, text: "Log", html_attributes: {
+ scope: "col",
+ }) %>
+ <% row.cell(header: true, text: "Tenant", html_attributes: {
+ scope: "col",
+ }) %>
+ <% row.cell(header: true, text: "Property", html_attributes: {
+ scope: "col",
+ }) %>
+ <% row.cell(header: true, text: "Tenancy starts", html_attributes: {
+ scope: "col",
+ }) %>
+ <% row.cell(header: true, text: "Log created", html_attributes: {
+ scope: "col",
+ }) %>
+ <% row.cell(header: true, text: "Log Status", html_attributes: {
+ scope: "col",
+ }) %>
<% if current_user.support? %>
- Owning organisation
- Managing organisation
+ <% row.cell(header: true, text: "Owning organisation", html_attributes: {
+ scope: "col",
+ }) %>
+ <% row.cell(header: true, text: "Managing organisation", html_attributes: {
+ scope: "col",
+ }) %>
<% end %>
-
-
<% end %>
-
-
- <%= govuk_link_to case_log_path(log) do %>
- Log <%= log.id %>
+ <%= body.row do |row| %>
+ <% row.cell(header: true, html_attributes: {
+ scope: "row",
+ }) do %>
+ <%= govuk_link_to case_log_path(log) do %>
+ Log <%= log.id %>
+ <% end %>
+ <% end %>
+ <% row.cell(
+ text: log.tenant_code? ? log.tenant_code : "–",
+ classes: "app-!-font-tabular",
+ ) %>
+ <% row.cell(
+ text: log.propcode? ? log.propcode : "–",
+ classes: "app-!-font-tabular",
+ ) %>
+ <% row.cell(text: log.startdate.present? ? log.startdate.to_formatted_s(:govuk_date) : "–") %>
+ <% row.cell(text: log.created_at.to_formatted_s(:govuk_date)) %>
+ <% row.cell do %>
+ <%= status_tag(log.status) %>
+ <% end %>
+ <% if current_user.support? %>
+ <% row.cell(text: log.owning_organisation.name) %>
+ <% row.cell(text: log.managing_organisation.name) %>
<% end %>
-
-
- <%= log.tenant_code? ? log.tenant_code : "–" %>
-
-
- <%= log.propcode? ? log.propcode : "–" %>
-
-
- <%= log.startdate.present? ? log.startdate.to_formatted_s(:govuk_date) : "–" %>
-
-
- <%= log.created_at.to_formatted_s(:govuk_date) %>
-
-
- <%= status_tag(log.status) %>
-
- <% if current_user.support? %>
-
- <%= log.owning_organisation.name %>
-
-
- <%= log.managing_organisation.name %>
-
<% end %>
-