Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Search page basic layout #13

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
+288 −8
Open

Search page basic layout #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b221b18
Initial commit for new search results page layout
ahosgood Nov 27, 2024
c5eabfd
Fix broken test
ahosgood Nov 27, 2024
2ed8b77
Populate text boxes with values from query string
ahosgood Nov 27, 2024
9a3e238
Fix broken test
ahosgood Nov 27, 2024
0e77aac
Merge branch 'main' of github.com:nationalarchives/ds-search into fea…
ahosgood Nov 28, 2024
84a8ee2
Add more to catalogue results page, custom CSS and JS
ahosgood Nov 28, 2024
d46f0bf
Linting
ahosgood Nov 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
243 changes: 238 additions & 5 deletions app/templates/search/catalogue/index.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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