diff --git a/app/templates/search/catalogue/index.html b/app/templates/search/catalogue/index.html index 6d8171b..adfe04e 100644 --- a/app/templates/search/catalogue/index.html +++ b/app/templates/search/catalogue/index.html @@ -1,13 +1,246 @@ {% extends 'base.html' %} -{%- set pageTitle = 'Catalogue' -%} +{% from 'components/button/macro.html' import tnaButton %} +{% from 'components/card/macro.html' import tnaCard %} +{% from 'components/pagination/macro.html' import tnaPagination %} +{% from 'components/search-field/macro.html' import tnaSearchField %} +{% from 'components/select/macro.html' import tnaSelect %} +{% from 'components/text-input/macro.html' import tnaTextInput %} + +{%- set pageTitle = 'Catalogue search results' -%} + +{% block stylesheets %} +{{ super() }} + +{% endblock %} {% block content %} -
+
-
-

{{ pageTitle }}

+
+ {{ tnaSearchField({ + 'label': pageTitle, + 'headingLevel': 1, + 'headingSize': 'l', + 'id': 'search', + 'name': 'q', + 'value': request.GET.get('q') or '' + }) }} +
+ {{ tnaButton({ + 'text': 'Start new search', + 'href': '?', + 'plain': True, + 'small': True + }) }} +
+ +
+
+
+
+
+

Filters

+ {{ tnaTextInput({ + 'label': 'Search within results', + 'headingLevel': 3, + 'headingSize': 's', + 'id': 'search-within', + 'name': 'search_within', + 'value': request.GET.get('search_within') or '', + 'attributes': { + 'form': 'search-form' + } + }) }} +
+ {{ tnaButton({ + 'text': 'Submit', + 'buttonElement': True, + 'buttonType': 'submit', + 'small': True, + 'attributes': { + 'form': 'search-form' + } + }) }}
+
+
+
SHOWING...
+
+ {{ tnaSelect({ + 'label': 'Sort by', + 'headingLevel': 2, + 'headingSize': 's', + 'id': 'sort', + 'name': 'sort', + 'items': [ + { + 'text': 'Relevance', + 'value': 'relevance' + }, + { + 'text': 'Date', + 'value': 'date' + }, + { + 'text': 'Title', + 'value': 'title' + } + ], + 'selected': request.GET.get('sort'), + 'inline': True, + 'attributes': { + 'form': 'search-form' + } + }) }} +
+ {{ tnaButton({ + 'text': 'Apply', + 'buttonElement': True, + 'buttonType': 'submit', + 'small': True, + 'attributes': { + 'form': 'search-form' + } + }) }} +
+ +
+
+
+ {{ tnaButton({ + 'text': 'List', + 'buttonElement': True, + 'buttonType': 'submit', + 'small': True, + 'icon': 'list', + 'iconOnly': True, + 'attributes': { + 'form': 'search-form', + 'name': 'display', + 'value': 'list' + } + }) }} + {{ tnaButton({ + 'text': 'Grid', + 'buttonElement': True, + 'buttonType': 'submit', + 'small': True, + 'icon': 'grip', + 'iconOnly': True, + 'attributes': { + 'form': 'search-form', + 'name': 'display', + 'value': 'grid' + } + }) }} +
+
+
+

Results

+ {% if request.GET.get('display') == 'grid' %} +
    + {% for result in range(0, 12) %} +
  • + {{ tnaCard({ + 'title': 'Result title', + 'headingLevel': 3, + 'headingSize': 's', + 'href': '#', + 'meta': [ + { + 'title': 'Held by', + 'text': 'The National Archives, Kew' + }, + { + 'title': 'Date', + 'text': '24 September 1986' + }, + { + 'title': 'Reference', + 'text': 'RAIL 529/131/553' + } + ], + 'body': 'Stuff', + 'fullAreaClick': True + }) }} +
    • + {% endfor %} +
+ {% else %} + {% for result in range(0, 12) %} +
+

+ Result title +

+

Stuff

+
+
Alpha
+
Lorem ipsum
+
Beta
+
Lorem ipsum
+
Gamma
+
Lorem ipsum
+
+
+
+ {% endfor %} + {% endif %} +
+
+ {{ tnaPagination({ + 'previous': { + 'href': '#' + }, + 'items': [ + { + 'number': 1, + 'href': '#' + }, + { + 'ellipsis': True + }, + { + 'number': 6, + 'href': '#' + }, + { + 'number': 7, + 'current': True, + 'href': '#' + }, + { + 'number': 8, + 'href': '#' + }, + { + 'ellipsis': True + }, + { + 'number': 42, + 'href': '#' + } + ], + 'next': { + 'href': '#' + } + }) }} +
-{% endblock %} \ No newline at end of file +{% endblock %} + +{% block bodyEnd %} +{{ super() }} + +{% endblock %} diff --git a/src/scripts/catalogue-results.js b/src/scripts/catalogue-results.js new file mode 100644 index 0000000..6ec5440 --- /dev/null +++ b/src/scripts/catalogue-results.js @@ -0,0 +1 @@ +// alert("Hey") diff --git a/src/styles/catalogue-results.scss b/src/styles/catalogue-results.scss new file mode 100644 index 0000000..b7a6b99 --- /dev/null +++ b/src/styles/catalogue-results.scss @@ -0,0 +1,47 @@ +@use "@nationalarchives/frontend/nationalarchives/variables/a11y" as + a11yVariables; +@use "@nationalarchives/frontend/nationalarchives/tools/a11y"; +@use "@nationalarchives/frontend/nationalarchives/tools/colour"; + +.search-result-list-item { + position: relative; + + border-radius: 0.1px; + + &:hover { + @include colour.colour-outline("keyline", 1px, solid); + outline-offset: a11yVariables.$focus-outline-width - 1px; + } + + &:focus, + &:active { + outline: none; + } + + .tna-heading-m a { + &::before { + content: ""; + + position: absolute; + inset: 0; + z-index: 1; + + border-radius: 0.1px; + } + + &:focus-visible, + &:active { + outline: none; + + &::before { + @include a11y.focus-outline; + } + } + + &:active { + &::before { + @include a11y.active-outline; + } + } + } +} diff --git a/test/search/test_routes.py b/test/search/test_routes.py index e1c6eb5..bafa614 100644 --- a/test/search/test_routes.py +++ b/test/search/test_routes.py @@ -12,6 +12,4 @@ def test_start_page(self): def test_catalogue(self): rv = self.client.get("/search/catalogue/") - self.assertContains( - rv, '

Catalogue

', status_code=200 - ) + self.assertContains(rv, "Catalogue search results", status_code=200) diff --git a/webpack.config.js b/webpack.config.js index 041980d..9c92363 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -4,6 +4,7 @@ module.exports = { entry: { main: "./src/scripts/main.js", analytics: "./src/scripts/analytics.js", + "catalogue-results": "./src/scripts/catalogue-results.js", }, mode: "production", module: {