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 mobile styling

pull/449/head
Kat 3 years ago
parent
c2b9b6b0d8
commit
cbca18b46b
5 changed files with 177 additions and 134 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. 16
      app/frontend/controllers/filter_controller.js
  2. 3
      app/frontend/controllers/index.js
  3. 210
      app/frontend/styles/_filter.scss
  4. 56
      app/views/case_logs/_log_filters.erb
  5. 26
      app/views/case_logs/index.html.erb

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

@ -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";
}
}
}

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

@ -14,3 +14,6 @@ application.register("govukfrontend", GovukfrontendController)
import NumericQuestionController from "./numeric_question_controller.js" import NumericQuestionController from "./numeric_question_controller.js"
application.register("numeric-question", NumericQuestionController) application.register("numeric-question", NumericQuestionController)
import FilterController from "./filter_controller.js"
application.register("filter", FilterController)

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

@ -1,109 +1,123 @@
.app-filter { .app-filter {
background-color: govuk-colour("light-grey"); background-color: govuk-colour("light-grey");
margin-bottom: govuk-spacing(2); 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 { [class^="govuk-heading-"] {
background-color: govuk-colour("light-grey"); margin-bottom: 0;
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__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) { // Fix unwanted button padding in Firefox
display: none; &::-moz-focus-inner {
} padding: 0;
border: 0;
} }
.app-filter-layout { &::before {
@include govuk-clearfix; 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) {
@include govuk-media-query(desktop) { display: none;
float: left;
min-width: govuk-grid-width("one-quarter");
}
} }
}
.js-enabled .app-filter-layout__filter {
outline: 0 none; .app-filter-layout {
@include govuk-clearfix;
@include govuk-media-query($until: desktop) { }
background-color: govuk-colour("light-grey");
bottom: govuk-spacing(1); .app-filter-toggle__button {
border: 1px solid govuk-colour("mid-grey"); min-width: 128px;
max-width: 310px; @include govuk-media-query(desktop) {
min-width: 260px; display: none !important;
width: 100%; }
overflow-y: scroll; }
position: fixed;
right: govuk-spacing(1); .app-filter-layout__filter {
top: govuk-spacing(1); @include govuk-media-query(desktop) {
z-index: 100; float: left;
min-width: govuk-grid-width("one-quarter");
&:focus { }
outline: $govuk-focus-width solid $govuk-focus-colour; display: none;
}
} @include govuk-media-query(desktop) {
display: block;
} }
}
.app-filter-layout__content {
@include govuk-media-query(desktop) { .js-enabled .app-filter-layout__filter {
float: right; outline: 0 none;
max-width: calc(#{govuk-grid-width("three-quarters")} - #{govuk-spacing(6)});
width: 100%; @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%;
}
}

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

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

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

@ -3,17 +3,25 @@
<h1 class="govuk-heading-l"> <h1 class="govuk-heading-l">
<%= content_for(:title) %> <%= content_for(:title) %>
</h1> </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
<%= govuk_button_to "Create a new lettings log", case_logs_path %> aria-expanded="true"
<%#= govuk_link_to "Upload logs", bulk_upload_case_logs_path %> aria-has-popup="true"
</div> class="govuk-button govuk-button--secondary app-filter-toggle__button"
type="button"
<div class="govuk-grid-row"> 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"%> <%= render partial: "log_filters"%>
<% if @case_logs.present? %> <% 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: "log_list", locals: { case_logs: @case_logs, title: "Logs", pagy: @pagy } %>
<%== render partial: 'pagy/nav', locals: { pagy: @pagy, item_name: "logs" } %> <%== render partial: 'pagy/nav', locals: { pagy: @pagy, item_name: "logs" } %>
</div> </div>

Write Preview
Loading…
Cancel
Save