Restructure Fathom App Markup
Feature Description
We need to restructure the markup in Fathom App to accurately reflect the new designs.
The problem is that the logic can break when the existing hierarchy is changed, e.g. when the assessmentCard element is moved outside of the FilterView element.
Motivation and Context
The current markup structure isn't compatible with the new designs.
Possible Implementation
A simple implementation would be to have a simple hierarchy for our markup from the
tag down.In hierarchical order, this would look like:
-
<body>
tag is the parent of: - "Nav Bar" & "Container" is the parent of:
- "Header" & "Main" is the parent of:
- "Tabs" / "Filter" & "assessmentCard" & "assessmentView"
Here's a color-coded illustration of this hierarchy and how it looks, overlaid on the basic page structure of our design for Fathom:
NB: Colors reflect hierarchy. Two elements of the same color are on the same level of hierarchy. Also this isn't intended as an accurate reflection of the web app layout, it's done purely to illustrate the hierarchy of elements.
-
Enables:
The ongoing implementation of the Fathom designs / styles.