Skip to content

Commit 4a480b4

Browse files
ignaciosyignaciosy
authored
Flash messages layout (#38)
* bump version * try to add nokogiri 1.18.1 for rails 7.1 * revert try to add nokogiri 1.18.1 for rails 7.1 * style flash messages * bump version * apply feedback * version and changelog
1 parent 0792bb3 commit 4a480b4

File tree

7 files changed

+86
-10
lines changed

7 files changed

+86
-10
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
## [Unreleased](https://github.com/renuo/hotsheet/compare/v0.1.0..HEAD)
22

33
- Configure compatible Ruby/Rails versions for testing
4+
- Improve flash messages layout
45

56
## [0.1.0](https://github.com/renuo/hotsheet/releases/tag/v0.1.0) (2024-11-05)
67

‎app/assets/javascripts/hotsheet/controllers/application.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { Application } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
22
import EditableAttributeController from "./controllers/editable_attribute_controller"
3+
import FlashController from "./controllers/flash_controller"
34

45
window.Stimulus = Application.start()
56

67
Stimulus.register("editable-attribute", EditableAttributeController)
8+
Stimulus.register("flash", FlashController)

‎app/assets/javascripts/hotsheet/controllers/flash_controller.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
2+
3+
export default class extends Controller {
4+
close() {
5+
this.element.addEventListener("animationend", () => { this.element.remove(); });
6+
this.element.classList.add("closing");
7+
}
8+
}

‎app/assets/stylesheets/hotsheet/application.css

Lines changed: 65 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,15 @@
88
*/
99

1010
:root {
11-
--bg-color: lightgray;
1211
--sidebar-width: 12rem;
12+
--main-padding-x: 2rem;
13+
--main-padding-y: 2rem;
14+
15+
--bg-color: lightgray;
16+
--success-color: green;
17+
--alert-color: yellow;
18+
--notice-color: blue;
19+
--error-color: red;
1320
}
1421

1522
body {
@@ -19,7 +26,7 @@ body {
1926

2027
main {
2128
margin-left: var(--sidebar-width);
22-
padding: 1rem;
29+
padding: var(--main-padding-y) var(--main-padding-x);
2330
}
2431

2532
aside {
@@ -36,7 +43,7 @@ aside {
3643
display: flex;
3744
flex-direction: column;
3845
margin: 0;
39-
padding: 0.25rem;
46+
padding: 0.5rem;
4047

4148
a {
4249
border-radius: 0.5rem;
@@ -84,3 +91,58 @@ table {
8491
width: 100%;
8592
}
8693
}
94+
95+
.flash-container {
96+
position: fixed;
97+
display: flex;
98+
flex-direction: column;
99+
bottom: 1rem;
100+
right: 1rem;
101+
gap: 1rem;
102+
max-width: calc(100% - var(--sidebar-width) - var(--main-padding-x));
103+
104+
.flash {
105+
border-radius: 0.4rem;
106+
padding: 0.75rem 1.25rem;
107+
display: flex;
108+
justify-content: space-between;
109+
align-items: center;
110+
gap: 1rem;
111+
112+
&.success {
113+
background-color: rgb(from var(--success-color) r g b / 80%);
114+
}
115+
116+
&.alert {
117+
background-color: rgb(from var(--alert-color) r g b / 80%);
118+
}
119+
120+
&.notice {
121+
background-color: rgb(from var(--notice-color) r g b / 80%);
122+
}
123+
124+
&.error {
125+
background-color: rgb(from var(--error-color) r g b / 80%);
126+
}
127+
128+
.btn-close {
129+
background-color: transparent;
130+
border: none;
131+
cursor: pointer;
132+
font-size: 1.5rem;
133+
}
134+
135+
&.closing {
136+
animation: fade-out 0.5s ease-in forwards;
137+
}
138+
}
139+
}
140+
141+
@keyframes fade-out {
142+
from {
143+
opacity: 1;
144+
}
145+
to {
146+
opacity: 0;
147+
}
148+
}

‎app/controllers/hotsheet/pages_controller.rb

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ def update # rubocop:disable Metrics/AbcSize
1717
record = model.find params[:id]
1818

1919
if record.update model_params
20-
flash[:notice] = t("hotsheet.success", record: model.model_name.human)
20+
flash[:success] = t("hotsheet.success", record: model.model_name.human)
2121
else
2222
flash[:alert] = t("hotsheet.error", record: model.model_name.human,
2323
errors: record.errors.full_messages.join(", "))

‎app/views/layouts/hotsheet/_flash.html.erb

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<%# locals: () %>
22

3-
<% flash.each do |type, msg| %>
4-
<div class='flash <%= type %>'>
5-
<span><%= msg %></span>
6-
</div>
7-
<% end %>
3+
<div class='flash-container'>
4+
<% flash.each do |type, msg| %>
5+
<div class='flash <%= type %>' data-controller='flash'>
6+
<span><%= msg %></span>
7+
<button class='btn-close' data-action='click->flash#close'>&times;</button>
8+
</div>
9+
<% end %>
10+
</div>

‎app/views/layouts/hotsheet/application.html.erb

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
</head>
1515
<body>
1616
<%= render "layouts/hotsheet/sidebar" %>
17-
<%= render "layouts/hotsheet/flash" %>
1817
<main>
18+
<%= render "layouts/hotsheet/flash" %>
1919
<%= yield %>
2020
</main>
2121
</body>

0 commit comments

Comments
 (0)