style flash messages

renuo · Jan 15, 2025 · 54636c0 · 54636c0
1 parent 46ba198
commit 54636c0
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 10 deletions.
diff --git a/app/assets/javascripts/hotsheet/controllers/application.js b/app/assets/javascripts/hotsheet/controllers/application.js
@@ -1,6 +1,8 @@
 import { Application } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
 import EditableAttributeController from "./controllers/editable_attribute_controller"
+import FlashController from "./controllers/flash_controller"
 
 window.Stimulus = Application.start()
 
 Stimulus.register("editable-attribute", EditableAttributeController)
+Stimulus.register("flash", FlashController)
diff --git a/app/assets/javascripts/hotsheet/controllers/flash_controller.js b/app/assets/javascripts/hotsheet/controllers/flash_controller.js
@@ -0,0 +1,8 @@
+import { Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
+
+export default class extends Controller {
+  close() {
+    this.element.addEventListener("animationend", () => { this.element.remove(); });
+    this.element.classList.add("closing");
+  }
+}
diff --git a/app/assets/stylesheets/hotsheet/application.css b/app/assets/stylesheets/hotsheet/application.css
@@ -8,8 +8,15 @@
  */
 
 :root {
-  --bg-color: lightgray;
   --sidebar-width: 12rem;
+  --main-padding-x: 2rem;
+  --main-padding-y: 3rem;
+
+  --bg-color: lightgray;
+  --success-color: green;
+  --alert-color: yellow;
+  --notice-color: blue;
+  --error-color: red;
 }
 
 body {
@@ -19,7 +26,7 @@ body {
 
 main {
   margin-left: var(--sidebar-width);
-  padding: 1rem;
+  padding: var(--main-padding-y) var(--main-padding-x);
 }
 
 aside {
@@ -36,7 +43,7 @@ aside {
     display: flex;
     flex-direction: column;
     margin: 0;
-    padding: 0.25rem;
+    padding: 0.5rem;
 
     a {
       border-radius: 0.5rem;
@@ -84,3 +91,58 @@ table {
     width: 100%;
   }
 }
+
+#flash-container {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  top: 1rem;
+  gap: 1rem;
+  justify-content: center;
+  width: calc(100% - var(--sidebar-width) - var(--main-padding-x) * 2);
+
+
+  .flash {
+    border-radius: 0.4rem;
+    padding: 0.75rem 1.25rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &.success {
+      background-color: rgb(from var(--success-color) r g b / 80%);
+    }
+
+    &.alert {
+      background-color: rgb(from var(--alert-color) r g b / 80%);
+    }
+
+    &.notice {
+      background-color: rgb(from var(--notice-color) r g b / 80%);
+    }
+
+    &.error {
+      background-color: rgb(from var(--error-color) r g b / 80%);
+    }
+
+    button.close {
+      background-color: transparent;
+      border: none;
+      cursor: pointer;
+      font-size: 1.5rem;
+    }
+
+    &.closing {
+      animation: fade-out 0.5s ease-in forwards; 
+    }
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
diff --git a/app/controllers/hotsheet/pages_controller.rb b/app/controllers/hotsheet/pages_controller.rb
@@ -17,7 +17,7 @@ def update # rubocop:disable Metrics/AbcSize
       record = model.find params[:id]
 
       if record.update model_params
-        flash[:notice] = t("hotsheet.success", record: model.model_name.human)
+        flash[:success] = t("hotsheet.success", record: model.model_name.human)
       else
         flash[:alert] = t("hotsheet.error", record: model.model_name.human,
                                             errors: record.errors.full_messages.join(", "))

diff --git a/app/views/layouts/hotsheet/_flash.html.erb b/app/views/layouts/hotsheet/_flash.html.erb
@@ -1,7 +1,10 @@
 <%# locals: () %>
 
-<% flash.each do |type, msg| %>
-  <div class='flash <%= type %>'>
-    <span><%= msg %></span>
-  </div>
-<% end %>
+<div id='flash-container'>
+  <% flash.each do |type, msg| %>
+    <div class='flash <%= type %>' data-controller='flash'>
+      <span><%= msg %></span>
+      <button class='close' data-action='click->flash#close'>&times;</button>
+    </div>
+  <% end %>
+</div>
diff --git a/app/views/layouts/hotsheet/application.html.erb b/app/views/layouts/hotsheet/application.html.erb
@@ -14,8 +14,8 @@
   </head>
   <body>
     <%= render "layouts/hotsheet/sidebar" %>
-    <%= render "layouts/hotsheet/flash" %>
     <main>
+      <%= render "layouts/hotsheet/flash" %>
       <%= yield %>
     </main>
   </body>