Google Code-in

The metadata block when showing privly content is currently a list of text that makes it difficult to quickly learn about what is contained within the post on Privly. Each section in the metadata area should somehow be differentiated. Options for differentiating the sections of metadata include adding a label, icons, colored panels, headings, some combination of these, or an approach of your own design.

(1) Objective:

Improve the display of metadata.

(2) Requirements

• Run the build system before starting development so you can see what the metadata section currently looks like.
• Make all changes against the develop branch. That is the branch with the most current metadata section and we do all our development on it.
• Modify only the following files: top.css and show.html.template. You can potentially modify other files as well, but you should ask beforehand.
• Run the build system to see how your changes are reflected in the metadata section, but don't commit changes to any non-template HTML files.

(3) Expected outcome:

• The metadata section will be more visually appealing than it is currently.
• When you look at injected content (ie, when the content is shown injected into emails or social media), it does not show the metadata section.