feat: button images

1 year ago · 49d0405dd4
14 changed files with 31 additions and 8 deletions
--- a/pages/base.html
+++ b/pages/base.html
@ -7,22 +7,22 @@
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dela</title>
+    <link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
-    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
 </head>

 <body class="d-flex flex-column h-100">
-    <header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
+    <header class="d-flex flex-wrap align-items-center justify-content-center py-3 mb-4 border-bottom">
        <div class="col-md-3 mb-2 mb-md-0">
          <a href="/" class="d-inline-flex link-body-emphasis text-decoration-none">
-            <img width="32" height="32" src="/static/android-chrome-192x192.png" alt="Dela">
+            <img width="64" height="64" src="/static/android-chrome-192x192.png" alt="Dela">
          </a>
        </div>
  
        <div class="col-md-3 text-end" id="bar-auth">
-          <a href="/login" class="btn btn-outline-primary me-2">Log in</a>
-          <a href="/register" class="btn btn-primary">Register</a>
+          <a href="/login" class="btn btn-outline-primary"><img src="/static/images/door-open-fill.svg" alt="Log in"></a>
+          <a href="/register" class="btn btn-outline-primary"><img src="/static/images/person-fill-add.svg" alt="Register"></a>
        </div>
    </header>

@ -55,7 +55,7 @@
        if (response.ok) {
            let barAuth = document.getElementById("bar-auth");
            barAuth.innerHTML = "<b>" + username + "</b>" + " | ";
-            barAuth.innerHTML += '<button id="log-out-btn" class="btn btn-primary" type="button">Log out</button>';
+            barAuth.innerHTML += '<button id="log-out-btn" class="btn btn-outline-primary"><img src="/static/images/person-dash-fill.svg"></button>';
            document.getElementById("log-out-btn").addEventListener("click", (event) => {
                // Log out
                forgetAuthInfo();
--- a/pages/index.html
+++ b/pages/index.html
@ -17,7 +17,7 @@
 </form>


-<div class="container text-center" style="margin-top: 40px;">
+<div class="container text-center" style="margin-top: 4ch;">
    <table id="todos" class="table table-hover" style="word-wrap: break-word;"></table>
 </div>

@ -64,13 +64,16 @@ document.addEventListener('DOMContentLoaded', async function() {

            todos.push(item);
            let todoCompleteBtnID = "btn-complete-" + String(item.id);
+            let todoDeleteBtnID = "btn-delete-" + String(item.id);
+            let todoEditBtnID = "btn-edit-" + String(item.id);

            // Display
            let timeCreated = new Date(item.timeCreatedUnix * 1000);
            todosDiv.innerHTML += "<tr><td>" +  item.text + "</td>" +
                "<td>" + " " + timeCreated.getDate() + "/" + timeCreated.getMonth() + "/" + timeCreated.getFullYear() + "</td>" +
                "<td><button class='btn btn-success' id='" + todoCompleteBtnID + "'>" + 
-                "Done</button></td></tr>";
+                "<img src='/static/images/check.svg'></button><button class='btn btn-danger id='"
+                 + todoDeleteBtnID + "><img src='/static/images/trash3-fill.svg'></button></td></tr>";
            
                completeButtonIDs.push(todoCompleteBtnID);
        });
--- a/static/images/android-chrome-192x192.png
+++ b/static/images/android-chrome-192x192.png
--- a/static/images/android-chrome-512x512.png
+++ b/static/images/android-chrome-512x512.png
--- a/static/images/apple-touch-icon.png
+++ b/static/images/apple-touch-icon.png
--- a/static/images/check.svg
+++ b/static/images/check.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
+  <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
+</svg>
--- a/static/images/door-open-fill.svg
+++ b/static/images/door-open-fill.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-door-open-fill" viewBox="0 0 16 16">
+  <path d="M1.5 15a.5.5 0 0 0 0 1h13a.5.5 0 0 0 0-1H13V2.5A1.5 1.5 0 0 0 11.5 1H11V.5a.5.5 0 0 0-.57-.495l-7 1A.5.5 0 0 0 3 1.5V15H1.5zM11 2h.5a.5.5 0 0 1 .5.5V15h-1V2zm-2.5 8c-.276 0-.5-.448-.5-1s.224-1 .5-1 .5.448.5 1-.224 1-.5 1z"/>
+</svg>
--- a/static/images/favicon-16x16.png
+++ b/static/images/favicon-16x16.png
--- a/static/images/favicon-32x32.png
+++ b/static/images/favicon-32x32.png
--- a/static/images/favicon.ico
+++ b/static/images/favicon.ico
--- a/static/images/person-dash-fill.svg
+++ b/static/images/person-dash-fill.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-dash-fill" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M11 7.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z"/>
+  <path d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
+</svg>
--- a/static/images/person-fill-add.svg
+++ b/static/images/person-fill-add.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill-add" viewBox="0 0 16 16">
+  <path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm.5-5v1h1a.5.5 0 0 1 0 1h-1v1a.5.5 0 0 1-1 0v-1h-1a.5.5 0 0 1 0-1h1v-1a.5.5 0 0 1 1 0Zm-2-6a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
+  <path d="M2 13c0 1 1 1 1 1h5.256A4.493 4.493 0 0 1 8 12.5a4.49 4.49 0 0 1 1.544-3.393C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4Z"/>
+</svg>
--- a/static/images/trash3-fill.svg
+++ b/static/images/trash3-fill.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3-fill" viewBox="0 0 16 16">
+  <path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5Zm-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5ZM4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06Zm6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528ZM8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5Z"/>
+</svg>
--- a/static/images/x.svg
+++ b/static/images/x.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
+  <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
+</svg>