New Home Page and My Collections Overlays

[NeilCresswell]

New Home Page & My Collections Overlays

A complete rewrite of the entire home page overlay and My Collections overlay. This includes a new more colorful look and feel, with multiple theme options.

Removed the following:

1. Old home page code.
2. Old my collections code.
3. Old code for handling featured content.
4. All code relating to Twitter.

New Feature Highlights:

1. Added a splash page for initial page load.
2. New featured content system driven via a single JSON file. This is easier for a not very technical person to maintain. It is possible to override the file location via web.config.
3. New choice of featured content, (six items to start with,) including more colorful and appealing tiles. Three more items (tours) will be added in the near future, once we've finished some additional work on tours. The number of featured items to be shown will be six or nine depending on the available screen resolution.
4. All editable collections and all favorites will be shown. (As opposed to limiting the number to display.)
5. A new Recently Published section to replace the old Twitter section. Published content displays tiles with graphics from recently edited exhibits that are in published collections.
6. Rewording of "Publicly Searchable" to "Publish" throughout site.
7. Richer information in tiles. For example, instead of displaying just the timeline name for a favorite, the collection and author are also included.
8. Instead of tiles refreshing only on initial page load, sections such as Recently Published, My Collections and My Favorites refresh every time the overlay is displayed. (No page load required.)
9. Clicking on the CZ logo immediately renders the home page overlay rather than the user having to wait for a page to reload.
10. For the Big History pages, a prominent link to the introductory tour is included.
11. On other pages, View Tours has an extra section so users can find Big History tours.
12. A new theming system with a choice of five initial themes.
13. CSS-driven layout:
    • Tiles rely on CSS for adjusting background image dimensions, etc.
    • Overlay relies on CSS for deciding how many columns of tiles to display per section rather than JS.
    • Overlay has easier CSS method (one place) for altering number of vertical sections.
    • Overlay can sub-divide vertical sections into more than one horizontal block.
    • Overlay adjusts better for smaller screen resolutions.
    • Overlay has only a single scrollbar on the right, if required.

---

Release Notes

There were no database changes in this rewrite.

Web.Config Changes

1. Two now redundant API references must be removed from the services section. (These are the Twitter and featured items APIs, which no longer exist in code.)
2. The existing four Twitter and one featured supervisor app keys should ideally be removed.

3. A new app key pointing to the featured content json file should ideally be added:

   <add key="FeaturedContentListLocation" value="/featured/featured.json" />

   Related Trello Project Cards

   • https://trello.com/c/4xrxKnLq/185-selection-of-new-featured-collections-list
   • https://trello.com/c/CUGQrodT/147-home-page-my-collections-overlay-general-ui
   • https://trello.com/c/86b7wBek/189-home-page-overlay-specifics
   • https://trello.com/c/Gcwk89yj/190-my-collections-overlay-specifics
   • https://trello.com/c/PEeFnXfF/195-change-logo-click-behaviour
   • https://trello.com/c/B1wg2bkP/188-publicly-searchable-option-rewording
   • https://trello.com/c/g2nRhEf7/196-add-splash-page

[saekow]

Neil, thank you so much for your hard work! Can't wait to see all of this amazing work in action soon.

[alterm4nn]

@NeilCresswell Very nice work, Neil!. I'm almost ready to accept it. Can you please provide information about image sources? You've used plenty of them, so we need to know the license they were published under.

[NeilCresswell]

@alterm4nn

Tile Images

Default tile image: Adapted from existing CZ image. (Source image file is in CZ project repository.)

Default Big History image: Adapted from existing CZ image. (Source image file is in CZ project repository.)

Featured Content - AIDS image: Adapted from Wikimedia.

Featured Content - CERN image: Adapted from existing CZ image. (Source image file is in CZ project repository.)

Featured Content - Chinese History of Medicine image: Existing CHoM collection background.

Featured Content - Earth Environments image: Adapted from existing CZ image. (Source image file is in CZ project repository.)

Featured Content - French Revolution image: Adapted from Wikimedia.

Theme Backgrounds

Arizona Linen: Adapted from Photos Public Domain. (www.photos-public-domain.com.)

Arizona Parchment: Adapted from RGBStock. (www.rgbstock.com.)

Midnight Blue: No image.

Peabody Library: Adapted from Wikimedia.

Rosette Nebula: Adapted from Hubble.