SVG Delete icon

- move delete SVG to file
- Include svg as content in CSS
- Use CSS in various places, move event handler to TD.

html/admin.html

@@ -96,12 +96,9 @@ <h2>All users</h2>
               <td><input @click.prevent="doChangeUserDisabled($data, u.user, $el)" type="checkbox"
                   x-bind:checked="u.disabled" />
               </td>
-
-              <td
-                x-text="if(u.lastLoginTstamp) return new Date(u.lastLoginTstamp * 1000).toLocaleString(); else return "";">
-              </td>
+              <td x-text="if(u.lastLoginTstamp) return new Date(u.lastLoginTstamp * 1000).toLocaleString(); else return "></td>
               <td x-text="u.email"></td>
-              <td><a href="#" @click.prevent="doDelUser($data, u.user)">X</a></td>
+              <td class="deleteicon" @click.prevent="doDelUser($data, u.user)"></td>
             </tr>
           </template>
         </table>
@@ -123,12 +120,9 @@ <h2>All sessions</h2>
               <td x-text="s.id"></td>
               <td x-text="s.user"></td>
               <td x-text="s.ip"></td>
-              <td x-text="if(s.createTstamp) return new Date(s.createTstamp * 1000).toLocaleString(); else return "";">
-              </td>
-              <td
-                x-text="if(s.lastUseTstamp) return new Date(s.lastUseTstamp * 1000).toLocaleString(); else return "";">
-              </td>
-              <td><a href="#" @click.prevent="doKillSession($data, s.id)">X</a></td>
+              <td x-text="if(s.createTstamp) return new Date(s.createTstamp * 1000).toLocaleString(); else return "></td>
+              <td x-text="if(s.lastUseTstamp) return new Date(s.lastUseTstamp * 1000).toLocaleString(); else return "></td>
+              <td class="deleteicon" @click.prevent="doKillSession($data, s.id)"></td>
             </tr>
           </template>
         </table>
@@ -158,8 +152,6 @@ <h2>All images</h2>
               <td x-text="g.size"></td>
               <td><input @click.prevent="doChangePublic($data, g.id, $el)" type="checkbox" x-bind:checked="g.public" />
               </td>
-
-
               <td><a x-bind:href="'i/'+g.id"><img loading="lazy" class="thumb" x-bind:src="'i/'+g.id"></a></td>
             </tr>
           </template>

html/index.html

@@ -108,16 +108,7 @@ <h2>Your images</h2>
                 </td>
                 <td><a x-bind:href="'index.html?i='+g.id"><img loading="lazy" class="thumb" x-bind:src="'i/'+g.id"></a>
                 </td>
-                <td><a href='#' @click.prevent="doDeleteImage($data, g.id).then(r => getMyImageList($data))">
-                    <!-- https://feathericons.dev/?search=trash2&iconset=feather -->
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"
-                      class="main-grid-item-icon" fill="none" stroke="currentColor" stroke-linecap="round"
-                      stroke-linejoin="round" stroke-width="2">
-                      <polyline points="3 6 5 6 21 6" />
-                      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-                      <line x1="10" x2="10" y1="11" y2="17" />
-                      <line x1="14" x2="14" y1="11" y2="17" />
-                    </svg>
+                <td class="deleteicon" @click.prevent="doDeleteImage($data, g.id).then(r => getMyImageList($data))">              
                 </td>
               </tr>
             </template>

html/style.css

@@ -161,3 +161,12 @@ button:hover {
     cursor: pointer;
     background-color: var(--clr-btn-surface-hover);
 }
+
+
+.deleteicon {
+    content: url(svg/delete.svg);
+    border: 0px;
+}
+.deleteicon:hover {
+    cursor: pointer;
+}