Skip to content

Commit cd424e3

Browse files
msquance-stemmsquance-stem
authored
Merge pull request #2290 from NCCE/header-menu-in-strapi
Add Header Menu to Strapi
2 parents 1811782 + 2c3ddf7 commit cd424e3

File tree

32 files changed

+446
-282
lines changed

32 files changed

+446
-282
lines changed

‎.env.defaults‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,5 +78,6 @@ STRAPI_WRITE_API_KEY="api_key_with_write_access"
7878
STRAPI_IMAGE_URL="http://strapi.teachcomputing.rpfdev.com"
7979
STRAPI_GRAPHQL_URL="http://strapi.teachcomputing.rpfdev.com/graphql"
8080
STRAPI_CONNECTION_TYPE="graphql"
81+
STRAPI_TEST_SCHEMA_PATH="spec/support/cms/providers/strapi/schema.json"
8182

8283
NODE_OPTIONS=--openssl-legacy-provider

‎app/components/cms/header_menu_component.rb‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# frozen_string_literal: true
2+
3+
class Cms::HeaderMenuComponent < ViewComponent::Base
4+
def initialize(menu_items:)
5+
@menu_items = menu_items
6+
end
7+
end

‎app/components/cms/header_menu_component/header_menu_component.html.erb‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<ul class='cms-header-menu'>
2+
<% @menu_items.each do |nav_item| %>
3+
<li class="govuk-body cms-header-menu__item dropdown__expander" aria-expanded="false" tabindex="0">
4+
<div class="cms-header-menu__wrap">
5+
<span class="cms-header-menu__item-text"><%= nav_item[:label] %></span>
6+
<span class="cms-header-menu__item-icon"></span>
7+
</div>
8+
<ul class="govuk-list govuk-body-s dropdown__expander-content">
9+
<% nav_item[:menu_items].each do | item |%>
10+
<li class="dropdown__expander-content-item"><%= link_to item[:label], item[:url], class: 'ncce-link--on-dark' %></li>
11+
<% end %>
12+
</ul>
13+
</li>
14+
<% end %>
15+
</ul>

‎app/components/cms/header_menu_component/header_menu_component.scss‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
.cms-header-menu {
2+
list-style: none;
3+
margin: 0;
4+
padding: 0;
5+
6+
li {
7+
@include govuk-media-query($from: desktop) {
8+
position: relative;
9+
}
10+
}
11+
12+
ul li ul li {
13+
clear: both;
14+
width: 100%;
15+
}
16+
17+
@include govuk-media-query($from: desktop) {
18+
display: flex;
19+
flex-direction: row;
20+
margin: 0;
21+
padding-top: 25px 0 0 0;
22+
}
23+
24+
.govuk-body {
25+
margin-bottom: 0 !important;
26+
27+
@include govuk-media-query($from: desktop) {
28+
margin-bottom: unset;
29+
}
30+
}
31+
32+
@media (any-hover: hover) {
33+
.cms-header-menu__item:hover .dropdown__expander-content, .cms-header-menu__item.dropdown__expander {
34+
display: block;
35+
opacity: 1;
36+
visibility: visible;
37+
}
38+
}
39+
40+
&__wrap {
41+
display: flex;
42+
padding: 5px 0;
43+
44+
@include govuk-media-query($from: tablet) {
45+
padding: 7px 0;
46+
}
47+
48+
@include govuk-media-query($from: desktop) {
49+
padding: 0;
50+
}
51+
}
52+
53+
&__item {
54+
border-bottom: 1px solid #ced0d2;
55+
clear: both;
56+
flex-grow: 1;
57+
font-weight: 700;
58+
margin-bottom: 0;
59+
padding-top: 0.5rem;
60+
position: static;
61+
z-index: 2;
62+
63+
&:first-child {
64+
background-image: none;
65+
border-top: 1px solid #ced0d2;
66+
}
67+
68+
&:hover {
69+
background-image: none;
70+
}
71+
72+
@include govuk-media-query($until: desktop) {
73+
outline: none;
74+
}
75+
76+
@include govuk-media-query($from: desktop) {
77+
background-image: url('../images/icons/line.svg');
78+
background-position: left center;
79+
background-repeat: no-repeat;
80+
background-size: 2px 20px;
81+
border: none;
82+
min-width: 7rem;
83+
padding: 1rem 0 1rem 0.9rem;
84+
85+
&:first-child {
86+
border-top: none;
87+
}
88+
}
89+
90+
.govuk-header__link {
91+
@include govuk-media-query($from: desktop) {
92+
font-size: 19px;
93+
font-weight: bold !important;
94+
}
95+
}
96+
97+
&[aria-expanded='true'] .cms-header-menu__item-icon {
98+
background-image: url('../images/icons/arrow-down-purple.svg');
99+
@include govuk-media-query($from: desktop) {
100+
background-position: center 9px;
101+
}
102+
}
103+
104+
&-text,
105+
&-text:hover, &-text:focus {
106+
color: $white;
107+
display: inline-block;
108+
font-size: 1.125rem;
109+
width: 100%;
110+
padding-bottom: 0.5rem;
111+
padding-left: 2px;
112+
113+
@include govuk-media-query($from: desktop) {
114+
font-size: 1.1875rem;
115+
width: auto;
116+
padding-bottom: 0;
117+
padding-left: unset;
118+
}
119+
}
120+
121+
122+
&-icon {
123+
background-image: url('../images/icons/tick-white-no-border.svg');
124+
background-position: 0 10px;
125+
background-repeat: no-repeat;
126+
background-size: 0.7rem;
127+
display: block;
128+
width: 24px;
129+
130+
@include govuk-media-query($from: desktop) {
131+
background-position: center 10px;
132+
padding-left: 10px;
133+
}
134+
}
135+
}
136+
137+
@media (any-hover: hover) {
138+
.cms-header-menu__item:hover {
139+
background-color: $white;
140+
color: $purple-dark;
141+
border: none;
142+
margin: 0;
143+
144+
@include govuk-media-query($from: desktop) {
145+
filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.3));
146+
background-image: none;
147+
}
148+
}
149+
150+
.cms-header-menu__item:hover .cms-header-menu__item-text {
151+
color: $purple-dark;
152+
padding-bottom: 0.5rem;
153+
padding-left: 2px;
154+
155+
@include govuk-media-query($from: desktop) {
156+
padding-bottom: 0;
157+
padding-left: unset;
158+
}
159+
}
160+
}
161+
162+
@media (any-hover: hover) {
163+
.cms-header-menu__item:hover .cms-header-menu__item-icon {
164+
background-image: url('../images/icons/arrow-down-purple.svg');
165+
@include govuk-media-query($from: desktop) {
166+
background-position: center 9px;
167+
}
168+
}
169+
}
170+
}

