Browse Source

Revert "Reuse govuk grid"

This reverts commit 8c71f5d9ed.
pull/2115/head
natdeanlewissoftwire 12 months ago
parent
commit
c738088619
  1. 55
      app/frontend/styles/_data_box.scss
  2. 4
      app/views/home/_data_box.html.erb
  3. 23
      app/views/home/index.html.erb

55
app/frontend/styles/_data_box.scss

@ -1,5 +1,53 @@
.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 {
@include govuk-responsive-margin(2, "bottom");
@include govuk-responsive-padding(4);
background-color: govuk-colour("light-grey");
color: govuk-colour("blue");
@ -7,16 +55,11 @@
.app-data-box__lower {
@include govuk-responsive-margin(4, "bottom");
@include govuk-responsive-padding(4);
background-color: govuk-colour("blue");
}
.app-data-box {
@include govuk-responsive-padding(4);
font-weight: bold;
white-space: nowrap;
}
.app-data-box__count {
font-size: 48px;
color: govuk-colour("blue");

4
app/views/home/_data_box.html.erb

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

23
app/views/home/index.html.erb

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

Loading…
Cancel
Save