search

bcgov / smk-legacy-ui

Legacy Admin UI for the SMK has been de-supported. Please see the CLI under https://github.com/bcgov/smk for an alternative.
Apache License 2.0
8 stars 3 forks source link

Horizontal UI and Icons #68

Open cpspicer opened 6 years ago

cpspicer commented 6 years ago

Revamp the existing vertical tool UI to a clean horizontal feel with modern icons, akin to https://governmentofbc.maps.arcgis.com/home/webmap/viewer.html?webmap=3c5fb88b7f3f4d97974615acad67af3e

Can integrate the Geocoder search in this UI.

All icons need to be redesigned - for example, hamburger icon is not akin to a welcome page - users expect a menu in many other UIs.

Can draw inspiration from Google Maps, ArcGis Online, DMF and others while eliminating any GIS look/feel.

Also consider moving / doing something with the identify tools (create a new tool master set with these tools as subset options?)

Layers list 'eye' icon needs to be aligned with the layer name, while long names need to be truncated with ...

NicoledeGreef commented 6 years ago

DataBC to follow up/provide guidance. Vivid to make wire frame mockups. The whole team to hold JAD session.

cboreen commented 6 years ago

@cpspicer @NicoledeGreef We have put together some ideas in Balsamiq that we can throw darts at:

Blue Bar https://balsamiq.cloud/sfdw83l/popsf4d/r2278

Transparent bar https://balsamiq.cloud/sfdw83l/popsf4d/r805F

and Google knockoff https://balsamiq.cloud/sfdw83l/popsf4d/r84E0

cpspicer commented 6 years ago

Let's refine option three. When 'tools' pane is open, default should be the 'About' - it should be structured with:

1) App name on top of 'tool pane' 2) List of tool icons and tool names (tool order and alias display names configurable by author) listed in horizontal rows. 3) 'About' Text should follow below, with ability to imbed links, video etc as per the existing setup now.

Tool icons - Layers tool should look similar to layers icon

Search bar icon should have a box extended around it to integrate it with the search box, as some tool icons may be similar as per search go

Fonts driven through .CSS support as per #17 (pick a reasonable default for now)