Add mobile styling

app/frontend/controllers/filter_controller.js

@@ -0,0 +1,16 @@
+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";
+    }
+  }
+}

app/frontend/controllers/index.js

@@ -14,3 +14,6 @@ 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)

app/frontend/styles/_filter.scss

@@ -1,9 +1,9 @@
 .app-filter {
   background-color: govuk-colour("light-grey");
   margin-bottom: govuk-spacing(2);
-  }
+}
 
-  .app-filter__header {
+.app-filter__header {
   background-color: govuk-colour("light-grey");
   display: flex;
   justify-content: space-between;
@@ -16,16 +16,16 @@
     position: static;
   }
 
-    [class^=govuk-heading-] {
+  [class^="govuk-heading-"] {
     margin-bottom: 0;
   }
-  }
+}
 
-  .app-filter__content {
+.app-filter__content {
   padding: govuk-spacing(1) govuk-spacing(3) govuk-spacing(4);
-  }
+}
 
-  .app-filter__close {
+.app-filter__close {
   @include govuk-font(19);
 
   -webkit-appearance: none;
@@ -65,20 +65,32 @@
   @include govuk-media-query(desktop) {
     display: none;
   }
-  }
+}
 
-  .app-filter-layout {
+.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 {
+.app-filter-layout__filter {
   @include govuk-media-query(desktop) {
     float: left;
     min-width: govuk-grid-width("one-quarter");
   }
+  display: none;
+
+  @include govuk-media-query(desktop) {
+    display: block;
   }
+}
 
-  .js-enabled .app-filter-layout__filter {
+.js-enabled .app-filter-layout__filter {
   outline: 0 none;
 
   @include govuk-media-query($until: desktop) {
@@ -98,12 +110,14 @@
       outline: $govuk-focus-width solid $govuk-focus-colour;
     }
   }
-  }
+}
 
-  .app-filter-layout__content {
+.app-filter-layout__content {
   @include govuk-media-query(desktop) {
     float: right;
-      max-width: calc(#{govuk-grid-width("three-quarters")} - #{govuk-spacing(6)});
+    max-width: calc(
+      #{govuk-grid-width("three-quarters")} - #{govuk-spacing(6)}
+    );
     width: 100%;
   }
-  }
+}

app/views/case_logs/_log_filters.erb

@@ -1,10 +1,14 @@
-<div class="govuk-grid-column-one-quarter">
+<div class="app-filter-layout__filter" tabindex="-1" id="filter-panel">
-<div class="app-filter-layout">
+    <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">Close</button>
+            <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">
@@ -24,7 +28,5 @@
                 <% end %>
             </div>
         </div>
-</div>
+    </div>
-</div>
-</div>
 </div>

app/views/case_logs/index.html.erb

@@ -3,17 +3,25 @@
 <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">
+  <div class="govuk-button-group">
-  <%= govuk_button_link_to 'Hide filters', "", secondary: true %>
+    <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>
     <%= govuk_button_to "Create a new lettings log", case_logs_path %>
     <%#= govuk_link_to "Upload logs", bulk_upload_case_logs_path %>
-</div>
+  </div>
   
-<div class="govuk-grid-row">
   <%= render partial: "log_filters"%>
   <% if @case_logs.present? %>
-    <div class="govuk-grid-column-three-quarters">
+    <div class="app-filter-layout__content">
       <%= render partial: "log_list", locals: { case_logs: @case_logs, title: "Logs", pagy: @pagy } %>
       <%== render partial: 'pagy/nav', locals: { pagy: @pagy, item_name: "logs" } %>
     </div>