search

monarch-initiative / phenogrid

The phenogrid widget
13 stars 14 forks source link

refactor layout #111

Closed davism84 closed 9 years ago

davism84 commented 9 years ago

(no right/bottom stuff)

yuanzhou commented 9 years ago

Noted in PR #153 Moved all the phenogrid controls (Organism, Sort Phenotypes, Calculation Method, and flip axis) into the sliding panel.

capture

Further fixed display issues in monarch-app, addressed in PR #154

capture

Will continue to improve the layout design.

yuanzhou commented 9 years ago

More changes made in PR #155

  1. grouped elements in overview map, and put it in the upper left corner
  2. added logo config and moved logo to bottom right
  3. grouped gradient bar and legend texts and moved to bottom, width is calculated based on the gridRegion
  4. dynamically position the control panel (button and options)

capture

after the control button is clicked:

capture

Mike also added the crosshair for cell mouseover. Cool!

Will refine the design of FAQ buttons and make monarch logo clickable.

yuanzhou commented 9 years ago

Tweaked the gradient legend to align all the label texts, and moved monarch logo inside the phenogrid controls, then got rid of the logo on the bottom right, also use the grid region width as the gradient bar width.

capture

yuanzhou commented 9 years ago

Moved the logo outside the control button, further styled the button and popup options. Also moved the FAQ icon next to the top title inside the options panel.

capture

Below is how it looks after you click that options icon:

capture1

yuanzhou commented 9 years ago

Moved the rotated species names to the right. PR #159

capture

yuanzhou commented 9 years ago

Can we close this issue? @harryhoch @davism84

harryhoch commented 9 years ago

I think so.