New title/search box for homepage

- Search box expanded into generic title box - Merriweather for new style title - SearchBox class controls config for different parliaments - Temp images for different parliament backgrounds.
mysociety · Jul 9, 2024 · ee801d1 · ee801d1
1 parent 4177e80
commit ee801d1
Show file tree

Hide file tree

Showing 19 changed files with 291 additions and 295 deletions.
diff --git a/classes/Homepage.php b/classes/Homepage.php
@@ -47,10 +47,27 @@ public function display() {
         $data['featured'] = $this->getEditorialContent();
         $data['topics'] = $this->getFrontPageTopics();
         $data['divisions'] = $this->getRecentDivisions();
+        $data['search_box'] = $this->getSearchBox($data);
 
         return $data;
     }
 
+    protected function getSearchBox(array $data): Search\SearchBox{
+        $search_box = new Search\SearchBox();
+        $search_box->homepage_panel_class = "panel--homepage--overall";
+        $search_box->homepage_subhead = "";
+        $search_box->homepage_desc = "Understand who represents you, across the UK's Parliaments.";
+        $search_box->search_section = "";
+        $search_box->quick_links = [];
+        if (count($data["mp_data"])) {
+            $search_box->add_quick_link('Find out more about your MP (' . $data["mp_data"]['name'] . ')', $data["mp_data"]['mp_url']);
+        }
+        $search_box->add_quick_link('Create and manage email alerts', '/alert/');
+        $search_box->add_quick_link('Subscribe to our newsletter', 'https://www.mysociety.org/subscribe/');
+        $search_box->add_quick_link('Donate to support our work', '/support-us/');
+        return $search_box;
+    }
+
     protected function getRegionalList() {
         return null;
     }

diff --git a/classes/SPHomepage.php b/classes/SPHomepage.php
@@ -15,6 +15,23 @@ class SPHomepage extends Homepage {
         'SPWRANSLIST' => array('recent_wrans', 'spwransfront', 'Written answers'),
     );
 
