add sticky toolbox & flashes

Author: enchant97

src/note_mark/static/style.css

@@ -187,6 +187,11 @@ input {
 
 /* flash styles */
 .flashes {
+    position: fixed;
+    float: right;
+    top: 10px;
+    right: 0;
+    z-index: 99;
     display: flex;
     flex-direction: column;
     gap: 2px;
@@ -242,6 +247,14 @@ input {
     flex-wrap: nowrap;
 }
 
+.sticky-control-bar {
+    position: fixed;
+    float: right;
+    top: 10px;
+    left: 5px;
+    z-index: 2;
+}
+
 #note-content {
     width: 100%;
     background-color: var(--bg-body2);

src/note_mark/static/textarea-edit.js

@@ -6,6 +6,22 @@ const text_area = document.getElementById("edit-note-content");
 text_area.style.height = (text_area.scrollHeight + "px");
 text_area.addEventListener("input", _event => { auto_resize_elem(text_area); });
 
+const toolbox = document.getElementById("edit-toolbox");
+const toolbox_offset = toolbox.offsetTop;
+window.addEventListener("scroll", toggle_sticky_toolbox);
+
+/**
+ * allow for the toolbox to stick to
+ * top of page when it goes out of view
+ */
+function toggle_sticky_toolbox() {
+    if (window.pageYOffset >= toolbox_offset) {
+        toolbox.classList.add("sticky-control-bar")
+    } else {
+        toolbox.classList.remove("sticky-control-bar");
+    }
+}
+
 /**
  * adds a event listener for handling auto-save,
  * should only be called once

src/note_mark/templates/personal-home/note/edit.jinja2

@@ -9,7 +9,7 @@
     <button onclick="ask_before_get(`{{ url_for('personal_home.delete_note', notebook_uuid=note.notebook_id, note_uuid=note.uuid)}}`)">Delete</button>
 </div>
 <form class="container" id="form-edit-note" action="" method="post">
-    <div class="control-bar">
+    <div class="control-bar" id="edit-toolbox">
         <button type="submit">Save</button>
         {% include "/shared/includes/edit-toolbox.jinja2" %}
     </div>

src/note_mark/templates/share-link/note/edit.jinja2

@@ -10,7 +10,7 @@
     <a class="button" href="{{ url_for('share_link.view_note', share_link_uuid=share_link_uuid, note_uuid=note.uuid) }}">View</a>
 </div>
 <form class="container" id="form-edit-note" action="" method="post">
-    <div class="control-bar">
+    <div class="control-bar" id="edit-toolbox">
         <button type="submit">Save</button>
         {% include "/shared/includes/edit-toolbox.jinja2" %}
     </div>