Skip to content

Commit

Permalink
Merge pull request #390 from nationalarchives/feature/994-reorder-sea…
Browse files Browse the repository at this point in the history 
…rch-fields

New design for advanced search filters
  • Loading branch information
@timcowlishaw
timcowlishaw authored Oct 7, 2022
2 parents cc48632 + 90d5266 commit 44c8264
Show file tree
Hide file tree
Showing 7 changed files with 207 additions and 173 deletions.
68 changes: 45 additions & 23 deletions ds_judgements_public_ui/sass/includes/_structured_search.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
&__main-search {
background-color: $color__light-grey;
padding: calc($spacer__unit * 1.5) 0 calc($spacer__unit * 2);
margin: 0 0 calc($spacer__unit * 3);
margin: 0 0 $spacer__unit;
text-align: center;
}

Expand All @@ -21,6 +21,7 @@
@include container;
padding: 0;
text-align: left;
max-width: 100%;
}

&__full-text-panel {
Expand Down Expand Up @@ -64,35 +65,58 @@

}

&__limit-to-label {
font-size: 1.1rem;
}

&__limit-to-input {
@include text_field;
width: 70%;
margin-bottom: 0;
}

&__limit-to-label {
display: block;
margin-bottom: calc($spacer__unit / 2);
font-size: 1.1rem;
margin-bottom: 0;
font-size: 1rem;
font-weight: bold;
}

&__limit-to-input {
@include text_field;
&__single-field-panel {
padding-top: $spacer__unit;

@media (min-width: $grid__breakpoint-medium) {
display: grid;
grid-auto-columns: 1fr;
grid-template-columns: 1fr;
}

// Fix display in IE11

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
display: -ms-grid;
-ms-grid-columns: 1fr 1rem 1fr;

div:nth-of-type(1) {
-ms-grid-row: 1;
-ms-grid-column: 1;
}

div:nth-of-type(2) {
-ms-grid-row: 1;
-ms-grid-column: 3;
}

legend {
padding-left: 0;
}
}
}

