Skip to content

Commit

Permalink
Merge pull request #9 from uktrade/ORPD-29-display-search-results
Browse files Browse the repository at this point in the history
Adds two hardcoded search results with styling
  • Loading branch information
hareshkainthdbt authored Oct 11, 2024
2 parents 58c600e + a0c8011 commit 5c96352
Show file tree
Hide file tree
Showing 4 changed files with 109 additions and 6 deletions.
2 changes: 1 addition & 1 deletion front_end/images/icon-search-black.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions front_end/stylesheets/helpers.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,15 @@
.orp-flex--space-between {
justify-content: space-between;
}

.orp-secondary-text-colour {
color: govuk-colour("dark-grey");
}

.orp-link-text-decoration-none {
text-decoration: none;

&:hover {
text-decoration: underline;
}
}
22 changes: 22 additions & 0 deletions front_end/stylesheets/search.scss
Original file line number Diff line number Diff line change
Expand Up @@ -56,3 +56,25 @@
}
}
}

.orp-search-results {

.orp-topics-list {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;

li {
padding-right: 10px;
margin-right: 10px;
margin-bottom: 10px;
border-right: 1px solid govuk-colour("dark-grey");
}

li:last-child {
border-right: none;
}
}
}
79 changes: 74 additions & 5 deletions orp/orp_search/templates/orp.html
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,6 @@ <h1 class="govuk-heading-xl govuk-!-margin-bottom-4">Find laws and regulations f
<button type="submit" class="search__button"></button>
</div>
</div>
<hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
<div class="govuk-form-group {% if form.document_type.errors %}govuk-form-group--error{% endif %}">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
Expand Down Expand Up @@ -189,8 +188,8 @@ <h2 class="govuk-fieldset__heading">

<div class="govuk-grid-column-two-thirds">
<div class="orp-flex orp-flex--space-between">
<p class="govuk-body govuk-!-font-weight-bold">4,123 documents</p>
<p class="govuk-body">
<p class="govuk-body govuk-!-font-weight-bold govuk-!-margin-bottom-0">4,123 documents</p>
<p class="govuk-body govuk-!-margin-bottom-0">
<a href="#" class="govuk-link govuk-link--no-visited-state
">Clear all filters</a>
</p>
Expand All @@ -212,7 +211,7 @@ <h2 class="govuk-fieldset__heading">

<hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<div class="govuk-grid-column-full">
<div class="orp-flex">
<label class="govuk-label govuk-!-margin-right-3 orp-!-no-text-wrap" for="sort">
Sort by
Expand All @@ -226,7 +225,77 @@ <h2 class="govuk-fieldset__heading">
</div>
<hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<div class="govuk-grid-column-full">

<div class="govuk-summary-list orp-search-results">

<!-- first search result -->
<div class="govuk-summary-list__row--no-border">
<span class="govuk-caption-m">Guidance</span>
<h2 class="govuk-heading-m">
<a href="/document/{{ result.document_id }}/details" class="govuk-link orp-link-text-decoration-none">
Introduction to asbestos safety
</a>
</h2>
<p class="govuk-body-m">
Guidance on complying with the law on asbestos safety including detection, management, controls and
training.
</p>
<p class="govuk-body-s orp-secondary-text-colour govuk-!-margin-bottom-2">
Published by: Health and Safety Executive
</p>
<p class="govuk-body-s orp-secondary-text-colour">
Last updated: 24 January 2024
</p>
<ul class="govuk-list orp-topics-list">
<li class="govuk-body-s orp-secondary-text-colour">
COSHH
</li>
<li class="govuk-body-s orp-secondary-text-colour">
Substances hazardous to health
</li>
<li class="govuk-body-s orp-secondary-text-colour">
Code of practice
</li>
</ul>
</div>
<!-- /first search result -->
<hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
<!-- second search result -->
<div class="govuk-summary-list__row--no-border">
<span class="govuk-caption-m">Guidance</span>
<h2 class="govuk-heading-m">
<a href="/document/{{ result.document_id }}/details" class="govuk-link orp-link-text-decoration-none">
Waste and Mining Operations Installations Water Discharge and Groundwater Activities Medium
</a>
</h2>
<p class="govuk-body-m">
The Environment Agency consults the public on certain applications for: waste and mining waste
operations installations water discharge
</p>
<p class="govuk-body-s orp-secondary-text-colour govuk-!-margin-bottom-2">
Published by: Environment Agency
</p>
<p class="govuk-body-s orp-secondary-text-colour">
Last updated: 30 December 2023
</p>
<ul class="govuk-list orp-topics-list">
<li class="govuk-body-s orp-secondary-text-colour">
Mining
</li>
<li class="govuk-body-s orp-secondary-text-colour">
Groundwater
</li>
<li class="govuk-body-s orp-secondary-text-colour">
Waste
</li>
</ul>
</div>
<!-- /second search result -->
<hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">

</div>

{% if results %}
<div class="govuk-summary-list">
<p class="govuk-body-m">
Expand Down

0 comments on commit 5c96352

Please sign in to comment.