Various UI improvements

css/main.css

@@ -139,6 +139,11 @@ a {
   border-radius: 0 0 0 10px;
 }
 
+hr {
+  margin-top: 5px !important;
+  margin-bottom: 5px !important;
+}
+
 .box-logo,
 .box-title-description {
   display: table-cell;
@@ -153,6 +158,12 @@ a {
   margin-top: 5px;
 }
 
+.box-desc {
+  height: 60px;
+  overflow: auto;
+  padding-left: 4px;
+}
+
 .solution {
   font-size: 16px;
 }
@@ -236,7 +247,7 @@ md-checkbox {
 }
 
 .address-bar input {
-  width: 400px;
+  width: 420px;
   height: 41px;
   padding: 0 10px;
   font-size: 15px;
@@ -255,9 +266,11 @@ md-checkbox {
 
 .address-bar .md-menu {
   position: absolute;
-  top: 26px;
-  right: -4px;
+  top: 10px;
+  right: -12px;
   cursor: pointer;
+  color: white;
+  font-size: 45px;
 }
 
 .address-bar button i {

index.html

@@ -93,6 +93,7 @@
 
         <input
           type             = "text"
+          placeholder      = "Pour tester votre éligibilité, merci de saisir une adresse"
           ng-model         = "address"
           ng-focus         = "closeRight()"
           class            =  "typeahead"
@@ -134,17 +135,17 @@
         <md-radio-group ng-model="mapType">
 
           <md-radio-button
-            value      = "Carte"
-            ng-click   = "changeMap('carte')"
-            aria-label = "Carte">Carte
+            value      = "Satellite"
+            ng-click   = "changeMap('satellite')"
+            aria-label = "Satellite">Satellite
           </md-radio-button>
 
           <br/>
 
           <md-radio-button
-            value      = "Satellite"
-            ng-click   = "changeMap('satellite')"
-            aria-label = "Satellite">Satellite
+            value      = "Carte"
+            ng-click   = "changeMap('carte')"
+            aria-label = "Carte">Carte
           </md-radio-button>
         </md-radio-group>
 
@@ -189,13 +190,20 @@
 
               <div class = "box-title">
 
-                <span class = "solution">
-
-                  Solution n°1:
-                </span>
-                <br>
                 Fibre optique (FTTH)
               </div>
+
+              <div class = "box-desc">
+
+                Le Ftth (Fiber To The Home) “signifie la fibre optique jusqu'à l'abonné”. Cette technologie présente des atouts majeurs (un débit  très fortement  augmenté - de l’ordre de 100 Mbit/s - et symétrique)  et ouvre des possibilités nouvelles en termes d 'usages numériques.
+
+                <a
+                  href   = "http://fr.wikipedia.org/wiki/Fibre_optique"
+                  target = "_blank">
+
+                  En savoir plus
+                </a>
+              </div>
             </div>
           </div>
 
@@ -203,21 +211,6 @@
             class    = "box-body  box-body-ftth"
             ng-style = "{'border-color': colors.ftth}">
 
-            <div class = "box-description">
-
-              Une fibre optique est un fil en verre ou en plastique très fin qui a la propriété d'être un conducteur de la lumière et sert dans la transmission de données et de lumière. Elle offre un débit d'information nettement supérieur à celui des câbles coaxiaux et peuvent servir de support à un réseau « large bande » par lequel transitent aussi bien la télévision, le téléphone, la visioconférence ou les données informatiques.
-            </div>
-
-            <div class = "box-description-more">
-
-              <a
-                href   = "http://fr.wikipedia.org/wiki/Fibre_optique"
-                target = "_blank">
-
-                En savoir plus
-              </a>
-            </div>
-
             <hr>
 
             <div class = "box-eligibilite-title">
@@ -308,13 +301,19 @@
 
               <div class = "box-title">
 
-                <span class = "solution">
-
-                  Solution n°2:
-                </span>
-                <br>
                 ADSL (téléphone)
               </div>
+
+              <div class = "box-desc">
+
+                L'ADSL est une technologie permettant l'accès à internet haut débit par le biais de la ligne téléphonique, constituée  de fils de cuivre.  Cette  ligne  téléphonique  relie  votre domicile  au central téléphonique  de France Télécom.
+                <a
+                  href   = "http://fr.wikipedia.org/wiki/Asymmetric_Digital_Subscriber_Line"
+                  target = "_blank">
+
+                  En savoir plus
+                </a>
+              </div>
             </div>
           </div>
 
@@ -322,19 +321,9 @@
             class    = "box-body  box-body-adsl"
             ng-style = "{'border-color': colors.adsl}">
 
-            <div class = "box-description">
-
-              L'ADSL est une technique de communication numérique qui permet d'utiliser une ligne téléphonique pour transmettre et recevoir des données numériques de manière indépendante du service téléphonique conventionnel via un filtre ADSL branché à la prise.
-            </div>
-
             <div class = "box-description-more">
 
-              <a
-                href   = "http://fr.wikipedia.org/wiki/Asymmetric_Digital_Subscriber_Line"
-                target = "_blank">
 
-                En savoir plus
-              </a>
             </div>
 
 
@@ -425,13 +414,20 @@
 
               <div class = "box-title">
 
-                <span class = "solution">
-
-                  Solution n°3:
-                </span>
-                <br>
                 Réseau MiMo
               </div>
+
+              <div class = "box-desc">
+
+                MiMo est une technique de multiplexage utilisée dans les réseaux sans fil et les réseaux mobiles permettant des transferts de données à plus longue portée et à plus grande vitesse qu’avec des antennes "classiques".
+
+                <a
+                  href   = "http://fr.wikipedia.org/wiki/MIMO_(t%C3%A9l%C3%A9communications)"
+                  target = "_blank">
+
+                  En savoir plus
+                </a>
+              </div>
             </div>
           </div>
 
@@ -439,21 +435,6 @@
             class    = "box-body  box-body-mimo"
             ng-style = "{'border-color': colors.mimo}">
 
-            <div class = "box-description">
-
-              MiMo est une technique de multiplexage utilisée dans les réseaux sans fil et les réseaux mobiles permettant des transferts de données à plus longue portée et à plus grande vitesse qu’avec des antennes "classiques".
-            </div>
-
-            <div class = "box-description-more">
-
-              <a
-                href   = "http://fr.wikipedia.org/wiki/MIMO_(t%C3%A9l%C3%A9communications)"
-                target = "_blank">
-
-                En savoir plus
-              </a>
-            </div>
-
             <hr>
 
             <div class = "box-eligibilite-title">

js/app.js

@@ -16,13 +16,13 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
   $scope.title   = "Manche Numerique";
 
   var getGeoCodeInProgress = false,
-      nbJoursFTTH          = 300,
+      nbJoursFTTH          = 244,
       siteName             = 'Eligibilité Manche Numérique',
       siteUrl              = 'http://eligibilite.manchenumerique.fr',
       siteEmail            = 'ftth@manchenumerique.fr',
       siteAddresse         = '235, rue Joseph Cugnot Zone Delta, 50000 SAINT LÔ',
       layer                = {},
-      currentMarker;
+      currentMarker, searchExtent;
 
   var catTypeVoie = [
     {
@@ -401,7 +401,10 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
     if(currentMarker) {
       map.removeLayer(currentMarker);
     }
-    currentMarker = L.marker([$scope.geoCode.y, $scope.geoCode.x], {draggable: true}).addTo(map); //.bindPopup(data.locations[0].name).openPopup();
+
+    currentMarker = L.marker([$scope.geoCode.y, $scope.geoCode.x], {draggable: true, title: "texst"}).addTo(map); //.bindPopup(data.locations[0].name).openPopup();
+
+    currentMarker.bindPopup("L'adresse que vous nous avez fournie est localisée sur la carte. Il se peut que la position réelle de votre logement soit un peu différente. Dans ce cas, merci de déplacer le pointeur sur la carte pour le positionner à l'emplacement de votre logement.").openPopup();
 
     reverseLocation($scope.geoCode, null, function(address) {
       $scope.address = address;
@@ -560,7 +563,7 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
       "satellite" : 'http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
     };
 
-    var cLayer = L.tileLayer(maps.carte, {
+    var cLayer = L.tileLayer(maps.satellite, {
         attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
         maxZoom: 18
     }).addTo(map);
@@ -609,7 +612,7 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
       // Debug: show manche limits
       //L.polygon(mancheCoordinates, {color: 'blue', fillColor: 'blue',weight: 8}).addTo(map);
 
-      var searchExtent = {
+      searchExtent = {
         "xmin" : _.max(_.map(mancheCoordinates, function(c) {return c[1];})),
         "ymin" : _.max(_.map(mancheCoordinates, function(c) {return c[0];})),
         "xmax" : _.min(_.map(mancheCoordinates, function(c) {return c[1];})),
@@ -618,7 +621,6 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
       };
 
       var suggestURL = 'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest?f=pjson&searchExtent=' + JSON.stringify(searchExtent);
-      var findURL    = 'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/find?f=pjson&searchExtent=' + JSON.stringify(searchExtent);
 
       $('.address-bar input').typeahead({
         onSelect: function(item) {
@@ -653,36 +655,6 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
           }
         }
       });
-
-      $scope.getGeoCode = function(address, magicKey, callback) {
-        //console.log('address, magicKey', address, magicKey);
-
-        getGeoCodeInProgress = true;
-        var url = findURL + "&text=" + address + ((magicKey) ? ("&magicKey=" + magicKey) : ', Basse-Normandie, France');
-        //console.log('url', url);
-        $.get(
-        url,
-        function(data, status) {
-          data = JSON.parse(data);
-
-          if (status === 'success' && data.locations[0]) {
-
-            if(data.locations[0].extent.xmax < searchExtent.xmin &&
-              data.locations[0].extent.xmax > searchExtent.xmax &&
-              data.locations[0].extent.xmin > searchExtent.xmax&&
-              data.locations[0].extent.xmin > searchExtent.xmax) {
-
-              getGeoCodeInProgress = false;
-              return callback(null, data);
-            }
-            getGeoCodeInProgress = false;
-            callback('No result for ' + address);
-          } else {
-            getGeoCodeInProgress = false;
-            callback(status !== 'success' ? status : 'No result for ' + address);
-          }
-        });
-      };
     });
 
     //console.time('FTTH data');
@@ -754,7 +726,7 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
 
     window.map = map;
 
-    $scope.mapType = 'Carte';
+    $scope.mapType = 'Satellite';
     $scope.view    = {};
     $scope.isShown = {};
   };
@@ -902,6 +874,40 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
     return $sce.trustAsHtml($scope.getHtmlContent(identifier, results));
   };
 
+  $scope.getGeoCode = function(address, magicKey, callback) {
+    console.debug('address, magicKey', address, magicKey);
+
+    var findURL    = 'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/find?f=pjson&searchExtent=' + JSON.stringify(searchExtent);
+
+    getGeoCodeInProgress = true;
+    var url = findURL + "&text=" + address + ((magicKey) ? ("&magicKey=" + magicKey) : ', Basse-Normandie, France');
+    //console.log('url', url);
+    $.get(
+    url,
+    function(data, status) {
+      data = JSON.parse(data);
+
+      console.debug('address, magicKey', address, magicKey, data);
+
+      if (status === 'success' && data.locations[0]) {
+
+        if(data.locations[0].extent.xmax < searchExtent.xmin &&
+          data.locations[0].extent.xmax > searchExtent.xmax &&
+          data.locations[0].extent.xmin > searchExtent.xmax&&
+          data.locations[0].extent.xmin > searchExtent.xmax) {
+
+          getGeoCodeInProgress = false;
+          return callback(null, data);
+        }
+        getGeoCodeInProgress = false;
+        callback('No result for ' + address);
+      } else {
+        getGeoCodeInProgress = false;
+        callback(status !== 'success' ? status : 'No result for ' + address);
+      }
+    });
+  };
+
   $scope.getHtmlContent = function(identifier, record) {
 
     var title = record._properties.name.string ? record._properties.name.string : record[record._properties.name.key];