feat(list): style marker popup

Author: Paweł Marynowski

src/components/main/list/list.js

@@ -105,7 +105,17 @@ function controller($state, $stateParams, $timeout, leafletData, localStorageSer
           vm.map.markers[element.name.value_id] = {
             lat: +element.coord[1],
             lng: +element.coord[0],
-            message: element.name.value,
+            message: `
+                <md-list-item class="md-2-line"
+                    ui-sref="main.object({id: ${element.name.value_id.substring(1)}})">
+                <div class="list__image" layout="row" layout-align="center center">
+                  <img ng-src="{{'${element.image}'}}" alt="${element.name.value}" ng-if="${!!element.image}">
+                </div>
+                <div class="md-list-item-text" layout="column">
+                  <p>${element.name.value}</p>
+                  <p class="muted">${element.admin.value}</p>
+                </div>
+              </md-list-item>`,
             layer: 'monuments',
             icon: icon
           };

src/components/main/list/list.scss

@@ -35,6 +35,21 @@ mo-list {
             width: 100%;
             height: 100%;
         }
+
+        .leaflet-popup-close-button {
+            z-index: 1;
+            padding: 5px;
+        }
+
+        .leaflet-popup-content-wrapper {
+            border-radius: 2px;
+        }
+
+        .leaflet-popup-content {
+            min-width: 300px;
+            margin: 0;
+            font: 16px Roboto, Arial, sans-serif;
+        }
     }
 
     md-autocomplete {