Skip to content

Commit 248db8d

Browse files
devansXDdevansXD
committed
content and search
1 parent 4ef595c commit 248db8d

File tree

4 files changed

+548
-146
lines changed

4 files changed

+548
-146
lines changed

‎app/views/current/layouts/layout-search-sticky.html‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
<!--
2+
This is the main layout where you can:
3+
- change the header and footer
4+
- add custom CSS and JavaScript
5+
-->
6+
{% extends "prototype-kit-template.njk" %}
7+
{% block head %}
8+
<link href="/css/main.css" rel="stylesheet">
9+
<style>
10+
/* ── Sticky slim bar (shown on scroll) ── */
11+
.app-search-sticky {
12+
display: none;
13+
position: fixed;
14+
top: 0;
15+
left: 0;
16+
right: 0;
17+
z-index: 100;
18+
background-color: #005EB8; /* nhsuk-colour("blue") */
19+
padding: 24px 0; /* nhsuk-spacing(4) */
20+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* nhsuk-spacing(1) nhsuk-spacing(2) */
21+
}
22+
23+
.app-search-sticky.is-visible {
24+
display: block;
25+
}
26+
27+
.app-search-sticky__form {
28+
display: flex;
29+
align-items: center;
30+
gap: 16px; /* nhsuk-spacing(3) */
31+
width: 100%;
32+
}
33+
34+
.app-search-sticky .nhsuk-label {
35+
color: #ffffff; /* nhsuk-colour("white") */
36+
white-space: nowrap;
37+
margin-bottom: 0;
38+
}
39+
40+
.app-search-sticky .nhsuk-input {
41+
margin-bottom: 0;
42+
flex: 1;
43+
}
44+
45+
.app-search-sticky .nhsuk-button {
46+
margin-bottom: 0;
47+
white-space: nowrap;
48+
}
49+
</style>
50+
{% endblock %}
51+
52+
{% block header %}
53+
{{ header({
54+
logo: {
55+
href: "/",
56+
ariaLabel: "Search and evaluate medical technologies"
57+
},
58+
service: {
59+
text: "Search and evaluate medical technologies",
60+
href: "/"
61+
},
62+
account: {
63+
items: [
64+
{
65+
text: "Kelvin Simpson (Regional Manager)",
66+
icon: true
67+
},
68+
{
69+
text: "Log out",
70+
href: "#"
71+
}
72+
]
73+
},
74+
navigation: {
75+
items: [
76+
{
77+
text: "Dashboard",
78+
href: "dashboard"
79+
},
80+
{
81+
text: "",
82+
href: "#"
83+
},
84+
{
85+
text: "Search",
86+
href: "search"
87+
}
88+
]
89+
}
90+
}) }}
91+
92+
<!-- ── Full hero (visible at top) ── -->
93+
<div class="nhsuk-hero" id="search-hero">
94+
<div class="nhsuk-width-container nhsuk-hero--border">
95+
<div class="nhsuk-grid-row">
96+
<div class="nhsuk-grid-column-two-thirds">
97+
<div class="nhsuk-hero__wrapper">
98+
<h1 class="nhsuk-heading-xl nhsuk-u-margin-bottom-3">Search</h1>
99+
<h3 class="nhsuk-heading-s">Search and evaluate medical technologies</h3>
100+
<div class="nhsuk-form-group">
101+
<form action="search-results" method="get" novalidate="">
102+
<div class="nhsuk-form-group nhsuk-u-margin-bottom-0">
103+
<label class="nhsuk-label" for="q">
104+
Search by product, category or supplier
105+
</label>
106+
<input class="nhsuk-input nhsuk-input--width-20" id="q" name="q" type="search" value="">
107+
<button class="nhsuk-button nhsuk-button--reverse nhsuk-u-margin-left-2 app-button--small nhsuk-u-margin-bottom-0" data-module="nhsuk-button" type="submit" data-nhsuk-button-init="">
108+
Search
109+
</button>
110+
</div>
111+
</form>
112+
</div>
113+
</div>
114+
</div>
115+
</div>
116+
</div>
117+
</div>
118+
119+
<!-- ── Sticky slim bar (appears on scroll) ── -->
120+
<div class="app-search-sticky" id="search-sticky" role="search" aria-label="Sticky search">
121+
<div class="nhsuk-width-container">
122+
<div class="nhsuk-grid-row">
123+
<div class="nhsuk-grid-column-two-thirds">
124+
<form action="search-results" method="get" novalidate="" class="app-search-sticky__form">
125+
<label class="nhsuk-label nhsuk-u-margin-bottom-0" for="q-sticky">Search</label>
126+
<input class="nhsuk-input nhsuk-u-margin-bottom-0" id="q-sticky" name="q" type="search" value="" placeholder="Search by product, category or supplier" aria-label="Search by product, category or supplier">
127+
<button class="nhsuk-button nhsuk-button--reverse app-button--small nhsuk-u-margin-bottom-0" type="submit">
128+
Search
129+
</button>
130+
</form>
131+
</div>
132+
</div>
133+
</div>
134+
</div>
135+
136+
{% endblock %}
137+
138+
{% block footer %}
139+
{% include "includes/footer.html" %}
140+
{% endblock %}
141+
142+
{% block bodyEnd %}
143+
<script src="/nhsuk-frontend/nhsuk-frontend.min.js" type="module"></script>
144+
<script type="module">
145+
import { initAll } from '/nhsuk-frontend/nhsuk-frontend.min.js'
146+
initAll()
147+
</script>
148+
149+
<script>
150+
(function () {
151+
var hero = document.getElementById('search-hero');
152+
var sticky = document.getElementById('search-sticky');
153+
154+
if (!hero || !sticky) return;
155+
156+
function onScroll() {
157+
var heroBottom = hero.getBoundingClientRect().bottom;
158+
// Show sticky bar once the hero has scrolled fully out of view
159+
if (heroBottom <= 0) {
160+
sticky.classList.add('is-visible');
161+
} else {
162+
sticky.classList.remove('is-visible');
163+
}
164+
}
165+
166+
window.addEventListener('scroll', onScroll, { passive: true });
167+
})();
168+
</script>
169+
170+
{% block scripts %}
171+
{% include "includes/scripts.html" %}
172+
{% block pageScripts %}{% endblock %}
173+
{% endblock %}
174+
{% endblock %}

