Merge pull request #68 from openstreetmap-polska/development

Development

README.md

@@ -67,11 +67,25 @@ cp /home/aeduser/data_dir/aed_poland.csv /var/www/html/aed_poland.csv
 
 #### Editing style
 
+You can use [Maputnik](https://maputnik.github.io/) editor to prepare new style for the map.
+
+Steps:
+1. Open https://aed.openstreetmap.org.pl/maputnik/?layer=1311944204%7E0#6/52/20 (it's a copy of maputnik editor with newer version than what is available on the official site).
+2. If the AED map style has not been loaded click _open_ and select it.
+3. Once finished click _export_ and create PR or an issue with your style attached.
+
 #### Creating sprites with icons
 
+If you want to add new icons to the sprite sheet please place the SVG files in ./src/marker_icons/ folder.
+
+SVG should be scaled to 50x50px size.
+
 ```bash
+# install requirements (assumes NVM has been installed)
 nvm use 8
 npm install -g @mapbox/spritezero-cli
+# create sprite for regular screens
 spritezero --ratio 1 ./src/map_style/sprite ./src/marker_icons/
+# create sprite for high-dpi screens
 spritezero --ratio 2 ./src/map_style/sprite@2x ./src/marker_icons/
 ```

index.html

@@ -162,10 +162,7 @@
   <div class="card">
 
     <div id="sidebar2-header">
-      <div class="columns is-vcentered is-flex mr-0">
-        <div class="column ml-4 my-3">
-<!--          <p class="title has-text-weight-light" id="sidebar2-caption">Ustawienia</p>-->
-        </div>
+      <div class="columns is-vcentered is-flex mr-0 is-pulled-right">
         <button aria-label="Zamknij panel boczny"
                 class="delete is-medium is-hidden-touch is-pulled-right close-button mr-2 mt-5"
                 id="sidebar2-button-close-touch"></button>
@@ -175,9 +172,11 @@
       </div>
     </div>
 
-    <div class="card-content pt-3 pb-3">
-      <div class="content" id="sidebar2-content-div">
-        <p>Pobierz dane o AED dodanych do OSM:</p>
+    <div class="px-4 pt-5 pb-4">
+      <div class="content has-text-weight-light" id="sidebar2-content-div">
+        <p class="has-text-weight-normal"><svg class="icon mr-1" style="width:24px;height:24px" viewBox="0 0 24 24">
+          <path fill="#7a7a7a" d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
+      </svg>Pobierz dane o dodanych AED do OSM</p>
         <a class="button is-success" href="./aed_poland.geojson" target="_blank" download>
           <svg class="icon mr-2" style="width:24px;height:24px" viewBox="0 0 24 24">
             <path
@@ -199,11 +198,11 @@
               fill="currentColor"/>
           </svg>
           Excel</a>
-        <hr>
-        <button class="button is-success" onclick="window.open(map.getCanvas().toDataURL())">
+        <hr class="my-3">
+        <button class="button is-success has-text-weight-light" onclick="window.open(map.getCanvas().toDataURL())">
           <svg class="icon mr-2" style="width:24px;height:24px" viewBox="0 0 24 24">
             <path fill="currentColor" d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" />
-        </svg> Zapisz widok mapy jako obraz
+        </svg> Zapisz aktualny widok mapy jako obraz
         </button>
         <p class="has-text-weight-light is-size-7">
           (otwiera nowe okno)
@@ -443,6 +442,21 @@
           </div>
         </div>
 
+        <div class="media">
+          <div class="media-left">
+            <figure class="image is-48x48">
+              <img
+                alt=""
+                src="./src/img/logos/star-of-life.png"
+              />
+            </figure>
+          </div>
+          <div class="media-content">
+            <p class="is-size-6">lek. med.  <span class="has-text-weight-semibold">Dorota Konaszczuk</span></p>
+            <span class="has-text-weight-light has-text-grey is-size-6">Konsultant wojewódzki ds. zdrowia publicznego (lubuskie)</span>
+          </div>
+        </div>
+
       </div>
 
     </section>
@@ -479,7 +493,7 @@
           <span class="has-text-weight-semibold" id="aed-number">
               <button class="button is-danger is-loading is-small" disabled></button>
           </span>
-          <div class="is-hidden" id="aed-number-comment">&nbsp;dodanych AED</div>
+          <div class="is-hidden" id="aed-number-comment">&nbsp;dodanych <span class="has-text-weight-semibold">AED</span></div>
         </div>
         <div class="button is-info mt-1 ml-1 has-text-weight-light js-modal-trigger" data-target="modal-partners-div">
           <svg class="icon mr-1" style="width:24px;height:24px" viewBox="0 0 24 24">

src/css/main.css

@@ -60,16 +60,16 @@
     .sidebar-right {
       position: relative;
       float: right;
-      right: 40px;
       top: 50px;
       z-index: 1;
       margin: 0.5rem !important;
-      width: 400px;
+      width: 375px;
       border-radius: 10px;
       box-shadow: 0 .5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);
       max-height: 90vh;
       overflow: auto !important;
       z-index: 10 !important;
+      border: 2px solid hsl(0, 0%, 96%);
     }
   }
 

src/map_style/style.json

@@ -44,7 +44,7 @@
       "layout": {
         "icon-image": "marker_default",
         "icon-size": 0.5,
-        "icon-overlap": "always"
+        "icon-allow-overlap": true
       }
     },
     {