added new buttons to sidebar

src/css/main.css

@@ -201,4 +201,12 @@
   .button[disabled]
   {
     opacity: 0.7 !important;
+  }
+  #edit-poi:hover:after {
+    content:"Edytuj (iD)";
+    margin-left: 15px;
+  }
+  #preview-poi:hover:after {
+    content:"Podejrzyj w OSM";
+    margin-left: 15px;
   }

src/other-ui-stuff.js

@@ -64,6 +64,10 @@ function getOsmEditLink(id) {
     return `https://www.openstreetmap.org/edit?editor=id&node=${id}`;
 }
 
+function getOsmPreviewLink(id) {
+    return `https://www.openstreetmap.org/node/${id}`;
+}
+
 function parseOpeningHours(openingHours) {
 
     if (openingHours) {
@@ -242,20 +246,27 @@ function renderSidebarForm() {
 }
 
 function renderEditButton(osm_id) {
-    return `<a href="${getOsmEditLink(osm_id)}" target="_blank" rel="noopener"
-      class="has-background-success-light card-footer-item is-size-7 has-text-weight-semibold"
-      >Dodaj brakujące informacje w OSM</a>`;
+    return `<button onclick="location.href='${getOsmEditLink(osm_id)}'" id="edit-poi" class="button is-normal is-pulled-right is-success">
+      <svg class="icon mr" viewBox="0 0 24 24">
+      <path fill="currentColor" d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z" />
+     </svg></button>`;
+}
+
+function renderPreviewButton(osm_id) {
+    return `<button onclick="location.href='${getOsmPreviewLink(osm_id)}'" id="preview-poi" class="button mr-1 is-normal is-pulled-right is-success">
+      <svg class="icon mr" viewBox="0 0 24 24">
+      <path fill="currentColor" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
+     </svg>
+     </button>`;
 }
 
 function renderSaveButton() {
-    return `
-    <button id="sidebar-save-button" class="button is-success is-fullwidth" onclick="saveNode(prepareNodeData())">
+    return `<button id="sidebar-save-button" class="button is-success is-fullwidth" onclick="saveNode(prepareNodeData())">
         Dodaj AED
     </button> 
     <div class="is-hidden-desktop">
     <span class="has-text-weight-light has-text-grey-light is-size-7 pt-1 is-pulled-right">ver. 0.1</span>
-    </div>
-    `;
+    </div>`;
 }
 
 // --------------------------------------------------------------
@@ -332,6 +343,7 @@ function prepareSidebarShowingObjectInfo(properties) {
     sidebarContent.innerHTML = renderSidebarContent(properties);
 
     sidebarLink.innerHTML = renderEditButton(properties.osm_id);
+    sidebarLink.innerHTML += renderPreviewButton(properties.osm_id);
 }
 
 function prepareSidebarAddingNode(properties) {