From a25c81267a18f5bfb7f3d134a950858683512b10 Mon Sep 17 00:00:00 2001
From: Alec Rust <me@alecrust.com>
Date: Mon, 13 Jan 2020 12:02:03 +0000
Subject: [PATCH] Initial tidy of show Initiative page

---
 .../initiatives/_initiative_info.html.erb     | 95 +++++++++++--------
 app/views/initiatives/show.html.erb           |  3 +-
 app/views/layouts/application.html.erb        |  8 +-
 app/views/partials/_breadcrumb.html.erb       |  2 +-
 frontend/styles/application.css               | 14 +--
 frontend/styles/base/base.css                 | 44 ++-------
 frontend/styles/base/utilities.css            | 22 +++++
 frontend/styles/base/variables.css            |  3 +
 frontend/styles/components/container.css      |  5 +-
 frontend/styles/components/content.css        |  6 +-
 frontend/styles/components/initiative.css     |  4 -
 frontend/styles/components/nav.css            |  1 +
 frontend/styles/components/page_header.css    |  5 +
 frontend/styles/components/sponsors.css       |  4 +
 package.json                                  |  1 -
 postcss.config.js                             |  2 +
 yarn.lock                                     |  2 +-
 17 files changed, 120 insertions(+), 101 deletions(-)
 create mode 100644 frontend/styles/base/utilities.css

diff --git a/app/views/initiatives/_initiative_info.html.erb b/app/views/initiatives/_initiative_info.html.erb
index 8271889..a98a4c2 100644
--- a/app/views/initiatives/_initiative_info.html.erb
+++ b/app/views/initiatives/_initiative_info.html.erb
@@ -1,15 +1,13 @@
-
-<p>
-  Status: <%=initiative.status_name%><br />
+<h2 class="u-mb">Description</h2>
+<div class="u-mb">
+  <p>What: <%=initiative.description_what%></p>
+  <p>How: <%=initiative.description_how%></p>
   <% if initiative.anticipated_carbon_saving.present? %>
-  Saving: <%=format_carbon_saving(initiative.anticipated_carbon_saving)%>
+    <p>Saving: <%=format_carbon_saving(initiative.anticipated_carbon_saving)%></p>
   <% end %>
-</p>
+  <p>Further Information: <%=initiative.description_further_information%></p>
+</div>
 
-<h2>Description</h2>
-<p>What: <%=initiative.description_what%></p>
-<p>How: <%=initiative.description_how%></p>
-<p>Further Information: <%=initiative.description_further_information%></p>
 <div class="Initiative-images_scroller">
   <div class="Initiative-images">
   <% initiative.images.each do |image|%>
@@ -17,46 +15,67 @@
   <% end %>
   </div>
 </div>
-<h2>Solutions</h2>
-<% initiative.themes.each do |theme| %>
-  <p>Theme: <%=theme.name%></p>
-<% end %>
-<% initiative.solutions.each do |solution| %>
-  <p>Solution: <%=solution.name%></p>
-<% end %>
-<h2>Contacts</h2>
-<p>Lead Group: <%=initiative.lead_group_name%></p>
-<% if initiative.consent_to_share? %>
-  <p>Contact Name: <%=initiative.contact_name%></p>
-  <p>Contact Email: <%=initiative.contact_email%></p>
-  <p>Contact Phone: <%=initiative.contact_phone%></p>
-<% end %>
-<p>Partner Groups Role: <%=initiative.partner_groups_role%></p>
-<% if initiative.related_initiatives? %>
-  <p>Related Initiatives: <%=initiative.related_initiatives%></p>
-<% end %>
-<h2>Websites</h2>
-<% initiative.websites.each do |website| %>
-  <%=link_to website.website, website.website, target: '_blank' %>
+
+<h2 class="u-mb">Solutions</h2>
+<div class="u-mb">
+  <ul class="u-listBulleted">
+    <% initiative.themes.each do |theme| %>
+      <li>Theme: <%=theme.name%></li>
+    <% end %>
+  </ul>
+  <% if initiative.solutions.any? %>
+    <ul class="u-listBulleted">
+      <% initiative.solutions.each do |solution| %>
+        <li>Solution: <%=solution.name%></li>
+      <% end %>
+    </ul>
+  <% end %>
+</div>
+
+<h2 class="u-mb">Contacts</h2>
+<div class="u-mb">
+  <p>Lead Group: <%=initiative.lead_group_name%></p>
+  <% if initiative.consent_to_share? %>
+    <p>Contact Name: <%=initiative.contact_name%></p>
+    <p>Contact Email: <%=initiative.contact_email%></p>
+    <p>Contact Phone: <%=initiative.contact_phone%></p>
+  <% end %>
+  <p>Partner Groups Role: <%=initiative.partner_groups_role%></p>
+  <% if initiative.related_initiatives? %>
+    <p>Related Initiatives: <%=initiative.related_initiatives%></p>
+  <% end %>
+</div>
+
+<% if initiative.websites.any? %>
+  <h2 class="u-mb">Websites</h2>
+  <div class="u-mb">
+    <ul class="u-listBulleted">
+      <% initiative.websites.each do |website| %>
+        <li><%=link_to website.website, website.website, target: '_blank' %></li>
+      <% end %>
+    </ul>
+  </div>
 <% end %>
 
 <% if local_assigns[:show_map] && show_map %>
