baarkerlounger
/
submit-social-housing-lettings-and-sales-data
mirror of https://github.com/communitiesuk/submit-social-housing-lettings-and-sales-data.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add styling, separate filter tab into a file

pull/449/head
Kat 3 years ago
parent
08ec80d6da
commit
c2b9b6b0d8
7 changed files with 216 additions and 92 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      app/frontend/assets/images/icon-cross.svg
  2. 109
      app/frontend/styles/_filter.scss
  3. 1
      app/frontend/styles/application.scss
  4. 30
      app/views/case_logs/_log_filters.erb
  5. 148
      app/views/case_logs/_log_list.html.erb
  6. 15
      app/views/case_logs/index.html.erb
  7. 2
      spec/helpers/filters_helper_spec.rb

3
app/frontend/assets/images/icon-cross.svg
Unescape View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
<path d="M14 1.4L12.6 0 7 5.6 1.4 0 0 1.4 5.6 7 0 12.6 1.4 14 7 8.4l5.6 5.6 1.4-1.4L8.4 7z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 167 B

109
app/frontend/styles/_filter.scss
Unescape View File

@ -0,0 +1,109 @@
.app-filter {
background-color: govuk-colour("light-grey");
margin-bottom: govuk-spacing(2);
}
.app-filter__header {
background-color: govuk-colour("light-grey");
display: flex;
justify-content: space-between;
padding: govuk-spacing(2) govuk-spacing(3);
position: sticky;
top: 0;
z-index: 10;
@include govuk-media-query($from: desktop) {
position: static;
}
[class^=govuk-heading-] {
margin-bottom: 0;
}
}
.app-filter__content {
padding: govuk-spacing(1) govuk-spacing(3) govuk-spacing(4);
}
.app-filter__close {
@include govuk-font(19);
-webkit-appearance: none;
background-color: transparent;
border: none;
border-radius: 0;
color: $govuk-text-colour;
cursor: pointer;
margin: #{govuk-spacing(1) * -1};
padding: govuk-spacing(1);
&:focus {
background-color: $govuk-focus-colour;
color: $govuk-focus-text-colour;
box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
outline: none;
}
// Fix unwanted button padding in Firefox
&::-moz-focus-inner {
padding: 0;
border: 0;
}
&::before {
background-image: url("../assets/images/icon-cross.svg");
content: "";
display: inline-block;
height: 14px;
margin-right: govuk-spacing(1);
position: relative;
top: -2px; // Alignment tweak
vertical-align: middle;
width: 14px;
}
@include govuk-media-query(desktop) {
display: none;
}
}
.app-filter-layout {
@include govuk-clearfix;
}
.app-filter-layout__filter {
@include govuk-media-query(desktop) {
float: left;
min-width: govuk-grid-width("one-quarter");
}
}
.js-enabled .app-filter-layout__filter {
outline: 0 none;
@include govuk-media-query($until: desktop) {
background-color: govuk-colour("light-grey");
bottom: govuk-spacing(1);
border: 1px solid govuk-colour("mid-grey");
max-width: 310px;
min-width: 260px;
width: 100%;
overflow-y: scroll;
position: fixed;
right: govuk-spacing(1);
top: govuk-spacing(1);
z-index: 100;
&:focus {
outline: $govuk-focus-width solid $govuk-focus-colour;
}
}
}
.app-filter-layout__content {
@include govuk-media-query(desktop) {
float: right;
max-width: calc(#{govuk-grid-width("three-quarters")} - #{govuk-spacing(6)});
width: 100%;
}
}

1
app/frontend/styles/application.scss
Unescape View File

@ -24,6 +24,7 @@ $govuk-global-styles: true;
@import "template"; @import "template";
@import "pagination"; @import "pagination";
@import "panel"; @import "panel";
@import "filter";
// App utilities // App utilities
.app-\!-colour-muted { .app-\!-colour-muted {

30
app/views/case_logs/_log_filters.erb
Unescape View File

@ -0,0 +1,30 @@
<div class="govuk-grid-column-one-quarter">
<div class="app-filter-layout">
<div class="app-filter-layout__filter">
<div class="app-filter">
<div class="app-filter__header">
<h2 class="govuk-heading-m">Filters</h2>
<button class="app-filter__close" type="button">Close</button>
</div>
<div class="app-filter__content">
<div class="govuk-form-group app-filter__group">
<%= form_with url: "/logs/filter", html: { method: :post }, builder: GOVUKDesignSystemFormBuilder::FormBuilder do |f| %>
<%= f.govuk_check_boxes_fieldset :status, legend: { text: "Status", size: "s"} do %>
<div class="govuk-checkboxes govuk-checkboxes--small" data-module="govuk-checkboxes">
<% statuses = {in_progress: "In progress", submitted: "Completed", not_started: "Not started"} %>
<% statuses.map do |key, option| %>
<%= f.govuk_check_box "status", "#{key}",
label: { text: option },
checked: filter_selected?(key),
size: "s" %>
<% end %>
</div>
<% end %>
<%= f.govuk_submit "Apply filters", class: "govuk-!-margin-top-4" %>
<% end %>
</div>
</div>
</div>
</div>
</div>
</div>

148
app/views/case_logs/_log_list.html.erb
Unescape View File

@ -1,88 +1,62 @@
<div class="govuk-grid-row"> <figure class="app-figure">
<div class="govuk-grid-column-one-quarter"> <figcaption id="<%= title.dasherize %>" class="app-figure__caption">
<div class="app-filter"> <span class="govuk-!-margin-right-4">
<div class="app-filter__header"> <strong><%= pagy.count %></strong> total <%= title.downcase %>
<h2 class="govuk-heading-m">Filters</h2> </span>
</div> <a class="govuk-link" download href="/logs.csv" type="text/csv">Download (CSV)</a>
<div class="app-filter__content"> </figcaption>
<div class="govuk-form-group app-filter__group"> <section class="app-table-group" tabindex="0" aria-labelledby="<%= title.dasherize %>">
<%= form_with url: "/logs/filter", html: { method: :post }, builder: GOVUKDesignSystemFormBuilder::FormBuilder do |f| %> <table class="govuk-table">
<%= f.govuk_check_boxes_fieldset :status do %> <thead class="govuk-table__head">
<% statuses = {in_progress: "In progress", submitted: "Completed", archived: "Not started"} %> <tr class="govuk-table__row">
<% statuses.map do |key, option| %> <th class="govuk-table__header" scope="col">Log</th>
<%= f.govuk_check_box "status", "#{key}", <th class="govuk-table__header" scope="col">Tenant</th>
label: { text: option }, <th class="govuk-table__header" scope="col">Property</th>
checked: filter_selected?(key), <th class="govuk-table__header" scope="col">Tenancy starts</th>
class: "govuk-checkboxes govuk-checkboxes--small" %> <th class="govuk-table__header" scope="col">Log created</th>
<% end %> <th class="govuk-table__header" scope="col">Completed</th>
<% end %> <% if current_user.support? %>
<%= f.govuk_submit "Apply filters"%> <th class="govuk-table__header" scope="col">Owning organisation</th>
<th class="govuk-table__header" scope="col">Managing organisation</th>
<% end %> <% end %>
</div> </tr>
</div> </thead>
</div> <tbody class="govuk-table__body">
</div> <% case_logs.map do |log| %>
<div class="govuk-grid-column-three-quarters"> <tr class="govuk-table__row">
<figure class="app-figure"> <th class="govuk-table__header" scope="row">
<figcaption id="<%= title.dasherize %>" class="app-figure__caption"> <%= govuk_link_to log.id, case_log_path(log) %>
<span class="govuk-!-margin-right-4"> </th>
<strong><%= pagy.count %></strong> total <%= title.downcase %> <td class="govuk-table__cell app-!-font-tabular">
</span> <%= log.tenant_code? ? log.tenant_code : '–' %>
<a class="govuk-link" download href="/logs.csv" type="text/csv">Download (CSV)</a> </td>
</figcaption> <td class="govuk-table__cell app-!-font-tabular">
<section class="app-table-group" tabindex="0" aria-labelledby="<%= title.dasherize %>"> <%= log.propcode? ? log.propcode : '–' %>
<table class="govuk-table"> </td>
<thead class="govuk-table__head"> <td class="govuk-table__cell">
<tr class="govuk-table__row"> <%= log.startdate.present? ? log.startdate.to_formatted_s(:govuk_date) : '–' %>
<th class="govuk-table__header" scope="col">Log</th> </td>
<th class="govuk-table__header" scope="col">Tenant</th> <td class="govuk-table__cell">
<th class="govuk-table__header" scope="col">Property</th> <%= log.created_at.to_formatted_s(:govuk_date) %>
<th class="govuk-table__header" scope="col">Tenancy starts</th> </td>
<th class="govuk-table__header" scope="col">Log created</th> <td class="govuk-table__cell">
<th class="govuk-table__header" scope="col">Completed</th> <%= govuk_tag(
<% if current_user.support? %> colour: log.status == 'completed' ? 'blue' : 'grey',
<th class="govuk-table__header" scope="col">Owning organisation</th> text: log.status.humanize
<th class="govuk-table__header" scope="col">Managing organisation</th> ) %>
<% end %> </td>
</tr> <% if current_user.support? %>
</thead> <td class="govuk-table__cell">
<tbody class="govuk-table__body"> <%= log.owning_organisation.name %>
<% case_logs.map do |log| %> </td>
<tr class="govuk-table__row"> <td class="govuk-table__cell">
<th class="govuk-table__header" scope="row"> <%= log.managing_organisation.name %>
<%= govuk_link_to log.id, case_log_path(log) %> </td>
</th> <% end %>
<td class="govuk-table__cell app-!-font-tabular"> </tr>
<%= log.tenant_code? ? log.tenant_code : '–' %> <% end %>
</td> </tbody>
<td class="govuk-table__cell app-!-font-tabular"> </table>
<%= log.propcode? ? log.propcode : '–' %> </section>
</td> </figure>
<td class="govuk-table__cell">
<%= log.startdate.present? ? log.startdate.to_formatted_s(:govuk_date) : '–' %>
</td>
<td class="govuk-table__cell">
<%= log.created_at.to_formatted_s(:govuk_date) %>
</td>
<td class="govuk-table__cell">
<%= govuk_tag(
colour: log.status == 'completed' ? 'blue' : 'grey',
text: log.status.humanize
) %>
</td>
<% if current_user.support? %>
<td class="govuk-table__cell">
<%= log.owning_organisation.name %>
</td>
<td class="govuk-table__cell">
<%= log.managing_organisation.name %>
</td>
<% end %>
</tr>
<% end %>
</tbody>
</table>
</section>
</figure>
</div>
</div>

15
app/views/case_logs/index.html.erb
Unescape View File

@ -5,11 +5,18 @@
</h1> </h1>
<div class="govuk-button-group"> <div class="govuk-button-group">
<%= govuk_button_link_to 'Hide filters', "", secondary: true %>
<%= govuk_button_to "Create a new lettings log", case_logs_path %> <%= govuk_button_to "Create a new lettings log", case_logs_path %>
<%#= govuk_link_to "Upload logs", bulk_upload_case_logs_path %> <%#= govuk_link_to "Upload logs", bulk_upload_case_logs_path %>
</div> </div>
<% if @case_logs.present? %> <div class="govuk-grid-row">
<%= render partial: "log_list", locals: { case_logs: @case_logs, title: "Logs", pagy: @pagy } %> <%= render partial: "log_filters"%>
<%== render partial: 'pagy/nav', locals: { pagy: @pagy, item_name: "logs" } %> <% if @case_logs.present? %>
<% end %> <div class="govuk-grid-column-three-quarters">
<%= render partial: "log_list", locals: { case_logs: @case_logs, title: "Logs", pagy: @pagy } %>
<%== render partial: 'pagy/nav', locals: { pagy: @pagy, item_name: "logs" } %>
</div>
<% end %>
</div>

2
spec/helpers/filters_helper_spec.rb
Unescape View File

@ -9,7 +9,7 @@ RSpec.describe FiltersHelper do
end end
end end
context "one filter is selected" do context "when one filter is selected" do
before do before do
cookies[:case_logs_filters] = { "status": "in_progress" }.to_json cookies[:case_logs_filters] = { "status": "in_progress" }.to_json
end end

Write Preview
Loading…
Cancel
Save