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
Split 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. 194
      app/frontend/styles/_filter.scss
  4. 56
      app/views/case_logs/_log_filters.erb
  5. 24
      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"
application.register("numeric-question", NumericQuestionController)
import FilterController from "./filter_controller.js"
application.register("filter", FilterController)

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

@ -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);
// Fix unwanted button padding in Firefox
&::-moz-focus-inner {
padding: 0;
border: 0;
}
&: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;
}
&::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;
}
// Fix unwanted button padding in Firefox
&::-moz-focus-inner {
padding: 0;
border: 0;
}
@include govuk-media-query(desktop) {
display: none;
}
}
&::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 {
@include govuk-clearfix;
}
@include govuk-media-query(desktop) {
display: none;
}
.app-filter-toggle__button {
min-width: 128px;
@include govuk-media-query(desktop) {
display: none !important;
}
}
.app-filter-layout {
@include govuk-clearfix;
.app-filter-layout__filter {
@include govuk-media-query(desktop) {
float: left;
min-width: govuk-grid-width("one-quarter");
}
display: none;
.app-filter-layout__filter {
@include govuk-media-query(desktop) {
float: left;
min-width: govuk-grid-width("one-quarter");
}
@include govuk-media-query(desktop) {
display: block;
}
}
.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;
}
}
}
.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;
.app-filter-layout__content {
@include govuk-media-query(desktop) {
float: right;
max-width: calc(#{govuk-grid-width("three-quarters")} - #{govuk-spacing(6)});
width: 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">
<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>

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

@ -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">
<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 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">
<%= 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>

Write Preview
Loading…
Cancel
Save