Commit ba5b1b3c authored by Matija Obreza's avatar Matija Obreza

Included location filter, i18n corrections

css.jsp
parent b25083b9
......@@ -609,6 +609,7 @@
<include>bootstrap.min.css</include>
<include>jquery-ui.min.css</include>
<include>leaflet.min.css</include>
<include>leaflet.locationfilter.min.css</include>
<include>custom.min.css</include>
<include>responsive.min.css</include>
<include>forza.min.css</include>
......
<%@include file="/WEB-INF/jsp/init.jsp"%>
<c:choose>
<c:when test="${requestContext.theme.name eq 'one'}">
<link href="<c:url value="/html/css/all.min.css" />" rel="stylesheet" />
</c:when>
<c:when test="${requestContext.theme.name eq 'all-min'}">
<link href="<c:url value="/html/css/bootstrap.min.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/jquery-ui.min.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.min.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.locationfilter.min.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/genesys.min.css" />" rel="stylesheet" />
</c:when>
<c:when test="${requestContext.theme.name eq 'all'}">
<link href="<c:url value="/html/css/bootstrap.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/jquery-ui.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.locationfilter.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/genesys.css" />" rel="stylesheet" />
</c:when>
<c:otherwise>
<link href="<c:url value="/html/css/bootstrap.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/jquery-ui.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.locationfilter.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/custom.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/responsive.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/forza.css" />" rel="stylesheet" />
</c:otherwise>
</c:choose>
......@@ -18,31 +18,7 @@
<title><sitemesh:write property="title" /></title>
<!-- Custom styles for this template -->
<c:choose>
<c:when test="${requestContext.theme.name eq 'one'}">
<link href="<c:url value="/html/css/all.min.css" />" rel="stylesheet" />
</c:when>
<c:when test="${requestContext.theme.name eq 'all-min'}">
<link href="<c:url value="/html/css/bootstrap.min.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/jquery-ui.min.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.min.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/genesys.min.css" />" rel="stylesheet" />
</c:when>
<c:when test="${requestContext.theme.name eq 'all'}">
<link href="<c:url value="/html/css/bootstrap.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/jquery-ui.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/genesys.css" />" rel="stylesheet" />
</c:when>
<c:otherwise>
<link href="<c:url value="/html/css/bootstrap.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/jquery-ui.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/custom.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/responsive.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/forza.css" />" rel="stylesheet" />
</c:otherwise>
</c:choose>
<%@include file="css.jsp" %>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
......
......@@ -22,29 +22,7 @@
<title><sitemesh:write property="title" /></title>
<!-- Custom styles for this template -->
<c:choose>
<c:when test="${requestContext.theme.name eq 'one'}">
<link href="<c:url value="/html/css/all.min.css" />" rel="stylesheet" />
</c:when>
<c:when test="${requestContext.theme.name eq 'all-min'}">
<link href="<c:url value="/html/css/bootstrap.min.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/jquery-ui.min.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/genesys.min.css" />" rel="stylesheet" />
</c:when>
<c:when test="${requestContext.theme.name eq 'all'}">
<link href="<c:url value="/html/css/bootstrap.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/jquery-ui.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/genesys.css" />" rel="stylesheet" />
</c:when>
<c:otherwise>
<link href="<c:url value="/html/css/bootstrap.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/jquery-ui.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/custom.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/responsive.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/forza.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.css" />" rel="stylesheet" />
</c:otherwise>
</c:choose>
<%@include file="css.jsp" %>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
......
......@@ -53,16 +53,14 @@
<c:if test="${accessionGeo.latitude ne null}">
<div class="crop-location">
<h3><spring:message code="accession.collecting.site" /></h3>
<div id="map" class="map-container">
<spring:message code="maps.loading-map" />
</div>
<div id="map" class="map-container"></div>
<table class="map-data">
<tr>
<td><spring:message code="filter.lat" />:</td>
<td><spring:message code="filter.latitude" />:</td>
<td><c:out value="${accessionGeo.latitude}" /></td>
</tr><tr>
<td><spring:message code="filter.lon" />:</td>
<td><spring:message code="filter.longitude" />:</td>
<td><c:out value="${accessionGeo.longitude}" /></td>
</tr><tr>
<td><spring:message code="accession.elevation" />:</td>
......@@ -361,13 +359,24 @@
</div>
<content tag="javascript">
<script type="text/javascript">
<c:if test="${accessionGeo ne null and accessionGeo.latitude ne null}">
jQuery(document).ready(function() {
var accessionMap=GoogleMaps.map("${pageContext.response.locale.language}", $("#map"), { center: new GoogleMaps.LatLng(${accessionGeo.latitude}, ${accessionGeo.longitude}), markerTitle: "<spring:escapeBody javaScriptEscape="true">${accession.accessionName}, ${accession.instituteCode}</spring:escapeBody>" });
});
</c:if>
<c:if test="${accessionGeo ne null and accessionGeo.latitude ne null}">
<script type="text/javascript" src="<c:url value="/html/js/leaflet.js" />"></script>
<script type="text/javascript">
L.Icon.Default.imagePath='<c:url value="/html/css/leaflet" />';
jQuery(document).ready(function() {
var map = L.map('map').setView([${accessionGeo.latitude}, ${accessionGeo.longitude}], 5);
L.tileLayer('https://otile{s}-s.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png', {
attribution: "MapQuest",
styleId: 22677,
subdomains: ['1','2','3','4'],
opacity: 0.6
}).addTo(map);
var marker = L.marker([${accessionGeo.latitude}, ${accessionGeo.longitude}]).addTo(map);
});
</script>
</c:if>
<script type="text/javascript">
<%@include file="/WEB-INF/jsp/wiews/ga.jsp"%>
_pageDim = { institute: '${accession.instituteCode}', genus: '${accession.taxonomy.genus}' };
</script>
......
......@@ -14,8 +14,10 @@
<div class="main-col-header">
<a href="javascript: window.history.go(-1);"><spring:message code="navigate.back" /></a>
</div>
<div class="row" style="">
<div class="row">
<a class="" href="<c:url value="/explore" />" id="selectArea">View accessions</a>
</div>
<div class="row">
<div class="col-sm-12">
<div id="map" class="gis-map gis-map-square"></div>
</div>
......@@ -23,6 +25,7 @@
<script type="text/javascript" src="<c:url value="/html/js/leaflet.js" />"></script>
<script type="text/javascript" src="<c:url value="/html/js/leaflet.locationfilter.js" />"></script>
<content tag="javascript">
<script type="text/javascript">
jQuery(document).ready(function() {
......@@ -39,6 +42,32 @@
subdomains: ['1','2','3','4']
}).addTo(map);
//.add(po.image().url("http://a.tile.openstreetmap.org/{Z}/{X}/{Y}.png"))
$("#selectArea").hide();
var filterJson=${jsonFilter};
var locationFilter = new L.LocationFilter().addTo(map);
locationFilter.on("change", function (e) {
// Do something when the bounds change.
// Bounds are available in `e.bounds`.
var bounds=locationFilter.getBounds();
filterJson.latitude=[{range:[bounds.getSouth(),bounds.getNorth()]}];
filterJson.longitude=[{range:[bounds.getWest(),bounds.getEast()]}];
});
locationFilter.on("enabled", function () {
// Do something when enabled.
$("#selectArea").show();
});
locationFilter.on("disabled", function () {
// Do something when disabled.
$("#selectArea").hide();
});
$("#selectArea").on("click", function(e) {
this.href=this.href+'?filter='+JSON.stringify(filterJson);
});
});
</script>
</content>
......
......@@ -278,12 +278,12 @@
border-radius: 5px;
}
.leaflet-control-layers-toggle {
background-image: url(images/layers.png);
background-image: url(leaflet/layers.png);
width: 36px;
height: 36px;
}
.leaflet-retina .leaflet-control-layers-toggle {
background-image: url(images/layers-2x.png);
background-image: url(leaflet/layers-2x.png);
background-size: 26px 26px;
}
.leaflet-touch .leaflet-control-layers-toggle {
......
div.leaflet-marker-icon.location-filter.resize-marker {
background: url( leaflet/resize-handle.png ) no-repeat;
cursor: move;
}
div.leaflet-marker-icon.location-filter.move-marker {
background: url( leaflet/move-handle.png ) no-repeat;
cursor: move;
}
div.location-filter.button-container {
background: #bfbfbf;
background: rgba(0, 0, 0, 0.25);
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
padding: 5px;
}
.leaflet-container div.location-filter.button-container a {
display: inline-block;
color: #0F2416;
font-size: 11px;
font-weight: normal;
text-shadow: #A1BB9C 0 1px;
padding: 6px 7px;
border: 1px solid #9CC5A4;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset rgba(255,255,255,0.75) 0 1px 1px;
-moz-box-shadow: inset rgba(255,255,255,0.75) 0 1px 1px;
box-shadow: inset rgba(255,255,255,0.75) 0 1px 1px;
background: #c4e3b9;
background: rgba(218, 252, 205, 0.9);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(218, 252, 205, 0.9)), color-stop(100%, rgba(173, 226, 176, 0.9)));
background: -webkit-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
background: -moz-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
background: -ms-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
background: -o-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
background: linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
}
.leaflet-container div.location-filter.button-container a:hover {
color: #263F1C;
background: #dde6d8;
background: rgba(245, 255, 240, 0.9);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(245, 255, 240, 0.9)), color-stop(100%, rgba(203, 228, 205, 0.9)));
background: -webkit-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
background: -moz-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
background: -ms-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
background: -o-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
background: linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
}
.leaflet-container div.location-filter.button-container a.enable-button {
padding: 6px 7px 6px 25px;
background-image: url( leaflet/filter-icon.png ), -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(218, 252, 205, 0.9)), color-stop(100%, rgba(173, 226, 176, 0.9)));
background-image: url( leaflet/filter-icon.png ), -webkit-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
background-image: url( leaflet/filter-icon.png ), -moz-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
background-image: url( leaflet/filter-icon.png ), -ms-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
background-image: url( leaflet/filter-icon.png ), -o-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
background-image: url( leaflet/filter-icon.png ), linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
background-repeat: no-repeat;
background-position: left center;
}
.leaflet-container div.location-filter.button-container a.enable-button:hover,
.leaflet-container div.location-filter.button-container.enabled a.enable-button {
background-image: url( leaflet/filter-icon.png ), -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(245, 255, 240, 0.9)), color-stop(100%, rgba(203, 228, 205, 0.9)));
background-image: url( leaflet/filter-icon.png ), -webkit-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
background-image: url( leaflet/filter-icon.png ), -moz-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
background-image: url( leaflet/filter-icon.png ), -ms-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
background-image: url( leaflet/filter-icon.png ), -o-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
background-image: url( leaflet/filter-icon.png ), linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
background-repeat: no-repeat;
background-position: left center;
}
.leaflet-container div.location-filter.button-container a.adjust-button {
margin-left: 2px;
}
This diff is collapsed.
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