change ui

examples/csv.html

@@ -148,16 +148,13 @@
             }
 
             #container {
-                position: absolute;
-                bottom: 0;
-                right: 0;
-                left: 0;
                 height: 50px;
                 background: rgba(0, 0, 0, .8);
-                z-index: 1000;
                 width: 100%;
                 overflow: hidden;
                 border-top: 1px solid #000;
+                font-family: Arial, Helvetica;
+                font-size: 12px;
             }
              #container * {
                 box-sizing: border-box;
@@ -171,22 +168,32 @@
             }
             #container li {
                 list-style-type: none;
-                display: inline-block;
-                vertical-align: middle;
+                float: left;
                 margin: 0;
-                margin-left: -4px;
             }
             .container-filter {
-                width: 15%;
+                width: 20%;
                 height: 50px;
                 padding: 0;
             }
             .container-action {
-                width: 15%;
+                width: 20%;
                 padding: 0;
+                float: right;
+                text-align: center;
+            }
+            .container-action a {
+                color: #fff;
+                text-decoration: none;
+                line-height: 47px;
+            }
+            .container-action img {
+                display: inline-block;
+                vertical-align: middle;
+                margin-left: 8px;
             }
             .container-timeline {
-                width: 70%;
+                width: 60%;
                 padding: 10px 20px 0 20px;
                 height: 50px;
                 border-left: 1px solid rgba(255, 255, 255, .2);
@@ -221,6 +228,7 @@
         </style>
         <input type="file" id="files" name="files" />
         <div id="map">
+        </div>
 
         <div id="container">
             <ul>
@@ -237,25 +245,13 @@
                     </div>
                 </li>
                 <li class="container-action">
-                        <p class="ButtonAction"><a href="#">Analyze your data</a></p>
+                    <a href="#">
+                        <span>Analyze your data</span>
+                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAclJREFUSA3VlzFLA0EQhe80BC2sRNDSLp2dIApaCVb+BC1tbBQrW4vUIthKWsHCSrESLUQsRdBCsDBJYUARC0E9vwm33uVyyc1uSIIDj5mdnZmX3Z3sJl4QBHlQBGXQbREO4cp7odFtwmT9oo+n7HneBOilVIQ46CWj4RowRq/1vyU+YaemwIP1jiXbzWJ8RuygEKLXLfLqoZ00V8H3/fuQeAT9DESrxPaMf6h6DE4NqbBgv6MOxNaKDfE5RWWVy+irFII9fC8p/nSX8mwOicuZCthLYMiM4xr/BsgUaYwseSWg6ezwjQM/Tio2vhy4Bm1Fs9U34Rk2cOCrgqZbD98XgfsNwSkDDfFbSl6W6y4rQEOsb5iIbSwy0y0N8QqHtZqe3tI723LGTLTtgGjyE3PR5CQ1c3JzLYgfPQwyf1RoViz18uCIgjMyiAu+bcaTYC7076Cz33cSbaRGcCEkkNVtgTVwCUbBJlCJy139CLG8SB+gBuS+vgDzYBqoxIVYCsv39BbsgvoLhbYS7Rkni8oqq+A7OaEd/92/2oQw7gktj780nZO4brUTWTzJdavjNZzsvhJXnD5yZ0kVWXGpsxpO2SW5ffryp+0XLlaMejDd+O4AAAAASUVORK5CYII="/>
+                    </a>
                 </li>
         </div>
 
-<!--
-            <div id="control"><span class="play"></span></div>
-            <div id="filter">
-                <p>Filter zone</p>
-                <input type="checkbox" class="toogle" name="foo" value="foo">
-             </div>
-            <div id="timeline">
-                <div class="timeline-inner">
-                    <div class="timeline-progress" style="width: 50%;">
-                        <span></span>
-                    </div>
-                </div>
-            </div>-->
-        </div>
-
         <script src="vendor/leaflet.js"></script>
         <script src="vendor/papaparse.min.js"></script>
         <script src="../dist/torque.full.uncompressed.js"></script>