diff --git a/umap/static/umap/content.css b/umap/static/umap/content.css index c961e81e..ed0cc804 100644 --- a/umap/static/umap/content.css +++ b/umap/static/umap/content.css @@ -313,6 +313,55 @@ ul.umap-autocomplete { /* **************************** */ /* Dashboard */ /* **************************** */ +/* https://kittygiraudel.com/2020/12/03/a11y-advent-hiding-content/ */ +.sr-only { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + -webkit-clip-path: inset(50%) !important; + clip-path: inset(50%) !important; + height: 1px !important; + overflow: hidden !important; + margin: -1px !important; + padding: 0 !important; + position: absolute !important; + width: 1px !important; + white-space: nowrap !important; +} +/* https://kittygiraudel.com/2020/12/06/a11y-advent-skip-to-content/ */ +.sr-only.sr-only--focusable:focus, +.sr-only.sr-only--focusable:active { + clip: auto !important; + -webkit-clip-path: auto !important; + clip-path: auto !important; + height: auto !important; + overflow: visible !important; + width: auto !important; + white-space: normal !important; +} +.icon-dashboard { + display: inline-block; + height: 36px; + width: 36px; + margin: 3px; +} +.icon-view { + background-image: url('./img/icon-view.svg'); +} +.icon-share { + background-image: url('./img/icon-share.svg'); +} +.icon-edit { + background-image: url('./img/icon-edit.svg'); +} +.icon-download { + background-image: url('./img/icon-download.svg'); +} +.icon-duplicate { + background-image: url('./img/icon-duplicate.svg'); +} +.icon-delete { + background-image: url('./img/icon-delete.svg'); +} .table-header { display: flex; justify-content: space-between; @@ -366,9 +415,15 @@ table.maps a, table.maps thead { color: #263B58; } -table.maps a { +table.maps a:not(.icon-link) { text-decoration: underline; } +table.maps button.map-opener, +table.maps button.map-clone { + padding: 0; + border: none; + background: transparent; +} table.maps form { display: inline; } diff --git a/umap/static/umap/img/icon-delete.svg b/umap/static/umap/img/icon-delete.svg new file mode 100644 index 00000000..dbf47ce0 --- /dev/null +++ b/umap/static/umap/img/icon-delete.svg @@ -0,0 +1,4 @@ + + + + diff --git a/umap/static/umap/img/icon-download.svg b/umap/static/umap/img/icon-download.svg new file mode 100644 index 00000000..9b3ef499 --- /dev/null +++ b/umap/static/umap/img/icon-download.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/umap/static/umap/img/icon-duplicate.svg b/umap/static/umap/img/icon-duplicate.svg new file mode 100644 index 00000000..24689735 --- /dev/null +++ b/umap/static/umap/img/icon-duplicate.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/umap/static/umap/img/icon-edit.svg b/umap/static/umap/img/icon-edit.svg new file mode 100644 index 00000000..ceb1157d --- /dev/null +++ b/umap/static/umap/img/icon-edit.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/umap/static/umap/img/icon-share.svg b/umap/static/umap/img/icon-share.svg new file mode 100644 index 00000000..6cd1a1f0 --- /dev/null +++ b/umap/static/umap/img/icon-share.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/umap/static/umap/img/icon-view.svg b/umap/static/umap/img/icon-view.svg new file mode 100644 index 00000000..25fcef70 --- /dev/null +++ b/umap/static/umap/img/icon-view.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/umap/templates/umap/map_table.html b/umap/templates/umap/map_table.html index 2491a36f..b2e2c0e2 100644 --- a/umap/templates/umap/map_table.html +++ b/umap/templates/umap/map_table.html @@ -20,7 +20,11 @@ {{ map_inst.preview_settings|json_script:unique_id }} - +
@@ -37,14 +41,34 @@ {{ map_inst.owner }} - {% translate "Share" %} | - {% translate "Edit" %} | - {% translate "Download" %} | + + + {% translate "Share" %} + + + + {% translate "Edit" %} + + + + {% translate "Download" %} + {% csrf_token %} - -
| - {% translate "Delete" %} + + + + + {% translate "Delete" %} + {% endwith %} diff --git a/umap/templates/umap/user_dashboard.html b/umap/templates/umap/user_dashboard.html index cbbc58de..2ed05011 100644 --- a/umap/templates/umap/user_dashboard.html +++ b/umap/templates/umap/user_dashboard.html @@ -52,8 +52,9 @@ const CACHE = {} for (const mapOpener of document.querySelectorAll("button.map-opener")) { mapOpener.addEventListener('click', (event) => { - event.target.nextElementSibling.showModal() - const mapId = event.target.dataset.mapId + const button = event.target.closest('button') + button.nextElementSibling.showModal() + const mapId = button.dataset.mapId if (!document.querySelector(`#${mapId}_target`).hasChildNodes()) { const previewSettings = JSON.parse(document.getElementById(mapId).textContent) const map = new L.U.Map(`${mapId}_target`, previewSettings)