-  <h2>Location</h2>
-  <p>Postcode: <%=initiative.postcode%></p>
-  <p>Locality: <%=initiative.location%></p>
-  <div class="Explore">
+  <h2 class="u-mb">Location</h2>
+  <div class="u-mb">
+    <p>Postcode: <%=initiative.postcode%></p>
+    <p>Locality: <%=initiative.location%></p>
+  </div>
+  <div class="Explore u-mb">
     <% content_for :page_javascript do %>
       <script type="text/json" id="map_data_json"><%=@map_data.to_json.html_safe%></script>
       <%= javascript_packs_with_chunks_tag 'initiative_map', 'data-turbolinks-track': 'reload' %>
       <% content_for :page_head do %>
         <meta name="turbolinks-visit-control" content="reload">
       <% end %>
-
     <% end %>
     <div class="Explore-map" id="initiative_location"></div>
   </div>
 <% end %>
 
-<h2>Timestamps</h2>
-<p>Created: <%=time_tag initiative.created_at%></p>
-<p>Updated: <%=time_tag initiative.updated_at%></p>
+<div class="u-textRight u-textMuted">
+  <p>Initiative Created: <%=time_tag initiative.created_at%></p>
+  <p>Last Updated: <%=time_tag initiative.updated_at%></p>
+</div>
diff --git a/app/views/initiatives/show.html.erb b/app/views/initiatives/show.html.erb
index 5bdf53e..b0cf66b 100644
--- a/app/views/initiatives/show.html.erb
+++ b/app/views/initiatives/show.html.erb
@@ -6,8 +6,9 @@
   @initiative.name
 ] %>
 
-<div class="PageHeader">
+<div class="PageHeader u-mbL">
   <h1 class="PageHeader-heading"><%=@initiative.name%></h1>
+  <p>Status: <%=@initiative.status_name%></p>
 </div>
 
 <div class="Initiative">
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index f7aec0f..ef0143a 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -69,14 +69,14 @@
       </header>
 
       <% if notice || alert %>
-        <section class="Alerts">
+        <div class="Alerts">
           <% if notice %>
           <p class="Alert Alert--info"><%= notice %></p>
           <% end %>
           <% if alert %>
             <p class="Alert Alert--danger"><%= alert %></p>
           <% end %>
-        </section>
+        </div>
       <% end %>
 
       <% content_class = yield :content_class %>
@@ -96,12 +96,12 @@
 
       <footer class="Footer">
         <div class="Container">
-          <section class="sponsors">
+          <div class="sponsors">
             <h2>Sponsors</h2>
             <div class="sponsors-logos">
               <a class="sponsors-logo" href="https://featurist.co.uk" target="_blank"><img src="<%=asset_pack_path("media/logos/featurist.svg")%>"></a>
             </div>
-          </section>
+          </div>
           <p class="Footer-copyright">&copy; Carbon Map <time datetime="<%= Date.current.year %>"><%= Date.current.year %></time></p>
         </div>
       </footer>
