search

genouest / biomaj-watcher

Web interface for Biomaj management
1 stars 4 forks source link

Adding page-specific shading (to indicate which tab you're in) #10

Closed markiskander closed 8 years ago

markiskander commented 8 years ago

Hey guys,

I worked a bit on adding shading to the buttons to indicate which page you're on. This involved making edits to index.html in order to add classes to each of the pages, and then edits to biomaj.js in order to actually process and manipulate the color/backgroundColor of the buttons depending on the current page.

So, say you just open Biomaj-Watcher. The banner at the top looks like: screenshot from 2015-09-10 08 15 03

If you press on Banks, it opens the page and highlights the button: screenshot from 2015-09-10 08 24 06

Stats: screenshot from 2015-09-10 08 24 15

Schedule: screenshot from 2015-09-10 08 24 25

About: screenshot from 2015-09-10 08 24 31

Originally, Biomaj-Watcher has a similar effect when you click on one of the links; it highlights it. But when you press away from it (pressing on things on the page) the button becomes unhighlighted. This script keeps the button highlighted as long as you're in the page, regardless of pressing on other things within that page.

Hope you guys like the style and if you have any questions/suggestions please let me know.

Thanks, Mark

osallou commented 8 years ago

Please make pull requests againts develop branch, not master. I have put some comments in https://github.com/genouest/biomaj-watcher/pull/10/files.