This is just some reorganization of css. Don't worry about making the UI perfect-- we'll spend some time on re-doing the UI in Sprint 4. This is more technical refactoring to make the code easier to read and update later.
In general, you use markup for the content of a page, css for the layout, and javascript for interactivity. You don't have to be perfectly pure in this regard, but we can do a lot to simplify.
css selectors let you do some pretty nice stuff. Rather than having lots of javascript determining when to show and hide various plot elements, we can set a class on the plot and have css rules automatically applied. Here's a codepen of one solution like this in action: http://codepen.io/phblj/pen/PpzZpd. Then when you introduce a new element in a plot, you give it a class for each "phase" it should show up in. Elements can have more than one class, so it's easy to have one show up at multiple times. Then, when a plot changes "phases" (say, going from empty to planted) you just change the class of the plot and everything automatically works.
The tutorial's flashing borders require setting a few styles to begin and remove. You should group them in a class, and just add/remove that class from the elements you want to have a flashing border.
In the tutorial, the tooltip is added dynamically via javascript and then hidden later to turn it off. These are two different strategies, and we should pick one and go with it:
render the tooltip in HTML then show/hide it via a class change in javascript
-or-
create and add the tooltip using javascript, then remove it entirely when we're done showing it
Comments are allowed in CSS! We've got some logical groups in there-- separate out the plot styling vs menu styling vs tutorial code vs flash code. Make sure you know what everything in there does, and remove anything we don't need any more.
This is just some reorganization of css. Don't worry about making the UI perfect-- we'll spend some time on re-doing the UI in Sprint 4. This is more technical refactoring to make the code easier to read and update later.
In general, you use markup for the content of a page, css for the layout, and javascript for interactivity. You don't have to be perfectly pure in this regard, but we can do a lot to simplify.
css selectors let you do some pretty nice stuff. Rather than having lots of javascript determining when to show and hide various plot elements, we can set a class on the plot and have css rules automatically applied. Here's a codepen of one solution like this in action: http://codepen.io/phblj/pen/PpzZpd. Then when you introduce a new element in a plot, you give it a class for each "phase" it should show up in. Elements can have more than one class, so it's easy to have one show up at multiple times. Then, when a plot changes "phases" (say, going from empty to planted) you just change the class of the plot and everything automatically works.
The tutorial's flashing borders require setting a few styles to begin and remove. You should group them in a class, and just add/remove that class from the elements you want to have a flashing border.
In the tutorial, the tooltip is added dynamically via javascript and then hidden later to turn it off. These are two different strategies, and we should pick one and go with it:
Comments are allowed in CSS! We've got some logical groups in there-- separate out the plot styling vs menu styling vs tutorial code vs flash code. Make sure you know what everything in there does, and remove anything we don't need any more.