Add profile message tool.

www/docs/admin/photos.php

@@ -80,7 +80,7 @@ function person_drop_down() {
     $out = '
 <div class="row">
 <span class="label"><label for="form_pid">Person:</label></span>
-<span class="formw"><select id="form_pid" name="pid"></span>
+<span class="formw"><select id="form_pid" name="pid" class="autocomplete">
 ';
     $query = 'SELECT house, member.person_id, title, given_name, family_name, lordofname, constituency, party
         FROM member, person_names,

www/docs/admin/profile-message.php

@@ -0,0 +1,100 @@
+<?php
+
+include_once '../../includes/easyparliament/init.php';
+$this_page = 'profile_message';
+$db = new ParlDB;
+
+$PAGE->page_start();
+$PAGE->stripe_start();
+
+print get_http_var('submit') ? submit_message() : display_message_form();
+
+$menu = $PAGE->admin_menu();
+$PAGE->stripe_end(array(
+    array(
+        'type' => 'html',
+        'content' => $menu
+    )
+));
+
+$PAGE->page_end();
+
+function person_drop_down() {
+    global $db;
+    $out = '
+<div class="row">
+<span class="label"><label for="form_pid">Person:</label></span>
+<span class="formw"><select id="form_pid" name="pid" class="autocomplete">
+';
+    $query = 'SELECT house, member.person_id, title, given_name, family_name, lordofname, constituency, party
+        FROM member, person_names,
+        (SELECT person_id, MAX(end_date) max_date FROM person_names WHERE type="name" GROUP by person_id) md
+        WHERE house>0 AND member.person_id = person_names.person_id AND person_names.type = "name"
+        AND md.person_id = person_names.person_id AND md.max_date = person_names.end_date
+        GROUP by person_id
+        ORDER BY house, family_name, lordofname, given_name
+    ';
+    $q = $db->query($query);
+
+    $houses = array(1 => 'MP', 'Lord', 'MLA', 'MSP');
+
+    for ($i=0; $i<$q->rows(); $i++) {
+        $p_id = $q->field($i, 'person_id');
+        $house = $q->field($i, 'house');
+        $desc = member_full_name($house, $q->field($i, 'title'), $q->field($i, 'given_name'), $q->field($i, 'family_name'), $q->field($i, 'lordofname')) .
+                " " . $houses[$house];
+        if ($q->field($i, 'party')) $desc .= ' (' . $q->field($i, 'party') . ')';
+        if ($q->field($i, 'constituency')) {
+            $desc .= ', ' . $q->field($i, 'constituency');
+        }
+        $out .= '<option value="'.$p_id.'">'.$desc.'</option>' . "\n";
+    }
+
+    $out .= ' </select></span> </div> ';
+
+    return $out;
+}
+
+function submit_message() {
+    global $db;
+
+    $pid = intval(get_http_var('pid'));
+    $message = get_http_var('profile_message');
+
+    if (!$pid) {
+        return display_message_form(array('Please pick a person'));
+    }
+
+    $query = "INSERT INTO personinfo (person_id, data_key, data_value) VALUES
+            ($pid,'profile_message',:profile_message)
+        ON DUPLICATE KEY UPDATE data_value=VALUES(data_value)";
+    $q = $db->query($query, array(':profile_message' => $message));
+
+    $person = new MySociety\TheyWorkForYou\Member(array(
+        'person_id' => $pid));
+    $person->load_extra_info(true, true);
+
+    return "<p><em>Profile message set for $pid</em> &mdash; check how it looks <a href=\"/mp?p=$pid\">on their page</a></p>"
+        . display_message_form();
+}
+
+function display_message_form($errors = array()) {
+    $out = '';
+    if ($errors) {
+        $out .= '<ul class="error"><li>' . join('</li><li>', $errors) . '</li></ul>';
+    }
+    $out .= '<form method="post">';
+    $out .= person_drop_down();
+    $out .= <<<EOF
+<div class="row">
+    <span class="label"><label for="profile_message">Profile message:</label></span>
+    <span class="formw"><textarea name="profile_message" id="profile_message" rows="5" cols="50"></textarea></span>
+</div>
+<div class="row">
+    <span class="label">&nbsp;</span>
+    <span class="formw"><input type="submit" name="submit" value="Update"></span>
+</div>
+</form>
+EOF;
+    return $out;
+}

www/docs/mp/index.php

@@ -291,6 +291,7 @@
         $data[$key] = $MEMBER->extra_info[$key];
     }
 }
