Skip to content

GeoInt_SIDT
GeoInt_SIDT
Commit a363db4e authored by Sergio Adrian Gongora Euan's avatar Sergio Adrian Gongora Euan
Browse files
Options

update of the guide interactive

parent 4562eac7
Hide whitespace changes
Inline Side-by-side
Showing with 88 additions and 55 deletions
catalog/static/catalog/css/body.css
View file @ a363db4e
...@@ -438,4 +438,13 @@ div .sidebar-input input[type="text"] { ...@@ -438,4 +438,13 @@ div .sidebar-input input[type="text"] {
} }
.control-sidebar-open{ .control-sidebar-open{
right: 0px !important; right: 0px !important;
}
.activateMainSideBar{
z-index: 99997;
position: absolute;
}
.activateMainHeader{
z-index: 99997;
} }
\ No newline at end of file
catalog/templates/base_top.html
View file @ a363db4e
...@@ -232,43 +232,8 @@ ...@@ -232,43 +232,8 @@
</div> </div>
{% endif %} {% endif %}
<script> {% block guide %}
$('#initGuide').guides({ {% endblock %}
guides: [{
element: $('#searchPolygon'),
html: 'Search Region'
},{
element: $('#searchProcess'),
html: 'Select the search process'
},{
element: $('#searchDate'),
html: 'Select the date to search'
},{
element: $('#searchCloud'),
html: 'Select the percentage of clouds to search'
},{
element: $('#search-btn'),
html: 'search button'
},{
element: $('#panelUser'),
html: 'User Panel',
render: function () {
setTimeout(() => {
$('.guides-left').css('right', '90px');
});
}
}, {
element: $('#panelShowCart'),
html: 'Show Cart',
render: function () {
setTimeout(() => {
$('.guides-left').css('right', '40px');
});
}
}
]
});
</script>
</body> </body>
</html> </html>
catalog/templates/map.html
View file @ a363db4e
...@@ -171,34 +171,21 @@ ...@@ -171,34 +171,21 @@
<li>{{ searchForm.end }}</li> <li>{{ searchForm.end }}</li>
</ul> </ul>
</li> </li>
<li class="treeview {% if advanced_search == False %} hidden {% endif %} ">
<a href="#">
<i class="fa fa-map"></i>
<span>Polygon</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
<ul class="treeview-menu sidebar-form">
<li>{{ searchForm.polygon }}</li>
</ul>
</li>
<li class="cloudTreeview treeview" id="searchCloud"> <li class="cloudTreeview treeview" id="searchCloud">
<a href="#"> <a href="#">
<i class="fa fa-cloud"></i> <i class="fa fa-cloud"></i>
<span>Cloud percentage</span> <span>Cloud percentage</span>
<span class="pull-right-container"> <span class="pull-right-container">
<span class="label label-primary pull-right"></span> <span class="label label-primary pull-right"></span>
</span> </span>
</a> </a>
<ul class="treeview-menu sidebar-form"> <ul class="treeview-menu sidebar-form">
<li> <li>
<div class="row"> <div class="row">
<div class="col-lg-9" style="padding-top: 5px;"> <div class="col-lg-9" style="padding-top: 5px;">
<input class="cross-range" type="range" min="0" max="100" step="1" value="5" <input class="cross-range" type="range" min="0" max="100" step="1" value="5"
oninput="setCloudPercentage(this.value)" oninput="setCloudPercentage(this.value)"
id="cloudPercentageSelector" name="cloudPercentage"> id="cloudPercentageSelector" name="cloudPercentage">
</div> </div>
<div class="col-lg-3" style="padding-left:0px;padding-top: 5px;"> <div class="col-lg-3" style="padding-left:0px;padding-top: 5px;">
<!-- <input class="form-text" id="clouds" value="5" oninput="setCloudPercentageSlider(this.value)" name="cloudPercentage" disabled> --> <!-- <input class="form-text" id="clouds" value="5" oninput="setCloudPercentageSlider(this.value)" name="cloudPercentage" disabled> -->
...@@ -208,6 +195,18 @@ ...@@ -208,6 +195,18 @@
</li> </li>
</ul> </ul>
</li> </li>
<li class="treeview {% if advanced_search == False %} hidden {% endif %} " id="searchPolygonDrawn">
<a href="#">
<i class="fa fa-map"></i>
<span>Polygon</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
<ul class="treeview-menu sidebar-form">
<li>{{ searchForm.polygon }}</li>
</ul>
</li>
<li> <li>
<a href="#"> <a href="#">
<div class="modal"><!-- Place at bottom of page --></div> <div class="modal"><!-- Place at bottom of page --></div>
...@@ -384,3 +383,63 @@ ...@@ -384,3 +383,63 @@
}); });
</script> </script>
{% endblock %} {% endblock %}
{% block guide %}
<script>
$('#initGuide').guides({
guides: [
{
element: $('#searchPolygon'),
html: 'Search Region',
render: function (params) {
setTimeout(() => {
$('.main-sidebar').addClass('activateMainSideBar');
});
}
}, {
element: $('#searchProcess'),
html: 'Select the search process',
}, {
element: $('#searchDate'),
html: 'Select the date to search'
}, {
element: $('#searchCloud'),
html: 'Select the percentage of clouds to search'
}
{% if advanced_search == True %} , {
element: $('#searchPolygonDrawn'),
html: 'Polygon to search'
}
{% endif %}
, {
element: $('#search-btn'),
html: 'search button'
}, {
element: $('#panelUser'),
html: 'User Panel',
render: function () {
setTimeout(() => {
$('.main-sidebar').removeClass('activateMainSideBar');
$('.main-header').addClass('activateMainHeader');
$('.guides-left').css('top', '40px');
$('.guides-left').css('right', '90px');
});
}
}, {
element: $('#panelShowCart'),
html: 'Show Cart',
render: function () {
setTimeout(() => {
$('.guides-left').css('top', '40px');
$('.guides-left').css('right', '40px');
});
},
}
],
end: function () {
console.log("Finished")
$('.main-header').removeClass('activateMainHeader');
}
});
</script>
{% endblock %}
\ No newline at end of file
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