UI fixes + change style of buttons (sidebar)

pull/43/head
Maciej 2022-01-14 11:55:16 +01:00
rodzic 2b5913c739
commit ab0db7e9c2
3 zmienionych plików z 28 dodań i 32 usunięć

Wyświetl plik

@ -108,8 +108,7 @@
<div id="sidebar-header">
<div class="columns is-vcentered is-flex mr-0">
<div class="column is-one-quarter is-one -fifth-mobile ">
<div class="column is-one-quarter is-one-fifth-mobile ">
<img class="image" src="./src/img/card-image.png" alt="Placeholder image" id="sidebar-card-image">
</div>
<div class="column">

Wyświetl plik

@ -14,6 +14,10 @@
padding: 0;
}
.button[disabled] {
opacity: 0.7 !important;
}
#map {
position: absolute;
top: 0;
@ -196,17 +200,4 @@
.image-gugik {
height: 55px;
width: 100px;
}
.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;
}

Wyświetl plik

@ -246,27 +246,33 @@ function renderSidebarForm() {
}
function renderEditButton(osm_id) {
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>
return `
<button onclick="window.open('${getOsmEditLink(osm_id)}', '_blank')" id="edit-poi" class="button is-small is-pulled-right is-success">
<svg class="icon" 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>
Uzupełnij dane&nbsp;<sup class="has-text-weight-light">(iD)</sup>
</button>`;
}
function renderPreviewButton(osm_id) {
return `
<button onclick="window.open('${getOsmPreviewLink(osm_id)}', '_blank')" id="preview-poi" class="button is-small mr-1 is-pulled-right is-success">
<svg class="icon mr-1" 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>
Podgląd w OSM
</button>`;
}
function renderSaveButton() {
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>`;
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>`;
}
// --------------------------------------------------------------