pvincent
/
notification
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

flashbar turbo-permanent

main
pvincent 5 days ago
parent
dc78b93a1a
commit
3a82f10cae
8 changed files with 51 additions and 90 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 35
      app/assets/stylesheets/toastify.css
  2. 4
      app/assets/tailwind/application.css
  3. 2
      app/javascript/controllers/flash_controller.js
  4. 3
      app/views/layouts/application.html.erb
  5. 46
      app/views/layouts/components/_flash.html.erb
  6. 12
      app/views/layouts/components/_flashbar.html.erb
  7. 26
      app/views/layouts/components/_footer.html.erb
  8. 13
      app/views/notification/index.html.erb

35
app/assets/stylesheets/toastify.css
View File

@ -11,29 +11,6 @@
opacity: 1;
}
.toast-close {
background: transparent;
cursor: pointer;
opacity: 0.4;
padding: 0 0 0 2em;
}
.toastify-right {
right: 15px;
}
.toastify-left {
left: 15px;
}
.toastify-top {
top: -150px;
}
.toastify-bottom {
bottom: -150px;
}
.toastify-center {
margin-left: auto;
margin-right: auto;
@ -41,14 +18,6 @@
right: 0;
}
@media only screen and (max-width: 360px) {
.toastify-right,
.toastify-left {
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
max-width: fit-content;
}
.toastify-top {
top: -150px;
}

4
app/assets/tailwind/application.css
View File

@ -6,4 +6,8 @@
/* themes: light --default; */
logs: false;
}
.toast-close {
@apply btn btn-outline;
}

2
app/javascript/controllers/flash_controller.js
View File

@ -4,7 +4,7 @@ import Toastify from 'toastify-js'
export default class extends Controller {
OPTIONS = {
selector: 'flash-container',
selector: 'flashbar',
escapeMarkup: false,
close: true,
position: 'center',

3
app/views/layouts/application.html.erb
View File

@ -23,10 +23,11 @@
</head>
<body >
<%= render 'layouts/components/flashbar'%>
<%= render 'layouts/components/navbar'%>
<main class="flex flex-col gap-8 m-4">
<%= yield %>
</main>
<%= render 'layouts/components/flash'%>
<%= render 'layouts/components/footer'%>
</body>
</html>

46
app/views/layouts/components/_flash.html.erb
View File

@ -1,46 +0,0 @@
<div
id='flash-container'
style='max-width: calc(50% - 20px)'
data-controller='flash'
data-action="popup-toast@window->flash#popup"
>
<!--
here is a shadow root which serves as a placeholder for the toaster area.
max-width gets inherited from this node.
-->
</div>
<footer class="footer sm:footer-horizontal footer-center bg-base-300 text-base-content p-4">
<aside>
<%= Rails.application.name.upcase %> app is free software<br/>
Copyleft: AGPLv3<br/>
source code<br/>
</aside>
<aside data-controller='flash'>
<% if flash.any? %>
<h2 class='bold text-2xl'>FLASH</h2>
<ul>
<li>
<% if flash.key?(:alert) %>
ALERT = <%= flash.alert %>
<% end %>
</li>
<li>
<% if flash.key?(:notice) %>
NOTICE = <%= flash.notice %>
<% end %>
</li>
</ul>
<% end %>
<div class='flex flex-row gap-4'>
<button data-action="flash#notice" class='btn btn-primary'>Notice</button>
<button data-action="flash#alert" class='btn btn-secondary'>Alert</button>
<button data-action="flash#random" class='btn btn-warning btn-dash'>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
Random
</button>
</div>
</aside>
</footer>

12
app/views/layouts/components/_flashbar.html.erb
View File

@ -0,0 +1,12 @@
<div
id='flashbar'
style='max-width: calc(50% - 20px)'
data-controller='flash'
data-action="popup-toast@window->flash#popup" data-turbo-permanent
>
<!--
here is a shadow root which serves as a placeholder for the toaster area.
max-width gets inherited from this node.
data-turbo-permant prevents morphing to dismiss active toasts
-->
</div>

26
app/views/layouts/components/_footer.html.erb
View File

@ -0,0 +1,26 @@
<footer class="footer sm:footer-horizontal footer-center bg-base-300 text-base-content p-4">
<aside>
<%= Rails.application.name.upcase %> app is free software<br/>
Copyleft: AGPLv3<br/>
source code<br/>
</aside>
<aside>
<% if flash.any? %>
<h2 class='bold text-2xl'>FLASH</h2>
<ul>
<li>
<% if flash.key?(:alert) %>
ALERT = <%= flash.alert %>
<% end %>
</li>
<li>
<% if flash.key?(:notice) %>
NOTICE = <%= flash.notice %>
<% end %>
</li>
</ul>
<% end %>
</aside>
</footer>

13
app/views/notification/index.html.erb
View File

@ -17,7 +17,7 @@
</ul>
</div>
<section class='w-full max-w-96'>
<%# <section class='w-full max-w-96'>
<div role="alert" class="alert alert-success inset-ring-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
@ -27,15 +27,10 @@
Your purchase has been confirmed!<br/>
Your purchase has been confirmed!<br/>
</div>
<button class='toast-close'>x</button>
</div>
<div role="alert" class="alert alert-error inset-ring-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>Error! Task failed successfully.</span>
</div>
</section>
</section> %>
<div>
<h2 class="text-bold text-2xl">By using <span class="italic">stimulus</span></h2>
@ -50,7 +45,7 @@
<%= link_to 'Alert', "javascript: window.dispatchEvent(new CustomEvent('popup-toast', {detail: {
type: 'alert',
message: 'this is an alert'
}}))", class: 'btn btn-primary'%>
}}))", class: 'btn btn-secondary'%>
</li>
</ul>
</div>
Write Preview
Loading…
Cancel
Save