wesleyboar / demo-widget-image-map

Demo of "Image Map" widget for TACC, as seen on https://texascale.org/.

Widget Image Map

This is a low-tech responsive "image map" widget (image with nodes that highlight/show descriptions).

Features

• responsive (one major breakpoint, two minor breakpoints)
• CSS organiation (page-specific, project-specific, and core styles)
• minimal JavaScript (only used to close description on small screen)

Caveats

• The CSS organization makes assumptions about what is shared between instances and projects.
• This is not a component (native web component, React component, etc)

Notes

The naming and structure inside assets/core/ and assets/project/ mirror those of taccsite_cms/ and taccsite_custom/ respectively in repo cms-site-template.

Known Usages

• https://texascale.org/2019/visualizing-science/whats-in-a-node
• https://texascale.org/2020/visualizing-science/frontera-secret-sauce/
• http://wbomar-tacc-gl-19.surge.sh