summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorFreeyorp <TheFreeYorp@NOSPAM.G.m.a.i.l.replace>2013-05-13 14:42:36 +1200
committerFreeyorp <TheFreeYorp@NOSPAM.G.m.a.i.l.replace>2013-05-13 14:42:36 +1200
commit66efae1c6e6fe734a347deaef46d3c2565dfe299 (patch)
tree5c4003e0cb6300fe3f607f8afd8a34fbd64b7f7d
parentd1f3b6fa180d19e857e515a3b31840d6ee43ac09 (diff)
downloadmanavis-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.css15
-rw-r--r--public/index.html28
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>