matthiasbock / BooleSim

Systems biology tool: Boolean network simulator
http://matthiasbock.github.io/BooleSim
11 stars 6 forks source link

Optimize menu for small screens #30

Open matthiasbock opened 11 years ago

matthiasbock commented 11 years ago

At 100% zoom the menu width is too large for my notebook screen (1024px).

screenshot - 07102013 - 10 28 01 am

Not really an urgent problem, but if we have some spare time we could design this case more nicely, e.g. inserting a break to a second menu line between "Simulate/Pause" button and "Network" tab and align this second menu line on the left with the "Create" button.

chaitan3 commented 11 years ago

Inserting a break destroys the beauty of the top bar :P. And having a conditional in the js code for smaller screen sizes does not seem like a good design choice.

The bar looks ok for 1024px screen sizes after doing the following 3 things.

  1. Reducing the menu font-size to 14px from 16px.
  2. Chopping off Pause from the "Simulate / Pause" button.
  3. Removing the extra space between Create and Import button.

Do you find any problem with the above points. If yes, we'll have to think of other ways in reducing the width of the content of the top bar.