implement new design for the header

featurist · Jan 15, 2021 · 0806dd3 · 0806dd3
1 parent 25ce9fd
commit 0806dd3
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 31 deletions.
diff --git a/.envrc b/.envrc
@@ -0,0 +1 @@
+export CARBON_MAP_APP_NAME=carbon-map
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
@@ -1,17 +1,22 @@
+<div class="Explore-strapline">
+  <p class="u-mb">We share community-based projects that work towards a Carbon Neutral Stroud District by 2030 and connect groups organising them.</p>
+  <p class="u-mb">Share knowledge. Enable Change</p>
+</div>
+
 <%= render 'partials/map', map_data: @map_data, sectors: @sectors, tabs: [
   {
     id: 'district',
     title: 'Districts',
     icon: 'map-marker',
   }
 ] do %>
-  <div class="sidebar-pane Explore-navigation" id="district">
-    <h1 class="sidebar-header">Districts</h1>
+<div class="sidebar-pane Explore-navigation" id="district">
+  <h1 class="sidebar-header">Districts</h1>
   <% @districts.each do |district| %>
     <%=link_to district.name, district%>
     <% unless @districts.last == district %>
       <hr />
     <% end %>
   <% end %>
-  </div>
+</div>
 <% end %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -31,9 +31,15 @@ set_meta_tags og: {
             <%=link_to image_tag(asset_pack_path("media/images/logo.svg")), root_path, class: 'Header-logo' %>
             <div class="Header-contentMobile">
               <nav class="Nav">
+                <%= link_to new_user_session_path, class: 'SignIn-link' do %>
+                  <svg class="SignIn-icon" viewBox="0 0 24 24">
+                      <path fill="currentColor" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
+                  </svg>
+                  Sign in
+                <% end %>
                 <a class="Nav-burger" onclick="document.querySelector('.Nav').classList.add('Nav-open')"><svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
                     <g>
-                    <path fill="#ffffff" id="svg_1" d="m4,10l24,0c1.104,0 2,-0.896 2,-2s-0.896,-2 -2,-2l-24,0c-1.104,0 -2,0.896 -2,2s0.896,2 2,2zm24,4l-24,0c-1.104,0 -2,0.896 -2,2s0.896,2 2,2l24,0c1.104,0 2,-0.896 2,-2s-0.896,-2 -2,-2zm0,8l-24,0c-1.104,0 -2,0.896 -2,2s0.896,2 2,2l24,0c1.104,0 2,-0.896 2,-2s-0.896,-2 -2,-2z"/>
+                    <path fill="#000" id="svg_1" d="m4,10l24,0c1.104,0 2,-0.896 2,-2s-0.896,-2 -2,-2l-24,0c-1.104,0 -2,0.896 -2,2s0.896,2 2,2zm24,4l-24,0c-1.104,0 -2,0.896 -2,2s0.896,2 2,2l24,0c1.104,0 2,-0.896 2,-2s-0.896,-2 -2,-2zm0,8l-24,0c-1.104,0 -2,0.896 -2,2s0.896,2 2,2l24,0c1.104,0 2,-0.896 2,-2s-0.896,-2 -2,-2z"/>
                     </g>
                   </svg></a>
                   <nav class="Nav-flyover">
@@ -68,17 +74,22 @@ set_meta_tags og: {
             </div>
             <div class="Header-contentDesktop">
               <nav class="Nav">
-                &nbsp;
-                <span class="Nav-main">
-                  <%=link_to inline_icon('circle') + '<span>Add a project</span>'.html_safe, new_initiative_path %>
-                  <%=link_to inline_icon('circle') + '<span>Initiatives</span>'.html_safe, initiatives_path %>
-                </span>
-                <span class="Nav-supplementary">
-                  <%= link_to('About', about_path)%>
-                  <%= link_to('Contact', contact_path)%>
-                </span>
+                <%= link_to('Home', root_path)%>
+                <%= link_to('About us', about_path)%>
+                <%= link_to('FAQs', '/faq')%>
+                <%= link_to('Get in touch', contact_path)%>
+
+
+                <div class="Nav-secondary">
+                  <%= link_to new_user_session_path, class: 'SignIn-link' do %>
+                    <svg class="SignIn-icon" viewBox="0 0 24 24">
+                      <path fill="currentColor" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
+                    </svg>
+                    Sign in
+                  <% end %>
+                </div>
               </nav>
-              <nav>
+              <nav style="display:none;">
                 <span class="Nav-supplementary">
                   <% unless user_signed_in? %>
                     <%= link_to 'Sign in', new_user_session_path %>
@@ -99,7 +110,6 @@ set_meta_tags og: {
               </nav>
             </div>
           </div>
-          <p class="Header-strapline">Connecting low carbon initiatives across Stroud District</p>
         </div>
       </header>
 

diff --git a/config/environments/development.rb b/config/environments/development.rb
@@ -6,6 +6,7 @@
   # In the development environment your application's code is reloaded on
   # every request. This slows down response time but is perfect for development
   # since you don't have to restart the web server when you make code changes.
+  config.hosts << 'grace'
   config.cache_classes = false
 
   # Do not eager load code on boot.

diff --git a/frontend/styles/base/variables.css b/frontend/styles/base/variables.css
@@ -9,7 +9,7 @@ $bp-tablet-width: 500px;
 $bp-tablet-landscape-width: 700px;
 $bp-desktop-width: 1260px;
 
-$color-text: #4c4c4c;
+$color-text: #000;
 $color-orange: #ff9700;
 
 $space-base: 15px;

diff --git a/frontend/styles/components/explore.css b/frontend/styles/components/explore.css
@@ -57,13 +57,34 @@
   flex: 1;
 }
 
+.Explore-strapline {
+  font-size: 18px;
+  margin: 0 20px;
+  padding-bottom: 10px;
+  text-align: center;
+}
+
 .Explore-panel {
   display: flex;
-  height: 100%;
+  height: 100vh;
   overflow: hidden;
+  position: relative;
   z-index: 1;
 }
 
+@media (--bp-mobile) {
+
+  .Explore-panel {
+    height: 100%;
+  }
+
+  .Explore-strapline {
+    font-size: 24px;
+    margin: 20px auto;
+    max-width: 770px;
+  }
+}
+
 .Explore-initiative {
   display: none;
   flex: 1;

diff --git a/frontend/styles/components/header.css b/frontend/styles/components/header.css
@@ -1,5 +1,4 @@
 .Header {
-  border-bottom: 1px solid lightgray;
   flex: none;
   padding: 0;
 }
@@ -11,8 +10,8 @@
 }
 
 .Header-logo img {
-  height: 100px;
-  width: 100px;
+  height: 75px;
+  width: 75px;
 }
 
 .Header-main {
@@ -24,8 +23,3 @@
   flex-grow: 1;
   margin-left: 15px;
 }
-
-.Header-strapline {
-  margin: 0 5px;
-  padding-bottom: 10px;
-}
diff --git a/frontend/styles/components/nav.css b/frontend/styles/components/nav.css
@@ -1,14 +1,13 @@
 .Nav {
-  background-color: $color-orange;
-  color: #fff;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  justify-content: right;
+  margin-right: 20px;
   padding: 7px;
   width: 100%;
 }
 
 .Nav a {
-  color: #fff;
   font-size: 1.1em;
   font-weight: 600;
   line-height: 1.8em;
@@ -18,6 +17,13 @@
   text-decoration: none;
 }
 
+@media (--bp-mobile) {
+
+  .Nav a {
+    margin-right: 33px;
+  }
+}
+
 .Nav a::before {
   font-size: 3em;
   font-weight: 900;
@@ -30,8 +36,14 @@
   color: $color-orange;
 }
 
+.Nav-secondary {
+  display: flex;
+  flex-grow: 1;
+  justify-content: right;
+  margin-top: -12px;
+}
+
 .Header-contentMobile {
-  background-color: $color-orange;
   display: flex;
   flex: 1;
   position: relative;
@@ -81,7 +93,7 @@
 }
 
 .Nav.Nav-open .Nav-flyover {
-  background-color: $color-orange;
+  background-color: #fff;
   display: block;
   padding: 10px;
   position: absolute;
@@ -119,3 +131,23 @@
     display: block;
   }
 }
+
+.Nav .SignIn-link {
+  margin-right: 15px;
+}
+
+@media (--bp-tablet-landscape) {
+
+  .Nav .SignIn-link {
+    border: solid 1px #999;
+    border-radius: 3px;
+    padding: 10px;
+    position: absolute;
+  }
+}
+
+.SignIn-icon {
+  height: 30px;
+  vertical-align: middle;
+  width: 30px;
+}