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

Refactor filter layout and toggle 

Ensure filters appear correctly, and that filter toggle behaves as expected (and across viewports)
pull/476/head
Paul Robert Lloyd 3 years ago
parent
b710955f1e
commit
a0434bf0d1
10 changed files with 233 additions and 111 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. 16
      app/frontend/controllers/filter_controller.js
  2. 26
      app/frontend/controllers/filter_layout_controller.js
  3. 4
      app/frontend/controllers/index.js
  4. 112
      app/frontend/modules/filter_toggle.js
  5. 42
      app/frontend/styles/_filter-layout.scss
  6. 66
      app/frontend/styles/_filter.scss
  7. 7
      app/frontend/styles/application.scss
  8. 15
      app/views/case_logs/_log_filters.erb
  9. 14
      app/views/case_logs/index.html.erb
  10. 4
      app/views/filters/_checkbox_filter.html.erb

16
app/frontend/controllers/filter_controller.js
Unescape View File

@ -1,16 +0,0 @@
import { Controller } from "@hotwired/stimulus";
export default class extends Controller {
toggleFilter() {
let filter_panel = document.getElementById("filter-panel");
let toggle_filter_button = document.getElementById("toggle-filter-button");
if (filter_panel.style.display === "none" || !filter_panel.style.display) {
filter_panel.style.display = "block";
toggle_filter_button.innerText = "Hide filters";
} else {
filter_panel.style.display = "none";
toggle_filter_button.innerText = "Show filters";
}
}
}

26
app/frontend/controllers/filter_layout_controller.js
Unescape View File

@ -0,0 +1,26 @@
import { Controller } from "@hotwired/stimulus";
import { FilterToggle } from "../modules/filter_toggle.js"
export default class extends Controller {
connect() {
const filterToggle = new FilterToggle({
bigModeMediaQuery: '(min-width: 48.0625em)',
closeButton: {
container: this.element.querySelector('.app-filter__header'),
text: 'Close'
},
filter: {
container: this.element.querySelector('.app-filter-layout__filter')
},
startHidden: false,
toggleButton: {
container: this.element.querySelector('.app-filter-toggle'),
showText: 'Show filters',
hideText: 'Hide filters',
classes: 'govuk-button--secondary'
}
})
filterToggle.init()
}
}

4
app/frontend/controllers/index.js
Unescape View File

@ -15,5 +15,5 @@ application.register("govukfrontend", GovukfrontendController)
import NumericQuestionController from "./numeric_question_controller.js"
application.register("numeric-question", NumericQuestionController)
import FilterController from "./filter_controller.js"
application.register("filter", FilterController)
import FilterLayoutController from "./filter_layout_controller.js"
application.register("filter-layout", FilterLayoutController)

112
app/frontend/modules/filter_toggle.js
Unescape View File

@ -0,0 +1,112 @@
export class FilterToggle {
constructor (options) {
this.options = options
this.container = this.options.toggleButton.container
}
setupResponsiveChecks () {
this.mq = window.matchMedia(this.options.bigModeMediaQuery)
this.mq.addListener(this.checkMode.bind(this))
this.checkMode(this.mq)
}
checkMode (mq) {
if (mq.matches) {
this.enableBigMode()
} else {
this.enableSmallMode()
}
}
enableBigMode () {
this.showMenu()
this.removeMenuButton()
this.removeCloseButton()
}
enableSmallMode () {
this.options.filter.container.setAttribute("tabindex", "-1")
this.hideMenu()
this.addMenuButton()
this.addCloseButton()
}
addCloseButton () {
if (this.options.closeButton) {
this.closeButton = document.createElement("button")
this.closeButton.classList.add("app-filter__close")
this.closeButton.innerText = this.options.closeButton.text
this.closeButton.type = 'button'
this.closeButton.addEventListener('click', this.onCloseClick.bind(this))
this.options.closeButton.container.append(this.closeButton)
}
}
onCloseClick () {
this.hideMenu()
this.menuButton.focus()
}
removeCloseButton () {
if (this.closeButton) {
this.closeButton.remove()
this.closeButton = null
}
}
addMenuButton () {
this.menuButton = document.createElement("button")
this.menuButton.setAttribute("aria-expanded", "false")
this.menuButton.setAttribute("aria-has-popup", "true")
this.menuButton.classList.add("govuk-button", this.options.toggleButton.classes, "app-filter-toggle__button")
this.menuButton.innerText = this.options.toggleButton.showText
this.menuButton.type = "button"
this.menuButton.addEventListener("click", this.onMenuButtonClick.bind(this))
this.options.toggleButton.container.prepend(this.menuButton)
}
removeMenuButton () {
if (this.menuButton) {
this.menuButton.remove()
this.menuButton = null
}
}
hideMenu () {
if (this.menuButton) {
this.menuButton.setAttribute("aria-expanded", "false")
this.menuButton.innerText = this.options.toggleButton.showText
}
this.options.filter.container.setAttribute("hidden", true)
}
showMenu () {
if (this.menuButton) {
this.menuButton.setAttribute("aria-expanded", "true")
this.menuButton.innerText = this.options.toggleButton.hideText
}
this.options.filter.container.removeAttribute("hidden")
}
onMenuButtonClick () {
this.toggle()
}
toggle () {
if (this.options.filter.container.hidden) {
this.showMenu()
this.options.filter.container.focus()
} else {
this.hideMenu()
}
}
init () {
this.setupResponsiveChecks()
if (this.options.startHidden) {
this.hideMenu()
}
}
}

