HTML/CSS mockups

[lightandluck]

re: Mozilla Sprint, for a first-timers project, it would be nice to have designers look at the UI mockups and create basic html/css pages for us. They might not be perfectly in line with app needs, but having something to build off of would be great. And having designers make things "prettier" for us is welcome. Also, contributors wouldn't need any knowledge of our tech stack/build system. Html/css files would be fine, so it would be quick to get started and contribute. Mockups can be put in folder in root of repo.

Sketches of UI with annotations

Current demo of UI

Currently we are mainly using bootstrap with some custom styles stolen from archivers. But anyone interested doesn't have to adhere to these systems. If you can make it nicer go for it!

[titaniumbones]

Here's also a link to the current REeact version of the UI

Also:

• web UI tutorial
• design discussion from 2 days ago

[tosfan4ever]

This is the most recent version of the demo:

https://edgi-web-monitor-ui.herokuapp.com/ New URL: https://monitoring-staging.envirodatagov.org

(Edited 2018-07-28 to update URL by @Mr0grog)

[Mr0grog]

And if anybody needs some context for the part about viewing diffs (the two diff links in the demo won’t work for you unless you have special credentials), feel free to check this issue: #68

The idea is that we’d like show diffs sort of like what’s in the screenshots on that issue directly inline.

[lightandluck]

@tosfan4ever's write-up. Thanks for this!

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in seven days if no further activity occurs. If it should not be closed, please comment! Thank you for your contributions.

[Mr0grog]

I want to keep these around as something to work through and consider as we move towards re-activating the annotations UI.