Adjust loading screen layout

This should make the distinction between loading own files and using the
latest dataset clearer.

The equal height psuedo-columns could be applicable to the chart columns too.

Generic column layout based on:
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/demo/backgrounds.html

2 files changed, 79 insertions, 16 deletions

diff --git a/public/css/style.css b/public/css/style.css
index cb3ee03..cf418eb 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -44,6 +44,36 @@ body {
 
 /* Columns */
 
+/* General column utility */
+.column-container {
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+}
+.column-container > div {
+  position: relative;
+  float: left;
+}
+
+/* Separators between columns */
+.column-container-separated > div:first-child:before, .column-container-separated > div:first-child:after {
+  content: "";
+  display: block;
+  position: absolute;
+  z-index: 1;
+  top: 0; bottom: -800%; left:-6%;
+  width: 2px;
+  border: 1px solid #555;
+  border-width: 0 1px;
+  margin: 0 0 0 -2px;
+  background: #fff;
+}
+.column-container-separated > div:first-child:after {
+  left: auto; right: -6%;
+  margin: 0 -2px 0 0;
+}
+
+/* Top-level column widths */
 .med {
   width: 400px;
 }
@@ -74,6 +104,31 @@ h3 {
   padding: 20px;
 }
 
+#loadinfo-online-desc {
+  border:1px solid gray;
+  border-width: 0 0 1px 0;
+  padding: 1em;
+}
+
+/* Loadinfo columns */
+.loader-column-container {
+  background: rgb(226, 235, 253);
+}
+.loader-column-container:after {
+  content:"";
+  display:block;
+  position:absolute;
+  z-index:-1;
+  top:0; right:0; bottom:0;
+  left:50%;
+  background: rgb(247, 250, 193);
+}
+
+.loader-column-container > div {
+  width: 45%;
+  margin: 0 2.5% 1em 2.5%;
+}
+
 /* Hide charts while loadinfo is shown */
 
 .vis-hide {
diff --git a/public/index.html b/public/index.html
index f51f8b7..68c53b9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -63,23 +63,31 @@
     <div id="loadinfo" class="fader">
       <h1>Manavis</h1>
       <p>Manavis shows experience gain from combat logs generated by The Mana World's server, tmwAthena.<p>
-      <p>Manavis can operate in two modes, offline and online, depending on the selection of the checkbox below.</p>
-      <p>While offline, you can still analyse everything yourself as you would normally.</p>
-      <p>
-        In online mode, active filters are made public, similar to multiplayer notepad or etherpad. This can help others understand manavis and the logs, and could be used to improve manavis and the game.
-      </p>
-      <input id="connect-option" name="connect" type="checkbox" checked></input>
-      <label for="connect">Online mode</label>
-      <h2>Select records to load and display</h2>
-      <p>Manavis will need records on your local file system. These files can be quite large, so the browser's local storage isn't sufficient. :)</p>
-      <p>Both raw server logs (.log) and scrubbed datasets (.scrubbed) will work fine. If using the latter, make sure it has .scrubbed in the file name!</p>
-      <p>You can load any number of files at once.</p>
-      <p>Please note that this is very js intensive. The tab may briefly lock up as it loads everything.</p>
-      <div>
-        <input type="file" id="input" name="records[]" multiple disabled />
-        <output id="list"></output>
-        or <a id="latest-link" href="javascript:mv.loader.use(['/logs/map.scrubbed.latest.zip']);" class="button disabled-button">Use the most recent dataset</a>
+      <div id="loadinfo-online-desc">
+        <h3>Online mode</h3>
+        <p>Manavis can operate in two modes, offline and online, depending on the selection of the checkbox below.</p>
+        <p>While offline, you can still analyse everything yourself as you would normally.</p>
+        <p>
+          In online mode, active filters are made public, similar to multiplayer notepad or etherpad. This can help others understand manavis and the logs, and could be used to improve manavis and the game.
+        </p>
+        <input id="connect-option" name="connect" type="checkbox" checked></input>
+        <label for="connect">Online mode</label>
       </div>
+      <div class="column-container column-container-separated loader-column-container">
+        <div>
+          <h2>Select your own dataset(s)</h2>
+          <p>Manavis will need records on your local file system.</p>
+          <p>Both raw server logs (.log) and scrubbed datasets (.scrubbed) will work fine. If using the latter, make sure it has .scrubbed in the file name!</p>
+          <p>You can load any number of files at once.</p>
+          <input type="file" id="input" name="records[]" multiple disabled />
+          <output id="list"></output>
+        </div>
+        <div>
+          <h2>Or use the latest dataset</h2>
+          <a id="latest-link" href="javascript:mv.loader.use(['/logs/map.scrubbed.latest.zip']);" class="button disabled-button">Latest dataset from server</a>
+        </div>
+      </div>
+      <p>Please note that this is very js intensive. The tab may briefly lock up as it loads everything.</p>
       <div id="filesbar" class="progressbar fader">
         <div class="percent">0%</div>
       </div>