Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flash messages layout #38

Merged
merged 7 commits into from
Feb 3, 2025
Merged

Flash messages layout #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1c19ea0
bump version
ignaciosy Jan 17, 2025
28c768a
try to add nokogiri 1.18.1 for rails 7.1
ignaciosy Jan 17, 2025
50d6bfe
revert try to add nokogiri 1.18.1 for rails 7.1
ignaciosy Jan 17, 2025
315674a
style flash messages
ignaciosy Jan 15, 2025
73bcb27
bump version
ignaciosy Jan 20, 2025
a5451f9
apply feedback
ignaciosy Feb 3, 2025
abf2fc0
version and changelog
ignaciosy Feb 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
## [Unreleased](https://github.com/renuo/hotsheet/compare/v0.1.0..HEAD)

- Configure compatible Ruby/Rails versions for testing
- Improve flash messages layout

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

Expand Down
2 changes: 2 additions & 0 deletions app/assets/javascripts/hotsheet/controllers/application.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
8 changes: 8 additions & 0 deletions app/assets/javascripts/hotsheet/controllers/flash_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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");
}
}
68 changes: 65 additions & 3 deletions app/assets/stylesheets/hotsheet/application.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,15 @@
*/

:root {
--bg-color: lightgray;
--sidebar-width: 12rem;
--main-padding-x: 2rem;
--main-padding-y: 2rem;

--bg-color: lightgray;
--success-color: green;
--alert-color: yellow;
--notice-color: blue;
--error-color: red;
}
simon-isler marked this conversation as resolved.
Show resolved Hide resolved

body {
Expand All @@ -19,7 +26,7 @@ body {

main {
margin-left: var(--sidebar-width);
padding: 1rem;
padding: var(--main-padding-y) var(--main-padding-x);
}

aside {
Expand All @@ -36,7 +43,7 @@ aside {
display: flex;
flex-direction: column;
margin: 0;
padding: 0.25rem;
padding: 0.5rem;

a {
border-radius: 0.5rem;
Expand Down Expand Up @@ -84,3 +91,58 @@ table {
width: 100%;
}
}

.flash-container {
position: fixed;
ignaciosy marked this conversation as resolved.
Show resolved Hide resolved
display: flex;
flex-direction: column;
bottom: 1rem;
right: 1rem;
gap: 1rem;
max-width: calc(100% - var(--sidebar-width) - var(--main-padding-x));

.flash {
border-radius: 0.4rem;
padding: 0.75rem 1.25rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;

&.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%);
}

.btn-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;
}
}
2 changes: 1 addition & 1 deletion app/controllers/hotsheet/pages_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
ignaciosy marked this conversation as resolved.
Show resolved Hide resolved
else
flash[:alert] = t("hotsheet.error", record: model.model_name.human,
errors: record.errors.full_messages.join(", "))
Expand Down
13 changes: 8 additions & 5 deletions app/views/layouts/hotsheet/_flash.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
<%# locals: () %>

<% flash.each do |type, msg| %>
<div class='flash <%= type %>'>
<span><%= msg %></span>
</div>
<% end %>
<div class='flash-container'>
<% flash.each do |type, msg| %>
<div class='flash <%= type %>' data-controller='flash'>
<span><%= msg %></span>
<button class='btn-close' data-action='click->flash#close'>&times;</button>
</div>
<% end %>
</div>
2 changes: 1 addition & 1 deletion app/views/layouts/hotsheet/application.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
</head>
<body>
<%= render "layouts/hotsheet/sidebar" %>
<%= render "layouts/hotsheet/flash" %>
<main>
<%= render "layouts/hotsheet/flash" %>
<%= yield %>
</main>
</body>
Expand Down