42
app/frontend/styles/_filter-layout.scss
Unescape View File

@ -0,0 +1,42 @@
.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%;
}
}

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

@ -61,63 +61,41 @@
vertical-align: middle;
width: 14px;
}
@include govuk-media-query(desktop) {
display: none;
}
}
.app-filter-layout {
@include govuk-clearfix;
}
.app-filter-toggle__button {
min-width: 128px;
@include govuk-media-query(desktop) {
display: none !important;
}
}
.app-filter-layout__filter {
@include govuk-media-query(desktop) {
float: left;
min-width: govuk-grid-width("one-quarter");
}
display: none;
.app-filter__group {
border-bottom: 1px solid $govuk-border-colour;
margin-bottom: govuk-spacing(3);
padding-bottom: govuk-spacing(2);
@include govuk-media-query(desktop) {
display: block;
&:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
}
.js-enabled .app-filter-layout__filter {
outline: 0 none;
.govuk-fieldset__legend {
margin-bottom: govuk-spacing(1);
}
@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;
.govuk-form-group {
margin-bottom: 0;
&:focus {
outline: $govuk-focus-width solid $govuk-focus-colour;
&:last-child {
margin-bottom: 0;
}
}
}
.app-filter-layout__content {
@include govuk-media-query(desktop) {
float: right;
max-width: calc(
#{govuk-grid-width("three-quarters")} - #{govuk-spacing(6)}
);
width: 100%;
.govuk-checkboxes__label,
.govuk-radios__label {
@include govuk-font(16);
&::before {
background-color: govuk-colour("white");
}
}
}

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

@ -1,9 +1,9 @@
@function frontend-font-url($filename) {
@return url("~assets/fonts/"+$filename);
@return url("~assets/fonts/" + $filename);
}
@function frontend-image-url($filename) {
@return url("~assets/images/"+$filename);
@return url("~assets/images/" + $filename);
}
$govuk-font-url-function: frontend-font-url;
@ -15,6 +15,8 @@ $govuk-global-styles: true;
@import "accessible-autocomplete";
@import "button";
@import "figure";
@import "filter";
@import "filter-layout";
@import "input";
@import "related-navigation";
@import "section-skip-link";
@ -24,7 +26,6 @@ $govuk-global-styles: true;
@import "template";
@import "pagination";
@import "panel";
@import "filter";
// App utilities
.app-\!-colour-muted {

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

@ -1,25 +1,16 @@
<div class="app-filter-layout__filter" tabindex="-1" id="filter-panel">
<div class="app-filter" >
<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"
data-controller="filter"
data-action="click->filter#toggleFilter">
Close
</button>
</div>
<div class="app-filter__content">
<div class="govuk-form-group app-filter__group">
<%= form_with url: "/logs", html: { method: :get } do |f| %>
<% years = {"2021": "2021/22", "2022": "2022/23"} %>
<%= render partial: "filters/checkbox_filter", locals: { f: f, options: years, label: "Collection year", category: "years" } %>
<%= render partial: "filters/checkbox_filter", locals: { f: f, options: status_filters, label: "Status", category: "status" } %>
<%= render partial: "filters/checkbox_filter", locals: { f: f, options: {"all": "All", "yours": "Yours"}, label: "Logs", category: "user" } %>
<%= f.govuk_submit "Apply filters", class: "govuk-!-margin-top-4" %>
<%= f.govuk_submit "Apply filters", class: "govuk-!-margin-bottom-0" %>
<% end %>
</div>
</div>
</div>
</div>

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

@ -3,18 +3,8 @@
<h1 class="govuk-heading-l">
<%= content_for(:title) %>
</h1>
<div class="app-filter-layout" data-module="filter-layout" data-module-started="true">
<div class="govuk-button-group">
<button
aria-expanded="true"
aria-has-popup="true"
class="govuk-button govuk-button--secondary app-filter-toggle__button"
type="button"
id="toggle-filter-button"
data-controller="filter"
data-action="click->filter#toggleFilter"
>Show filters
</button>
<div class="app-filter-layout" data-controller="filter-layout">
<div class="govuk-button-group app-filter-toggle">
<%= govuk_button_to "Create a new lettings log", case_logs_path %>
<%#= govuk_link_to "Upload logs", bulk_upload_case_logs_path %>
</div>

4
app/views/filters/_checkbox_filter.html.erb
Unescape View File

@ -1,10 +1,8 @@
<%= f.govuk_check_boxes_fieldset category.to_sym, legend: { text: label, size: "s"} do %>
<div class="govuk-checkboxes govuk-checkboxes--small" data-module="govuk-checkboxes">
<%= f.govuk_check_boxes_fieldset category.to_sym, legend: { text: label, size: "s"}, small: true, form_group: { classes: "app-filter__group" } do %>
<% options.map do |key, option| %>
<%= f.govuk_check_box category, "#{key}",
label: { text: option },
checked: filter_selected?(category, key),
size: "s" %>
<% end %>
</div>
<% end %>

Write Preview
Loading…
Cancel
Save