Skip to content

Commit

Permalink
- Adjustments to layout of some result items to bring them into line …
Browse files Browse the repository at this point in the history 
…with everything else

- Update result-panel class (used for multi-item rows in results view) to use CSS grid in full desktop mode (where items are shown horizontally) instead of CSS flex (which is used for smaller windows for vertical layout). This ensures items align with the rows above and below.
  • Loading branch information
@j-corry
j-corry committed Sep 20, 2024
1 parent 35e9cc3 commit 753bd20
Show file tree
Hide file tree
Showing 45 changed files with 724 additions and 1,151 deletions.
13 changes: 6 additions & 7 deletions app/assets/stylesheets/primary.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -497,6 +497,7 @@ table {
}

.result-panel {
display: flex;
flex-direction: column;
gap: 0;
}
Expand Down Expand Up @@ -551,6 +552,7 @@ table {
}

.result-panel {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 0;
Expand Down Expand Up @@ -604,13 +606,10 @@ table {
flex-direction: row;
}

/* for full-size displays we switch to a grid system, as it gives us alignment between multiple rows */
.result-panel {
flex-direction: row;
justify-content: space-between;
gap: 0.75rem;

div {
flex: 1 0 100px;
}
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 6px;
}
}
7 changes: 3 additions & 4 deletions app/assets/stylesheets/search_results.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,10 +176,9 @@
padding: 4px 0;

