From 2012ddf45f4eddec3ac61d31862a90a6f4624345 Mon Sep 17 00:00:00 2001 From: Matthew Somerville Date: Mon, 5 Feb 2018 11:17:08 +0000 Subject: [PATCH] Add profile message tool. --- www/docs/admin/photos.php | 2 +- www/docs/admin/profile-message.php | 100 +++++++++++++ www/docs/js/accessible-autocomplete.min.js | 2 + www/docs/mp/index.php | 1 + .../style/sass/accessible-autocomplete.scss | 141 ++++++++++++++++++ www/docs/style/sass/app.scss | 1 + www/docs/style/sass/parts/_panels.scss | 5 + www/includes/easyparliament/member.php | 4 +- www/includes/easyparliament/metadata.php | 5 + www/includes/easyparliament/page.php | 2 +- .../easyparliament/templates/html/footer.php | 9 ++ .../templates/html/mp/divisions.php | 6 + .../templates/html/mp/profile.php | 8 +- .../templates/html/mp/votes.php | 6 + 14 files changed, 287 insertions(+), 5 deletions(-) create mode 100644 www/docs/admin/profile-message.php create mode 100644 www/docs/js/accessible-autocomplete.min.js create mode 100644 www/docs/style/sass/accessible-autocomplete.scss diff --git a/www/docs/admin/photos.php b/www/docs/admin/photos.php index 69bdda6235..5b45bd3819 100644 --- a/www/docs/admin/photos.php +++ b/www/docs/admin/photos.php @@ -80,7 +80,7 @@ function person_drop_down() { $out = '
- '; $query = 'SELECT house, member.person_id, title, given_name, family_name, lordofname, constituency, party FROM member, person_names, diff --git a/www/docs/admin/profile-message.php b/www/docs/admin/profile-message.php new file mode 100644 index 0000000000..c85fc3490d --- /dev/null +++ b/www/docs/admin/profile-message.php @@ -0,0 +1,100 @@ +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 = ' +
+ +
'; + + 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 "

Profile message set for $pid — check how it looks on their page

" + . display_message_form(); +} + +function display_message_form($errors = array()) { + $out = ''; + if ($errors) { + $out .= '
  • ' . join('
  • ', $errors) . '
'; + } + $out .= '
'; + $out .= person_drop_down(); + $out .= << + + +
+
+   + +
+ +EOF; + return $out; +} diff --git a/www/docs/js/accessible-autocomplete.min.js b/www/docs/js/accessible-autocomplete.min.js new file mode 100644 index 0000000000..e9d379b323 --- /dev/null +++ b/www/docs/js/accessible-autocomplete.min.js @@ -0,0 +1,2 @@ +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.accessibleAutocomplete=t():e.accessibleAutocomplete=t()}(this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/",t(t.s=1)}([function(e,t,n){!function(){"use strict";function t(){}function n(e,n){var o,r,l,i,u=L;for(i=arguments.length;i-- >2;)D.push(arguments[i]);for(n&&null!=n.children&&(D.length||D.push(n.children),delete n.children);D.length;)if((r=D.pop())&&void 0!==r.pop)for(i=r.length;i--;)D.push(r[i]);else!0!==r&&!1!==r||(r=null),(l="function"!=typeof e)&&(null==r?r="":"number"==typeof r?r=String(r):"string"!=typeof r&&(l=!1)),l&&o?u[u.length-1]+=r:u===L?u=[r]:u.push(r),o=l;var s=new t;return s.nodeName=e,s.children=u,s.attributes=null==n?void 0:n,s.key=null==n?void 0:n.key,void 0!==A.vnode&&A.vnode(s),s}function o(e,t){for(var n in t)e[n]=t[n];return e}function r(e,t){return n(e.nodeName,o(o({},e.attributes),t),arguments.length>2?[].slice.call(arguments,2):e.children)}function l(e){!e.__d&&(e.__d=!0)&&1==V.push(e)&&(A.debounceRendering||setTimeout)(i)}function i(){var e,t=V;for(V=[];e=t.pop();)e.__d&&N(e)}function u(e,t,n){return"string"==typeof t||"number"==typeof t?void 0!==e.splitText:"string"==typeof t.nodeName?!e._componentConstructor&&s(e,t.nodeName):n||e._componentConstructor===t.nodeName}function s(e,t){return e.__n===t||e.nodeName.toLowerCase()===t.toLowerCase()}function a(e){var t=o({},e.attributes);t.children=e.children;var n=e.nodeName.defaultProps;if(void 0!==n)for(var r in n)void 0===t[r]&&(t[r]=n[r]);return t}function p(e,t){var n=t?document.createElementNS("http://www.w3.org/2000/svg",e):document.createElement(e);return n.__n=e,n}function c(e){e.parentNode&&e.parentNode.removeChild(e)}function d(e,t,n,o,r){if("className"===t&&(t="class"),"key"===t);else if("ref"===t)n&&n(null),o&&o(e);else if("class"!==t||r)if("style"===t){if(o&&"string"!=typeof o&&"string"!=typeof n||(e.style.cssText=o||""),o&&"object"==typeof o){if("string"!=typeof n)for(var l in n)l in o||(e.style[l]="");for(var l in o)e.style[l]="number"==typeof o[l]&&!1===T.test(l)?o[l]+"px":o[l]}}else if("dangerouslySetInnerHTML"===t)o&&(e.innerHTML=o.__html||"");else if("o"==t[0]&&"n"==t[1]){var i=t!==(t=t.replace(/Capture$/,""));t=t.toLowerCase().substring(2),o?n||e.addEventListener(t,h,i):e.removeEventListener(t,h,i),(e.__l||(e.__l={}))[t]=o}else if("list"!==t&&"type"!==t&&!r&&t in e)f(e,t,null==o?"":o),null!=o&&!1!==o||e.removeAttribute(t);else{var u=r&&t!==(t=t.replace(/^xlink\:?/,""));null==o||!1===o?u?e.removeAttributeNS("http://www.w3.org/1999/xlink",t.toLowerCase()):e.removeAttribute(t):"function"!=typeof o&&(u?e.setAttributeNS("http://www.w3.org/1999/xlink",t.toLowerCase(),o):e.setAttribute(t,o))}else e.className=o||""}function f(e,t,n){try{e[t]=n}catch(e){}}function h(e){return this.__l[e.type](A.event&&A.event(e)||e)}function m(){for(var e;e=R.pop();)A.afterMount&&A.afterMount(e),e.componentDidMount&&e.componentDidMount()}function _(e,t,n,o,r,l){q++||(P=null!=r&&void 0!==r.ownerSVGElement,U=null!=e&&!("__preactattr_"in e));var i=v(e,t,n,o,l);return r&&i.parentNode!==r&&r.appendChild(i),--q||(U=!1,l||m()),i}function v(e,t,n,o,r){var l=e,i=P;if(null==t&&(t=""),"string"==typeof t)return e&&void 0!==e.splitText&&e.parentNode&&(!e._component||r)?e.nodeValue!=t&&(e.nodeValue=t):(l=document.createTextNode(t),e&&(e.parentNode&&e.parentNode.replaceChild(l,e),g(e,!0))),l.__preactattr_=!0,l;if("function"==typeof t.nodeName)return S(e,t,n,o);if(P="svg"===t.nodeName||"foreignObject"!==t.nodeName&&P,(!e||!s(e,String(t.nodeName)))&&(l=p(String(t.nodeName),P),e)){for(;e.firstChild;)l.appendChild(e.firstChild);e.parentNode&&e.parentNode.replaceChild(l,e),g(e,!0)}var u=l.firstChild,a=l.__preactattr_||(l.__preactattr_={}),c=t.children;return!U&&c&&1===c.length&&"string"==typeof c[0]&&null!=u&&void 0!==u.splitText&&null==u.nextSibling?u.nodeValue!=c[0]&&(u.nodeValue=c[0]):(c&&c.length||null!=u)&&y(l,c,n,o,U||null!=a.dangerouslySetInnerHTML),w(l,t.attributes,a),P=i,l}function y(e,t,n,o,r){var l,i,s,a,p=e.childNodes,d=[],f={},h=0,m=0,_=p.length,y=0,b=t?t.length:0;if(0!==_)for(var w=0;w<_;w++){var O=p[w],C=O.__preactattr_,x=b&&C?O._component?O._component.__k:C.key:null;null!=x?(h++,f[x]=O):(C||(void 0!==O.splitText?!r||O.nodeValue.trim():r))&&(d[y++]=O)}if(0!==b)for(var w=0;w=_?e.appendChild(a):a!==p[w]&&(a===p[w+1]?c(p[w]):e.insertBefore(a,p[w]||null)))}if(h)for(var w in f)void 0!==f[w]&&g(f[w],!1);for(;m<=y;)void 0!==(a=d[y--])&&g(a,!1)}function g(e,t){var n=e._component;n?I(n):(null!=e.__preactattr_&&e.__preactattr_.ref&&e.__preactattr_.ref(null),!1!==t&&null!=e.__preactattr_||c(e),b(e))}function b(e){for(e=e.lastChild;e;){var t=e.previousSibling;g(e,!0),e=t}}function w(e,t,n){var o;for(o in n)t&&null!=t[o]||null==n[o]||d(e,o,n[o],n[o]=void 0,P);for(o in t)"children"===o||"innerHTML"===o||o in n&&t[o]===("value"===o||"checked"===o?e[o]:n[o])||d(e,o,n[o],n[o]=t[o],P)}function O(e){var t=e.constructor.name;(B[t]||(B[t]=[])).push(e)}function C(e,t,n){var o,r=B[e.name];if(e.prototype&&e.prototype.render?(o=new e(t,n),k.call(o,t,n)):(o=new k(t,n),o.constructor=e,o.render=x),r)for(var l=r.length;l--;)if(r[l].constructor===e){o.__b=r[l].__b,r.splice(l,1);break}return o}function x(e,t,n){return this.constructor(e,n)}function E(e,t,n,o,r){e.__x||(e.__x=!0,(e.__r=t.ref)&&delete t.ref,(e.__k=t.key)&&delete t.key,!e.base||r?e.componentWillMount&&e.componentWillMount():e.componentWillReceiveProps&&e.componentWillReceiveProps(t,o),o&&o!==e.context&&(e.__c||(e.__c=e.context),e.context=o),e.__p||(e.__p=e.props),e.props=t,e.__x=!1,0!==n&&(1!==n&&!1===A.syncComponentUpdates&&e.base?l(e):N(e,1,r)),e.__r&&e.__r(e))}function N(e,t,n,r){if(!e.__x){var l,i,u,s=e.props,p=e.state,c=e.context,d=e.__p||s,f=e.__s||p,h=e.__c||c,v=e.base,y=e.__b,b=v||y,w=e._component,O=!1;if(v&&(e.props=d,e.state=f,e.context=h,2!==t&&e.shouldComponentUpdate&&!1===e.shouldComponentUpdate(s,p,c)?O=!0:e.componentWillUpdate&&e.componentWillUpdate(s,p,c),e.props=s,e.state=p,e.context=c),e.__p=e.__s=e.__c=e.__b=null,e.__d=!1,!O){l=e.render(s,p,c),e.getChildContext&&(c=o(o({},c),e.getChildContext()));var x,S,k=l&&l.nodeName;if("function"==typeof k){var M=a(l);i=w,i&&i.constructor===k&&M.key==i.__k?E(i,M,1,c,!1):(x=i,e._component=i=C(k,M,c),i.__b=i.__b||y,i.__u=e,E(i,M,0,c,!1),N(i,1,n,!0)),S=i.base}else u=b,x=w,x&&(u=e._component=null),(b||1===t)&&(u&&(u._component=null),S=_(u,l,c,n||!v,b&&b.parentNode,!0));if(b&&S!==b&&i!==w){var D=b.parentNode;D&&S!==D&&(D.replaceChild(S,b),x||(b._component=null,g(b,!1)))}if(x&&I(x),e.base=S,S&&!r){for(var L=e,T=e;T=T.__u;)(L=T).base=S;S._component=L,S._componentConstructor=L.constructor}}if(!v||n?R.unshift(e):O||(m(),e.componentDidUpdate&&e.componentDidUpdate(d,f,h),A.afterUpdate&&A.afterUpdate(e)),null!=e.__h)for(;e.__h.length;)e.__h.pop().call(e);q||r||m()}}function S(e,t,n,o){for(var r=e&&e._component,l=r,i=e,u=r&&e._componentConstructor===t.nodeName,s=u,p=a(t);r&&!s&&(r=r.__u);)s=r.constructor===t.nodeName;return r&&s&&(!o||r._component)?(E(r,p,3,n,o),e=r.base):(l&&!u&&(I(l),e=i=null),r=C(t.nodeName,p,n),e&&!r.__b&&(r.__b=e,i=null),E(r,p,1,n,o),e=r.base,i&&e!==i&&(i._component=null,g(i,!1))),e}function I(e){A.beforeUnmount&&A.beforeUnmount(e);var t=e.base;e.__x=!0,e.componentWillUnmount&&e.componentWillUnmount(),e.base=null;var n=e._component;n?I(n):t&&(t.__preactattr_&&t.__preactattr_.ref&&t.__preactattr_.ref(null),e.__b=t,c(t),O(e),b(t)),e.__r&&e.__r(null)}function k(e,t){this.__d=!0,this.context=t,this.props=e,this.state=this.state||{}}function M(e,t,n){return _(n,e,{},!1,t,!1)}var A={},D=[],L=[],T=/acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i,V=[],R=[],q=0,P=!1,U=!1,B={};o(k.prototype,{setState:function(e,t){var n=this.state;this.__s||(this.__s=o({},n)),o(n,"function"==typeof e?e(n,this.props):e),t&&(this.__h=this.__h||[]).push(t),l(this)},forceUpdate:function(e){e&&(this.__h=this.__h||[]).push(e),N(this,2)},render:function(){}});var j={h:n,createElement:n,cloneElement:r,Component:k,render:M,rerender:i,options:A};e.exports=j}()},function(e,t,n){e.exports=n(2)},function(e,t,n){"use strict";function o(e){if(!e.element)throw new Error("element is not defined");if(!e.id)throw new Error("id is not defined");if(!e.source)throw new Error("source is not defined");Array.isArray(e.source)&&(e.source=s(e.source)),(0,l.render)((0,l.createElement)(u.default,e),e.element)}var r=Object.assign||function(e){for(var t=1;t47&&e<58||32===e||8===e||e>64&&e<91||e>95&&e<112||e>185&&e<193||e>218&&e<223}function a(e){return y?{onInput:e}:g?{onChange:e}:void 0}t.__esModule=!0,t.default=void 0;var p,c,d=Object.assign||function(e){for(var t=1;t=o;this.setState({query:u}),l||!s&&a&&p?r(u,function(e){var n=e.length>0;t.setState({menuOpen:n,options:e,selected:i&&n?0:-1})}):!s&&p||this.setState({menuOpen:!1,options:[]})},t.prototype.handleInputClick=function(e){this.handleInputChange(e)},t.prototype.handleInputFocus=function(e){this.setState({focused:-1})},t.prototype.handleOptionFocus=function(e){this.setState({focused:e,hovered:null,selected:e})},t.prototype.handleOptionMouseEnter=function(e,t){this.setState({hovered:t})},t.prototype.handleOptionMouseOut=function(e,t){this.setState({hovered:null})},t.prototype.handleOptionClick=function(e,t){var n=this.state.options[t],o=this.templateInputValue(n);this.props.onConfirm(n),this.setState({focused:-1,menuOpen:!1,query:o,selected:-1}),this.forceUpdate()},t.prototype.handleOptionMouseDown=function(e){e.preventDefault()},t.prototype.handleUpArrow=function(e){e.preventDefault();var t=this.state,n=t.menuOpen,o=t.selected;-1!==o&&n&&this.handleOptionFocus(o-1)},t.prototype.handleDownArrow=function(e){var t=this;if(e.preventDefault(),this.props.showAllValues&&!1===this.state.menuOpen)e.preventDefault(),this.props.source("",function(e){t.setState({menuOpen:!0,options:e,selected:0,focused:0,hovered:null})});else if(!0===this.state.menuOpen){var n=this.state,o=n.menuOpen,r=n.options,l=n.selected,i=l!==r.length-1,u=i&&o;u&&this.handleOptionFocus(l+1)}},t.prototype.handleSpace=function(e){var t=this;this.props.showAllValues&&!1===this.state.menuOpen&&(e.preventDefault(),this.props.source("",function(e){t.setState({menuOpen:!0,options:e})})),-1!==this.state.focused&&(e.preventDefault(),this.handleOptionClick(e,this.state.focused))},t.prototype.handleEnter=function(e){this.state.menuOpen&&(e.preventDefault(),this.state.selected>=0&&this.handleOptionClick(e,this.state.selected))},t.prototype.handlePrintableKey=function(e){var t=this.elementReferences[-1];e.target===t||t.focus()},t.prototype.handleKeyDown=function(e){switch(b[e.keyCode]){case"up":this.handleUpArrow(e);break;case"down":this.handleDownArrow(e);break;case"space":this.handleSpace(e);break;case"enter":this.handleEnter(e);break;case"escape":this.handleComponentBlur({query:this.state.query});break;default:s(e.keyCode)&&this.handlePrintableKey(e)}},t.prototype.render=function(){var e=this,t=this.props,n=t.cssNamespace,o=t.displayMenu,r=t.id,l=t.minLength,i=t.name,u=t.placeholder,s=t.required,p=t.showAllValues,c=t.tNoResults,h=t.tStatusQueryTooShort,_=t.tStatusNoResults,v=t.tStatusSelectedOption,y=t.tStatusResults,g=t.dropdownArrow,b=this.state,O=b.focused,C=b.hovered,x=b.menuOpen,E=b.options,N=b.query,S=b.selected,I=this.hasAutoselect(),k=-1===O,M=0===E.length,A=0!==N.length,D=N.length>=l,L=this.props.showNoOptionsFound&&k&&M&&A&&D,T=n+"__wrapper",V=n+"__input",R=null!==O,q=R?" "+V+"--focused":"",P=this.props.showAllValues?" "+V+"--show-all-values":" "+V+"--default",U=n+"__dropdown-arrow-down",B=-1!==O&&null!==O,j=n+"__menu",F=j+"--"+o,W=x||L,K=j+"--"+(W?"visible":"hidden"),H=n+"__option",Q=n+"__hint",$=this.templateInputValue(E[S]),z=$&&0===$.toLowerCase().indexOf(N.toLowerCase()),G=z&&I?N+$.substr(N.length):"",J=w&&G,X=void 0;return p&&"string"==typeof(X=g({className:U}))&&(X=(0,f.createElement)("div",{className:n+"__dropdown-arrow-down-wrapper",dangerouslySetInnerHTML:{__html:X}})),(0,f.createElement)("div",{className:T,onKeyDown:this.handleKeyDown,role:"combobox","aria-expanded":x?"true":"false"},(0,f.createElement)(m.default,{length:E.length,queryLength:N.length,minQueryLength:l,selectedOption:this.templateInputValue(E[S]),tQueryTooShort:h,tNoResults:_,tSelectedOption:v,tResults:y}),J&&(0,f.createElement)("span",null,(0,f.createElement)("input",{className:Q,readonly:!0,tabIndex:"-1",value:G})),(0,f.createElement)("input",d({"aria-activedescendant":!!B&&r+"__option--"+O,"aria-owns":r+"__listbox",autoComplete:"off",className:""+V+q+P,id:r,onClick:function(t){return e.handleInputClick(t)},onBlur:this.handleInputBlur},a(this.handleInputChange),{onFocus:this.handleInputFocus,name:i,placeholder:u,ref:function(t){e.elementReferences[-1]=t},type:"text",role:"textbox",required:s,value:N})),X,(0,f.createElement)("ul",{className:j+" "+F+" "+K,id:r+"__listbox",role:"listbox"},E.map(function(t,n){var o=-1===O?S===n:O===n,l=o&&null===C?" "+H+"--focused":"",i=n%2?" "+H+"--odd":"";return(0,f.createElement)("li",{"aria-selected":O===n,className:""+H+l+i,dangerouslySetInnerHTML:{__html:e.templateSuggestion(t)},id:r+"__option--"+n,key:n,onFocusOut:function(t){return e.handleOptionBlur(t,n)},onClick:function(t){return e.handleOptionClick(t,n)},onMouseDown:e.handleOptionMouseDown,onMouseEnter:function(t){return e.handleOptionMouseEnter(t,n)},onMouseOut:function(t){return e.handleOptionMouseOut(t,n)},ref:function(t){e.elementReferences[n]=t},role:"option",tabIndex:"-1"})}),L&&(0,f.createElement)("li",{className:H+" "+H+"--no-results"},c())))},t}(f.Component),p.defaultProps={autoselect:!1,cssNamespace:"autocomplete",defaultValue:"",displayMenu:"inline",minLength:0,name:"input-autocomplete",placeholder:"",onConfirm:function(){},confirmOnBlur:!0,showNoOptionsFound:!0,showAllValues:!1,required:!1,tNoResults:function(){return"No results found"},dropdownArrow:v.default},c);t.default=O},function(e,t,n){"use strict";function o(e,t){}function r(e,t){if(e)return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function l(e,t){"function"!=typeof t&&null!==t||(e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t))}t.__esModule=!0,t.default=void 0;var i,u,s=n(0),a=(u=i=function(e){function t(){var n,l,i;o(this,t);for(var u=arguments.length,s=Array(u),a=0;aextra_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(); diff --git a/www/docs/style/sass/accessible-autocomplete.scss b/www/docs/style/sass/accessible-autocomplete.scss new file mode 100644 index 0000000000..e935c20ea0 --- /dev/null +++ b/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; + } +} diff --git a/www/docs/style/sass/app.scss b/www/docs/style/sass/app.scss index bb812aab5f..94beffe0c1 100644 --- a/www/docs/style/sass/app.scss +++ b/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"; diff --git a/www/docs/style/sass/parts/_panels.scss b/www/docs/style/sass/parts/_panels.scss index 6cd3a239a6..f7f78ef3eb 100644 --- a/www/docs/style/sass/parts/_panels.scss +++ b/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 { diff --git a/www/includes/easyparliament/member.php b/www/includes/easyparliament/member.php index bf0675d0b0..f75420a5ab 100644 --- a/www/includes/easyparliament/member.php +++ b/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(); diff --git a/www/includes/easyparliament/metadata.php b/www/includes/easyparliament/metadata.php index b8a12ecb49..f940366a27 100644 --- a/www/includes/easyparliament/metadata.php +++ b/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', diff --git a/www/includes/easyparliament/page.php b/www/includes/easyparliament/page.php index 69bf4f9e76..6f636509fe 100644 --- a/www/includes/easyparliament/page.php +++ b/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(); diff --git a/www/includes/easyparliament/templates/html/footer.php b/www/includes/easyparliament/templates/html/footer.php index b7c132244e..82bb0acc3a 100644 --- a/www/includes/easyparliament/templates/html/footer.php +++ b/www/includes/easyparliament/templates/html/footer.php @@ -103,9 +103,18 @@ +