diff --git a/app/views/partials/_breadcrumb.html.erb b/app/views/partials/_breadcrumb.html.erb
index 5557583..07b555c 100644
--- a/app/views/partials/_breadcrumb.html.erb
+++ b/app/views/partials/_breadcrumb.html.erb
@@ -1,4 +1,4 @@
-<nav class="Breadcrumb">
+<nav class="Breadcrumb u-mbL">
   <ol class="Breadcrumb-list">
     <% items.each do |item| %>
       <li class="Breadcrumb-listItem">
diff --git a/frontend/styles/application.css b/frontend/styles/application.css
index 7773048..581b9b0 100644
--- a/frontend/styles/application.css
+++ b/frontend/styles/application.css
@@ -1,9 +1,4 @@
-
-@import "normalize.css";
-@import "leaflet.markercluster/dist/MarkerCluster.css";
-@import "leaflet.markercluster/dist/MarkerCluster.Default.css";
-@import "leaflet-gesture-handling/dist/leaflet-gesture-handling.css";
-@import "sidebar-v2/css/leaflet-sidebar.css";
+@import "suitcss-base";
 @import "./base/variables";
 @import "./base/base";
 @import "./components/alert";
@@ -23,3 +18,10 @@
 @import "./components/nav";
 @import "./components/page_header";
 @import "./components/sponsors";
+@import "leaflet.markercluster/dist/MarkerCluster.css";
+@import "leaflet.markercluster/dist/MarkerCluster.Default.css";
+@import "leaflet-gesture-handling/dist/leaflet-gesture-handling.css";
+@import "sidebar-v2/css/leaflet-sidebar.css";
+@import "suitcss-utils-display";
+@import "suitcss-utils-text";
+@import "./base/utilities";
diff --git a/frontend/styles/base/base.css b/frontend/styles/base/base.css
index d85fe45..461e50c 100644
--- a/frontend/styles/base/base.css
+++ b/frontend/styles/base/base.css
@@ -1,4 +1,10 @@
+/*
+ * Extends SUIT CSS base
+ * https://github.com/suitcss/base
+ */
+
 @font-face {
+  font-display: fallback;
   font-family: "fira_sansregular";
   font-style: normal;
   font-weight: normal;
@@ -9,24 +15,16 @@
 }
 
 html {
-  box-sizing: border-box;
   height: 100%;
 }
 
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-}
-
 body {
+  background-color: #fff;
   color: #4c4c4c;
-  font-family: "fira_sansregular";
+  font-family: "fira_sansregular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1em;
   height: 100%;
   line-height: 1.5;
-  margin: 0;
-  padding: 0;
 }
 
 h1 {
@@ -45,32 +43,6 @@ h4 {
   font-size: 0.75em;
 }
 
-section {
-  margin-bottom: 10px;
-  padding: 5px;
-}
-
-a {
-  color: inherit;
-  text-decoration: underline;
-}
-
-p {
-  margin: 0;
-}
-
-.u-hidden {
-  display: none;
-}
-
-ul {
-  padding-left: 10px;
-}
-
-li {
-  list-style-type: none;
-}
-
 input[type=text],
 input[type=url],
 input[type=email],
diff --git a/frontend/styles/base/utilities.css b/frontend/styles/base/utilities.css
new file mode 100644
index 0000000..2d900e1
--- /dev/null
+++ b/frontend/styles/base/utilities.css
@@ -0,0 +1,22 @@
+/*
+ * Extends SUIT CSS utilities: display, text
+ * https://github.com/suitcss/utils-display
+ * https://github.com/suitcss/utils-text
+ */
+
+.u-mb {
+  margin-bottom: $space-base !important;
+}
+
+.u-mbL {
+  margin-bottom: $space-large !important;
+}
+
+.u-textMuted {
+  color: #76767a !important;
+}
+
+.u-listBulleted {
+  list-style: disc !important;
+  padding-left: 20px !important;
+}
diff --git a/frontend/styles/base/variables.css b/frontend/styles/base/variables.css
index 9008393..958cacb 100644
--- a/frontend/styles/base/variables.css
+++ b/frontend/styles/base/variables.css
@@ -9,6 +9,9 @@ $bp-tablet-width: 756px;
 $bp-tablet-landscape-width: 1024px;
 $bp-desktop-width: 1260px;
 
+$space-base: 15px;
+$space-large: 30px;
+
 @custom-media --bp-mobile (min-width: $bp-mobile-width);
 @custom-media --bp-tablet (min-width: $bp-tablet-width);
 @custom-media --bp-tablet-landscape (min-width: $bp-tablet-landscape-width);
diff --git a/frontend/styles/components/container.css b/frontend/styles/components/container.css
index 62f08c8..8e8da39 100644
--- a/frontend/styles/components/container.css
+++ b/frontend/styles/components/container.css
@@ -1,11 +1,8 @@
 .Container {
   margin-left: auto;
   margin-right: auto;
-}
-
-@media (--bp-tablet-landscape) {
 
-  .Container {
+  @media (--bp-tablet-landscape) {
     max-width: 1180px;
   }
 }
diff --git a/frontend/styles/components/content.css b/frontend/styles/components/content.css
index d55e405..ca05f23 100644
--- a/frontend/styles/components/content.css
+++ b/frontend/styles/components/content.css
@@ -2,9 +2,5 @@
   border: 1px solid lightgray;
   margin-bottom: 30px;
   margin-top: 30px;
-  padding: 20px;
-}
-
-.Content p {
-  margin-bottom: 15px;
+  padding: 20px 30px;
 }
diff --git a/frontend/styles/components/initiative.css b/frontend/styles/components/initiative.css
index b5d859e..6c6cc8d 100644
--- a/frontend/styles/components/initiative.css
+++ b/frontend/styles/components/initiative.css
@@ -3,7 +3,3 @@
   margin-top: 20px;
   padding: 20px;
 }
