Monolith final

[timcowlishaw]

First release candidate of the Monolith v1 project! Includes user, device and experiment management, implemented in the rails app.

@pral2a @oscgonfer please review at https://staging-api.smartcitizen.me/ui/, and add any snags here as comments (with screenshots / browser info if applicable). Bear in mind that readings data is patchy on staging, so the graphs might look a little funny.

Important: we have a new deploy.sh script which handles building all the client side assets as well as the usual deployment business. Remember to use this!

[timcowlishaw]

First snag: the "device list" component on the experiment form should be hidden when it contains no devices, otherwise we get this weird black line:

[timcowlishaw]

It'd be good to use SC brand colours in the flatpickr calendar UI, rather than the defaults:

[timcowlishaw]

Add the uptimerobot logo to the footer!

[oscgonfer]

User

User profile picture is a bit big when on mobile:

[oscgonfer]

General

Navigation

All links on the navbar should open on a new tab (except HOME).

I'd remove the "Smart Citizen" from here, as it doesn't link anywhere:

Could the title of the section go near the logo?

It's useful to have this navigation, but I feel it can get very long. Maybe can be reduced or only show the "important" item on the top, and a couple of items after that below if needed? (worth discussing)

A new option could be:

Your profile / Test VOC Kit / Edit

instead of:

Banner area

Make banner area less "black". I feel there is too much "overpowering" presence of the top banner area on the top (user/kit/experiment):

As a reference, in dashboard.smartcitizen.me, there is no navbar, which I think in the monolith should be kept, but that we can leave as the only part that is black. The lower part could be simply white (?)

Buttons

Transitions on buttons (for fading from one color to another) on hover.

Also I'd use some other colors from the palette, like blue or yellow:

Danger areas

I would differentiate "Other actions" with a background in red (as a danger area):

[oscgonfer]

Kit

Banner

Maybe we don't need to say "KIT:" ?

I'll also add a "by: username" before the username, closer to the top (as in the dashboard):

I would only say "Edit kit" or "Edit kit options". Settings may refer more to the configuration of the kit (?) and could be misleading? Currently we only say "Edit kit"

Pop-up with "more info on this kit?"

Show state (new or has_published) and system_tags (online, offline, ?):

Data download

Can data download be handled as a modal to avoid a single page?

New kit

Here it should say version 2.X for consistency with docs and other material. Onboarding should open on "target: blank":

Cards

Could description be on a "collapsible paragraph?"

I'd suggest to rethink a bit of we want to (some for now, some for latter):

• Make cards side by side (on a grid of 2 columns?)
• Show bigger graphs (as in the dashboard.smartcitizen.me)
• Show a toggle for hidding the graph
• Evaluate where the number goes on the latest value
• Link to the new docs on each metric (or have an optional (?) icon?)

Show online/offline more prominently. Maybe link this to a different model later on where state/system_tags are shown.

Only show the user_tags on the new cards, not system or status (in the tag list). Those get shown elsewhere.

Edit kit

Title section could have a different layout to better differentiate ACTION from CONTENT:

Could the update be full width? Or add an explicit "Back" with a different color.

Data section:
Have two section one for privacy, one for researchers? Rename to Data settings?

[oscgonfer]

Experiments

Experiment page

I love this one!

I think this can have (in the future) more insights of the experiments. For now maybe something like: "4 kits out of 5 active on ". In the future, maybe other metrics can be added, or even the health-metrics once we have them. Also add online/offline for each kit?

Similar to the kit, I would only say "Edit Experiment".

I would however change the "readings" section for "data":

In the future, we could also add an option for "download data on this experiment" button, to group all the downloads from one single experiment.

Create

Overall, we need a bit more guidance on what an experiment is and what does each choice means...

What is an experiment?

Creating an experiment could have more verbose explanation of what an experiment is, maybe as a popup/modal or something?

What is an experiment?
An experiment is a new feature that allows you to group devices and make cool things with them! (XXX to explain that devices don't necessarily need to be yours)

Dates

More explanation could be added on what those dates imply. At the moment is just "semantic". Probably we need to rethink a bit what dates mean for experiments as they can be left blank.

Adding kits

On my case, kits dropdown look very linuxy, but I think search could be improved (adding not just the name, but a location, an user, description, and things like that). Multiple selection would be an important feature.

Maybe a future feature, but an easier way to filter kits would be great here and on the search, or in the kits page of a certain user:

[oscgonfer]

Add buttons on

Similar to