Commit 3d628c86 authored by Taisiya Glushko's avatar Taisiya Glushko
Browse files

map 100% height

parent 74c575e7
......@@ -1605,6 +1605,9 @@ $light-font-family: 'Roboto-Light';
padding-left: 0;
padding-right: 0;
}
.informative-h1 {
margin: 0;
}
select.column-changer {
-webkit-appearance: none;
-moz-appearance: none;
......@@ -2193,7 +2196,7 @@ table.accessions {
display: inline-block;
background: #e8e8e8;
font-size: 14px;
padding: 5px 8px 4px;
padding: 6px 8px 4px;
text-transform: uppercase;
border-radius: 0;
color: #006db4;
......@@ -2204,7 +2207,7 @@ table.accessions {
.btn-primary {
text-transform: uppercase;
border-radius: 0;
padding: 5px 8px 4px;
padding: 6px 8px 4px;
font-size: 14px;
}
.terms-table {
......@@ -2703,29 +2706,15 @@ table.accessions {
}
}
}
//map-page
//map page
.map-page {
font-family: $default-font-family;
/*.main-col-header {
padding: 15px 0 5px 0;
.pull-right {
a {
margin-bottom: 10px;
}
}
form {
button {
margin-bottom: 10px;
}
}
.results {
a {
margin-bottom: 10px;
}
}
}*/
.applied-filters {
padding: 15px 0 5px 0;
position: absolute;
top: 0;
right: 15px;
z-index: 2;
a {
border-radius: 0;
}
......@@ -2736,8 +2725,28 @@ table.accessions {
padding: 10px;
}
}
.map-container {
position: relative;
}
#map {
height: 500px;
height: 600px;
}
.filters {
overflow-y: auto;
}
.filters::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
.filters::-webkit-scrollbar
{
width: 6px;
background-color: #F5F5F5;
}
.filters::-webkit-scrollbar-thumb
{
background-color: #bbbbbb;
}
}
//text page
......@@ -4132,6 +4141,7 @@ table.accessions {
.explore-page {
.filters {
width: 100%;
overflow-y: hidden;
}
.main-col-header {
width: 100%;
......
......@@ -48,10 +48,10 @@
<span><spring:message code="data-overview.short"/></span>
</a>
<a class="btn btn-default" href="<c:url value="/explore" />" id="selectArea">
<%--<a class="btn btn-default" href="<c:url value="/explore" />" id="selectArea">
<span class="glyphicon glyphicon-list"></span>
<span><spring:message code="view.accessions"/></span>
</a>
</a>--%>
<form style="display: inline-block" method="post" action="<c:url value="/explore/kml" />">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
......@@ -74,48 +74,6 @@
<div class="col-lg-10 col-md-9 col-sm-9 col-xs-12" id="content-area">
<div class="applied-filters">
<ul class="nav nav-pills ">
<li style="margin-left: 5px" class="active dropdown form-horizontal pull-right">
<a class="dropdown-toggle btn-primary" data-toggle="dropdown" href="#">
<spring:message code="maps.baselayer.list"/>
</a>
<ul class="dropdown-menu">
<li>
<%--<label class="label-map-provider">--%>
<%--<input class="map-provider"--%>
<%--value="mapQuest"--%>
<%--name="provider"--%>
<%--style='margin-right: 10px;margin-left: 5px' type='radio'>MapQuest</label>--%>
<label class="label-map-provider">
<input name="provider" value="openstreetmap" class="map-provider"
style='margin-right: 10px;margin-left: 5px'
type='radio'>Openstreetmap</label>
<label class="label-map-provider">
<input name="provider" value="esriGray" class="map-provider"
style='margin-right: 10px;margin-left: 5px'
type='radio'>ESRI Gray</label>
<label class="label-map-provider">
<input name="provider" value="esriTopo" class="map-provider"
style='margin-right: 10px;margin-left: 5px'
type='radio'>ESRI Topo</label>
</li>
</ul>
</li>
<li class="active dropdown form-horizontal pull-right">
<a id="get-filters" class="btn-primary" href="#">
<spring:message code="savedmaps.list"/>
</a>
<ul id="enabled-filters" class="dropdown-menu"></ul>
</li>
<li style="margin-right: 5px" class="active form-horizontal pull-right" data-toggle="modal"
data-target="#modal-dialog">
<a id="remember-map" class="btn-primary" href="#">
<spring:message code="savedmaps.save"/>
</a>
</li>
</ul>
</div>
<!-- Modal -->
<div class="modal fade" id="modal-dialog" tabindex="-1" role="dialog" aria-labelledby="modal-label"
......@@ -165,6 +123,48 @@
<div class="row map-wrapper">
<div class="map-container">
<div class="applied-filters">
<ul class="nav nav-pills ">
<li style="margin-left: 5px" class="active dropdown form-horizontal pull-right">
<a class="dropdown-toggle btn-primary" data-toggle="dropdown" href="#">
<spring:message code="maps.baselayer.list"/>
</a>
<ul class="dropdown-menu">
<li>
<%--<label class="label-map-provider">--%>
<%--<input class="map-provider"--%>
<%--value="mapQuest"--%>
<%--name="provider"--%>
<%--style='margin-right: 10px;margin-left: 5px' type='radio'>MapQuest</label>--%>
<label class="label-map-provider">
<input name="provider" value="openstreetmap" class="map-provider"
style='margin-right: 10px;margin-left: 5px'
type='radio'>Openstreetmap</label>
<label class="label-map-provider">
<input name="provider" value="esriGray" class="map-provider"
style='margin-right: 10px;margin-left: 5px'
type='radio'>ESRI Gray</label>
<label class="label-map-provider">
<input name="provider" value="esriTopo" class="map-provider"
style='margin-right: 10px;margin-left: 5px'
type='radio'>ESRI Topo</label>
</li>
</ul>
</li>
<li class="active dropdown form-horizontal pull-right">
<a id="get-filters" class="btn-primary" href="#">
<spring:message code="savedmaps.list"/>
</a>
<ul id="enabled-filters" class="dropdown-menu"></ul>
</li>
<li style="margin-right: 5px" class="active form-horizontal pull-right" data-toggle="modal"
data-target="#modal-dialog">
<a id="remember-map" class="btn-primary" href="#">
<spring:message code="savedmaps.save"/>
</a>
</li>
</ul>
</div>
<div id="map" class="gis-map gis-map-square"></div>
</div>
</div>
......@@ -173,12 +173,55 @@
</div>
<content tag="javascript">
<script>
function setHeight(isClosed) {
if ($(window).innerWidth() > 960) {
$('.filters').css('height', 'auto');
console.log('auto');
var windowHeight = $(window).innerHeight();
var offsetMap = $('#map').offset().top;
var offsetFilters = $('.filters').offset().top;
$('#map').css('height', windowHeight - offsetMap, +'px');
if(typeof isClosed == 'undefined'){
isClosed = !$('#collapseFilters').hasClass('in')
}
if($('#collapseFilters').hasClass('in') || !isClosed) {
$('.filters').css('height', windowHeight - offsetFilters, +'px');
console.log('height');
}
}
else {
$(".filters").css('height', 'auto');
$('#map').css('height', 600, +'px');
}
}
$(document).ready(function() {
setHeight();
$(window).resize(function() {
setHeight();
});
$(document).on('click', 'a[href*=#collapseFilters]', function() {
$(this).toggleClass('closed');
setHeight($(this).hasClass('closed'));
});
});
</script>
<script type="text/javascript">
var jsonData = ${jsonFilter};
localStorage.setItem("historyStep", 1);
var mapProviders = getMapProviders();
var cookieUtils = getCookieUtils();
var map = L.map('map').setView([20, 0], 2);
var map = L.map('map').setView([30, 0], 3);
var layer = null;
$(document).ready(function () {
......
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