Legacies of War, MIC

Interactive educational app about impact of the Secret War in Laos.

https://legaciesmx.netlify.com/

Overview Tasks

• Remove all old files, redo for redesign and responsive layouts
• Flexbox CSS (no libraries)
• Fix sticky footer issue
• Fix responsive menu (medium and large viewport)
• Menu convert to mobile version
• Change out State names on map to text version instead of <path>
• Convert map data to JSON instead later
• Wants to change the Lao Diaspora data pop-up on event to transition in at a consistant section/component
• Pop-up for video (resources: https://codepen.io/imprakash/pen/GgNMXO, https://jsfiddle.net/carmijoon/pZbkX/, https://codepen.io/jorgereyes/pen/XKPayW?fbclid=IwAR0klMvBv_6aBilPuTm0hu_MyuswOfSMtPnJoVc4uJic_hniCUS21eL1BDI)
• Waiting on video team to send MP4 files of video shorts

Home Page

• Header container (logo and credits button)

• Content container (title subtitle)

• Home Menu container (5 items)

• Home Menu item (round image)

• Home Menu item (content)

• Home Menu item (rectangle background)

• Small Media Query

• Medium Media Query

• Large Media Query

Oral Stories

• Header container (title subtitle)

• Media container (flex wrap)

• Media card (two per row)

• Media card (image and content)

• Menu Bar

• Menu Bar (highlight on hover)

• Active on Click

• Media card (play button)

• Add videos (waiting on video team to send MP4)

• Small Media Query

• Medium Media Query

• Large Media Query

Everday Dangers

• Header container (title subtitle)

• Media container (flex wrap)

• Media card (two per row)

• Media card (image and content)

• Menu Bar

• Menu Bar (highlight on hover)

• Active on Click

• Media card (play button)

• Add videos (waiting on video team to send MP4)

• Small Media Query

• Medium Media Query

• Large Media Query

Military Operations

• Header container (title subtitle)

• Media container (flex wrap)

• Media card (two per row)

• Media card (image and content)

• Media card (add margin-top to push media card to bottom)

• Menu Bar

• Menu Bar (highlight on hover)

• Active on Click

• Media card (play button)

• Add videos (waiting on video team to send MP4)

• Small Media Query

• Medium Media Query

• Large Media Query

Lao Diaspora

• Header container (title subtitle)

• Map container (flex wrap)

• Menu Bar

• Menu Bar (highlight on hover)

• Active on Click

• SVG US Map

• Info Box (pop-up on hover, State and Population)

• Responsive SVG Map (hover for data)

• Add State names on the SVG map

• Test responsiveness of map on mobiles devices (Google Chrome DevTools simulator)

• Add for mobile, touch off map to clear State name

• Add sound on clicks/hover to map

• Small Media Query

• Medium Media Query

• Large Media Query

UXO Removal

• Header container (title subtitle)

• Media container (flex wrap)

• Media card (two per row)

• Media card (image and content)

• Media card (add margin-top to push media card to a bit)

• Media card (clear card)

• Menu Bar

• Menu Bar (highlight on hover)

• Active on Click

• Media card (play button)

• Add videos (waiting on video team to send MP4)

• Small Media Query

• Medium Media Query

• Large Media Query

Credits

• Header container (title subtitle)

• Menu Bar

• Menu Bar (highlight on hover, the whole block)

• Active on Click

• Small Media Query

• Medium Media Query

• Large Media Query