From c5435ac41273e5e8438d0b57ebb8477461f79811 Mon Sep 17 00:00:00 2001 From: Trevor Vallender Date: Fri, 14 Jun 2024 08:39:38 +0100 Subject: [PATCH] Table notifications --- app/assets/stylesheets/colors.css | 1 + app/assets/stylesheets/notifications.css | 13 +++++++++++++ .../controllers/notifications_controller.js | 9 +++++++++ app/models/dice_roll.rb | 2 ++ app/views/layouts/application.html.erb | 1 + app/views/layouts/table.html.erb | 4 ++++ app/views/shared/_notification.html.erb | 3 +++ 7 files changed, 33 insertions(+) create mode 100644 app/assets/stylesheets/notifications.css create mode 100644 app/javascript/controllers/notifications_controller.js create mode 100644 app/views/shared/_notification.html.erb diff --git a/app/assets/stylesheets/colors.css b/app/assets/stylesheets/colors.css index 7af4a41..f88a296 100644 --- a/app/assets/stylesheets/colors.css +++ b/app/assets/stylesheets/colors.css @@ -9,6 +9,7 @@ --secondary-text-color: #777; --inset-bg-color: #eee; + --notification-bg-color: #eee; --border-radius: .5em; diff --git a/app/assets/stylesheets/notifications.css b/app/assets/stylesheets/notifications.css new file mode 100644 index 0000000..05bdf38 --- /dev/null +++ b/app/assets/stylesheets/notifications.css @@ -0,0 +1,13 @@ +#table-notifications { + position: fixed; + width: 60em; + max-width: 80%; + top: 1em; left: 0; + transform: translate(calc(50vw - 50%)); + li { + background-color: var(--notification-bg-color); + list-style-type: none; + padding: .5em; + border-radius: var(--border-radius); + } +} diff --git a/app/javascript/controllers/notifications_controller.js b/app/javascript/controllers/notifications_controller.js new file mode 100644 index 0000000..f3c466a --- /dev/null +++ b/app/javascript/controllers/notifications_controller.js @@ -0,0 +1,9 @@ +import { Controller } from "@hotwired/stimulus" + +export default class extends Controller { + connect() { + setTimeout(() => { + this.element.remove() + }, 5000) + } +} diff --git a/app/models/dice_roll.rb b/app/models/dice_roll.rb index 12252c6..1aef23a 100644 --- a/app/models/dice_roll.rb +++ b/app/models/dice_roll.rb @@ -9,6 +9,8 @@ class DiceRoll < ApplicationRecord after_create_commit do broadcast_append_to table, target: "events" + broadcast_append_to table, target: "table-notifications", + partial: "shared/notification", locals: { object: self } end def display_text diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 94cf450..d844ccd 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -14,6 +14,7 @@
+ <%= yield(:header_content) if content_for?(:header_content) %>

<%= link_to t("site_name"), root_path %>