I need to make a RWD, scalable and zoomableLike this , [login to view URL],[login to view URL]
I need it for Both (Desktop + Mobile)
If you take a look at [login to view URL] you will see how it should look like in desktop version.
- left side and right side are fixed - they are not scrollable themselves.
- left and right temperature legends should display temperature next to "Graph" module. There are five temperatures and they should be displayed in 10%, 30%, 50%, 70% and 90% of the height of "Graph" module.
- Graph module can change its height - left and right temperature legends should adjust automatically.
- Middle column (months, calendar, graph, days, signs in rows) will be scrollable horizontally as it is now.
- there must be at least 36 days shown in middle columns. If there will be more (eg. 50) it will be scrollable horizontally (all modules in middle scrolls at the same time).
- desktop version can be zoomed. it means there might be container for widget with "zoom" CSS property - it has to zoom properly for whole widget!
- for mobile version please take a look at [login to view URL]
- There won't be left and right panels.
- Temperatures (without word "Temperature") will be shown over the canvas object. They won't be scrollable horizontally. Must be in the same position all the time.
- We need to display 36 days at mobile. To do that we need to zoom it automatically to display width. If there are more than 36 days it should be scrollable horizontally. To zoom it please use css "zoom" property. Unless you have other suggestion.
- widget should switch between desktop and mobile version automatically. Please base on current version.
Please remember all modules should be easy to modify width and height.
We do not need to implement canvases (for graph) and png (for signs). All we need is a widget with perfectly constructed, flexible modules. You can use SASS or LESS, but not required.