Combine title and search box on homepage

mysociety · Jul 5, 2024 · 716fb0c · 716fb0c
1 parent 0565c8e
commit 716fb0c
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 49 deletions.
diff --git a/www/docs/style/img/mysoc-footer/logo-mysociety-white.svg b/www/docs/style/img/mysoc-footer/logo-mysociety-white.svg
diff --git a/www/docs/style/sass/_settings.scss b/www/docs/style/sass/_settings.scss
@@ -72,7 +72,7 @@ $column-gutter: 3%;
 $row-width: em-calc(1140);
 $block-grid-default-spacing: 3%;
 
-$primary-color: #62b356;
+$primary-color: #4b6947;
 $secondary-color: #A94CA6;
 $color-red: #dc3545;
 

diff --git a/www/docs/style/sass/app.scss b/www/docs/style/sass/app.scss
@@ -59,7 +59,7 @@
 @import "accessible-autocomplete";
 
 @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,400italic&display=swap);
-
+@import url(https://fonts.googleapis.com/css2?family=Merriweather&display=swap);
 /* Foundation Icons v 3.0 MIT License */
 @font-face {
   font-family: "foundation-icons";

diff --git a/www/docs/style/sass/layout/_header.scss b/www/docs/style/sass/layout/_header.scss
@@ -87,6 +87,7 @@ $badge-horizontal-shadow-desktop: -8px;
         &:hover, &:focus {
             text-decoration: none;
             background-color: darken($primary-color, 5%);
+            color: #fff !important;
         }
     }
 }

diff --git a/www/docs/style/sass/pages/_home.scss b/www/docs/style/sass/pages/_home.scss
@@ -3,6 +3,27 @@
     color: #000;
 }
 
+
+.site-home__logo {
+    font-family: "Merriweather", serif;
+    font-weight: 400;
+    font-style: normal;
+  }
+
+.mysoc__org__logo {
+    display: block;
+    margin-top: 0.5em;
+    height: 0;
+    overflow: hidden;
+    padding-top: 32px;
+  }
+
+  .mysoc__org__logo--mysociety {
+    width: 152px;
+    background-size: 152px 32px;
+    background-image: url('#{$mysoc-footer-image-path}logo-mysociety-white.svg'), none;
+  }
+
 .hero__mp-search {
     @include grid-column(12);
     background-image: url('../img/homepage-hero-background-large.jpg');

diff --git a/www/docs/style/sass/parts/_panels.scss b/www/docs/style/sass/parts/_panels.scss
@@ -76,6 +76,23 @@
     padding-bottom: 0;
 }
 
