Adding themes (and other vis improvements) #49
Conversation
This should simplify some of the duplication involved in specifying colours and implementing themes.
The code in the sniper examples expects d3 and jQuery to be available. This makes the locally installed versions available. There might be better alternatives but this seems better than it not working at all.
This seems to plot the 'stroke', then separately plot the 'fill'. The duplication doesn't seem necessary and the result is confusing on mouseovers, etc. This change combines the CSS classes to achieve a similar style. Also, this changes the interpolation from linear to step since that seems more appropriate for discrete data points?
there was some inconsistency in how the left column (categories) and the main column (header and features) were applied. It meant that the column edges didn't line up perfectly. This simplifies things by using a 'leftpanel' and 'mainpanel' container, the margins of which are only specified in a single place in the CSS. Also, the contents should now be able to happily fill up to 100% width of the container which may help when attempting to allow flexibility in changing the width.
This is a pretty big commit (sorry) - overview: - make the trapezoid look nicer (curved edges) - make the zoom handles more obviously handle-like - move the domain labels to either side of the handles - tidy up stage margins and padding
|
Hi Ian, Many thanks for your work, adding a CSS pre-processor to manage colour variables is something we have been meaning to do for a long time! We especially like the new look of the zoom scale, which looks clearer than the current one. We are planning on moving to web components in the future, and the use of the shadow DOM will make theming easier, but that's still in early planning stages. @ljgarcia also told me you have been talking to her about responsiveness, again this is something we'd like to build into the next "web component-ised" version, maybe we could have a chat about this at some point? I pushed some changes for the buttons look & feel to master yesterday (a few hours before your PR). The current position (right above the categories) has tested well with users so if you don't mind I would like to merge these changes with yours while reviewing your code. All the best, |
|
No problem - happy to contribute. Re #48 - yup. I think it makes sense to try and allow this to respond to different screen widths and page setups. This was one of the reasons why I made sure each component exists in either the 'left' or 'main' panels. The fewer places the width and margin are specified, the easier it should be to change it. Also helps with consistency on how everything lines up. I noticed that conflict last night - didn't look like a problem to resolve, but didn't have time to merge and test changes. You're very welcome to merge in any changes you want. Best, Ian PS Happy to be involved in any dev discussions. I'm about to organise a Skype call with Claire and Maria for next week (CATH / UniProt) - could try and do that at the same time or separately depending on who needs to be involved. |
This was originally meant to just be adding a CSS theme, however it ended up being a bit more extensive. I've separated the changes out into individual commits as best as I could.
Overview:
Example screenshot (from the sniper example):