+$data['profile_message'] = isset($MEMBER->extra_info['profile_message']) ? $MEMBER->extra_info['profile_message'] : '';
 $data['image'] = $MEMBER->image();
 $data['member_summary'] = person_summary_description($MEMBER);
 $data['enter_leave'] = $MEMBER->getEnterLeaveStrings();

www/docs/style/sass/accessible-autocomplete.scss

@@ -0,0 +1,141 @@
+.autocomplete__wrapper {
+  position: relative;
+}
+
+.autocomplete__hint,
+.autocomplete__input {
+  -webkit-appearance: none;
+  border: 2px solid;
+  border-radius: 0; /* Safari 10 on iOS adds implicit border rounding. */
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  margin-bottom: 0; /* BUG: Safari 10 on macOS seems to add an implicit margin. */
+  width: 100%;
+}
+
+.autocomplete__input {
+  background-color: transparent;
+  position: relative;
+}
+
+.autocomplete__hint {
+  color: #BFC1C3;
+  position: absolute;
+}
+
+.autocomplete__input--default{
+  padding: 4px;
+}
+
+.autocomplete__input--focused {
+  outline-offset: 0;
+  outline: 3px solid #ffbf47;
+}
+
+.autocomplete__input--show-all-values {
+  padding: 4px 34px 4px 4px;
+  cursor: pointer;
+}
+
+.autocomplete__dropdown-arrow-down{
+  z-index: -1;
+  display: inline-block;
+  position: absolute;
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  top: 10px;
+}
+
+.autocomplete__menu {
+  background-color: #fff;
+  border: 2px solid #0B0C0C;
+  border-top: 0;
+  color: #34384B;
+  margin: 0;
+  max-height: 342px;
+  overflow-x: hidden;
+  padding: 0;
+  width: 100%;
+  width: calc(100% - 4px);
+}
+
+.autocomplete__menu--visible {
+  display: block;
+}
+
+.autocomplete__menu--hidden {
+  display: none;
+}
+
+.autocomplete__menu--overlay {
+  box-shadow: rgba(0, 0, 0, 0.256863) 0px 2px 6px;
+  left: 0;
+  position: absolute;
+  top: 100%;
+  z-index: 100;
+}
+
+.autocomplete__menu--inline {
+  position: relative;
+}
+
+.autocomplete__option {
+  border-bottom: solid #BFC1C3;
+  border-width: 1px 0;
+  cursor: pointer;
+  display: block;
+  position: relative;
+}
+
+.autocomplete__option > * {
+  pointer-events: none;
+}
+
+.autocomplete__option:first-of-type {
+  border-top-width: 0;
+}
+
+.autocomplete__option:last-of-type {
+  border-bottom-width: 0;
+}
+
+.autocomplete__option--odd {
+  background-color: #FAFAFA;
+}
+
+.autocomplete__option--focused,
+.autocomplete__option:hover {
+  background-color: #005EA5;
+  border-color: #005EA5;
+  color: white;
+  outline: none;
+}
+
+.autocomplete__option--no-results {
+  background-color: #FAFAFA;
+  color: #646b6f;
+  cursor: not-allowed;
+}
+
+.autocomplete__hint,
+.autocomplete__input,
+.autocomplete__option {
+  font-size: 16px;
+  line-height: 1.25;
+}
+
+.autocomplete__hint,
+.autocomplete__option {
+  padding: 4px;
+}
+
+@media (min-width: 641px) {
+  .autocomplete__hint,
+  .autocomplete__input,
+  .autocomplete__option {
+    font-size: 19px;
+    line-height: 1.31579;
+  }
+}

www/docs/style/sass/app.scss

@@ -56,6 +56,7 @@
 
 @import "compass/css3";
 @import "_twfy-mixins.scss";
+@import "accessible-autocomplete";
 
 @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,400italic);
 @import "../foundation-icons/foundation-icons.css";

www/docs/style/sass/parts/_panels.scss

@@ -29,6 +29,11 @@
     border: 1px solid #e2dfd9;
 }
 
