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

Reuse govuk grid

pull/2115/head
Kat 12 months ago
parent
29c589dc4b
commit
8c71f5d9ed
3 changed files with 32 additions and 80 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. 55
      app/frontend/styles/_data_box.scss
  2. 4
      app/views/home/_data_box.html.erb
  3. 53
      app/views/home/index.html.erb

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

@ -1,53 +1,5 @@
.app-data-box-group {
@include govuk-font($size: 19);
font-weight: bold;
white-space: nowrap;
}
@media (min-width: 54.0625em) {
.app-data-box-group-one-third {
display: flex;
justify-content: space-between;
column-gap: govuk-spacing(4);
width: 100%;
min-width: 733.33px;
}
}
@media (min-width: 54.0625em) {
.app-data-box-one-third {
width: 33.3333333%;
float: left;
}
}
@media (min-width: 54.0625em) {
.app-data-box__underline {
min-width: 733.33px;
}
}
@media (min-width: 54.0625em) {
.app-data-box-group-one-half {
display: flex;
justify-content: space-between;
column-gap: govuk-spacing(4);
width: 100%;
min-width: 733.33px;
}
}
@media (min-width: 54.0625em) {
.app-data-box-one-half {
width: 50%;
float: left;
}
}
@media (min-width: 54.0625em) {
.app-data-box-one-half__underline {
min-width: 733.33px;
}
}
.app-data-box__upper { .app-data-box__upper {
@include govuk-responsive-margin(2, "bottom"); @include govuk-responsive-margin(2, "bottom");
@include govuk-responsive-padding(4);
background-color: govuk-colour("light-grey"); background-color: govuk-colour("light-grey");
color: govuk-colour("blue"); color: govuk-colour("blue");
@ -55,11 +7,16 @@
.app-data-box__lower { .app-data-box__lower {
@include govuk-responsive-margin(4, "bottom"); @include govuk-responsive-margin(4, "bottom");
@include govuk-responsive-padding(4);
background-color: govuk-colour("blue"); background-color: govuk-colour("blue");
} }
.app-data-box {
@include govuk-responsive-padding(4);
font-weight: bold;
white-space: nowrap;
}
.app-data-box__count { .app-data-box__count {
font-size: 48px; font-size: 48px;
color: govuk-colour("blue"); color: govuk-colour("blue");

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

@ -1,9 +1,9 @@
<div class="app-data-box__upper"> <div class="app-data-box app-data-box__upper">
<div class="app-data-box__count"> <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> <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> </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 app-data-box__lower">
<%= govuk_link_to view_all_text(type), view_all_path(type), class: "govuk-link--inverse" %> <%= govuk_link_to view_all_text(type), view_all_path(type), class: "govuk-link--inverse" %>
</div> </div>

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

@ -1,48 +1,43 @@
<div class="govuk-grid-row"> <div class="govuk-grid-row">
<div class="govuk-width-container"> <div class="govuk-width-container">
<div class="govuk-grid-column-two-thirds">
<div class="govuk-grid-row govuk-!-margin-bottom-7"> <div class="govuk-grid-row govuk-!-margin-bottom-7">
<span class="govuk-body-l"><%= "Welcome back, #{@current_user.name}" %></span> <span class="govuk-body-l"><%= "Welcome back, #{@current_user.name}" %></span>
<h1 class="govuk-heading-l"><%= heading_for_user_role(@current_user) %></h1> <h1 class="govuk-heading-l"><%= heading_for_user_role(@current_user) %></h1>
</div> </div>
<div class="govuk-grid-row"> <div class="govuk-grid-row">
<div class="app-data-box-group"> <div class="govuk-grid-column-three-quarters-from-desktop govuk-!-padding-left-0 govuk-!-padding-right-0">
<% 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-group-one-third"> <div class="govuk-grid-column-one-third govuk-!-padding-left-0">
<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 class="govuk-grid-column-one-third govuk-!-padding-left-0">
<span><%= render partial: "home/data_box", locals: { type: "sales" } %></span>
</div>
<div class="govuk-grid-column-one-third govuk-!-padding-left-0">
<span><%= render partial: "home/data_box", locals: { type: "schemes" } %></span>
</div>
<% else %>
<div class="govuk-grid-column-one-half govuk-!-padding-left-0">
<span><%= render partial: "home/data_box", locals: { type: "lettings" } %></span>
</div>
<% if @current_user.data_coordinator? %>
<div class="govuk-grid-column-one-half govuk-!-padding-left-0">
<span><%= render partial: "home/data_box", locals: { type: "schemes" } %></span>
</div> </div>
<div class="app-data-box-one-third"> <% elsif @current_user.sales_logs.present? %>
<div class="govuk-grid-column-one-half govuk-!-padding-left-0">
<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"> <% else %>
<span><%= render partial: "home/data_box", locals: { type: "schemes" } %></span> <div class="govuk-grid-column-one-half govuk-!-padding-left-0">
<span><%= render partial: "home/data_box", locals: { type: "misc" } %></span>
</div> </div>
</div> <% end %>
<% else %>
<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>
<div class="govuk-grid-row"> <div class="govuk-grid-row">
<div class="app-data-box__underline"> <div class="govuk-grid-column-three-quarters-from-desktop govuk-!-padding-left-0">
<hr class="govuk-section-break govuk-section-break--visible govuk-section-break--m"> <hr class="govuk-section-break govuk-section-break--visible govuk-section-break--m">
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save