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
Split 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 "pagination";
@import "panel";
@import "filter";
// App utilities
.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">
<div class="govuk-grid-column-one-quarter">
<div class="app-filter">
<div class="app-filter__header">
<h2 class="govuk-heading-m">Filters</h2>
</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 do %>
<% statuses = {in_progress: "In progress", submitted: "Completed", archived: "Not started"} %>
<% statuses.map do |key, option| %>
<%= f.govuk_check_box "status", "#{key}",
label: { text: option },
checked: filter_selected?(key),
class: "govuk-checkboxes govuk-checkboxes--small" %>
<% end %>
<% end %>
<%= f.govuk_submit "Apply filters"%>
<figure class="app-figure">
<figcaption id="<%= title.dasherize %>" class="app-figure__caption">
<span class="govuk-!-margin-right-4">
<strong><%= pagy.count %></strong> total <%= title.downcase %>
</span>
<a class="govuk-link" download href="/logs.csv" type="text/csv">Download (CSV)</a>
</figcaption>
<section class="app-table-group" tabindex="0" aria-labelledby="<%= title.dasherize %>">
<table class="govuk-table">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="col">Log</th>
<th class="govuk-table__header" scope="col">Tenant</th>
<th class="govuk-table__header" scope="col">Property</th>
<th class="govuk-table__header" scope="col">Tenancy starts</th>
<th class="govuk-table__header" scope="col">Log created</th>
<th class="govuk-table__header" scope="col">Completed</th>
<% if current_user.support? %>
<th class="govuk-table__header" scope="col">Owning organisation</th>
<th class="govuk-table__header" scope="col">Managing organisation</th>
<% end %>
</div>
</div>
</div>
</div>
<div class="govuk-grid-column-three-quarters">
<figure class="app-figure">
<figcaption id="<%= title.dasherize %>" class="app-figure__caption">
<span class="govuk-!-margin-right-4">
<strong><%= pagy.count %></strong> total <%= title.downcase %>
</span>
<a class="govuk-link" download href="/logs.csv" type="text/csv">Download (CSV)</a>
</figcaption>
<section class="app-table-group" tabindex="0" aria-labelledby="<%= title.dasherize %>">
<table class="govuk-table">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="col">Log</th>
<th class="govuk-table__header" scope="col">Tenant</th>
<th class="govuk-table__header" scope="col">Property</th>
<th class="govuk-table__header" scope="col">Tenancy starts</th>
<th class="govuk-table__header" scope="col">Log created</th>
<th class="govuk-table__header" scope="col">Completed</th>
<% if current_user.support? %>
<th class="govuk-table__header" scope="col">Owning organisation</th>
<th class="govuk-table__header" scope="col">Managing organisation</th>
<% end %>
</tr>
</thead>
<tbody class="govuk-table__body">
<% case_logs.map do |log| %>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">
<%= govuk_link_to log.id, case_log_path(log) %>
</th>
<td class="govuk-table__cell app-!-font-tabular">
<%= log.tenant_code? ? log.tenant_code : '–' %>
</td>
<td class="govuk-table__cell app-!-font-tabular">
<%= log.propcode? ? log.propcode : '–' %>
</td>
<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>
</tr>
</thead>
<tbody class="govuk-table__body">
<% case_logs.map do |log| %>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">
<%= govuk_link_to log.id, case_log_path(log) %>
</th>
<td class="govuk-table__cell app-!-font-tabular">
<%= log.tenant_code? ? log.tenant_code : '–' %>
</td>
<td class="govuk-table__cell app-!-font-tabular">
<%= log.propcode? ? log.propcode : '–' %>
</td>
<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>

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

@ -5,11 +5,18 @@
</h1>
<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_link_to "Upload logs", bulk_upload_case_logs_path %>
</div>
<% if @case_logs.present? %>
<%= render partial: "log_list", locals: { case_logs: @case_logs, title: "Logs", pagy: @pagy } %>
<%== render partial: 'pagy/nav', locals: { pagy: @pagy, item_name: "logs" } %>
<% end %>
<div class="govuk-grid-row">
<%= render partial: "log_filters"%>
<% if @case_logs.present? %>
<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
context "one filter is selected" do
context "when one filter is selected" do
before do
cookies[:case_logs_filters] = { "status": "in_progress" }.to_json
end

Write Preview
Loading…
Cancel
Save