diff options
author | Freeyorp <TheFreeYorp@NOSPAM.G.m.a.i.l.replace> | 2013-05-13 14:42:36 +1200 |
---|---|---|
committer | Freeyorp <TheFreeYorp@NOSPAM.G.m.a.i.l.replace> | 2013-05-13 14:42:36 +1200 |
commit | 66efae1c6e6fe734a347deaef46d3c2565dfe299 (patch) | |
tree | 5c4003e0cb6300fe3f607f8afd8a34fbd64b7f7d | |
parent | d1f3b6fa180d19e857e515a3b31840d6ee43ac09 (diff) | |
download | manavis-66efae1c6e6fe734a347deaef46d3c2565dfe299.tar.gz manavis-66efae1c6e6fe734a347deaef46d3c2565dfe299.tar.bz2 manavis-66efae1c6e6fe734a347deaef46d3c2565dfe299.tar.xz manavis-66efae1c6e6fe734a347deaef46d3c2565dfe299.zip |
Faint backgrounds for each column
Also push vis-hide structure up to contain the columns, rather than each
column having its own vis-hide div
-rw-r--r-- | public/css/style.css | 15 | ||||
-rw-r--r-- | public/index.html | 28 |
2 files changed, 25 insertions, 18 deletions
diff --git a/public/css/style.css b/public/css/style.css index aa66979..de58b3b 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,5 +1,7 @@ /* Ensure sane defaults */ - +html, body, #vis, #main, .side { + height: 100%; +} body { padding: 0; margin: 0; @@ -8,6 +10,7 @@ body { /* Top-level layout */ .side { float: right; + border-left: 1px solid lightgray; } #main { overflow: hidden; @@ -53,6 +56,16 @@ body { font-size: smaller; } +.col1 { + background-color: #fdf9ff; +} +.col2 { + background-color: #fdfdff; +} +.col3 { + background-color: #fffdfb; +} + /* Titles */ h3 { margin: 0.3em 0.8em; diff --git a/public/index.html b/public/index.html index 6ec4cf8..e27c0e6 100644 --- a/public/index.html +++ b/public/index.html @@ -5,8 +5,8 @@ <link rel="stylesheet" type="text/css" href="js/dc/test/dc.css" /> <body onload="mv.init();"> - <div class="side med"> - <div class="vis-hide"> + <div id="vis" class="vis-hide"> + <div class="side med col3"> <div id="connect-status"> <h3>Users</h3> <ul id="users-status"></ul> @@ -18,9 +18,7 @@ <h3>Instance breakdown by Stat allocation</h3> </div> </div> - </div> - <div class="side thin"> - <div class="vis-hide"> + <div class="side thin col2"> <div id="target-chart"> <h3>Instance breakdown by Target <a class="reset" style="display: none;" href="javascript:mv.charts.target.filterAll();dc.redrawAll();">clear</a></h3> </div> @@ -31,18 +29,14 @@ <h3>Instance breakdown by Type <a class="reset" style="display: none;" href="javascript:mv.charts.type.filterAll();dc.redrawAll();">clear</a></h3> </div> </div> - </div> - <div id="main"> -<!-- <div id="status"> - Manavis - TODO: Load icons et al for when new records need loading? - </div>--> - <div class="vis-hide"> - <div id="map-chart"> - <h3>Breakdown by Map <span class="help" title="Bubble size indicates instances of experience gain for that map. X axis position indicates the sum of level experience gain for that map. Y axis position indicates the sum of job experience gain for that map.">[?]</span> <a class="reset" style="display: none;" href="javascript:mv.charts.map.filterAll();dc.redrawAll();">clear</a></h3> - </div> - <div id="date-chart"> - <h3>Instance breakdown by Date <a class="reset" style="display: none;" href="javascript:mv.charts.date.filterAll();dc.redrawAll();">clear</a></h3> + <div id="main" class="col1"> + <div class="vis-hide"> + <div id="map-chart"> + <h3>Breakdown by Map <span class="help" title="Bubble size indicates instances of experience gain for that map. X axis position indicates the sum of level experience gain for that map. Y axis position indicates the sum of job experience gain for that map.">[?]</span> <a class="reset" style="display: none;" href="javascript:mv.charts.map.filterAll();dc.redrawAll();">clear</a></h3> + </div> + <div id="date-chart"> + <h3>Instance breakdown by Date <a class="reset" style="display: none;" href="javascript:mv.charts.date.filterAll();dc.redrawAll();">clear</a></h3> + </div> </div> </div> </div> |