+.panel--profile-message {
+    background-color: #f5cea2;
+    border: 1px solid #f4a140;
+}
+
 // Panel without vertical padding. Handy when you want vertical lines or child
 // content that stretch the entire height of the panel (as on the homepage).
 .panel--flushtop {

www/includes/easyparliament/member.php

@@ -352,11 +352,11 @@ public function set_users_mp() {
 
     // Grabs extra information (e.g. external links) from the database
     # DISPLAY is whether it's to be displayed on MP page.
-    public function load_extra_info($display = false) {
+    public function load_extra_info($display = false, $force = false) {
         $memcache = new MySociety\TheyWorkForYou\Memcache;
         $memcache_key = 'extra_info:' . $this->person_id . ($display ? '' : ':plain');
         $this->extra_info = $memcache->get($memcache_key);
-        if (!DEVSITE && $this->extra_info) {
+        if (!DEVSITE && !$force && $this->extra_info) {
             return;
         }
         $this->extra_info = array();

www/includes/easyparliament/metadata.php

@@ -163,6 +163,11 @@
         'parent'		=> 'admin',
         'url'			=> 'admin/photos.php',
     ),
+    'admin_profile_message' => array (
+        'title'			=> 'Profile message banner',
+        'parent'		=> 'admin',
+        'url'			=> 'admin/profile-message.php',
+    ),
     'admin_mpurls' => array (
         'title'			=> 'MP Websites',
         'parent'		=> 'admin',

www/includes/easyparliament/page.php

@@ -1316,7 +1316,7 @@ public function admin_menu() {
                 'admin_comments','admin_trackbacks', 'admin_searchlogs', 'admin_popularsearches', 'admin_failedsearches',
                 'alert_stats', 'admin_statistics', 'admin_reportstats',
                 'admin_commentreports', 'admin_glossary', 'admin_glossary_pending', 'admin_badusers',
-                'admin_photos', 'admin_mpurls', 'admin_policies', 'admin_banner', 'admin_featured', 'admin_topics'
+                'admin_profile_message', 'admin_photos', 'admin_mpurls', 'admin_policies', 'admin_banner', 'admin_featured', 'admin_topics'
                 );
 
         $links = array();

www/includes/easyparliament/templates/html/footer.php

@@ -103,9 +103,19 @@
 <script src="/js/foundation/foundation.reveal.js"></script>
 <script src="/js/riveted.min.js"></script>
 <script src="/js/jquery.scrolldepth.min.js"></script>
+<script src="/js/accessible-autocomplete.min.js"></script>
 
 <script>
 
+$('.autocomplete').each(function() {
+  accessibleAutocomplete.enhanceSelectElement({
+    selectElement: this,
+    displayMenu: 'overlay',
+    defaultValue: '',
+    required: true
+  });
+});
+
   $( document ).ready(function() {
 
     $(".menu-dropdown").click(function(e) {

www/includes/easyparliament/templates/html/mp/divisions.php

@@ -124,6 +124,12 @@
 
                 <?php } ?>
 
+              <?php if ($profile_message): ?>
+                <div class="panel panel--profile-message">
+                    <p><?= $profile_message ?></p>
+                </div>
+              <?php endif; ?>
+
                 <?php if (!$displayed_votes) { ?>
 
                     <div class="panel">

www/includes/easyparliament/templates/html/mp/profile.php

@@ -42,6 +42,12 @@
             </div>
             <div class="primary-content__unit">
 
+              <?php if ($profile_message): ?>
+                <div id="profile-message" class="panel panel--profile-message">
+                    <p><?= $profile_message ?></p>
+                </div>
+              <?php endif; ?>
+
               <?php if ($party == 'Sinn Féin' && in_array(HOUSE_TYPE_COMMONS, $houses)): ?>
                 <div class="panel">
                     <p>Sinn F&eacute;in MPs do not take their seats in Parliament.</p>
@@ -364,7 +370,7 @@
                     <a name="numerology"></a>
                     <h2 data-magellan-destination="numerology">Numerology</h2>
 
-                    <p>Please note that numbers do not measure quality. Also, representatives may do other things not currently covered by this site.<br><small><a href="<?= WEBPATH ?>help/#numbers">More about this</a></small></p>
+                    <p>Please note that numbers do not measure quality. Also, representatives may do other things not currently covered by this site. <a href="<?= WEBPATH ?>help/#numbers">More about this</a></p>
 
                     <ul class="numerology">
 

www/includes/easyparliament/templates/html/mp/votes.php

@@ -28,6 +28,12 @@
             </div>
             <div class="primary-content__unit">
 
+                <?php if ($profile_message): ?>
+                <div class="panel panel--profile-message">
+                    <p><?= $profile_message ?></p>
+                </div>
+                <?php endif; ?>
+
                 <?php if ($party == 'Sinn Féin' && in_array(HOUSE_TYPE_COMMONS, $houses)): ?>
                 <div class="panel">
                     <p>Sinn F&eacute;in MPs do not take their seats in Parliament.</p>