change ui

This commit is contained in:
Emilio García 2015-09-03 12:32:34 +02:00
parent 859c8c62f4
commit fd426fb1f1

View File

@ -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,39 +228,28 @@
</style>
<input type="file" id="files" name="files" />
<div id="map">
</div>
<div id="container">
<ul>
<li class="container-filter" id="filter">
<p>Filter zone</p>
<input type="checkbox" class="toogle" name="foo" value="foo">
</li>
<li class="container-timeline">
<div id="control"><span class="play"></span></div>
<div class="timeline-inner">
<div class="timeline-progress" style="width: 50%;">
<span></span>
</div>
<div id="container">
<ul>
<li class="container-filter" id="filter">
<p>Filter zone</p>
<input type="checkbox" class="toogle" name="foo" value="foo">
</li>
<li class="container-timeline">
<div id="control"><span class="play"></span></div>
<div class="timeline-inner">
<div class="timeline-progress" style="width: 50%;">
<span></span>
</div>
</li>
<li class="container-action">
<p class="ButtonAction"><a href="#">Analyze your data</a></p>
</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>-->
</li>
<li class="container-action">
<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>
<script src="vendor/leaflet.js"></script>