‎app/views/current/search-results-viz-all.html‎

Lines changed: 51 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -134,52 +134,58 @@ <h2 class="nhsuk-contents-list__title nhsuk-u-font-size-16">Subcategory</h2>
134134
<h3 class="nhsuk-heading-s nhsuk-u-margin-bottom-1">Supplier market share</h3>
135135
<p class="nhsuk-body-s nhsuk-u-secondary-text-color nhsuk-u-margin-bottom-4">Advanced dressings only &middot; 52 products</p>
136136

137-
<div class="app-pie-wrap" style="display:flex;flex-direction:row;align-items:center;gap:20px;">
138-
<svg class="app-pie-svg" width="140" height="140" viewBox="0 0 140 140" aria-hidden="true" style="flex-shrink:0;">
139-
<path d="M70 70 L70 10 A60 60 0 0 1 118 103 Z" fill="#005eb8"/>
140-
<path d="M70 70 L118 103 A60 60 0 0 1 42 127 Z" fill="#007f3b"/>
141-
<path d="M70 70 L42 127 A60 60 0 0 1 14 56 Z" fill="#ffb81c"/>
142-
<path d="M70 70 L14 56 A60 60 0 0 1 70 10 Z" fill="#aeb7bd"/>
143-
<circle cx="70" cy="70" r="32" fill="#fff"/>
144-
<text x="70" y="66" text-anchor="middle" font-size="18" font-weight="700" fill="#212b32">52</text>
145-
<text x="70" y="80" text-anchor="middle" font-size="10" fill="#000000">products</text>
146-
</svg>
137+
<!-- REPLACE the entire app-pie-wrap div in search-results-viz-all.html with this -->
138+
139+
<div class="app-pie-wrap" style="display:flex;flex-direction:row;align-items:center;gap:12px;">
140+
141+
<!-- Chart: exactly 50% of the card width -->
142+
<svg class="app-pie-svg" viewBox="0 0 140 140" aria-hidden="true" style="flex:0 0 50%;max-width:50%;height:auto;">
143+
<path d="M70 70 L70 10 A60 60 0 0 1 118 103 Z" fill="#005eb8"/>
144+
<path d="M70 70 L118 103 A60 60 0 0 1 42 127 Z" fill="#007f3b"/>
145+
<path d="M70 70 L42 127 A60 60 0 0 1 14 56 Z" fill="#ffb81c"/>
146+
<path d="M70 70 L14 56 A60 60 0 0 1 70 10 Z" fill="#aeb7bd"/>
147+
<circle cx="70" cy="70" r="32" fill="#fff"/>
148+
<text x="70" y="66" text-anchor="middle" font-size="18" font-weight="700" fill="#212b32">52</text>
149+
<text x="70" y="80" text-anchor="middle" font-size="10" fill="#000000">products</text>
150+
</svg>
151+
152+
<!-- Legend: remaining 50% -->
153+
<div class="app-supplier-legend" style="flex:0 0 50%;min-width:0;">
154+
<div class="app-supplier-legend__item">
155+
<div class="app-supplier-legend__swatch" style="background:#005eb8;"></div>
156+
<div class="app-supplier-legend__body">
157+
<p class="nhsuk-body-s nhsuk-u-margin-bottom-0"><strong>Smith and Nephew</strong></p>
158+
<p class="nhsuk-body-s nhsuk-u-secondary-text-color nhsuk-u-margin-bottom-1">38% &middot; 20 products</p>
159+
<div class="app-supplier-bar-track"><div class="app-supplier-bar-fill" style="width:100%;background:#005eb8;"></div></div>
160+
</div>
161+
</div>
162+
<div class="app-supplier-legend__item">
163+
<div class="app-supplier-legend__swatch" style="background:#007f3b;"></div>
164+
<div class="app-supplier-legend__body">
165+
<p class="nhsuk-body-s nhsuk-u-margin-bottom-0"><strong>M&ouml;lnlycke Health Care</strong></p>
166+
<p class="nhsuk-body-s nhsuk-u-secondary-text-color nhsuk-u-margin-bottom-1">29% &middot; 15 products</p>
167+
<div class="app-supplier-bar-track"><div class="app-supplier-bar-fill" style="width:76%;background:#007f3b;"></div></div>
168+
</div>
169+
</div>
170+
<div class="app-supplier-legend__item">
171+
<div class="app-supplier-legend__swatch" style="background:#ffb81c;"></div>
172+
<div class="app-supplier-legend__body">
173+
<p class="nhsuk-body-s nhsuk-u-margin-bottom-0"><strong>ConvaTec</strong></p>
174+
<p class="nhsuk-body-s nhsuk-u-secondary-text-color nhsuk-u-margin-bottom-1">21% &middot; 11 products</p>
175+
<div class="app-supplier-bar-track"><div class="app-supplier-bar-fill" style="width:55%;background:#ffb81c;"></div></div>
176+
</div>
177+
</div>
178+
<div class="app-supplier-legend__item">
179+
<div class="app-supplier-legend__swatch" style="background:#aeb7bd;"></div>
180+
<div class="app-supplier-legend__body">
181+
<p class="nhsuk-body-s nhsuk-u-margin-bottom-0"><strong>Others</strong></p>
182+
<p class="nhsuk-body-s nhsuk-u-secondary-text-color nhsuk-u-margin-bottom-1">12% &middot; 6 products</p>
183+
<div class="app-supplier-bar-track"><div class="app-supplier-bar-fill" style="width:32%;background:#aeb7bd;"></div></div>
184+
</div>
185+
</div>
186+
</div>
147187

