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
Unified 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. 10
      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); @include govuk-font($size: 19);
font-weight: bold; font-weight: bold;
white-space: nowrap; 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; display: flex;
justify-content: space-between; justify-content: space-between;
column-gap: govuk-spacing(4); column-gap: govuk-spacing(4);
width: 100%;
} }
} }
@media (min-width: 72.5em) { @media (min-width: 66.25em) {
.app-data-box-one-third { .app-data-box-one-third {
width: 33.3333333%; width: 33.3333333%;
float: left; 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 { .app-data-box-one-half {
width: 50%; width: 50%;
float: left; 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__upper">
<div class="app-data-box__count"><%= data_count(@current_user, type) %></div> <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> <a><%= govuk_link_to data_subheading(@current_user, type), data_path(@current_user, type), class: "govuk-link--no-visited-state" %></a>
</div> </div>
<div class="app-data-box__lower"> <div class="app-data-box__lower">

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

@ -8,17 +8,20 @@
<div class="govuk-grid-row"> <div class="govuk-grid-row">
<div class="app-data-box-group"> <div class="app-data-box-group">
<% if @current_user.support? || (@current_user.data_coordinator? && @current_user.sales_logs.present?)%> <% 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"> <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> <span><%= render partial: "home/data_box", locals: {type: "lettings"} %></span>
</div> </div>
<div class="app-data-box-one-third app-data-box__margin_right"> <div class="app-data-box-one-third">
<span><%= render partial: "home/data_box", locals: {type: "sales"} %></span> <span><%= render partial: "home/data_box", locals: {type: "sales"} %></span>
</div> </div>
<div class="app-data-box-one-third"> <div class="app-data-box-one-third">
<span><%= render partial: "home/data_box", locals: {type: "schemes"} %></span> <span><%= render partial: "home/data_box", locals: {type: "schemes"} %></span>
</div> </div>
</div>
<% else %> <% else %>
<div class="app-data-box-one-half app-data-box__margin_right"> <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> <span><%= render partial: "home/data_box", locals: {type: "lettings"} %></span>
</div> </div>
<% if @current_user.data_coordinator? %> <% if @current_user.data_coordinator? %>
@ -34,6 +37,7 @@
<span><%= render partial: "home/data_box", locals: {type: "misc"} %></span> <span><%= render partial: "home/data_box", locals: {type: "misc"} %></span>
</div> </div>
<% end %> <% end %>
</div>
<% end %> <% end %>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save