Feature/new person page

[VirginiaDooley]

This work implements the new DC design system for the candidate (Person) page as well as addresses the following:
*Related issues:
* #211
* #599
* #202
* #198
* #404

To install the new DC design system as a python package and test the changes in this PR, follow these instructions.

Note on testing:

Some conditionals in the template require us to create new factories and we weren't sure those sections (such as CV) would be made live just yet. Once the invalid template setting PR is merged, which is dependent on the DC base theme, it will catch conditionals we haven't explicitly tested here.

New design system screenshots

Intro Card for candidate with more than one current candidacy

Policies Card with expanded long (>100 words) statement to voters for long statements

Shorter statement to voters

About card (includes when present: wikipedia, CV, TWFY link)

Contact card

Previous elections Table

[coveralls]

Coverage increased (+0.9%) to 51.923% when pulling 8f1672a on VirginiaDooley:feature/new-person-page into 6ae6c10 on DemocracyClub:master.

[michaeljcollinsuk]

If you wanted a hand writing any unit tests for your model methods, I'd be happy to pair on it with you!

[symroe]

With all these properties:

First, I wonder if there's a way to DRY up the methods a little - like pulling the main logic in to one place?

Second, parsing URLs is (or can be) hard - for example, we don't know that someone hadn't added a querystring to the end of a given URL that might look odd.

Here's an example from the actual data:

https://www.facebook.com/sarahmurraylibdem?notif_id=1523864067803194&notif_t=page_invite_accept&ref=notif.

I think this code would reduce this down to:

sarahmurraylibdem?notif_id=1523864067803194&notif_t=page_invite_accept&ref=notif.

A better option might be to use Python's build in URL parsing:

from urllib.parse import urlparse
parsed_url = urlparse('https://www.facebook.com/sarahmurraylibdem?notif_id=1523864067803194&notif_t=page_invite_accept&ref=notif')

Now parsed_url.path would be sarahmurraylibdem but might also contain more path elements, so we'd want to then do `url = parsed_url.path.split("/")[0].

Of course the real solution here is to get the screen name from the 3rd party site itself, but that's a problem for another day!

[VirginiaDooley]

Absolutely. I'll put this on my 'things to refactor' list. 👍

[VirginiaDooley]

Punting this to an issue as suggested so we can get this reviewed and rolled out faster.

[symroe]

Happy with where this is now - feel free to punt the URL parsing to an issue - I'll leave that one up to you to decide 👍

[pmk01]

Just jumping in to say these look brilliant! My only thought is on the photo cropping, have you tested this with candidates who have a particularly low-res picture, or headshots in profile? This is a small number of images and will probably encourage us to find better photos, but thought I'd mention it.

[VirginiaDooley]

Just jumping in to say these look brilliant! My only thought is on the photo cropping, have you tested this with candidates who have a particularly low-res picture, or headshots in profile? This is a small number of images and will probably encourage us to find better photos, but thought I'd mention it.

Do you have a lo-res candidate image in mind so I can test it?

[pmk01]

Yes, sorry, I couldn't come up with any immediately. Here are a couple of awkward examples from upcoming elections:
https://candidates.democracyclub.org.uk/person/72906/neil-wilson
https://candidates.democracyclub.org.uk/person/73218/gordon-shanks
https://candidates.democracyclub.org.uk/person/73540/michelle-frampton

[VirginiaDooley]

Yes, sorry, I couldn't come up with any immediately. Here are a couple of awkward examples from upcoming elections:
https://candidates.democracyclub.org.uk/person/72906/neil-wilson
https://candidates.democracyclub.org.uk/person/73218/gordon-shanks
https://candidates.democracyclub.org.uk/person/73540/michelle-frampton

What do you think? Next question I have is why the logic is rendering with 0 elections. 🤔

[pmk01]

Good stuff! No significant difference from now, then (in terms of picture quality).

[VirginiaDooley]

@pmk01 are you happy with this language?

[pmk01]

Yes - how does it work with Mayors & PCCs?

[pmk01]

Here's a good candidate to try it on:
https://candidates.democracyclub.org.uk/person/6023/george-jabbour

[VirginiaDooley]

Yes - how does it work with Mayors & PCCs?

Happy to send the entire page; not sure if you just wanted to see Previous elections for https://candidates.democracyclub.org.uk/person/6023/george-jabbour

[symroe]

Sorry to jump in again, but for the "vote count not available" message on the table: we might have details about if they were elected or not, even if we don't have votes cast. For example, we'll have all general election results in terms of "elected: y/n".

Another thing to punt to an issue, but we should show that if we have it.

I think elected is a NullBoolean, so the values are one of None, True, False. e.g, if it's not None then we have asserted that they either were or weren't elected.

[pmk01]

Further on results, do we want to add (not elected)? What do you guys think?

That table also reveals a number of problems with the names of our historic elections, especially Mayor of Watford, but I don't think any of that relates to this change. Something to return to after May, I think.

[VirginiaDooley]

Sorry to jump in again, but for the "vote count not available" message on the table: we might have details about if they were elected or not, even if we don't have votes cast. For example, we'll have all general election results in terms of "elected: y/n".

Another thing to punt to an issue, but we should show that if we have it.

I think elected is a NullBoolean, so the values are one of None, True, False. e.g, if it's not None then we have asserted that they either were or weren't elected.

I think this is what you're referring to @symroe ? I've included an elected conditional regardless if votes_cast is available #660 (review)

[Heydon]

@VirginiaDooley The photo cropping issue is due to object-fit: cover which is used to fit the image into the available space by cropping rather than stretching. For some reason, the croppable area is two narrow in the pictured configuration, which I’ll need to tweak.

[Heydon]

@VirginiaDooley I'd have to see the markup, but we should be able to avoid this weird styling if the <details> element truncates the blockquote’s content, rather than splits it into two blockquotes? Is that what’s happening here?

[VirginiaDooley]

@VirginiaDooley I'd have to see the markup, but we should be able to avoid this weird styling if the <details> element truncates the blockquote’s content, rather than splits it into two blockquotes? Is that what’s happening here?

@Heydon https://github.com/DemocracyClub/WhoCanIVoteFor/pull/660/files#diff-ae321f98dbcc359e064a2026d2dbbbefa7fc149669e954b138a7aee7ab749005

[Heydon]

@VirginiaDooley Okay, it seems you have a <blockquote> inside a <blockquote> there. I’ve added an example to the release/0.1.0 branch on how to do this successfully. https://github.com/DemocracyClub/design-system/blob/release/0.1.0/src-site/components/details.md

Note the use of class="ds-stack-smaller" for spacing.

<blockquote class="ds-stack-smaller">
  <p>To stand again as the UKIP candidate for Redcar is fantastic and reflects the fact I was born in Middlesbrough.</p>
  <details>
    <summary>Full statement</summary>
    <p>I work, run my business, and live in the constituency. What also makes me unique among the other candidates is my military service, having served in both the Regular Army and what is now the Reserve for forty two years.</p>
  </details>
</blockquote>

[VirginiaDooley]

Further on results, do we want to add (not elected)? What do you guys think?

That table also reveals a number of problems with the names of our historic elections, especially Mayor of Watford, but I don't think any of that relates to this change. Something to return to after May, I think.

Just following up, have you captured this somewhere already? If not I can make an issue.

[michaeljcollinsuk]

So I think in the else here, we would want to say "Elected" rather than "Vote count not available"? Because we know they were elected (from the check on line 24) we just don't know how many votes they got

[VirginiaDooley]

Yes, now that I think about it, maybe we want to say both where the vote count is not available.