-
-.Initiative p {
-  margin: 0;
-}
diff --git a/frontend/styles/components/nav.css b/frontend/styles/components/nav.css
index 82b9f1b..9c900dc 100644
--- a/frontend/styles/components/nav.css
+++ b/frontend/styles/components/nav.css
@@ -7,6 +7,7 @@
 }
 
 .Nav a {
+  color: #fff;
   font-size: 1.1em;
   font-weight: 600;
   line-height: 1.8em;
diff --git a/frontend/styles/components/page_header.css b/frontend/styles/components/page_header.css
index 76629ba..051ee4f 100644
--- a/frontend/styles/components/page_header.css
+++ b/frontend/styles/components/page_header.css
@@ -1,9 +1,14 @@
 .PageHeader {
   align-items: center;
+  border-bottom: 3px solid #ff9700;
   display: flex;
   justify-content: space-between;
 }
 
+.PageHeader-heading {
+  padding-bottom: 10px;
+}
+
 .PageHeader-action {
   background: linear-gradient(to bottom, #74ad5a 5%, #68a54b 100%);
   background-color: #74ad5a;
diff --git a/frontend/styles/components/sponsors.css b/frontend/styles/components/sponsors.css
index 15758aa..83e852a 100644
--- a/frontend/styles/components/sponsors.css
+++ b/frontend/styles/components/sponsors.css
@@ -1,3 +1,7 @@
+.sponsors {
+  padding-top: 20px;
+}
+
 .sponsors-logos {
   display: flex;
   justify-content: space-evenly;
diff --git a/package.json b/package.json
index 7177b44..073c555 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,6 @@
     "leaflet": "^1.5.1",
     "leaflet-gesture-handling": "^1.1.8",
     "leaflet.markercluster": "^1.4.1",
-    "normalize.css": "^8.0.1",
     "postcss-custom-media": "^7.0.8",
     "postcss-inherit": "^4.1.0",
     "postcss-nested": "^4.1.2",
diff --git a/postcss.config.js b/postcss.config.js
index 16e6494..dd292f6 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +1,8 @@
 module.exports = {
   plugins: [
     require("postcss-import"),
+    require("postcss-nested"),
+    require("postcss-size"),
     require("postcss-simple-vars"),
     require("postcss-custom-media"),
     require("postcss-flexbugs-fixes"),
diff --git a/yarn.lock b/yarn.lock
index 62ffc64..0094f18 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5959,7 +5959,7 @@ normalize-url@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
-normalize.css@^8.0.0, normalize.css@^8.0.1:
+normalize.css@^8.0.0:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
   integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==