Add mobile styling

3 years ago · cbca18b46b
5 changed files with 177 additions and 134 deletions
--- a/app/frontend/controllers/filter_controller.js
+++ b/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";
+    }
+  }
+}
--- a/app/frontend/controllers/index.js
+++ b/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)
--- a/app/frontend/styles/_filter.scss
+++ b/app/frontend/styles/_filter.scss
@ -1,109 +1,123 @@
 .app-filter {
-    background-color: govuk-colour("light-grey");
-    margin-bottom: govuk-spacing(2);
+  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;
  }
-  
-  .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;
-    }
+
+  [class^="govuk-heading-"] {
+    margin-bottom: 0;
  }
-  
-  .app-filter__content {
-    padding: govuk-spacing(1) govuk-spacing(3) govuk-spacing(4);
+}
+
+.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;
  }
-  
-  .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;
-    }
+  // Fix unwanted button padding in Firefox
+  &::-moz-focus-inner {
+    padding: 0;
+    border: 0;
  }

-  .app-filter-layout {
-    @include govuk-clearfix;
+  &::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;
  }
-  
-  .app-filter-layout__filter {
-    @include govuk-media-query(desktop) {
-      float: left;
-      min-width: govuk-grid-width("one-quarter");
-    }
+
+  @include govuk-media-query(desktop) {
+    display: none;
  }
-  
-  .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 {
+  @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;
+
+  @include govuk-media-query(desktop) {
+    display: block;
  }
-  
-  .app-filter-layout__content {
-    @include govuk-media-query(desktop) {
-      float: right;
-      max-width: calc(#{govuk-grid-width("three-quarters")} - #{govuk-spacing(6)});
-      width: 100%;
+}
+
+.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%;
+  }
+}
--- a/app/views/case_logs/_log_filters.erb
+++ b/app/views/case_logs/_log_filters.erb
@ -1,30 +1,32 @@
-<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 class="app-filter-layout__filter" tabindex="-1" id="filter-panel">
+    <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/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>
-        <% end %>
-        <%= f.govuk_submit "Apply filters", class: "govuk-!-margin-top-4" %>
-        <% end %>
-    </div>
+        </div>
    </div>
 </div>
-</div>
-</div>
-</div>
--- a/app/views/case_logs/index.html.erb
+++ b/app/views/case_logs/index.html.erb
@ -3,17 +3,25 @@
 <h1 class="govuk-heading-l">
  <%= content_for(:title) %>
 </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>
-
-<div class="govuk-grid-row">
+<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>
+    <%= govuk_button_to "Create a new lettings log", case_logs_path %>
+    <%#= govuk_link_to "Upload logs", bulk_upload_case_logs_path %>
+  </div>
+  
  <%= 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>