‎app/controllers/application_controller.rb‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ class ApplicationController < ActionController::Base
44
include Pagy::Backend
55

66
before_action :authenticate
7+
before_action :access_cms_header
78

89
def authenticate
910
return unless ENV["BASIC_AUTH_PASSWORD"]
@@ -13,6 +14,12 @@ def authenticate
1314
end
1415
end
1516

17+
def access_cms_header
18+
@cms_header = Cms::Singles::Header.get
19+
rescue ActiveRecord::RecordNotFound
20+
@cms_header = nil
21+
end
22+
1623
def authenticate_user!
1724
redirect_to(helpers.create_account_url) unless current_user
1825
end

‎app/helpers/navigation_helper.rb‎

Lines changed: 0 additions & 52 deletions
This file was deleted.

‎app/services/cms/collections/programme.rb‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
module Cms
22
module Collections
33
class Programme < Resource
4-
def to_search_record(index_time)
5-
raise NotImplementedError
6-
end
7-
84
def self.is_collection = true
95

106
def self.collection_attribute_mappings

‎app/services/cms/models/header_menu.rb‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
module Cms
2+
module Models
3+
class HeaderMenu
4+
def initialize(menus)
5+
@menus = menus
6+
end
7+
8+
def render
9+
Cms::HeaderMenuComponent.new(menu_items: @menus)
10+
end
11+
end
12+
end
13+
end

‎app/services/cms/providers/strapi/factories/model_factory.rb‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,22 @@ def self.process_model(mapping, all_data)
5757
model_class.new(cms_models: strapi_data.map { ComponentFactory.process_component(_1) }.compact)
5858
elsif model_class == Models::EnrichmentList
5959
to_enrichment_list(all_data, strapi_data)
60+
elsif model_class == Models::HeaderMenu
61+
to_menu(strapi_data)
6062
end
6163
end
6264

65+
def self.to_menu(strapi_data)
66+
Models::HeaderMenu.new(
67+
strapi_data.map do |menu_item|
68+
{
69+
label: menu_item[:label],
70+
menu_items: menu_item[:menuItems].map { {label: _1[:label], url: _1[:url]} }
71+
}
72+
end
73+
)
74+
end
75+
6376
def self.to_seo(strapi_data)
6477
Models::Seo.new(
6578
title: strapi_data[:title],

‎app/services/cms/providers/strapi/graphql_client.rb‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,15 @@ def one(resource_class, resource_id = nil, preview: false, preview_key: nil)
3434
data = clean_aliases(response.original_hash)
3535

3636
results = data[:data][resource_class.graphql_key.to_sym][:data]
37-
3837
raise ActiveRecord::RecordNotFound if results.empty?
3938

40-
map_resource(resource_class, results.first, preview, preview_key)
39+
record = if resource_class.is_collection
40+
results.first
41+
else
42+
results
43+
end
44+
45+
map_resource(resource_class, record, preview, preview_key)
4146
end
4247

4348
# This has been created to allow for alias to be alias_name__field_name

0 commit comments

Comments
 (0)