&__multi-fields-panel {
padding-top: $spacer__unit;
margin-top: $spacer__unit;
margin-bottom: $spacer__unit;


@media (min-width: $grid__breakpoint-medium) {
display: grid;
grid-auto-columns: 1fr;
grid-template-columns: 1fr 1fr;
gap: $spacer__unit
}

// Fix display in IE11
Expand All @@ -119,44 +143,42 @@

&__specific-field-container {
background-color: $color__yellow;
padding: calc($spacer__unit * 2) calc($spacer__unit * 3);
margin-bottom: $spacer__unit;
min-height: 10rem;
padding: $spacer__unit;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}

&__limit-to-container {
background-color: $color__yellow;
padding: calc($spacer__unit * 2) calc($spacer__unit * 3);
margin-bottom: $spacer__unit;
min-height: 10rem;
padding: $spacer__unit;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}

&__submit-container {
margin-bottom: calc($spacer__unit * 3);
margin-top: calc($spacer__unit / 2);
text-align: right;
}

&__help-text {
margin-bottom: calc($spacer__unit / 2);
margin-top: calc($spacer__unit / 4);
font-size: 0.8rem;
}

&__select {
@include select;
width: 100%;
}

&__date-input {
@include text_field;
width: 95%;
}

fieldset {
border: none;
padding: 0;
margin-top: $spacer__unit;
margin: 0;
}

input[type=text] {
Expand Down
89 changes: 89 additions & 0 deletions ds_judgements_public_ui/templates/includes/courts_options.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<option value="">All courts</option>
<option value="uksc"
{% if context.court == 'uksc' %}selected="selected"{% endif %}>
United Kingdom Supreme Court
</option>
<option value="ukpc"
{% if context.court == 'ukpc' %}selected="selected"{% endif %}>
Privy Council
</option>
<option value="ewca/civ"
{% if context.court == 'ewca/civ' %}selected="selected"{% endif %}>
Court of Appeal Civil Division
</option>
<option value="ewca/crim"
{% if context.court == 'ewca/crim' %}selected="selected"{% endif %}>
Court of Appeal Criminal Division
</option>
<option value="ewhc/admin"
{% if context.court == 'ewhc/admin' %}selected="selected"{% endif %}>
Administrative Court
</option>
<option value="ewhc/admlty"
{% if context.court == 'ewhc/admlty' %}selected="selected"{% endif %}>
Admiralty Court
</option>
<option value="ewhc/ch"
{% if context.court == 'ewhc/ch' %}selected="selected"{% endif %}>
Chancery Division of the High Court
</option>
<option value="ewhc/comm"
{% if context.court == 'ewhc/comm' %}selected="selected"{% endif %}>
Commercial Court
</option>
<option value="ewhc/scco"
{% if context.court == 'ewhc/costs' or context.court == 'ewhc/scco' %}selected="selected"{% endif %}>
Senior Court Costs Office
</option>
<option value="ewhc/fam"
{% if context.court == 'ewhc/fam' %}selected="selected"{% endif %}>
Family Division of the High Court
</option>
<option value="ewhc/ipec"
{% if context.court == 'ewhc/ipec' %}selected="selected"{% endif %}>
Intellectual Property Enterprise Court
</option>
<option value="ewhc/mercantile"
{% if context.court == 'ewhc/mercantile' %}selected="selected"{% endif %}>
Mercantile Court
</option>
<option value="ewhc/pat"
{% if context.court == 'ewhc/pat' %}selected="selected"{% endif %}>
Patents Court
</option>
<option value="ewhc/kb"
{% if context.court == 'ewhc/kb' or context.court == "ewhc/qb" %}selected="selected"{% endif %}>
King's / Queen's Bench Division of the High Court
</option>
<option value="ewhc/tcc"
{% if context.court == 'ewhc/tcc' %}selected="selected"{% endif %}>
Technology and Construction Court
</option>
<option value="ewcop"
{% if context.court == 'ewcop' %}selected="selected"{% endif %}>
Court of Protection
</option>
<option value="ewfc"
{% if context.court == 'ewfc' %}selected="selected"{% endif %}>
Family Court
</option>
<option value="ukut-aac"
{% if context.court == 'ukut-aac' %}selected="selected"{% endif %}>
Upper Tribunal Administrative Appeals Chamber
</option>
<option value="ukut-iac"
{% if context.court == 'ukut-iac' %}selected="selected"{% endif %}>
Upper Tribunal Immigration and Asylum Chamber
</option>
<option value="ukut-lc"
{% if context.court == 'ukut-lc' %}selected="selected"{% endif %}>
Upper Tribunal Lands Chamber
</option>
<option value="ukut-tcc"
{% if context.court == 'ukut-tcc' %}selected="selected"{% endif %}>
Upper Tribunal Tax and Chancery Chamber
</option>
<option value="eat"
{% if context.court == 'eat' %}selected="selected"{% endif %}>
Employment Appeal Tribunal
</option>
9 changes: 8 additions & 1 deletion ds_judgements_public_ui/templates/includes/results_filters.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
<div class="results-search-component__facets-wrapper">
{% include 'includes/structured_search_inputs.html' %}
<div class="structured-search">

<div class="structured-search__filter-options js-results-facets">
<div class="structured-search__container">
{% include 'includes/results_filters_inputs.html' %}
</div>
</div>
</div>
</div>
43 changes: 43 additions & 0 deletions ds_judgements_public_ui/templates/includes/results_filters_inputs.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@

<fieldset>
<div class="structured-search__single-field-panel">
<div class="structured-search__limit-to-container">
<label for="court" class="structured-search__limit-to-label">From a specific court or tribunal</label>
<select class="structured-search__select" id="court" name="court">
{% include "includes/courts_options.html" %}
</select>
</div>
</div>
</fieldset>
<fieldset>
<div class="structured-search__multi-fields-panel">
<div class="structured-search__limit-to-container">
<label for="from_date" class="structured-search__limit-to-label">From date</label>
<input class="structured-search__date-input" id="from_date" max="3-3-2022" min="02-01-2003" name="from"
placeholder="DD-MM-YYYY" type="date" value="{{context.from}}"/>
</div>
<div class="structured-search__limit-to-container">
<label for="to_date" class="structured-search__limit-to-label">To date</label>
<input class="structured-search__date-input" id="to_date" max="3-3-2022" min="02-01-2003" name="to"
placeholder="DD-MM-YYYY" type="date" value="{{context.to}}">
</div>
</div>
</fieldset>
<fieldset>
<div class="structured-search__multi-fields-panel">
<div class="structured-search__specific-field-container">
<label for="party_name" class="structured-search__limit-to-label">Party name</label>
<input class="structured-search__limit-to-input" id="party_name" name="party" type="text" value="{{context.party}}" aria-describedby="party_name-help-text">
<p class="structured-search__help-text" id="party_name-help-text">For example a claimant, defendant or other party</p>
</div>
<div class="structured-search__specific-field-container">
<label for="judge_name" class="structured-search__limit-to-label">Judge name</label>
<input class="structured-search__limit-to-input" id="judge_name" name="judge" type="text" value="{{context.judge}}" aria-describedby="judge_name-help-text">
<p class="structured-search__help-text" id="judge_name-help-text">For example 'Smith', 'Judge Smith' or 'Lord Justice Smith'</p>
</div>

</div>
</fieldset>
<div class="structured-search__submit-container">
<input type="submit" value="Update filters">
</div>
13 changes: 13 additions & 0 deletions ds_judgements_public_ui/templates/includes/structured_search_additional_inputs.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<fieldset>
<div class="structured-search__multi-fields-panel">
<div class="structured-search__specific-field-container">
<label for="neutral_citation" class="structured-search__limit-to-label">Neutral citation</label>
<input class="structured-search__limit-to-input" id="neutral_citation" name="neutral_citation" type="text" value="{{context.neutral_citation}}" aria-describedby="neutral_citation-help-text">
<p class="structured-search__help-text" id="neutral_citation-help-text">For example [2021] EWCA Crim 1785</p>
</div>
<div class="structured-search__limit-to-container">
<label for="specific_keywords" class="structured-search__limit-to-label">Containing specific keywords</label>
<input class="structured-search__limit-to-input" id="specific_keywords" name="specific_keyword" type="text" value="{{context.specific_keyword}}">
</div>
</div>
</fieldset>
Loading

0 comments on commit 44c8264

Please sign in to comment.