148-
<div class="app-supplier-legend" style="flex:1;min-width:0;">
149-
<div class="app-supplier-legend__item">
150-
<div class="app-supplier-legend__swatch" style="background:#005eb8;"></div>
151-
<div class="app-supplier-legend__body">
152-
<p class="nhsuk-body-s nhsuk-u-margin-bottom-0"><strong>Smith+Nephew</strong></p>
153-
<p class="nhsuk-body-s nhsuk-u-secondary-text-color nhsuk-u-margin-bottom-1">38% &middot; 20 products</p>
154-
<div class="app-supplier-bar-track"><div class="app-supplier-bar-fill" style="width:100%;background:#005eb8;"></div></div>
155-
</div>
156-
</div>
157-
<div class="app-supplier-legend__item">
158-
<div class="app-supplier-legend__swatch" style="background:#007f3b;"></div>
159-
<div class="app-supplier-legend__body">
160-
<p class="nhsuk-body-s nhsuk-u-margin-bottom-0"><strong>M&ouml;lnlycke Health Care</strong></p>
161-
<p class="nhsuk-body-s nhsuk-u-secondary-text-color nhsuk-u-margin-bottom-1">29% &middot; 15 products</p>
162-
<div class="app-supplier-bar-track"><div class="app-supplier-bar-fill" style="width:76%;background:#007f3b;"></div></div>
163-
</div>
164-
</div>
165-
<div class="app-supplier-legend__item">
166-
<div class="app-supplier-legend__swatch" style="background:#ffb81c;"></div>
167-
<div class="app-supplier-legend__body">
168-
<p class="nhsuk-body-s nhsuk-u-margin-bottom-0"><strong>ConvaTec</strong></p>
169-
<p class="nhsuk-body-s nhsuk-u-secondary-text-color nhsuk-u-margin-bottom-1">21% &middot; 11 products</p>
170-
<div class="app-supplier-bar-track"><div class="app-supplier-bar-fill" style="width:55%;background:#ffb81c;"></div></div>
171-
</div>
172-
</div>
173-
<div class="app-supplier-legend__item">
174-
<div class="app-supplier-legend__swatch" style="background:#aeb7bd;"></div>
175-
<div class="app-supplier-legend__body">
176-
<p class="nhsuk-body-s nhsuk-u-margin-bottom-0"><strong>Others</strong></p>
177-
<p class="nhsuk-body-s nhsuk-u-secondary-text-color nhsuk-u-margin-bottom-1">12% &middot; 6 products</p>
178-
<div class="app-supplier-bar-track"><div class="app-supplier-bar-fill" style="width:32%;background:#aeb7bd;"></div></div>
179-
</div>
180-
</div>
181-
</div>
182-
</div>
188+
</div>
183189

184190
</div>
185191
</div>

0 commit comments

Comments
 (0)