Customized header images and text for lab pages

[msheskin]

TL;DR

Allow each lab to upload lab logos, and specify text that they want to appear under the logo and above the list of studies from the lab.

Narrative

As a researcher, I want a more attractive lab 'landing page' that is customized to show my lab's logo above the studies (in combination with #1024, which lets them custom-order the studies that appear!)

Acceptance Criteria

See screenshot mockup at the bottom

Lab Edit View

We will divide the current form into two visual chunks - Lab info, and Lab page design. The final order of the fields on this page should be:

Lab Name
Institution
PI Name
Contact Email
Contact Phone
Lab Website
IRB Contact Website
[a line/visual separator]
Custom URL
Banner Image
Badge/Small Image
Lab Description

Specific changes

[ ] Question - there is already a Lab Description field provided, but I can't find any Lookit URLs where this text would appear to a family. I propose we reuse this for the lab text!

DB field: (existing) 'description'
Field title: Status quo
Field content: Status quo (but see implementation notes!)
Help text: "A short (2-3 sentences), parent-facing description of what your lab studies or other information of interest to families. This will be displayed at your custom URL."

[ ] New field for a banner image

Database field on the studies_lab object: 'lab_banner_image'

Title: Lab Banner Image

Help text: "This is the banner image that participants will see at the top of the screen, above your description. Please keep your file size less than 1 MB. Banner images will be displayed in a [TBD] aspect ratio (a long, skinny rectangle)."

[ ] New field for a 'badge' image

Database field on the studies_lab object: 'lab_badge_image'
Title: Lab Badge Image
"This is a small image that will be used as an icon or badge, including for mobile views of your custom lab URL. Badge images will be displayed in a square aspect ratio."

Implementation Notes

• Make sure to check that lab pages render well on small-width browser. Possibly use the "Lab Badge" image in place of the lab banner for mobile/small widths?
• Make sure to check that lab description text looks reasonable, including if labs provide e.g. multiple paragraphs, a bulleted list
• At first, most labs will have a description, but not yet an image, so we should make sure that this is a state that looks reasonable. Potentially display the lab's name in large font instead if a banner image is not provided?

Mockups

Note from standup: Remember that there are three edge conditions to consider: A lab provides neither banner nor badge images; lab provides only banner; lab provides only badge. All of these should look at least "reasonably okay" on a lab page.

Laptop/wider window

• If a banner image is provided, show it!
• If no images are provided, display the lab's name in large font
• If a badge but no banner is provided, display the badge on the left next to the lab's name

Current:

Desired:

Mobile/narrow

• If no badge image is provided, show the lab's name in medium sized font (e.g. the same as the "Manage Studies" and similar page titles) at full width. Place the description text underneath, also at full width.
• If a badge image is provided, show it on the left side. Place the lab name and description text to the right of that square image. (Note this is a bit different to the mockup I showed you in standup @okaycj !)

Current:

Desired (Though ideally the lab name would shrink in font to fit a single line, if possible):

• Ideally, also fix the padding of the home button in the top bar, and deal with how study images are displayed! (See Pad study (and lab) images #1038)