People page / front end of CMS issues

[hannahkane]

• [x] Featured people aren't showing any differently than non-featured people (Fix in: Django)
  • [x] Can't verify that bio appears (though I assume the bullet points and line breaks I put in the field won't render)
  • [x] Can't verify that card flip functionality works as expected
  • [x] Can't check that quote appears on back of card
• [x] People with multiple affiliations—no semicolon and space between affiliations
• [x] Links not visible; likely due to lack of clarity in https://github.com/mozilla/network-api/issues/43#issuecomment-286265514
• [x] in the case where there's no partner logo, should not display an "image not available" image (Fix in: Django)
• [x] need to consider whether there should be a max height on the partner image

cc @sabrinang @taisdesouzalessa

[hannahkane]

I'd prioritize fixing the "no image available" issue, because that doesn't look great. Otherwise, I don't think these things are blockers to soft launch.

[cadecairos]

in the case where there's no partner logo, should not display an "image not available" image

This is related to the admin interface not enforcing it as a required field. We'll file an issue to change that

[gvn]

Well, I don't think we should make partner logo required because not everyone will have one unless I'm mistaken @hannahkane ?

We can just suppress the "Image Not Available" visual on the front end if there's no logo. <- Logo is from Django

[gvn]

Since Alan is traveling I'm going to look into fixing this.

[sabrinang]

From issue https://github.com/mozilla/network/issues/100#issuecomment-284528827, it was mentioned that "People on Partners tab also get a logo, BUT only when the new logo column is highlight bright green too." so I believe we display around 10 of those approved partner orgs for the highlighted green people but I am unsure about that status on the rest.

[hannahkane]

Yes, partner logo should not be required, but "image not available" image should be suppressed.

[gvn]

I've identified a few issues with the JSON being emitted from Django:

@gideonthomas @cadecairos :

featured isn't being emitted on any of the items returned. Is this because none are featured or does that property not exist in Django? This isn't affecting front end other than no cards being featured.

links is formed differently in the data from Django. This is causing no links to display in the front end.

Django:

    "links": [
      {
        "url": "https://storyengine.io/stories/decentralization/joe-mcnamee/",
        "name": "Story Blog"
      }
    ],

Expected:

      "links": {
        "type": "object",
        "properties": {
          "twitter": {
            "type": "string"
          },
          "linkedIn": {
            "type": "string"
          }
        }
      },

[gvn]

Looks like only featured cards are "flippable", so once the featured property is set to true on a person the flipping should work as expected.

[gvn]

Links will just not render with the current structure coming out of Django. Will require a refactor of FE to display.

[gideonthomas]

Will make the above fixes! Thanks for showing the diff, makes it much easier!

[hannahkane]

OK, as per Gideon's comment, the formatting fix for the bio field is a front-end fix.

Dang, I did a bad job of filing issues in the right repos. Sorry!

[gvn]

The only things remaining to do from my perspective are:

• [x] Links need to be suppressed if they are an empty string. Django returns empty strings instead of null for some reason.
• [x] Georgia Bullen is missing a photo and it's showing the "No Image Available" circle. I'm guessing we want to either hide that or come up with a better generic portrait image.
• [x] Portrait and affiliate logo need a little margin between them.
• [x] Process bio markdown into HTML

Since all the functional issues have been resolved I'm dropping this to p1.

[hannahkane]

Thanks, @gvn. I think we can require images of the people themselves. I didn't see an image for Georgia in the folder, though I do see a link to one in the spreadsheet. @sabrinang - can you please advise - do we have a photo of Georgia to use?

[gvn]

I'm suggesting that we do the same thing we do for logos when they're unavailable, which is return null from Django and not show a placeholder on the front end.

For the moment if we can just put Georgia's photo in then we can address that point after launch.

[hannahkane]

Thanks, @gvn. I understood what you're suggesting. I don't think we will want to have profiles without an image of the person (I could be wrong about that), so I was counter-suggesting that we make it required to have a non-default image there. But agree we can table this until later.

[gvn]

Ah, ok. If we want to make the profile photo a required field that precludes the need for any front-end refactoring.

[sabrinang]

@hannahkane I updated the folder (to include Georgia and Daniel) https://drive.google.com/drive/folders/0B4Q8pzCpDS_eUzFlYnZ0TGpOUG8?usp=sharing

[taisdesouzalessa]

This is so nice to see!

Besides the items @gvn added to the checklist, there are some visual elements present in the comp that should be added to the page:

• [ ] slants in the featured cards

• [ ] typeface in the quotes have "font-style:italic" instead of using "Nunito Sans Light Italic"

• [x] If it is not possible to break lines through the use of bullet points we may want to rewrite the bullet points in a more descriptive way.

• [ ] I would love to tweak the animation (I am sure this is not a priority, just adding as a reminder).

I am not sure about the priorities of those changes, definitely not an MVP.

I agree with @hannahkane that the pictures should be a requirement because this page is to highlight people of the Network and seeing their faces helps the connection to be established.

Last, sorry if I missed it, but will we be able to manually sort the people to control how the grid shows up? For instance, it would be nice to have another person beside Teon

[hannahkane]

@taisdesouzalessa - we can sort using the django interface. I'm happy to make any adjustments you'd like, or you can go in yourself, but know that I'll be adding a few more people today.

[hannahkane]

thanks, @sabrinang, for the images!

[hannahkane]

just re-ordered the cards, so should look better once we rebuild

[taisdesouzalessa]

That's awesome, Hannah. Thank you so much for that :). Let me know if you need any help on adding more people or sorting cards.

[hannahkane]

• [x] LinkedIn links aren't showing up <- I will fix! p1

[gvn]

LinkedIn is fixed on staging

[xmatthewx]

@hannahkane - seems like this is all fixed. true? ready to close?

[hannahkane]

There are some unchecked boxes here, but I'll close this and open a new issue instead.