mirror
/
maloja
mirror of https://github.com/krateng/maloja.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Improved delete button

This commit is contained in:
krateng 2022-04-07 20:00:09 +02:00
parent 2deb5f0e36
commit c9fa9956bb
2 changed files with 44 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
maloja/web/jinja/partials/scrobbles.jinja
View File

@ -13,12 +13,19 @@
<td class='time'>{{ malojatime.timestamp_desc(s["time"],short=shortTimeDesc) }}</td> <td class='time'>{{ malojatime.timestamp_desc(s["time"],short=shortTimeDesc) }}</td>
{{ entityrow.row(s.track) }} {{ entityrow.row(s.track) }}
{% if adminmode %} {% if adminmode %}
<td class='iconbuttons'>
<div class='clickable_icon danger'> <td class='delete_area'>
<svg style="width:16px;height:16px" viewBox="0 0 24 24"> <span class="confirmactions">
<path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" /> <button class="smallbutton warning">Confirm</button>
</svg> <button class="smallbutton" onclick="this.parentElement.parentElement.classList.remove('active')">Cancel</button>
</span>
<div class='deleteicon clickable_icon danger' onclick="this.parentElement.classList.add('active')">
<svg style="width:14px;height:14px" viewBox="0 0 24 24">
<path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" />
</svg>
</div> </div>
</td> </td>
{% endif %} {% endif %}
</tr> </tr>

36
maloja/web/static/css/maloja.css
View File

@ -446,11 +446,21 @@ button:hover {
background-color: var(--button-color-bg-focus); background-color: var(--button-color-bg-focus);
color: var(--button-color-fg-focus); color: var(--button-color-fg-focus);
} }
button.warning:hover {
background-color:darkred;
color:white;
}
button.locked { button.locked {
background-color:grey; background-color:grey;
color:black; color:black;
cursor:not-allowed; cursor:not-allowed;
} }
button.smallbutton {
padding:1px;
padding-right:2px;
padding-left:2px;
font-size: 80%;
}
@ -479,6 +489,7 @@ table.list {
table.list tr { table.list tr {
background-color: var(--current-bg-color); background-color: var(--current-bg-color);
border-color: var(--current-bg-color); border-color: var(--current-bg-color);
height: 1.4em;
} }
@ -500,10 +511,14 @@ table.list tr:nth-child(even) {
/* make rows distinguishable with respect to any bg color */ /* make rows distinguishable with respect to any bg color */
} }
table.list tr:nth-child(5n) td { table.list tr:nth-child(4n) td {
border-bottom: 1px solid rgba(120,120,120,0.2); border-bottom: 1px solid rgba(120,120,120,0.4);
padding-bottom: 1px; padding-bottom: 1px;
} }
table.list tr:nth-child(4n+1) td {
border-top: 1px solid rgba(120,120,120,0.4);
padding-top: 1px;
}
table.list tr:hover { table.list tr:hover {
--current-bg-color: rgba(255,255,255,0.2); --current-bg-color: rgba(255,255,255,0.2);
@ -572,9 +587,22 @@ table.list td.searchProvider:hover {
color: gold; color: gold;
} }
table.list td.iconbuttons { table.list td.delete_area {
text-align: right; text-align: right;
width:40px; width:7em;
}
table.list td.delete_area span.confirmactions {
display:none;
}
table.list td.delete_area.active span.confirmactions {
display:inline-block;
}
table.list td.delete_area div.deleteicon {
display:inline-block;
}
table.list td.delete_area.active div.deleteicon {
display:none;
} }