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 %>