Skip to content

GeoInt_SIDT
GeoInt_SIDT
Commit 26bd0834 authored by Ulises Morales Ramírez's avatar Ulises Morales Ramírez
Browse files
Options

inputRange

parent a0b2fc83
Show whitespace changes
Inline Side-by-side
Showing with 113 additions and 18 deletions
reports/static/reports/css/crossrange.css
View file @ 26bd0834
.cross-range { input[type=range] {
height: 6px;
-webkit-appearance: none;
margin: 6px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 14px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #50555C;
background: #50555C;
border-radius: 14px;
border: 0px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0px 0px 0px #000000;
border: 0px solid #000000;
height: 20px;
width: 40px;
border-radius: 12px;
background: #dc7828;
cursor: pointer;
-webkit-appearance: none;
margin-top: -3px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #50555C;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 14px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #50555C;
background: #50555C;
border-radius: 14px;
border: 0px solid #000000;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000;
border: 0px solid #000000;
height: 20px;
width: 40px;
border-radius: 12px;
background: #529DE1;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 14px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #50555C;
border: 0px solid #000000;
border-radius: 28px;
box-shadow: 1px 1px 1px #50555C;
}
input[type=range]::-ms-fill-upper {
background: #50555C;
border: 0px solid #000000;
border-radius: 28px;
box-shadow: 1px 1px 1px #50555C;
}
input[type=range]::-ms-thumb {
margin-top: 1px;
box-shadow: 0px 0px 0px #000000;
border: 0px solid #000000;
height: 20px;
width: 40px;
border-radius: 12px;
background: #529DE1;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #50555C;
}
input[type=range]:focus::-ms-fill-upper {
background: #50555C;
}
/*.cross-range {
-webkit-appearance: none; -webkit-appearance: none;
width: 100%; width: 100%;
margin: 4.05px 0; margin: 4.05px 0;
...@@ -89,3 +180,4 @@ ...@@ -89,3 +180,4 @@
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
} }
*/
\ No newline at end of file
reports/templates/sclData.html
View file @ 26bd0834
...@@ -120,11 +120,10 @@ ...@@ -120,11 +120,10 @@
{% block content %} {% block content %}
<!-- Content Wrapper. Contains page content --> <!-- Content Wrapper. Contains page content -->
<!-- Main content --> <!-- Main content -->
<div id="timeLine" class="container floating-panel slidecontainer" <div id="timeLine" class="container col-md-12 floating-panel slidecontainer"
style="position:absolute; display:block; bottom: 40px; left: 12%; width: 500px; z-index: 1000"> style="position:absolute; display:block; bottom: 40px; width: 500px; z-index: 1000">
<div class="range-control" id="rangecontrol"> <div id="set_Range_date" class="col-md-4 pull-right">Date: {{ labels.0|slice:"6:8" }}/{{ labels.0|slice:"4:6" }}/{{ labels.0|slice:"0:4" }}</div>
<div id="rangecontrol2"></div> <div class="range-control col-md-8" id="rangecontrol">
<input class="cross-range" id="inputRange" type="range" min="0" max="{{ labels|length|add:'-1' }}" step="1" <input class="cross-range" id="inputRange" type="range" min="0" max="{{ labels|length|add:'-1' }}" step="1"
value="0" data-thumbwidth="20" style="background: transparent;"> value="0" data-thumbwidth="20" style="background: transparent;">
...@@ -139,10 +138,11 @@ ...@@ -139,10 +138,11 @@
</div> </div>
</div> </div>
<div id="selectLeft" class="container floating-panel" <div id="selectLeft" class="container col-md-12 floating-panel"
style="position:absolute; display:none; bottom: 50px; left: 30%; width: 300px; z-index: 1000"> style="position:absolute; display:none; bottom: 50px; left: 30%; width: 300px; z-index: 1000">
<div class=""> <div id="set_Range_date2" class="col-md-4 pull-left">{{ labels.0|slice:"6:8" }}/{{ labels.0|slice:"4:6" }}/{{ labels.0|slice:"0:4" }}</div>
<div id="rangecontrol3"></div>
<div class="col-md-8">
<!--<select onchange="selectLeft(this.value)" id="selectLeftCompare"> <!--<select onchange="selectLeft(this.value)" id="selectLeftCompare">
{% for label in labels %} {% for label in labels %}
<option value="{{label}}" >{{ label|slice:"6:8" }}/{{ label|slice:"4:6" }}/{{label|slice:"0:4" }}</option> <option value="{{label}}" >{{ label|slice:"6:8" }}/{{ label|slice:"4:6" }}/{{label|slice:"0:4" }}</option>
...@@ -153,10 +153,11 @@ ...@@ -153,10 +153,11 @@
</div> </div>
</div> </div>
<div id="selectRight" class="container floating-panel" <div id="selectRight" class="container col-md-12 floating-panel"
style="position:absolute; display:none; bottom: 50px; left: 75%; width: 300px; z-index: 1000"> style="position:absolute; display:none; bottom: 50px; left: 75%; width: 300px; z-index: 1000">
<div> <div id="set_Range_date3" class="col-md-4 pull-left">{{ labels.0|slice:"6:8" }}/{{ labels.0|slice:"4:6" }}/{{ labels.0|slice:"0:4" }}</div>
<div id="rangecontrol4"></div>
<div class="col-md-8">
<!--<select onchange="selectRight(this.value)" id="selectRightCompare"> <!--<select onchange="selectRight(this.value)" id="selectRightCompare">
{% for label in labels %} {% for label in labels %}
<option value="{{label}}" >{{ label|slice:"6:8" }}/{{ label|slice:"4:6" }}/{{label|slice:"0:4" }}</option> <option value="{{label}}" >{{ label|slice:"6:8" }}/{{ label|slice:"4:6" }}/{{label|slice:"0:4" }}</option>
...@@ -385,7 +386,9 @@ ...@@ -385,7 +386,9 @@
$("#tooltiptext").empty(); $("#tooltiptext").empty();
$("#tooltiptext").append(fecha); $("#tooltiptext").append(fecha);
$("#rangecontrol2").empty(); $("#rangecontrol2").empty();
$("#rangecontrol2").append('<span class="arrow_box" id="tooltiptext">' + fecha + '</span>'); $("#set_Range_date").empty();
//$("#rangecontrol2").append('<span class="arrow_box" id="tooltiptext">' + fecha + '</span>');
$("#set_Range_date").append('Date: '+fecha);
$('.arrow_box').css({'left': Math.round(pixelPostion - 35) + 'px'}) $('.arrow_box').css({'left': Math.round(pixelPostion - 35) + 'px'})
}); });
...@@ -410,8 +413,8 @@ ...@@ -410,8 +413,8 @@
$("#tooltiptext2").empty(); $("#tooltiptext2").empty();
$("#tooltiptext2").append(fecha); $("#tooltiptext2").append(fecha);
$("#rangecontrol3").empty(); $("#set_Range_date2").empty();
$("#rangecontrol3").append('<span class="arrow_box_left" id="tooltiptext2">' + fecha + '</span>'); $("#set_Range_date2").append(fecha);
$('.arrow_box_left').css({'left': Math.round(pixelPostion - 35) + 'px'}) $('.arrow_box_left').css({'left': Math.round(pixelPostion - 35) + 'px'})
}); });
...@@ -437,8 +440,8 @@ ...@@ -437,8 +440,8 @@
$("#tooltiptext3").empty(); $("#tooltiptext3").empty();
$("#tooltiptext3").append(fecha); $("#tooltiptext3").append(fecha);
$("#rangecontrol4").empty(); $("#set_Range_date3").empty();
$("#rangecontrol4").append('<span class="arrow_box_right" id="tooltiptext3">' + fecha + '</span>'); $("#set_Range_date3").append(fecha);
$('.arrow_box_right').css({'left': Math.round(pixelPostion - 35) + 'px'}) $('.arrow_box_right').css({'left': Math.round(pixelPostion - 35) + 'px'})
}); });
</script> </script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment