feat: improve activities

assets/css/app.css

@@ -26,3 +26,15 @@ input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
   -webkit-box-shadow: 0 0 0 30px white inset !important;
 }
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}

assets/js/app.js

@@ -18,46 +18,54 @@
 //
 
 // Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
-import "phoenix_html"
+import "phoenix_html";
 // Establish Phoenix Socket and LiveView configuration.
-import {Socket} from "phoenix"
-import {LiveSocket} from "phoenix_live_view"
+import { Socket } from "phoenix";
+import { LiveSocket } from "phoenix_live_view";
 import "../vendor/alpine.js";
-import topbar from "../vendor/topbar"
-import { QrScanner, InitSorting, StickyScroll, ScrollToTop } from "./hooks";
-import phxFeedbackDom from "./shims/phx_feedback_dom.js"
+import topbar from "../vendor/topbar";
+import {
+  QrScanner,
+  InitSorting,
+  StickyScroll,
+  ScrollToTop,
+  FocusEnd,
+} from "./hooks";
+import phxFeedbackDom from "./shims/phx_feedback_dom.js";
 
 let Hooks = {
   QrScanner: QrScanner,
   InitSorting: InitSorting,
   StickyScroll: StickyScroll,
-  ScrollToTop: ScrollToTop
+  ScrollToTop: ScrollToTop,
+  FocusEnd: FocusEnd,
 };
 
-let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
+let csrfToken = document
+  .querySelector("meta[name='csrf-token']")
+  .getAttribute("content");
 let liveSocket = new LiveSocket("/live", Socket, {
-    params: { _csrf_token: csrfToken },
-    hooks: Hooks,
-    dom:  phxFeedbackDom({
-      onBeforeElUpdated(from, to) {
-        if (from._x_dataStack) {
-          window.Alpine.clone(from, to);
-        }
+  params: { _csrf_token: csrfToken },
+  hooks: Hooks,
+  dom: phxFeedbackDom({
+    onBeforeElUpdated(from, to) {
+      if (from._x_dataStack) {
+        window.Alpine.clone(from, to);
       }
-    }),
-  });
+    },
+  }),
+});
 
 // Show progress bar on live navigation and form submits
-topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
-window.addEventListener("phx:page-loading-start", info => topbar.show())
-window.addEventListener("phx:page-loading-stop", info => topbar.hide())
+topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" });
+window.addEventListener("phx:page-loading-start", (info) => topbar.show());
+window.addEventListener("phx:page-loading-stop", (info) => topbar.hide());
 
 // connect if there are any LiveViews on the page
-liveSocket.connect()
+liveSocket.connect();
 
 // expose liveSocket on window for web console debug logs and latency simulation:
 // >> liveSocket.enableDebug()
 // >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
 // >> liveSocket.disableLatencySim()
-window.liveSocket = liveSocket
-
+window.liveSocket = liveSocket;

assets/js/hooks/focus_end.js

@@ -0,0 +1,11 @@
+export const FocusEnd = {
+  mounted() {
+    const input = this.el;
+    if (input && input.focus) {
+      input.focus();
+      const val = input.value;
+      input.value = "";
+      input.value = val;
+    }
+  },
+};

assets/js/hooks/index.js

@@ -1,4 +1,5 @@
 export { QrScanner } from "./qr_reading.js";
 export { InitSorting } from "./sorting.js";
 export { StickyScroll } from "./sticky_scroll.js";
-export { ScrollToTop } from "./scroll_to_top.js";
+export { ScrollToTop } from "./scroll_to_top.js";
+export { FocusEnd } from "./focus_end.js";