From: Jérémy Fabre Date: Fri, 14 Oct 2016 09:29:47 +0000 (+0200) Subject: Network page with infowindows X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=b35c202d8e5723217765e0d02db3687279e82187;p=mezzo.git Network page with infowindows --- diff --git a/app/static/src/assets/img/map-marker-blue.png b/app/static/src/assets/img/map-marker-blue.png new file mode 100644 index 00000000..8fff3917 Binary files /dev/null and b/app/static/src/assets/img/map-marker-blue.png differ diff --git a/app/static/src/assets/img/map-marker-green.png b/app/static/src/assets/img/map-marker-green.png new file mode 100644 index 00000000..1f751ed2 Binary files /dev/null and b/app/static/src/assets/img/map-marker-green.png differ diff --git a/app/static/src/assets/img/map-marker-hover.png b/app/static/src/assets/img/map-marker-hover.png deleted file mode 100644 index 74163a76..00000000 Binary files a/app/static/src/assets/img/map-marker-hover.png and /dev/null differ diff --git a/app/static/src/assets/img/map-marker-red.png b/app/static/src/assets/img/map-marker-red.png new file mode 100644 index 00000000..af8357ec Binary files /dev/null and b/app/static/src/assets/img/map-marker-red.png differ diff --git a/app/static/src/assets/img/map-marker.png b/app/static/src/assets/img/map-marker.png deleted file mode 100644 index faae65d9..00000000 Binary files a/app/static/src/assets/img/map-marker.png and /dev/null differ diff --git a/app/static/src/js/modules/lightslidernetwork-init.js b/app/static/src/js/modules/lightslidernetwork-init.js index d9a5c106..d1cd5c96 100644 --- a/app/static/src/js/modules/lightslidernetwork-init.js +++ b/app/static/src/js/modules/lightslidernetwork-init.js @@ -20,7 +20,7 @@ LightSliderNetworkInit.prototype.init = function() { // // Slider init // - that.slider = $('[data-slider-network]').lightSlider({ + /*that.slider = $('[data-slider-network]').lightSlider({ item: 4, slideMargin: 10, pager: false, @@ -40,7 +40,7 @@ LightSliderNetworkInit.prototype.init = function() { that.currentLine.setMap(null); } } - }); + });*/ // // Init map @@ -48,8 +48,8 @@ LightSliderNetworkInit.prototype.init = function() { if($('#network-map').length > 0) { that.map = new google.maps.Map(document.getElementById('network-map'), { - zoom: 4, - center: {lat: -25.363, lng: 131.044}, + zoom: 3, + center: {lat: 48.85982, lng: 2.351402}, styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}] }); @@ -67,144 +67,34 @@ LightSliderNetworkInit.prototype.initMarkers = function() { $('[data-marker-idx]').each(function(idx) { - that.markers.push({ + var obj = { 'lat': parseFloat($(this).attr('data-marker-lat').replace(',', '.')), 'lng': parseFloat($(this).attr('data-marker-lng').replace(',', '.')), 'elem': $(this), 'marker': new google.maps.Marker({ position: {lat: parseFloat($(this).attr('data-marker-lat').replace(',', '.')), lng: parseFloat($(this).attr('data-marker-lng').replace(',', '.'))}, map: that.map, - icon: "/static/img/map-marker.png" + icon: "/static/img/map-marker-" + $(this).attr('data-marker-color') + ".png" }) - }); - - }); - - console.log(that.markers); - that.markers.forEach(function(m, i) { - - m.marker.addListener('mouseover', function(e) { - - this.setIcon("/static/img/map-marker-hover.png"); - - var target = that.markers[i].elem[0]; - - var idx = target.getAttribute('data-marker-idx'); - var lat = that.markers[idx].lat; - var lng = that.markers[idx].lng; - - that.slider.goToSlide(Math.floor(i/4)); - - setTimeout(function() { - var x = target.offsetLeft + (target.offsetWidth * .5); - - var buttonPos = target.getBoundingClientRect(); - var x = (buttonPos.left + (buttonPos.width * .5)) - document.getElementById('network-map').getBoundingClientRect().left; - - var fakeLatLng = that.point2LatLng({x: x, y: document.getElementById('network-map').getBoundingClientRect().height}, that.map); - - that.drawLine(fakeLatLng, new google.maps.LatLng(that.markers[idx].lat, that.markers[idx].lng)); - }, 250); - - }); - - m.marker.addListener('mouseout', function(e) { - - clearInterval(that.animationInterval); - this.setIcon("/static/img/map-marker.png"); - - if (that.currentLine) { - that.currentLine.setMap(null); - } - - }); - - m.elem[0].addEventListener('mouseover', function(e) { - - var idx = e.currentTarget.getAttribute('data-marker-idx'); - var lat = that.markers[idx].lat; - var lng = that.markers[idx].lng; - - that.markers[idx].marker.setIcon("/static/img/map-marker-hover.png"); - - that.map.panTo({lat: lat, lng: lng}); - - var x = e.currentTarget.offsetLeft + (e.currentTarget.offsetWidth * .5); - - var buttonPos = e.currentTarget.getBoundingClientRect(); - var x = (buttonPos.left + (buttonPos.width * .5)) - document.getElementById('network-map').getBoundingClientRect().left; - - var fakeLatLng = that.point2LatLng({x: x, y: document.getElementById('network-map').getBoundingClientRect().height}, that.map); - - that.drawLine(fakeLatLng, new google.maps.LatLng(that.markers[idx].lat, that.markers[idx].lng)); + }; + var info = new google.maps.InfoWindow({ + content: '
' + $(this).find('[data-marker-title]').text() + '
' + $(this).find('[data-marker-subtitle]').text() + '
' }); - m.elem[0].addEventListener('mouseout', function(e) { - - var idx = e.currentTarget.getAttribute('data-marker-idx'); - that.markers[idx].marker.setIcon("/static/img/map-marker.png"); - - clearInterval(that.animationInterval); - - if (that.currentLine) { - that.currentLine.setMap(null); - } + obj.info = info; + obj.marker.addListener('click', function() { + that.markers.forEach(function(m, i) { + m.info.close(); + }); + info.open(that.map, obj.marker); }); - }); + that.markers.push(obj); -}; - -LightSliderNetworkInit.prototype.drawLine = function(start, end) { - - var that = this; - - if (that.currentLine) { - that.currentLine.setMap(null); - } - - that.currentLine = new google.maps.Polyline({ - path: [ - start, - start - ], - strokeColor: 'red', - strokeOpacity: 1.0, - strokeWeight: 1, - geodesic: false, - map: that.map }); - var step = 0; - var numSteps = 25; - var timePerStep = 5; - - that.animationInterval = setInterval(function() { - - step += 1; - - if (step > numSteps) { - clearInterval(that.animationInterval); - } else { - var currentPosLatLng = google.maps.geometry.spherical.interpolate(start, end, step / numSteps); - that.currentLine.setPath([start, currentPosLatLng]); - } - - }, timePerStep); - -}; - -LightSliderNetworkInit.prototype.point2LatLng = function(point, map) { - - var that = this; - var topRight = that.map.getProjection().fromLatLngToPoint(that.map.getBounds().getNorthEast()); - var bottomLeft = that.map.getProjection().fromLatLngToPoint(that.map.getBounds().getSouthWest()); - var scale = Math.pow(2, that.map.getZoom()); - var worldPoint = new google.maps.Point(point.x / scale + bottomLeft.x, point.y / scale + topRight.y); - return that.map.getProjection().fromPointToLatLng(worldPoint); - }; module.exports = LightSliderNetworkInit; diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss index 77251ca4..fd876f0e 100755 --- a/app/static/src/sass/modules/_all.scss +++ b/app/static/src/sass/modules/_all.scss @@ -37,6 +37,8 @@ @import 'banner'; @import 'messages'; @import 'project-details'; +@import 'map-infowindow'; +@import 'map-legend'; // Typography modules @import 'dashed'; diff --git a/app/static/src/sass/modules/_map-infowindow.scss b/app/static/src/sass/modules/_map-infowindow.scss new file mode 100644 index 00000000..d3f25ea4 --- /dev/null +++ b/app/static/src/sass/modules/_map-infowindow.scss @@ -0,0 +1,50 @@ +$module: ".map-infowindow"; + +#{$module} { + + @include padding(1); + @include clearfix; + + &__content { + + //float: left; + @include margin-left(1); + + } + + &__title { + + @include font-size(m); + @include line-height(.75); + @include typeface(sans-serif); + font-weight: weight(bold); + + } + + &__subtitle { + + @include margin-top(.25); + + @include font-size(xs); + @include line-height(.5); + @include typeface(serif); + font-weight: weight(bold); + + } + + &__image { + + //float: left; + width: 140px; + margin: 0 auto; + @include margin-bottom(1); + text-align: center; + + img { + width: 140px; + height: auto; + } + + } + +} diff --git a/app/static/src/sass/modules/_map-legend.scss b/app/static/src/sass/modules/_map-legend.scss new file mode 100644 index 00000000..04ba4737 --- /dev/null +++ b/app/static/src/sass/modules/_map-legend.scss @@ -0,0 +1,64 @@ +$module: ".map-legend"; + +#{$module} { + + @include padding(1); + position: absolute; + bottom: 20px; + left: 20px; + z-index: 10; + background: white; + + @include mq($until: xs) { + display: none; + } + + &__item { + + text-transform: uppercase; + @include font-size(xs); + @include line-height(.5); + @include margin-bottom(.25); + color: $color-black; + + &:last-child { + @include margin-bottom(0); + } + + &:before { + + content :""; + display: inline-block; + width: 8px; + height: 8px; + @include margin-right(.5); + + } + + &--red { + + &:before { + background: #e7413c; + } + + } + + &--blue { + + &:before { + background: #3c7be7; + } + + } + + &--green { + + &:before { + background: #70e73c; + } + + } + + } + +} diff --git a/app/static/src/sass/modules/_page.scss b/app/static/src/sass/modules/_page.scss index fe13ba5c..3848821b 100644 --- a/app/static/src/sass/modules/_page.scss +++ b/app/static/src/sass/modules/_page.scss @@ -206,4 +206,19 @@ $module: ".page"; } + &--organization { + + margin-top: -327px; + + @include mq($until: xs) { + margin-top: -123px; + } + + .map { + width: 100%; + height: 900px; + } + + } + } diff --git a/app/static/src/sass/modules/sliders/_slider-network.scss b/app/static/src/sass/modules/sliders/_slider-network.scss index 47ed9e26..b94078db 100644 --- a/app/static/src/sass/modules/sliders/_slider-network.scss +++ b/app/static/src/sass/modules/sliders/_slider-network.scss @@ -5,6 +5,7 @@ $module: ".slider-network"; padding-right: 140px; position: relative; @include margin-bottom(6); + display: none; ul { diff --git a/app/templates/network/organization_list.html b/app/templates/network/organization_list.html index 6b0206f9..aadd9afe 100644 --- a/app/templates/network/organization_list.html +++ b/app/templates/network/organization_list.html @@ -13,10 +13,6 @@ organization {% endblock %} -{% block page_title %} -

{% trans "Network" %}

-{% endblock %} - {% block breadcrumb_menu %} {{ block.super }}
  • {% trans "Network" %}
    • @@ -24,16 +20,27 @@ {% block page_slider %} +
    + +
    + +
    + +
    + + {% for type in organization_types %} +
    {{ type.0 }}
    + {% endfor %} + +
    + +
    +
    - - {{ organization_types }} -
    - -
    @@ -41,7 +48,7 @@ {% for organization in organizations %} -
  • +
  • -
    +
    {{ organization.name }}
    -
    +
    {{ organization.city }}, {{ organization.country.name }}
    @@ -90,8 +97,6 @@ -
    -