+    protected function getSearchBox(array $data): Search\SearchBox{
+        $search_box = new Search\SearchBox();
+        $search_box->homepage_panel_class = "panel--homepage--scotland";
+        $search_box->homepage_subhead = "Scottish Parliament";
+        $search_box->homepage_desc = "";
+        $search_box->search_section = "scotland";
+        $search_box->quick_links = [];
+        if (count($data["mp_data"])) {
+            $regional_con = $data["regional"][0]["constituency"];
+            $search_box->add_quick_link('Find out more about your MSPs for ' . $data["mp_data"]["constituency"] . '(' . $regional_con . ')', '/postcode/?pc=' . $data["mp_data"]['postcode'] );
+        }
+        $search_box->add_quick_link('Create and manage email alerts', '/alert/');
+        $search_box->add_quick_link('Subscribe to our newsletter', 'https://www.mysociety.org/subscribe/');
+        $search_box->add_quick_link('Donate to support our work', '/support-us/');
+        return $search_box;
+    }
+
     protected function getEditorialContent() {
         $debatelist = new \SPLIST;
         $item = $debatelist->display('recent_debates', array('days' => 7, 'num' => 1), 'none');

diff --git a/classes/Search/SearchBox.php b/classes/Search/SearchBox.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace MySociety\TheyWorkForYou\Search;
+
+
+class SearchBox
+{
+    public string $homepage_panel_class;
+    public string $homepage_subhead;
+    public string $homepage_desc;
+    public string $search_section;
+    public array $quick_links;
+
+    public function __construct(string $homepage_panel_class = '',
+                                string $homepage_subhead = '',
+                                string $homepage_desc = '',
+                                string $search_section = '',
+                                array $quick_links = [])
+    {
+        $this->homepage_panel_class = $homepage_panel_class;
+        $this->homepage_subhead = $homepage_subhead;
+        $this->homepage_desc = $homepage_desc;
+        $this->search_section = $search_section;
+        $this->quick_links = $quick_links;
+    }
+
+    public function add_quick_link(string $title, string $url): void
+    {
+        $this->quick_links[] = ['title' => $title, 'url' => $url];
+    }
+
+}
+
+?>
diff --git a/classes/SectionView/NiView.php b/classes/SectionView/NiView.php
@@ -88,10 +88,37 @@ protected function display_front_ni() {
         $data['debates'] = array( 'recent' => $recent);
 
         $data['regional'] = $this->getMLAList();
+        $data['search_box'] = $this->getSearchBox($data);
         $data['template'] = 'ni/index';
 
         return $data;
     }
+
+    protected function getSearchBox(array $data): \MySociety\TheyWorkForYou\Search\SearchBox{
+
+        global $THEUSER;
+
+        if ($THEUSER->isloggedin() && $THEUSER->postcode() != '' || $THEUSER->postcode_is_set()) {
+            $postcode = $THEUSER->postcode();
+        } else {
+            $postcode = null;
+        }
+
+        $search_box = new \MySociety\TheyWorkForYou\Search\SearchBox();
+        $search_box->homepage_panel_class = "panel--homepage--niassembly";
+        $search_box->homepage_subhead = "Northern Ireland Assembly";
+        $search_box->homepage_desc = "";
+        $search_box->search_section = "ni";
+        $search_box->quick_links = [];
+        if (count($data["regional"])) {
+            $constituency = $data["regional"][0]["constituency"];
+            $search_box->add_quick_link('Find out more about your MLAs for ' . $constituency, '/postcode/?pc=' . $postcode);
+        }
+        $search_box->add_quick_link('Create and manage email alerts', '/alert/');
+        $search_box->add_quick_link('Subscribe to our newsletter', 'https://www.mysociety.org/subscribe/');
+        $search_box->add_quick_link('Donate to support our work', '/support-us/');
+        return $search_box;
+    }
 
     protected function getMLAList() {
         global $THEUSER;

diff --git a/classes/SectionView/SeneddView.php b/classes/SectionView/SeneddView.php
@@ -98,11 +98,42 @@ protected function display_front_senedd() {
         $data['debates'] = array( 'recent' => $recent);
 
         $data['regional'] = $this->getMSList();
+        $data['search_box'] = $this->getSearchBox($data);
         $data['template'] = 'senedd/index';
 
         return $data;
     }
 
+    protected function getSearchBox(array $data): \MySociety\TheyWorkForYou\Search\SearchBox{
+        $search_box = new \MySociety\TheyWorkForYou\Search\SearchBox();
+        $search_box->homepage_panel_class = "panel--homepage--senedd";
+        if (LANGUAGE == 'cy') {
+            $search_box->homepage_subhead = "Senedd";
+        } else {
+            $search_box->homepage_subhead = "Senedd / Welsh Parliament";
+        }
+        $search_box->homepage_desc = "";
+        $search_box->search_section = "senedd";
+        $search_box->quick_links = [];
+        if (count($data["regional"])) {
+            // get all unique constituencies
+            $constituencies = array();
+            foreach ($data["regional"] as $member) {
+                $constituencies[$member["constituency"]] = 1;
+            }
+            $constituencies = array_keys($constituencies);
+            if (LANGUAGE == 'cy'){
+                $search_box->add_quick_link('Darganfod mwy am eich Aelodau Cynulliad dros ' . $constituencies[0] . ' a ' . $constituencies[1], '/postcode/?pc=' . $data["mp_data"]['postcode']);
+            } else {
+                $search_box->add_quick_link('Find out more about your MSs for ' . $constituencies[0] . ' and ' . $constituencies[1], '/postcode/?pc=' . $data["mp_data"]['postcode']);
+            }
+        }
+        $search_box->add_quick_link(gettext('Create and manage email alerts'), '/alert/');
+        $search_box->add_quick_link(gettext('Subscribe to our newsletter'), 'https://www.mysociety.org/subscribe/');
+        $search_box->add_quick_link(gettext('Donate to support our work'), '/support-us/');
+        return $search_box;
+    }
+
     protected function getMSList() {
         global $THEUSER;
 

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/img/niassembly-photo.jpg b/www/docs/style/img/niassembly-photo.jpg
diff --git a/www/docs/style/img/parliament-photo.jpg b/www/docs/style/img/parliament-photo.jpg
diff --git a/www/docs/style/img/scotland-photo.jpg b/www/docs/style/img/scotland-photo.jpg
diff --git a/www/docs/style/img/senedd-photo.jpg b/www/docs/style/img/senedd-photo.jpg
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');
@@ -318,18 +339,25 @@ input.homepage-search__button {
 }
 
 .home__search-suggestions {
-    @include grid-column(12);
-    margin-top: 1em;
-    @media (min-width: $large-screen) {
-        margin-top: 0;
-        @include grid-column(4);
-    }
+    margin-top: 0;
+
     h3 {
         font-size: emCalc(14);
         font-weight: normal;
     }
 }
 
+.home__search-suggestions p, .home__search-suggestions ul {
+    display: inline-block;
+    margin: 0;
+    vertical-align: middle;
+}
+
+.home__search-suggestions p {
+    margin-right: 10px; /* Add space between p and ul */
+}
+
+
 .search-suggestions__list {
     @include inline-list;
     font-size: emCalc(14);

diff --git a/www/docs/style/sass/parts/_panels.scss b/www/docs/style/sass/parts/_panels.scss
@@ -39,12 +39,71 @@
     }
 }
 
+.panel--homepage--overall {
+    background: rgba(#000, 0.5) url('../img/parliament-photo.jpg') center/cover no-repeat;
+    background-blend-mode: overlay; /* Blends the color with the image */
+
+    .quick-links__item {
+        background-color: #444;
+        display: inline-block;
+    }
+}
+
+.panel--homepage--senedd {
+    background: rgba(#000, 0.5) url('../img/senedd-photo.jpg') center/cover no-repeat;
+    background-blend-mode: overlay;
+
+    .quick-links__item {
+        background-color: #444;
+        display: inline-block;
+    }
+}
+
+.panel--homepage--scotland {
+    background: rgba(#000, 0.5) url('../img/scotland-photo.jpg') center/cover no-repeat;
+    background-blend-mode: overlay; 
+
+    .quick-links__item {
+        background-color: #444;
+        display: inline-block;
+    }
+}
+
+.panel--homepage--niassembly {
+    background: rgba(#000, 0.5) url('../img/niassembly-photo.jpg') center/cover no-repeat;
+    background-blend-mode: overlay; 
+
+    .quick-links__item {
+        background-color: #444;
+        display: inline-block;
+    }
+}
+
+.home__quick-links{
+    padding-top:20px;
+
+}
+
 .panel--primary {
-    background-color: $colour_primary;
-    color: #fff;
+    background-size: cover;
+    background-repeat: no-repeat;
+    color: $colour_off_white;
+
+    h1 {
+        color: $colour_off_white;
+        margin-bottom: 5px;
+    }
 
-    a, h2, h3 {
-        color: inherit;
+    h2, label, li {
+        color: $colour_mid_grey;
+    }
+
+    a {
+        color: #fff;
+    }
+
+    h3 {
+        color: $colour_off_white
     }
 
     .button {

diff --git a/www/includes/easyparliament/templates/html/homepage/search-box.php b/www/includes/easyparliament/templates/html/homepage/search-box.php
@@ -0,0 +1,59 @@
+<div class="panel panel--primary  <?= $search_box->homepage_panel_class ?>">
+    <div class ="row nested-row">
+        <div class="home__search">
+            <div>
+                <h1 class="site-home__logo">TheyWorkForYou</h1>
+            </div>
+            <?php if ($search_box->homepage_subhead) { ?>
+            <div>
+                <h2 class="site-home__logo" style="color:#fff"><?= $search_box->homepage_subhead ?></h2>
+            </div>
+            <?php } ?>
+            <?php if ($search_box->homepage_desc) { ?>
+            <p><?= $search_box->homepage_desc ?></p>
+            <?php } ?>
+        </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;">
+            <?php if ($search_box->search_section) { ?>
+            <input type="hidden" name="section" value="<?= $search_box->search_section ?>">  
+            <?php } ?>  
+            <div class="row collapse">
+                    <div class="medium-9 columns">
+                        <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" />
+                    </div>
+                </div>
+            </form>
+        </div>
+
+</div>
+<div class="home__search-suggestions">
+    <?php if (count($popular_searches)) { ?>
+    <p>Popular searches today</p>
+    <ul class="search-suggestions__list">
+        <?php foreach ($popular_searches as $i => $popular_search) { ?>
+        <li><?= $popular_search['display']; ?></li>
+        <?php } ?>
+    </ul>
+    <?php } ?>
+</div>
+<div class="home__quick-links">
+<h3>Quick links</h3>
+    <ul class="quick-links__list">
+        <?php foreach ($search_box->quick_links as $search_box->quick_link) { ?>
+        <li><div class="quick-links__item"><a href="<?= $search_box->quick_link['url'] ?>"><?= $search_box->quick_link['title'] ?></a></div></li>
+        <?php } ?>
+    </ul>
+
+</div>
+<div>
+    <p style="margin-bottom:0px">Built by
+    <a href="https://www.mysociety.org?utm_source=theyworkforyou.com&amp;utm_medium=link&amp;utm_campaign=twfy_search_box" class="mysoc__org__logo mysoc__org__logo--mysociety">mySociety</a>
+    </p>    
+</div>
+</div>