Make webapp header logo image configurable

[amandacilek-zz]

Summary
Our current logo will still be the default on the webapp. The feature we are working on now will allow partners to swap in their own logo/image in place of our logo, should they so desire. We will share some basic guidelines for making the best use of the space and formatting files correctly but we will not actively restrict/police/enforce how the space ends up being used.

Read more and see examples here: https://docs.google.com/presentation/d/1qv8WkVIDaNNPUntFoB6EnBpkfhXi1Ax61zXVZ8LGjAo/edit?usp=sharing

Webapp header image

• In essence, we are creating a blank container box in the upper left corner of our webapp that is configurable - meaning partners can upload their own custom image in place of the default Medic Mobile logo
• The size of the container box in the upper left of the desktop webapp should be 170 x 50 px. This is my recommendation based upon the overall size of the header bar now, the size of the bar after the nav update, the general horizontal shape of most logos, and the needs of responsive page scaling
• The box should be vertically centered within the black header bar
• The far left edge of the box should stay aligned directly on top of the far left edge of the LHS column as the page scales (just as our current Medic logo does)

File upload

• Where should this custom image be uploaded from? Assuming it should ideally be a place that all admin users have access to (i.e. the admin console). That way, if a partner decides down the road that they want to swap out the image with something else, they don’t need to come back to Medic in order to make the change.
• My initial suggestion is this: We rename the “Icons” page to “Images” and then we add “Header logo” and “About page logo” sections or tabs
• Next to the “Choose file” button for image upload, it would be nice if we could display a few sentences with reminder text such as “You can upload an SVG, PNG, or JPG file. File must be less than 100 KB… etc”
• Unsure how easy or hard it is to restrict the types of files being uploaded, but ideally we would restrict the image types allowed and if a user tries to upload an unsupported image type, we should display a warning message indicating such.
• It would also be nice to set some sort of reasonable cap on the file size. Then, if the user tries to upload a very large image (say 10 MB) we can display a warning message indicating that the file is too large.
• We aren’t going to worry too much about whether or not the image matches the recommended dimensions or ratios. Whatever is uploaded, the image should always scale to fit inside whatever bounding container we’ve coded
• If an image is uploaded that does not match the end ratio or is larger than the recommended dimensions, it should automatically be scaled down, keeping proportions intact, to fit within the available space.

[garethbowen]

@amandacilek Do we also need the "powered by Medic Mobile" somewhere?

[amandacilek-zz]

No, we decided not to do that in light of our new strategy for the CHT (on a call with Josh, Jacqueline, Isaac, Dianna, Lester).

[garethbowen]

@amandacilek What about the webapp title? It doesn't show in the android app but it will show for any browser users. Perhaps we need a configurable string for the title as well?

[amandacilek-zz]

What do you mean by "webapp title"? Are you talking about the name as it appears in a browser tab e.g. "Medic Mobile"? Yeah, good point, it would be great to make that configurable as well.

As for the URL "https:// {{projectname}}.medicmobile.org" ... that will always still end in .medicmobile.org right? (At least for now, pre CHT)?

[garethbowen]

Yes I mean the bit in the browser tab.

The URL is a separate piece of work that should just work without any webapp changes.

[garethbowen]

@amandacilek We'll also need to replace the favicon for web users...

[ngaruko]

Is this meant to be configurable in the UI @garethbowen ?

[garethbowen]

@ngaruko Yes - go to Admin > Images > Branding

[ngaruko]

LGTM