Interface overhaul

[fedezubo]

Overall page needs a rework

[fedezubo]

Relocate annotation elements to not be so far down the page, should be front and centre for using. Possibly relocate the login and element load toolbox to smaller size at top or bottom of screen since that is not used as much during the annotations.

Make Page Turn and Zoom Bottoms much more visible on smaller screens. Makes sense if they are on massive monitor, elements get jumbled on smaller screens. Possible to add visual cue to show where these tools are on the page

[fedezubo]

[alastair]

We had a discussion about this in more detail. We think that the following steps would be useful:

Use bootstrap to create a top nav bar with the logo and login/logout button

When a user logs in, show only input boxes to enter a URL, choose an example, or search the CE

When the user selects an item, hide the input boxes. Include a [New] button in the menu bar that allows the user to start again. Use react router for this.

When a score is loaded, give the user 2 options: Annotate, or use F-tempo. When an option is selected show the tools only for the specific operation that the user selected.

Continue with the layout of the score on the right and tools on the left.

Configure the score to stay in place even if the tools scroll

[alastair]

Most of this workflow was done in 7764397 and a9da832

Still remaining is to add the score and main annotation interface to a react grid in order to make it easier to deal scrolling, and the selection of annotate/use f-tempo