From f1786541cdca52d6af8ac32345a68e1ddfb169f1 Mon Sep 17 00:00:00 2001 From: vjrj Date: Thu, 7 Dec 2017 17:29:17 +0100 Subject: [PATCH] Many improvements: navbar, favico, new icons --- .meteor/packages | 1 + .meteor/versions | 1 + client/main.html | 6 +-- designs/icons-tcef.svg | 36 +++++++++++++- fonts.json | 10 ++++ imports/startup/client/Gkeys.js | 47 ++++++++++++++++++ imports/startup/client/gkeys.js | 34 ------------- .../AuthenticatedNavigation.js | 12 +++-- .../CenterInMyPosition/CenterInMyPosition.js | 4 +- .../ui/components/Navigation/Navigation.js | 22 +++++--- .../ui/components/Navigation/Navigation.scss | 12 +++++ .../PublicNavigation/PublicNavigation.js | 9 +++- imports/ui/layouts/App/App.js | 1 + .../FireSubscription/FireSubscription.js | 12 ++++- .../FireSubscription/SubsAutocomplete.js | 3 +- imports/ui/pages/FiresMap/FiresMap.js | 28 ++--------- imports/ui/pages/Sandbox/Sandbox.js | 5 +- package.json | 1 + public/favicon.ico | Bin 1694 -> 7454 bytes public/favicon.png | Bin 0 -> 1286 bytes 20 files changed, 161 insertions(+), 83 deletions(-) create mode 100644 fonts.json create mode 100644 imports/startup/client/Gkeys.js delete mode 100644 imports/startup/client/gkeys.js create mode 100644 public/favicon.png diff --git a/.meteor/packages b/.meteor/packages index 0046334..b701cf3 100644 --- a/.meteor/packages +++ b/.meteor/packages @@ -43,3 +43,4 @@ vjrj:piwik # Stats mdg:geolocation natestrauser:publish-performant-counts maximum:server-transform +mys:fonts diff --git a/.meteor/versions b/.meteor/versions index a2fb248..597b622 100644 --- a/.meteor/versions +++ b/.meteor/versions @@ -75,6 +75,7 @@ modules-runtime@0.8.0 mongo@1.2.2 mongo-dev-server@1.0.1 mongo-id@1.0.6 +mys:fonts@0.0.2 natestrauser:publish-performant-counts@0.1.2 npm-bcrypt@0.9.3 npm-mongo@2.2.30 diff --git a/client/main.html b/client/main.html index cb98f6e..99e51f8 100644 --- a/client/main.html +++ b/client/main.html @@ -7,8 +7,8 @@ https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/getting-started/introduction/ --> - - + @@ -17,7 +17,7 @@ - + diff --git a/designs/icons-tcef.svg b/designs/icons-tcef.svg index f490152..1695da9 100644 --- a/designs/icons-tcef.svg +++ b/designs/icons-tcef.svg @@ -264,6 +264,7 @@ image/svg+xml + @@ -336,7 +337,7 @@ @@ -447,5 +448,38 @@ inkscape:connector-curvature="0" /> + + + + + + + diff --git a/fonts.json b/fonts.json new file mode 100644 index 0000000..ba2e995 --- /dev/null +++ b/fonts.json @@ -0,0 +1,10 @@ +{ + "extensions": [ "ttf", "woff", "woff2" ], + "map": { + "node_modules/simple-line-icons/fonts/Simple-Line-Icons.woff": "fonts/Simple-Line-Icons.woff", + "node_modules/simple-line-icons/fonts/Simple-Line-Icons.woff": "fonts/Simple-Line-Icons.woff?v=2.4.0", + "node_modules/simple-line-icons/fonts/Simple-Line-Icons.woff2": "fonts/Simple-Line-Icons.woff2?v=2.4.0", + "node_modules/simple-line-icons/fonts/Simple-Line-Icons.ttf": "fonts/Simple-Line-Icons.ttf?v=2.4.0" + }, + "verbose": false +} diff --git a/imports/startup/client/Gkeys.js b/imports/startup/client/Gkeys.js new file mode 100644 index 0000000..12a48a5 --- /dev/null +++ b/imports/startup/client/Gkeys.js @@ -0,0 +1,47 @@ +import React from 'react'; +import { Meteor } from 'meteor/meteor'; +import i18n from 'i18next'; + +const gmapkey = new ReactiveVar(); + +Meteor.startup(function() { + Meteor.call('getMapKey', function (error, key) { + if (typeof key !== 'undefined') { + // console.log(key); + gmapkey.set(key); + } else { + callback(error, null) + } + }) +}); + +class GkeysC { + constructor() { + this.state = { init: false }; + } + + load(callback) { + if (this.state.init) { + // already loaded + callback(null, gmapkey.get()); + } else { + this.state.init = true; + Meteor.autorun(function() { + var key = gmapkey.get(); + if (typeof key !== 'undefined') { + var script = document.createElement('script'); + script.type = 'text/javascript'; + script.onload = function () { + // console.log(key); + callback(null, key); + }.bind(this); + // https://stackoverflow.com/questions/28130114/google-maps-places-autocomplete-language-output + script.src = `https://maps.googleapis.com/maps/api/js?key=${key}&libraries=places&language=${i18n.language}` + document.body.appendChild(script); + } + }.bind(this)); + } + } +} + +export let Gkeys = new GkeysC(); diff --git a/imports/startup/client/gkeys.js b/imports/startup/client/gkeys.js deleted file mode 100644 index ca38c40..0000000 --- a/imports/startup/client/gkeys.js +++ /dev/null @@ -1,34 +0,0 @@ -import { Meteor } from 'meteor/meteor'; -import i18n from 'i18next'; - -const gmapkey = new ReactiveVar(); - -Meteor.startup(function() { - Meteor.call('getMapKey', function (error, key) { - if (typeof key !== 'undefined') { - // console.log(key); - gmapkey.set(key); - } else { - callback(error, null) - } - }) -}); - -var getGKeys = function (callback) { - Meteor.autorun(function() { - var key = gmapkey.get(); - if (typeof key !== 'undefined') { - var script = document.createElement('script'); - script.type = 'text/javascript'; - script.onload = function () { - // console.log(key); - callback(null, key); - }; - // https://stackoverflow.com/questions/28130114/google-maps-places-autocomplete-language-output - script.src = `https://maps.googleapis.com/maps/api/js?key=${key}&libraries=places&language=${i18n.language}` - document.body.appendChild(script); - } - }); -} - -export default getGKeys; diff --git a/imports/ui/components/AuthenticatedNavigation/AuthenticatedNavigation.js b/imports/ui/components/AuthenticatedNavigation/AuthenticatedNavigation.js index 55f073d..b7a4c2e 100644 --- a/imports/ui/components/AuthenticatedNavigation/AuthenticatedNavigation.js +++ b/imports/ui/components/AuthenticatedNavigation/AuthenticatedNavigation.js @@ -16,17 +16,19 @@ import NavItem from '../NavItem/NavItem'; import { Meteor } from 'meteor/meteor'; const AuthenticatedNavigation = ({ name, history, props }) => ( - */} + ); AuthenticatedNavigation.propTypes = { diff --git a/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js b/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js index 6d2725b..85f94ed 100644 --- a/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js +++ b/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js @@ -9,7 +9,6 @@ class CenterInMyPosition extends React.Component { } onClick = (event) => { - console.log("Click?"); // this.props.onClick(event); // https://atmospherejs.com/mdg/geolocation // only with SSL: @@ -27,6 +26,7 @@ class CenterInMyPosition extends React.Component { zoom: 11 } self.props.onClick(viewport); + // console.log(viewport); // self.onViewportChanged(viewport); computation.stop(); } @@ -36,7 +36,7 @@ class CenterInMyPosition extends React.Component { render() { return ( ) } diff --git a/imports/ui/components/Navigation/Navigation.js b/imports/ui/components/Navigation/Navigation.js index 4d3451d..0c80775 100644 --- a/imports/ui/components/Navigation/Navigation.js +++ b/imports/ui/components/Navigation/Navigation.js @@ -9,23 +9,29 @@ import { translate } from 'react-i18next'; import './Navigation.scss'; const Navigation = props => ( - + ); Navigation.defaultProps = { diff --git a/imports/ui/components/Navigation/Navigation.scss b/imports/ui/components/Navigation/Navigation.scss index 7783f13..2dbdfbf 100644 --- a/imports/ui/components/Navigation/Navigation.scss +++ b/imports/ui/components/Navigation/Navigation.scss @@ -26,3 +26,15 @@ a.nav-link:hover { .navbar { padding: 0.3rem 0rem; } + + +a.navbar-brand { + font-size: 26px; +} + +@media (max-width: 480px) { + a.navbar-brand { + font-size: 16px; + padding: 15px 3px; + } +} diff --git a/imports/ui/components/PublicNavigation/PublicNavigation.js b/imports/ui/components/PublicNavigation/PublicNavigation.js index c212c04..d60bfde 100644 --- a/imports/ui/components/PublicNavigation/PublicNavigation.js +++ b/imports/ui/components/PublicNavigation/PublicNavigation.js @@ -12,7 +12,11 @@ import { translate } from 'react-i18next'; import NavItem from '../NavItem/NavItem'; const PublicNavigation = (props) => ( - */} + ); export default translate([], { wait: true })(PublicNavigation); diff --git a/imports/ui/layouts/App/App.js b/imports/ui/layouts/App/App.js index 7382994..1d45c54 100644 --- a/imports/ui/layouts/App/App.js +++ b/imports/ui/layouts/App/App.js @@ -43,6 +43,7 @@ import { check } from 'meteor/check'; import FiresMap from '../../pages/FiresMap/FiresMap'; import Sandbox from '../../pages/Sandbox/Sandbox'; +import 'simple-line-icons/css/simple-line-icons.css'; import './App.scss'; const history = createHistory() diff --git a/imports/ui/pages/FireSubscription/FireSubscription.js b/imports/ui/pages/FireSubscription/FireSubscription.js index de37730..6657f49 100644 --- a/imports/ui/pages/FireSubscription/FireSubscription.js +++ b/imports/ui/pages/FireSubscription/FireSubscription.js @@ -6,8 +6,9 @@ import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider import SelectionMap from '/imports/ui/components/SelectionMap/SelectionMap'; import update from 'immutability-helper'; import { withTracker } from 'meteor/react-meteor-data'; -import getGKeys from '/imports/startup/client/gkeys'; +import { Gkeys } from '/imports/startup/client/Gkeys'; import SubsAutocomplete from './SubsAutocomplete'; +import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js'; class FireSubscription extends React.Component { constructor(props) { @@ -18,11 +19,15 @@ class FireSubscription extends React.Component { } componentDidMount = () => { - getGKeys(function(err, key) { + Gkeys.load(function(err, key) { this.setState({init: true}); }.bind(this)); } + centerOnUserLocation = (value) => { + this.setState(update(this.state, {$merge: {lat: value.center[0], lng: value.center[1]}})); + } + onAutocompleteChange = (value) => { this.setState(update(this.state, {$merge: {lat: value.lat, lng: value.lng}})); } @@ -49,6 +54,9 @@ class FireSubscription extends React.Component { this.onSliderChange(value)} /> + + this.centerOnUserLocation(viewport)} /> + diff --git a/imports/ui/pages/FireSubscription/SubsAutocomplete.js b/imports/ui/pages/FireSubscription/SubsAutocomplete.js index 8548f03..9547abb 100644 --- a/imports/ui/pages/FireSubscription/SubsAutocomplete.js +++ b/imports/ui/pages/FireSubscription/SubsAutocomplete.js @@ -46,9 +46,10 @@ class SubsAutocomplete extends React.Component { }, } + // http://simplelineicons.com/ const AutocompleteItem = ({ formattedSuggestion }) => (
- {' '} + {' '} {formattedSuggestion.mainText}{' '} {formattedSuggestion.secondaryText}
) diff --git a/imports/ui/pages/FiresMap/FiresMap.js b/imports/ui/pages/FiresMap/FiresMap.js index ec4a35a..0b3b82f 100644 --- a/imports/ui/pages/FiresMap/FiresMap.js +++ b/imports/ui/pages/FiresMap/FiresMap.js @@ -140,28 +140,8 @@ class FiresMap extends React.Component { this.unionGroup = new L.LayerGroup(); } - centerOnUserLocation = () => { - // https://atmospherejs.com/mdg/geolocation - // only with SSL: - // https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition - - // https://stackoverflow.com/questions/31608579/somethings-wrong-with-my-meteor-geolocation-functions - var userGeoLocation = new ReactiveVar(null); - var state = this.state; - var self = this; - Tracker.autorun(function (computation) { - userGeoLocation.set(Geolocation.latLng()); - if (userGeoLocation.get()) { - //stop the tracker if we got something - var viewport = { - center: [userGeoLocation.get().lat, userGeoLocation.get().lng], - zoom: 11 - } - self.onViewportChanged(viewport); - // console.log(userGeoLocation.get()); - computation.stop(); - } - }); + centerOnUserLocation = (viewport) => { + this.onViewportChanged(viewport); } componentDidMount() { @@ -274,7 +254,7 @@ class FiresMap extends React.Component { this.useMarkers(e.target.checked)}> Resaltar los fuegos con un marcador - this.centerOnUserLocation(event)} /> + this.centerOnUserLocation(viewport)} /> @@ -304,7 +284,7 @@ class FiresMap extends React.Component { - (*) Para preservar la privacidad de nuestros usuarios/as, los datos reflejados están aleatoriamente alterados y son solo orientativos. +

(*)Para preservar la privacidad de nuestros usuarios/as, los datos reflejados están aleatoriamente alterados y son solo orientativos.

 ); diff --git a/imports/ui/pages/Sandbox/Sandbox.js b/imports/ui/pages/Sandbox/Sandbox.js index 5886061..314c869 100644 --- a/imports/ui/pages/Sandbox/Sandbox.js +++ b/imports/ui/pages/Sandbox/Sandbox.js @@ -3,7 +3,7 @@ import { Trans, translate } from 'react-i18next'; import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider'; import SelectionMap from '/imports/ui/components/SelectionMap/SelectionMap'; import update from 'immutability-helper'; -import getGKeys from '/imports/startup/client/gkeys'; +import { Gkeys } from '/imports/startup/client/Gkeys'; import FireSubscription from '/imports/ui/pages/FireSubscription/FireSubscription'; class Sandbox extends React.Component { @@ -16,6 +16,9 @@ class Sandbox extends React.Component { componentDidMount = () => { this.setState({init: true}); + Gkeys.load(function(err, key) { + console.log(key); + }.bind(this)); } render() { diff --git a/package.json b/package.json index bccb967..2e0f7a5 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "react-router-dom": "^4.2.2", "reactstrap": "^5.0.0-alpha.3", "simpl-schema": "^0.3.2", + "simple-line-icons": "^2.4.1", "turf-union": "^3.0.12" }, "devDependencies": { diff --git a/public/favicon.ico b/public/favicon.ico index 77a517963448bf15e7d1d4ce15bb747f4bd1297f..58ed60fa7e4f35c6eced3c88884d8223bd74f886 100644 GIT binary patch literal 7454 zcmd^@YiJx*6vt0&X{uP$y)&EGT4}3MBx-&4i_!<0y*l3?+H z`aw}pd?AX0VkrtzMWGQyt4*Yvxi_1-Np_3Innu#3N!v|3yT@~9X4lEg+}V|xj)C5A z_kZWy+;e_&=FZHW3(!D+ZEZlmD`4Tp0L=h!1ywS^-BhJrmRB#b(>wB{1$=IPW33U zzXn>Lyu1k(v4G+}SK(`1B5=p^qd4}riS9Catb{MUK8A}g$yRtvH0A@)4kR%1BqRTV zsujCwWfp(hf5MIDYv&K0!W%aXRam8tLyF&g<`RnyZbr%a<=4l2TtSBE<0V{oN8Zgk z4e9SlrT|P!ZA6ObIYfGk?{7<`L;JY7D%&0Laq^s(vo~{6g%WB%I5^|s6h|P{ z(-fKY!e7%~MtS_{?uk&Iu+Ga@|K?%kFGl8M#;rk|TOa*B3?;O${#wf;MUIHfIhX%@fwc1ne#w7>J=xSvz!pGD%7 z?+#*8)pODu+qWLVJ>N~CX_l32?vD3AJ{sgNABj`0cQjs9ak}kG+6Hj@j>9-ym~mtI z+RwZ&8pK%!mb)Mlt7hzW^VDiDptZ@)SB_w*KiM_=IV`>a zp=wTZ!!sz?t7;#{1CcqUgJz?JV(eGP@n28LRi?+liIXL~Zr!Z)lAo6u_r<~~oyfd0 zqfynovtelG7dV0=?-oE1kpznxe|Yw>Qnr+`m&{Z*S$GBa^y#eJ-5tx>|C zS)Ol>Fy7P9nrn=e&+CjCk5FExYUMV(pYG8lN~-T_;ur~M@!w~z|Bt@5tM@$9qLt#- zoU<-A*F2ziNs`50x6A~yDDuhpfg};Dv6$%mPn?>ur8+jr# zxPN(^VIujG`<$9EXK^w<1WlQhk^IIz*xEyOJ=dA>JuEt?#~mh;zf}KKlt*hn+);XW z(;n|!DspY6@n7ugP5XvvaqV2ftFkcuHqFaE`j*;UwavALyxzLe4nTY4XK}GUTuYP% z+(}JR6FM!OfaR7Jpvls1XmoU*rCrc4ODTueF=?mt6QFAyd!Tj!SoVr`JI4h_Cmb~$ zEjx-`_BiZzv|z`_2}g@I7gp4?xzV)G<6pJU4^8`g(X`JWi)&GGW6{nFPNIE$*ijOz H-`0Ns9~u+@ literal 1694 zcmai#O=uHA6vtm$YgL3cyPLKtf|VW=L=X=>D2j+6wc)tELQQ|bOHArSwPBJpz(Xqm0A}NG0Z;7mzv`o&3OxJN4Z?ZQ)j*k z4Pmb(jgHwE80@FW^y9ptJ3%wART_d z*3j8|mwz<&ONB|XJ%{aQLA?0^03*aMx%}R~1*}x0^1$TE&8)KrT8C!tCbr=6;(GRC z2LBZ5i`;*(xWXH3l=hME^TLmIf5dZ_Gnn9i1NXl=;=8}jUeP|T)$;CqO*_Y-yFVli zrx)Bce1;g`NNY&CjOzOM>GHYA&)+_WCHoAbi5cy33@17ycd3|8a z$3bInRT{k~(s+8n>pyqx;`-g=Z3i3ZOwLoh=-1h@>yw}H`TV8KJ2Rd45TEsHsC|A* z$%~*dx0RTjnsfFq`X_8?{CIudoC-s|oX#f|8vp3bd%T)3$1wW?yuogSAyQ6bhidp2 z05eTeP1rgO8DO|^+31BKUK-vQCQsM|S(?luE0a~JhW^0-iNg`H+hn6;o5@HQ G5#T>FOmEi! diff --git a/public/favicon.png b/public/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..fa68806712b7a99ca547cbbbf4191a66bc5321a2 GIT binary patch literal 1286 zcmV+h1^N1kP)I( z+lSg(G*YpGf+Q%40ez`dL9JX@wMiNyYqSYm*cx46TeeqO$PK!Q0J18KVmVq*N)L=$J6m11*jY1iWGzvBn9QF zi<8|2l-luJ5l{dm14*)_F_jY+eXL5?ZpA<)$>*eis%gRDbp2KYv?mWuK(&G7p^%R! z((zmo&{zhK0U1UbDLB*}V4YP@$3ah(kcHqm3(}l;oK~y8j)Ue;vL7rz*;|4d4OWDX zuA{n_%_#f`xGfh+&Q%SYZ?%r~XedAh3T>nV2_UEqX>2l+IRe_{rCP>m2MX=fOU#FV z*`Prmjf%o4pxCa5gdJuY+n~SQMj)v1g%ErQRuof=nZgEl}Oh{q9+G z0S_4IRG)^wdA}7)*UT^#hJthe&lHoLImJ6jp0c9<`)miL$G#ytaFx-|j~Z$vl)$2c z%)GGNqrpN}d!}g@!Wtw%JQ4w*=-pO4)pr?cB@`H4w*-2om~3Kv4Op9Wx586d145v9 zvbg>5X9%~!G!(|mnkCSzX$}h5kPak(_Vn{}zujdO_!^%{EtX6hd6|NSG&V`B4|gKG zk3UI%!@dPMUsE%PpXgsV%(!h(MIjJRaZN4oQu4u3a<|`S3O7GwEVeW$=rF4@ z1dU77WV2JKDr-MEo^rk!MQnU@X;N~+tj_RZk|ZCFReSc@f&`fDU-DW%E^ZzV4Z{$0 z)=g)!eBLhm-@tCPf4?}@QW@rkS)C#1h5^FBrN#Noa>MgO%9!cBz)bIjxwe4tRGc@g z)S9lNf~D`^G8#<_FcE|Ay}8f_Ua22p%u1~(Xw=0=KxBSysymnt9{|&r&NF)K$Xr`M zdw9sfx6s;aTn82$D#zMBO^1>AWQ4yOAD%xF*HyuzTW@}rbOscla)=h-t3*5U^AAjX zd)zYQpZj(*73!KRR}}WHALOc4$h0B^Ze8O`T|?>`vZpLxPIjD@MlsXhCwsTm%S4T? zF|2#Bx2~lN8`5}9*O=8cWT+@pUVHr|866BS0E~@~$?&1KWKVfP0x+g)eB7zA#_qjs zeSqllvr&<}2