.row {
margin: 12px 0;

.result-panel {
display: flex;
.item-details {
padding-top: 3px;
padding-bottom: 3px;
}
}

Expand Down
93 changes: 11 additions & 82 deletions app/views/search/results/_bill.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,94 +5,32 @@

<div class="row">
<div class="result-panel">
<div class="left" id="primary-person">
<div id="primary-person">
<%= render 'search/results/item_details/member', member: object.member, member_party: object.member_parties %>
</div>
<div class="centre" id="secondary-person">
<div id="secondary-person">
</div>
<div class="right" id="primary-group">
<div id="primary-group">
<%= render 'search/results/item_details/departments', departments: object.departments, hide_label: false %>
</div>
</div>
</div>

<div class="row">
<div class="result-panel">
<div class="left" id="type">
<div id="type">
<%= render 'search/results/item_details/type', type: object.object_name %>
</div>
<div class="centre" id="status">
<div id="status">

</div>
<div class="right" id="secondary-group">
<div id="secondary-group">

</div>
</div>
</div>

<div <%= 'hidden' unless params[:show_detailed] == "true" %> class="row" id="detailed-view" data-detailed-results-target="toggleHidden">

<!-- <div class="row">-->
<!-- <div class="result-panel">-->
<!-- <div class="left" id="legislative-stage">-->

<!-- </div>-->
<!-- <div class="right" id="procedure">-->

<!-- </div>-->
<!-- </div>-->
<!-- </div>-->

<!-- <div class="row">-->
<!-- <div class="result-panel">-->
<!-- <div class="left-outer" id="specific-date-1">-->

<!-- </div>-->
<!-- <div class="left-inner" id="specific-date-2">-->

<!-- </div>-->
<!-- <div class="right-inner" id="specific-date-3">-->

<!-- </div>-->
<!-- <div class="right-outer" id="specific-date-4">-->

<!-- </div>-->
<!-- </div>-->
<!-- </div>-->

<!-- <div class="row">-->
<!-- <div id="coming-into-force">-->

<!-- </div>-->
<!-- </div>-->

<!-- <div class="row">-->
<!-- <div id="supplementary-content">-->

<!-- </div>-->
<!-- </div>-->

<!-- <div class="row">-->
<!-- <div id="corrected">-->

<!-- </div>-->
<!-- </div>-->

<%# unless object.amendments.blank? %>
<%# object.amendments.each do |amendment| %>
<!-- <div class="row">-->
<!-- <div class="result-panel">-->
<!-- <div class="left" id="amending-member">-->

<!-- </div>-->
<!-- <div class="right" id="amendment-date">-->

<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<%# end %>
<%# end %>
<%= render 'search/results/item_details/legislation', legislation: object.legislation unless object.legislation.blank? %>
<%= render 'search/results/item_details/witnesses', witnesses: object.witnesses unless object.witnesses.blank? %>
<%= render 'search/results/item_details/subjects', subjects: object.subjects unless object.subjects.blank? %>
Expand All @@ -101,10 +39,10 @@

<div class="row">
<div class="result-panel">
<div class="left" id="commons-library-location">
<div id="commons-library-location">
<%= render 'search/results/item_details/commons_library_location', location: object.commons_library_location unless object.commons_library_location.blank? %>
</div>
<div class="right" id="lords-library-location">
<div id="lords-library-location">
<%= render 'search/results/item_details/lords_library_location', location: object.lords_library_location unless object.lords_library_location.blank? %>
</div>
</div>
Expand All @@ -114,22 +52,13 @@

<div class="row">
<div class="result-panel">
<div class="left" id="significant-date">
<div class="item-details-label">
Date
</div>
<div id="significant-date">
<%= render 'search/results/item_details/date', date: object.standard_date %>
</div>
<div class="centre" id="reference">
<div class="item-details-label">
Reference
</div>
<div id="reference">
<%= render 'search/results/item_details/reference', reference: object.standard_reference %>
</div>
<div class="right" id="house">
<div class="item-details-label">
House
</div>
<div id="house">
<%= render 'search/results/item_details/legislature', legislature: object.legislature %>
</div>
</div>
Expand Down
38 changes: 16 additions & 22 deletions app/views/search/results/_church_of_england_measure.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@

<div class="row">
<div class="result-panel">
<div class="left" id="type">
<div id="type">
<%= render 'search/results/item_details/type', type: object.object_name %>
</div>
<div class="centre" id="status">
<div id="status">

</div>
<div class="right" id="secondary-group">
<div id="secondary-group">

</div>
</div>
Expand All @@ -21,27 +21,27 @@

<div class="row">
<div class="result-panel">
<div class="left" id="legislative-stage">
<div id="legislative-stage">

</div>
<div class="right" id="procedure">
<div id="procedure">

</div>
</div>
</div>

<div class="row">
<div class="result-panel">
<div class="left-outer" id="specific-date-1">
<div id="specific-date-1">

</div>
<div class="left-inner" id="specific-date-2">
<div id="specific-date-2">

</div>
<div class="right-inner" id="specific-date-3">
<div id="specific-date-3">

</div>
<div class="right-outer" id="specific-date-4">
<div id="specific-date-4">

</div>
</div>
Expand Down Expand Up @@ -69,10 +69,10 @@
<% object.amendments.each do |amendment| %>
<div class="row">
<div class="result-panel">
<div class="left" id="amending-member">
<div id="amending-member">

</div>
<div class="right" id="amendment-date">
<div id="amendment-date">

</div>
</div>
Expand All @@ -86,10 +86,10 @@

<div class="row">
<div class="result-panel">
<div class="left" id="commons-library-location">
<div id="commons-library-location">
<%= render 'search/results/item_details/commons_library_location', location: object.commons_library_location unless object.commons_library_location.blank? %>
</div>
<div class="right" id="lords-library-location">
<div id="lords-library-location">
<%= render 'search/results/item_details/lords_library_location', location: object.lords_library_location unless object.lords_library_location.blank? %>
</div>
</div>
Expand All @@ -99,19 +99,13 @@

<div class="row">
<div class="result-panel">
<div class="left" id="significant-date">
<div class="item-details-label">
Date
</div>
<div id="significant-date">
<%= render 'search/results/item_details/date', date: object.standard_date %>
</div>
<div class="centre" id="reference">
<div class="item-details-label">
Reference
</div>
<div id="reference">
<%= render 'search/results/item_details/reference', reference: object.standard_reference %>
</div>
<div class="right" id="house">
<div id="house">
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 753bd20

Please sign in to comment.