+.panel--primary {
+    background-color: $primary-color;
+    color: $colour_off_white;
+
+    h1 {
+        color: $colour_off_white;
+    }
+
+    h2, label, h3, li {
+        color: $colour_mid_grey;
+    }
+
+    a {
+        color: #fff;
+    }
+}
+
 .panel--inverted {
     background-color: #444;
     color: $colour_off_white;

diff --git a/www/includes/easyparliament/templates/html/index.php b/www/includes/easyparliament/templates/html/index.php
@@ -3,61 +3,24 @@
 # include 'homepage/promo-banner.php';
 ?>
 
-<div class="hero">
-    <div class="row hero__row">
-    <div class="hero__mp-search">
-        <div class="hero__mp-search__wrap">
-            <?php if (count($mp_data)) { ?>
-            <h1>Find out more about <?= $mp_data['former'] ? 'your former MP ' : 'your MP ' ?><?= $mp_data['name'] ?></h1>
-            <div class="row collapse">
-                <div class="medium-4 columns">
-                    <a href="<?= $mp_data['mp_url']?>" class="button homepage-search__button" />Find out &rarr;</a>
-                </div>
-            </div>
-            <div class="row">
-                <div class="medium-9 columns">
-                    <a class="homepage-search__change-postcode" href="<?= $mp_data['change_url'] ?>">Change postcode</a>
-                </div>
-            </div>
-            <?php } else { ?>
-            <h1>Find out more about your <?php if ($commons_dissolved) { ?>former <?php } ?>MP</h1>
-            <div class="row collapse">
-                <form action="/postcode/" class="mp-search__form"  onsubmit="trackFormSubmit(this, 'PostcodeSearch', 'Submit', 'Home'); return false;">
-                    <label for="postcode">Your postcode</label>
-                    <div class="medium-9 columns">
-                        <input name="pc" id="postcode" class="homepage-search__input" type="text" placeholder="TF1 8GH" />
-                    </div>
-                    <div class="medium-3 columns">
-                        <input type="submit" value="Find out &rarr;" class="button homepage-search__button" />
-                    </div>
-                </form>
-            </div>
-            <?php } ?>
-        </div>
-    </div>
-    <div class="hero__site-intro">
-        <div class="hero__site-intro__wrap">
-            <h2>Democracy: it&rsquo;s for everyone</h2>
-            <p>You shouldn&rsquo;t have to be an expert to understand what goes on in Parliament.</p>
-            <p>TheyWorkForYou takes open data from the UK's Parliaments, and presents it in a way that&rsquo;s easy to follow &ndash; for everyone.</p>
-            <a href="/about/" class="site-intro__more-link">About TheyWorkForYou <i>&rarr;</i></a>
-        </div>
-    </div>
-    </div>
-</div>
 
 <div class="full-page__row">
     <div class="homepage-panels">
 
 
-        <div class="panel panel--inverted">
-            <div class="row nested-row">
+        <div class="panel panel--primary">
+            <div class ="row nested-row">
+                <div class="home__search">
+                    <h1 class="site-home__logo" >TheyWorkForYou</h1>
+                    <p>Helping you understand who represents you, across the UK's Parliaments.</p>
+                </div>
+            </div>
+            <div class="row nested-row ">
                 <div class="home__search">
                     <form action="<?= $urls['search'] ?>" method="GET" onsubmit="trackFormSubmit(this, 'Search', 'Submit', 'Home'); return false;">
-                        <label for="q">Search debates, written questions and Hansard</label>
                         <div class="row collapse">
                             <div class="medium-9 columns">
-                                <input name="q" id="q" class="homepage-search__input" type="text" placeholder="Enter a keyword, phrase, or person" />
+                                <input name="q" id="q" class="homepage-search__input" type="text" placeholder="Enter your postcode, person, or topic" />
                             </div>
                             <div class="medium-3 columns">
                                 <input type="submit" value="Search" class="button homepage-search__button" />
@@ -75,7 +38,25 @@
                     </ul>
                     <?php } ?>
                 </div>
-            </div>
+        </div>
+        <div class="home__quick-links" style="padding-top:20px;">
+        <h3>Quick links</h3>
+            <ul class="quick-links__list">
+                <li><a href="/alert/">Create and manage email alerts</a></li>
+
+            <?php if (count($mp_data)) { ?>
+                <li>Find our more about <a href="<?= $mp_data['mp_url']?>"><?= $mp_data['former'] ? 'your former MP ' : 'your MP ' ?><?= $mp_data['name'] ?></a></li>
+            <?php } ?>
+            <li><a href="https://www.mysociety.org/subscribe/">Subscribe to our newsletter</a></li>
+            <li><a href="/support-us/">Donate to support our work</a></li>
+            </ul>
+
+        </div>
+        <div>
+            <p style="margin-bottom:0px">Built by
+            <a href="https://www.mysociety.org?utm_source=theyworkforyou.com&amp;utm_content=footer+logo&amp;utm_medium=link&amp;utm_campaign=mysoc_footer" class="mysoc__org__logo mysoc__org__logo--mysociety">mySociety</a>
+            </p>    
+        </div>
         </div>
 
         <div class="panel panel--flushtop clearfix">