Skip to content

Commit

Permalink
Merge pull request #13 from nationalarchives/feature/search-page-layout
Browse files Browse the repository at this point in the history 
Search page basic layout
  • Loading branch information
@ahosgood
ahosgood authored Dec 12, 2024
2 parents 3320e3e + d46f0bf commit 3872355
Show file tree
Hide file tree
Showing 5 changed files with 288 additions and 8 deletions.
243 changes: 238 additions & 5 deletions app/templates/search/catalogue/index.html
View file
Original file line number Diff line number Diff line change
@@ -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() }}
<link rel="stylesheet" href="{{ static('catalogue-results.css') }}?v={{ app_config.BUILD_VERSION }}" media="screen,print">
{% endblock %}

{% block content %}
<div class="tna-section">
<div class="tna-section tna-background-accent tna-!--no-padding-bottom">
<div class="tna-container">
<div class="tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny">
<h1 class="tna-heading-xl">{{ pageTitle }}</h1>
<form id="search-form" class="tna-column tna-column--full">
{{ tnaSearchField({
'label': pageTitle,
'headingLevel': 1,
'headingSize': 'l',
'id': 'search',
'name': 'q',
'value': request.GET.get('q') or ''
}) }}
<div class="tna-button-group tna-!--margin-top-xs">
{{ tnaButton({
'text': 'Start new search',
'href': '?',
'plain': True,
'small': True
}) }}
</div>
<ul class="tna-ul">
<li>
<a href="#">Records at The National Archives (24,521,292)</a>
</li>
<li>
<a href="#">Online records at The National Archives (9,041,961)</a>
</li>
<li>
<a href="#">Records at other UK archives (10,758,426)</a>
</li>
</ul>
</form>
</div>
</div>
<div class="tna-container">
<div class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--full-small tna-column--full-tiny tna-!--margin-top-l">
<h2 class="tna-heading-m">Filters</h2>
{{ 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'
}
}) }}
<div class="tna-button-group tna-!--margin-top-xs">
{{ tnaButton({
'text': 'Submit',
'buttonElement': True,
'buttonType': 'submit',
'small': True,
'attributes': {
'form': 'search-form'
}
}) }}
</div>
</div>
<div class="tna-column tna-column--width-3-4 tna-column--width-2-3-medium tna-column--full-small tna-column--full-tiny tna-!--margin-top-l">
<div class="tna-container tna-container--nested">
<div class="tna-column tna-column--flex-1 tna-column--full-tiny">SHOWING...</div>
<div class="tna-column tna-column--full-tiny">
{{ 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'
}
}) }}
<div class="tna-button-group tna-button-group--small tna-!--margin-top-xs">
{{ tnaButton({
'text': 'Apply',
'buttonElement': True,
'buttonType': 'submit',
'small': True,
'attributes': {
'form': 'search-form'
}
}) }}
</div>

</div>
<div class="tna-column tna-column--full-tiny">
<div class="tna-button-group tna-button-group--small">
{{ 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'
}
}) }}
</div>
</div>
</div>
<h2 class="tna-visually-hidden">Results</h2>
{% if request.GET.get('display') == 'grid' %}
<ul class="tna-container tna-container--nested">
{% for result in range(0, 12) %}
<li class="tna-column tna-column--width-1-2 tna-column--full-tiny tna-!--margin-top-l">
{{ 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
}) }}
</li>
{% endfor %}
</ul>
{% else %}
{% for result in range(0, 12) %}
<article class="search-result-list-item tna-!--margin-top-s">
<h3 class="tna-heading-m">
<a href="#">Result title</a>
</h3>
<p>Stuff</p>
<dl class="tna-dl tna-dl--plain tna-!--margin-top-s">
<dt>Alpha</dt>
<dd>Lorem ipsum</dd>
<dt>Beta</dt>
<dd>Lorem ipsum</dd>
<dt>Gamma</dt>
<dd>Lorem ipsum</dd>
</dl>
</article>
<hr class="tna-!--margin-top-s">
{% endfor %}
{% endif %}
</div>
<div class="tna-column tna-column--full tna-!--margin-top-l">
{{ 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': '#'
}
}) }}
</div>
</div>
{% endblock %}
{% endblock %}

{% block bodyEnd %}
{{ super() }}
<script src="{{ static('catalogue-results.min.js') }}?v={{ app_config.BUILD_VERSION }}" defer></script>
{% endblock %}
1 change: 1 addition & 0 deletions src/scripts/catalogue-results.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
// alert("Hey")
47 changes: 47 additions & 0 deletions src/styles/catalogue-results.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
4 changes: 1 addition & 3 deletions test/search/test_routes.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,4 @@ def test_start_page(self):

def test_catalogue(self):
rv = self.client.get("/search/catalogue/")
self.assertContains(
rv, '<h1 class="tna-heading-xl">Catalogue</h1>', status_code=200
)
self.assertContains(rv, "Catalogue search results", status_code=200)
1 change: 1 addition & 0 deletions webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down

0 comments on commit 3872355

Please sign in to comment.