From b35c202d8e5723217765e0d02db3687279e82187 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Je=CC=81re=CC=81my=20Fabre?= Date: Fri, 14 Oct 2016 11:29:47 +0200 Subject: [PATCH] Network page with infowindows --- app/static/src/assets/img/map-marker-blue.png | Bin 0 -> 2172 bytes .../src/assets/img/map-marker-green.png | Bin 0 -> 2195 bytes .../src/assets/img/map-marker-hover.png | Bin 1015 -> 0 bytes app/static/src/assets/img/map-marker-red.png | Bin 0 -> 2171 bytes app/static/src/assets/img/map-marker.png | Bin 960 -> 0 bytes .../src/js/modules/lightslidernetwork-init.js | 142 ++---------------- app/static/src/sass/modules/_all.scss | 2 + .../src/sass/modules/_map-infowindow.scss | 50 ++++++ app/static/src/sass/modules/_map-legend.scss | 64 ++++++++ app/static/src/sass/modules/_page.scss | 15 ++ .../sass/modules/sliders/_slider-network.scss | 1 + app/templates/network/organization_list.html | 33 ++-- 12 files changed, 167 insertions(+), 140 deletions(-) create mode 100644 app/static/src/assets/img/map-marker-blue.png create mode 100644 app/static/src/assets/img/map-marker-green.png delete mode 100644 app/static/src/assets/img/map-marker-hover.png create mode 100644 app/static/src/assets/img/map-marker-red.png delete mode 100644 app/static/src/assets/img/map-marker.png create mode 100644 app/static/src/sass/modules/_map-infowindow.scss create mode 100644 app/static/src/sass/modules/_map-legend.scss 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 0000000000000000000000000000000000000000..8fff391736af4cebbac7366c970128016ca4d51b GIT binary patch literal 2172 zcmaJ@c~}!?9u7BhXtk+QQ91^S0m+>p2?SyY5U4>7sd5Myl7YmWBm+qZ6oj=F5Ctri zVC87N4=N}KqNoTeRYU=66!F|5$_feyY!|Q-D|Y`_cb=K~zVG+E@B2IFc_w#lc!;Cj zVmkx^;TXzhap4sSKQ6Y`@Y`#FzXV=Bhk_!Z2t^{K;j2KzDxo3)1VUx}B#;a8g}UT+ z&<}yI@D%eRp-9eZnm{4L@=X}5R;Gm62!vmNR>>DgKnO?xlf-g5YPjh<3J?qFs0|bj zo}&x|MPhcE3XDh#=Lymz0;&)d;1Bp|X|R9{g!q6~CY7scS~}{TE)CwB%s3SA4gyK& zsK0`WuKA`t^4FlwC~;%hN-wd1-9(iWHDSEmA0fz(7;gC|C-B z=I{k#xykJDj>qB9Lgi|RFBgEJEIJBS!ivR08pWGJp?C+AeO5A=1VWJaDhdTpWd<_| z!OWmw7Lz*5Whn$HGEff9a)p0$DIevUMna~9J+nZSI29BIs}wTeUFtOP$73OWRPQ}k z`0-dsALZiUU~r}e|5w9jP4E<%wjah9K79B9Ksh}1DtNrxt*=HS5S9a>tW`Yiz3dkZ)RmF(d_}ANzcuW)6wDU%{dMI_hw255)ua5f${f(8+UhgGc z+jwW|;bQ#8=`o!kcH&X%y=#|#D`vNNR6bMl_|UqVp7;&@gQ7#+=35zF-nW0?SWQu- z?)T?c+Ha2MsWVN=Bc7MVG ztjq;dA#7}5h9xJ;R&F7Us(vZaN9+486`t*w`C^y8H#6_F6~)X_USX}0T1b2UNy|p( zpxdW{zB!8)O|M&%?rVMF!N%jVPOVYjo}T#ham_G(xft)B1-dW$%-Kwhnp^#J-=+DM zg-FL9hS~Wu)fRJUOZF%qpM29exSoez9@V9++wH%j+&=zf*w=<+ysOUsNzu^(gX3w3 zMHK{9-ZOj%AIL`yTufNoLtXNHOT2dX*p=PABS-d;_=1j2*4wufl+Q2a-vx5Br(fhX z#`6N4UNEopH7obcupSl^Xx&!{OAj)*yz473+;kjl9P`W(@w`=rU1PQWfDmJ};%T{-tXlW5!&*;t8{iGAD4u@%?$F)dvIyza(V; z=*|v$s&DD?x{`~-ckUpUx`Zsf#?F#`e*cHkWS#LCQjQY0L0?`-ULA)xbNu+P!~gKg zj!P{rcxt?AzN@z@!|i#${oU>8q{3vQP4#wpO8(VgC)GaDy$3$Fa-7H@va2p z(LL@_jM$Q`r=lq#OY%>h_LwLk*UV#eI?j#RKjTnyr7-`}{RG`$!^14fKH{)A`{qyQj@UFLxj5Y| zU5E%T*O09)le+usTx;ZRiLn0&8h_l=Zc24@o)-qheO5=zJ zy~^0^+`NQ;hmHO`lhGZmcwzCQ-(lI&vDh8U4x^A5Rwy14%t2)ZwyF0*U4J!GxlA|Aca;*k{ zAI5C1qqAIpYCo`e`ke2Uju*=+@IGy2<3To}vc30-=*y literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..1f751ed201d5ec53e1b0cd816123c8e02fecb7b4 GIT binary patch literal 2195 zcmaJ@dpJ~iA0OkAdsZqcjB$xFH)95~GcGgZGMFw5jnZYz9A+?cW@pZrNo8B1ycKeJ z-<8@|Ez(^c(sBbJ3|Bb?QZFt1TQvFAQy@R;~^za1|R|iU>tyAiFpY?1i%yQ z{H`6KA`rT3L>w-}WrtJvpcu>3Vz4T)6lNn3R6muJ$4>$vR2+~XlF-nv8=KH5k${HY zL}KIFQU)Ltg`~=W$kcTlergimM}YS8MNw50SU?OwJd{eDERj=GH1ua(3cS~vacIb{6{)+d13d=b=r2sAhkb?>tA8uT{qt=y_!jJ(x2$XR^FnPX;8-ySP%7vg5#b9Ww zM#7R%u52D(B+;7PKJ(aY3QHn~coIIqV$#sC5>_MV4q~7LLVhK`sss2B&TCe>HsG1W%E6`*nQb!`BZ0kib(fgU3575pRt^=zU@_130Sw z!sw)At0*g9O=prazAkrAe@kK@|Ii6c*58B7VEX&kIs(SEGGO>j-b0t@6^8xy-HQ^GW)Z*yN=R`!+GZv9t+j98=j_ibh8 zY-e#`h6Pt>kS%h&ekI30uKGoTq8vSns+f&S6S5>z#dCG!F?ZmO2etQ#;5H`xoTW?#ezQ~ z#dqZF+w0t@E}d3og2M=Tyr*X@$y4zxs=*~|b&Meu)u=!D(Jbk0bJ+DA2UTw0P5P9^ zgbh4`juBh99*?neiN6gG9UXex&mS5aGJZT#GdPUQ?@P+ZcV^_e6VlanbCSPR?@myYhhayhAabBJz4vL2t%Rg>8;^S6aB@ zx)raa^PHYx^-xp2{RL~FFZYOE&cqZk+|1N5G~M^ugvHGR;Av7@LzaSft(LKNuk8&^ zLimb|o|YF+X5T08N1iZIn6r?U_+FP2lLS-S+4M_X_j(}%`J-K6_E>m9y{Ew^syaas zFZ@8S?s#evrCSiZeN)~)<0|DvyY1h`jm}$$@H9URoO= zBWN2Mcf(-~V+&UNj&uqy1y-@13bv)xe`Q`Tn?t)uR?yDQ^t zD5vLbz}k<;%v3&Ud|aS2d^nw)ox107fc}G!ihX z3Xbk`Js9f}zU?f_sm;C6?Uxqth27wfmcL_??hk0zy55L;%AWDvzxW5FYeVZIUA|F> zm&x_@$lIa^{qGV41!=C9cIMR6YN`8Ez0ne|qd=F~`|wh?N#y2Mi`B&HfWeuW#Pj1C z=au8Dim@+^$%liFH~nheF7@KaD1QD=pRQVcfePJeMQ7cjw)sV!xu^#7N|e>Hv2NC; zt4+K6SK4xdM1|=+wkkmwG^__*@bB-9Ofv=^9z8TNJH+=WC`8T$sBk6TKRBE@9Mplg7ly zv4z1)g`NChVfo9Hg0w9zpKPQ>Q+FSBjfHJ@I%d*exV!(rtB?y5(SUw%7f&ufPg?tR&gTOXJ1Kr9#1?4~68a_w&dD{vjN IioPTL4@rxNC;$Ke literal 0 HcmV?d00001 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 74163a7622babd6c37694d17658eb35932748e37..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1015 zcmaJ=PiWIn7|)!HF)a=SVWRlRc5q|Ozc#gr>(-`eU0@ltE7;@GcyKUkvZ@%ks)~W=0%Ts^5DsruI)Tn!z1r|AK&ly{l8P1zZe@jHAGQV zOq*59YVQ7VZ)wX_u<0&e8pT} zHYJOmnFdp#Ob8r^4G=mjZXkyly2UFKIa0GUXqn*U480#zRWE@&@*xnJRNUkf0yr-* zyeJ9jjqG(47P zxG1HLp|1bm)N#7j0WQOXc>hTpRMtGmmSKQaeUmh9X*6=>$$1|d82J^1RytKIH4sKY z19>2ykE$jzA~>fTrtL=R@fJ?kWz7w+;hIoWGc;jhY}=9(Dwj;>ifTGlRCvCS%84Q; zDMT(Rg`%oR9juDXRR_AbgS8H@g`U`GBpi=;R-tcSg;vo=4rrw=+r48^dh)fgR_|Ey zJ+UkahK(BhSHn9hGDVTt9bfY3E&z1N)ca(->pP_cYTMBQpZo8`8A?_yBV#bR+v{`DT^C_0Ol$^ AfB*mh 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 0000000000000000000000000000000000000000..af8357ec3976d86454160b19f4f4c4ce81296ae5 GIT binary patch literal 2171 zcmaJ@dpJ~iA0NpoAuAGX8DmW<=3>k=GZ|tou?%8pwzSOUU@|jjnlmw^gmO!WDVL4c zO54_>wrDAKNky}vRI7_JlyWO;mX)r&XO#B+qkYeF&iVa*-{<@Jd_UjId7hIQ=)cj# z$i@hPK$!S=GlJmN0)AF5_yT@AnY+ipi?xEuRRn{Pia4GeKzIs4K7jO*@S=bqfG3RK z@jKv#KQ81Q5!Qx!7E-ucnhcgr}Rq&L~QpkRe zfdN1Qxk#oEfl{Q7k;eyjDrhKJ>4y{~vQM;9=wq4Sf?<_B85WPh=~9|=WV8Rjt3>k2 z8&U)T|LFZJF~o_N0oWh_0(Z&$mR(|Qk{AAERM~l`bZ%KPbvU>7&H{jgb|5^R3eE;B$8M-@;WasJf2DNBoc8H zFP0ac<;7$%yeM;61}NAm0i=pKtneQ!{$H`Wk&wvX$P7R(iUou$IVeHSrcM=oMhk&~ zb0vGSSY#3$|Fc>?V1=L2GK=-X;rgDiw zXQsbxKp^H1`Y=2>%5GKYZgFskg~wRU*yJzU>bmUyT>M238fTuGiDt?2ob&eDE)d(O z9}U#z6zt}>eE6YOo1+RZXHAoTPd?eL7$vw&EPN8fQkCpto`3dp=ZcI(^j#(Ps` zgPJ|KZyJW#(gbLX)-=&D`0hqL;MA7V&SP?z&+EgMH*|+Av2A=`NwoYsZ+C0);NWin zz4rR43I5~=lwIKmbh{MqO$eB3)tpm{9Q*gr!8R)`F93|Z$LFi6J&zJKI+%rr=SAU=qhAx$9 z|4JRLvd=BAOy;L8tQU2zpXXvp!SFVGWrW%nuu{V^ep*{scig)5?XK{n%DTxIR&_9L z>4_}O7_-9c?oM1mmAY|TU$cE%xi*n+d%|*I^7HU#+c7;a&YpzD(eKp?VozKO@+*|4q>qQ|YG4@~5xEGN;x}Jr4GbKV28~8$Pih z1+OYTgt$YDpxh{`IXTRIJpQau+i7Dv6h3)#e@%z7H8)M$f?4`Pt#a#Kc5$>Tp?>>? z(H7>4*3v`rw6EvsUAw%7v0z!-$bqR9KRHXsM-N-6G%714XvsPAuJznmzB=jkLlbq` zszV($4*7-*y|mTPC^SArcN*A$=#)*I$$IgJS^Mde>ysmPx$Hz2w$Fr284mcH?wL_# z2E;w7i9i2KUbgi?^0yFb$c}2i={EkDYp3y|vg?*scGny)5z?OJnQhwZBRLtmDs{gY zV{cAS)8u96!oHiP1?fFayL8UAt;k;+{(S5AZH}Eul7m2NGCh>>edwvIFsVmdA#K|J zDshV*YUP@g4af1ZkNxP{?NbxQ5zWbsAxTN`-PgR0)J44IMx~*Pk5u+K+dgrBbg|%8 zLc_fi)lR53pB@C^3^cvAw`*um(wAG#-ddleI#^2SdGoe0=Y87J0&Z14Ki$h3U9#8o z<(q*V(Pi|O^S4$R3T(0~5{>`f&J01`i0%s<+DG%InH?rB~v2 zFwlB3eudi40ojrLE{k+0r&jc!(h7J+A78XQr)0!plq_m?&}*+u6;Ta*O;Uf2>=}IY zB+Irs?!}IoWBrpqht;9y85rNZlAU@rY=^(aQF7h?uGlCmL&{_#VQTG&Hz6W{h(eym2?H_ z?~B&F`3}vE-7x+`{L706o>ZUmt=t;rUV8m$@%5E^m|d@{I_#_#0=~~pS)tlgz8}3N zp? z(a*@+JXJmh%9YmddyR+HH=AO9j?qY3IN~v0AgM`%UvgjH;Rv+7WZ6#-m20&l^F yIULpC;Y%^IURV;;TitfMpW9xm7T=q(j6mF}6<>0mPwLhE4)`$r8E3pAQvM5LeTNhP literal 0 HcmV?d00001 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 faae65d9a9f64bcb65c856b4af875cd930317416..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 960 zcmaJ=y>HV%6n6^>sGqKj56kDFdlx``$gh-|v0DXdK*MU%Ro!FwDBOZ#3z7 zIsLBY=>PqnH&5xYLF#RCh`VG2Bg9l)+(E$dVGlJCbjQc1sKPLp?s}~@Y1iM)__H~=Xl?BF5MSQ_bB3Vyht4dQv3Xu1jl_Gf?6%Dn#{@I zwhbLGNY!^{INMgOASN(ykY#8rW#T-~RSSktELTmXTrzc0te2{?EGRmaO}%a!x{_fH z>esn%hZ*G2@PKDPis~t>Tkw@ZI#$ ltz410{xx^HcU;;#Sz$KiE8mS@KVPOhWz`Ri5BlThe*rTzC*lAA 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 @@ -
    -
    -- 2.39.5