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

[#58] Improve flash notices #86

Merged
merged 4 commits into from
Jan 22, 2025
Merged

[#58] Improve flash notices #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3e987a8
Add flash styles
mauriciofierrom Jan 22, 2025
8cdc137
Add turbo-aware flash message
mauriciofierrom Jan 22, 2025
6ba711a
Little css fix in main stylesheet
mauriciofierrom Jan 22, 2025
79be763
Make Section notices immediate-only
mauriciofierrom Jan 22, 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 app/assets/stylesheets/application.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,5 @@
*= require_tree ./form
*= require lesson
*= require section
*= require flash
*/
27 changes: 27 additions & 0 deletions app/assets/stylesheets/flash.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
.flash {
background: repeating-linear-gradient(
-45deg,
#8cbeb2 0px,
#8cbeb2 20px,
#cccccc 20px,
#cccccc 40px,
#d90368 40px,
#d90368 60px
);

margin-top: 20px;
border-radius: 4px;

.message {
color: var(--primary);
text-shadow:
1px 1px 0 var(--accent),
-1px -1px 0 var(--accent),
1px -1px 0 var(--accent),
-1px 1px 0 var(--accent),
2px 2px 1px var(--accent);
padding: 8px 12px;
background: rgba(255, 255, 255, 0.10);
font-weight: 500;
}
}
2 changes: 1 addition & 1 deletion app/assets/stylesheets/layouts/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ body {
/* prettier-ignore */
grid-template-columns: 20% minmax(0, 1fr) 20%;
/* prettier-ignore */
grid-template-rows: 60px; minmax(0, 1fr) 50px;
grid-template-rows: 60px minmax(0, 1fr) 50px;
grid-template-areas:
"lheader header rheader"
". main ."
Expand Down
9 changes: 6 additions & 3 deletions app/controllers/sections_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ def create

respond_to do |format|
if @section.save
format.html { redirect_to lesson_url(@lesson), notice: "Section was successfully created." }
flash.now[:notice] = "Section was successfully created."
format.html { redirect_to lesson_url(@lesson)}
else
format.html { render :new, status: :unprocessable_entity }
end
Expand All @@ -40,7 +41,8 @@ def update

respond_to do |format|
if @section.update(updated_params)
format.html { redirect_to lesson_url(@lesson), notice: "Section was successfully updated." }
flash.now[:notice] = "Section was successfully updated."
format.html { redirect_to lesson_url(@lesson) }
else
format.html { render :edit, status: :unprocessable_entity }
end
Expand All @@ -51,7 +53,8 @@ def destroy
@section.destroy

respond_to do |format|
format.html { redirect_to lesson_url(@lesson), notice: "Section was successfully destroyed." }
flash.now[:notice] = "Section was successfully destroyed."
format.html { redirect_to lesson_url(@lesson) }
format.turbo_stream
end
end
Expand Down
3 changes: 3 additions & 0 deletions app/helpers/application_helper.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,5 @@
module ApplicationHelper
def render_turbo_stream_flash_messages
turbo_stream.prepend "flash", partial: "layouts/flash"
end
end
11 changes: 11 additions & 0 deletions app/views/layouts/_flash.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<% flash.each do |flash_type, message| %>
<div
class="flash"
data-controller="removals"
data-action="animationend->removals#remove"
>
<div class="message">
<%= message %>
</div>
</div>
<% end %>
3 changes: 3 additions & 0 deletions app/views/layouts/application.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@
</header>
<div class="rheader"></div>
<main>
<div id="flash" class="flash">
<%= render "layouts/flash" %>
</div>
<%= yield %>
</main>
<footer>
Expand Down
1 change: 1 addition & 0 deletions app/views/lessons/create.turbo_stream.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@
<%= turbo_stream.prepend "lessons" do %>
<%= render @lesson %>
<% end %>
<%= render_turbo_stream_flash_messages %>
2 changes: 0 additions & 2 deletions app/views/lessons/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
<p style="color: green"><%= notice %></p>

<div class="lessons">
<div class="header">
<div class="title">
Expand Down
2 changes: 0 additions & 2 deletions app/views/sections/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
<p style="color: green"><%= notice %></p>

<h1>Sections</h1>

<div id="sections">
Expand Down
Loading