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

feat: update breakpoints for responsive layout changes

pull/2115/head
natdeanlewissoftwire 1 year ago
parent
2bbd5d0744
commit
93515f8c5a
3 changed files with 49 additions and 33 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. 20
      app/frontend/styles/_data_box.scss
  2. 6
      app/views/home/_data_box.html.erb
  3. 56
      app/views/home/index.html.erb

20
app/frontend/styles/_data_box.scss
Unescape View File

@ -2,22 +2,32 @@
@include govuk-font($size: 19);
font-weight: bold;
white-space: nowrap;
width: 100%;
}
@media (min-width: 72.5em) {
.app-data-box-group {
@media (min-width: 48.0625em) {
.app-data-box-group-one-third {
display: flex;
justify-content: space-between;
column-gap: govuk-spacing(4);
width: 100%;
}
}
@media (min-width: 72.5em) {
@media (min-width: 66.25em) {
.app-data-box-one-third {
width: 33.3333333%;
float: left;
}
}
@media (min-width: 72.5em) {
@media (min-width: 54.0625em) {
.app-data-box-group-one-half {
display: flex;
justify-content: space-between;
column-gap: govuk-spacing(4);
width: 100%;
}
}
@media (min-width: 54.0625em) {
.app-data-box-one-half {
width: 50%;
float: left;

6
app/views/home/_data_box.html.erb
Unescape View File

@ -1,5 +1,7 @@
<div class="app-data-box__upper ">
<div class="app-data-box__count"><%= data_count(@current_user, type) %></div>
<div class="app-data-box__upper">
<div class="app-data-box__count">
<a><%= govuk_link_to data_count(@current_user, type), data_path(@current_user, type), class: "govuk-link--no-visited-state govuk-link--no-underline" %></a>
</div>
<a><%= govuk_link_to data_subheading(@current_user, type), data_path(@current_user, type), class: "govuk-link--no-visited-state" %></a>
</div>
<div class="app-data-box__lower">

56
app/views/home/index.html.erb
Unescape View File

@ -6,36 +6,40 @@
<h1 class="govuk-heading-l"><%= heading_for_user_role(@current_user) %></h1>
</div>
<div class="govuk-grid-row">
<div class="app-data-box-group">
<% if @current_user.support? || (@current_user.data_coordinator? && @current_user.sales_logs.present?)%>
<div class="app-data-box-one-third app-data-box__margin_right">
<span><%= render partial: "home/data_box", locals: {type: "lettings"} %></span>
</div>
<div class="app-data-box-one-third app-data-box__margin_right">
<span><%= render partial: "home/data_box", locals: {type: "sales"} %></span>
</div>
<div class="app-data-box-one-third">
<span><%= render partial: "home/data_box", locals: {type: "schemes"} %></span>
</div>
<% else %>
<div class="app-data-box-one-half app-data-box__margin_right">
<span><%= render partial: "home/data_box", locals: {type: "lettings"} %></span>
</div>
<% if @current_user.data_coordinator? %>
<div class="app-data-box-one-half">
<span><%= render partial: "home/data_box", locals: {type: "schemes"} %></span>
</div>
<% elsif @current_user.sales_logs.present? %>
<div class="app-data-box-one-half">
<span><%= render partial: "home/data_box", locals: {type: "sales"} %></span>
<div class="app-data-box-group">
<% if @current_user.support? || (@current_user.data_coordinator? && @current_user.sales_logs.present?)%>
<div class="app-data-box-group-one-third">
<div class="app-data-box-one-third">
<span><%= render partial: "home/data_box", locals: {type: "lettings"} %></span>
</div>
<div class="app-data-box-one-third">
<span><%= render partial: "home/data_box", locals: {type: "sales"} %></span>
</div>
<div class="app-data-box-one-third">
<span><%= render partial: "home/data_box", locals: {type: "schemes"} %></span>
</div>
</div>
<% else %>
<div class="app-data-box-one-half">
<span><%= render partial: "home/data_box", locals: {type: "misc"} %></span>
<div class="app-data-box-group-one-half">
<div class="app-data-box-one-half">
<span><%= render partial: "home/data_box", locals: {type: "lettings"} %></span>
</div>
<% if @current_user.data_coordinator? %>
<div class="app-data-box-one-half">
<span><%= render partial: "home/data_box", locals: {type: "schemes"} %></span>
</div>
<% elsif @current_user.sales_logs.present? %>
<div class="app-data-box-one-half">
<span><%= render partial: "home/data_box", locals: {type: "sales"} %></span>
</div>
<% else %>
<div class="app-data-box-one-half">
<span><%= render partial: "home/data_box", locals: {type: "misc"} %></span>
</div>
<% end %>
</div>
<% end %>
<% end %>
</div>
</div>
</div>
<div class="govuk-grid-row">
<hr class="govuk-section-break govuk-section-break--visible govuk-section-break--m">

Write Preview
Loading…
Cancel
Save