daboh/plottservice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added icons, helperfunction and new fancy notice message

Browse Source 
Added icons from webcrunch resp. heroicons
Added helperfunction to display inline svg with the plugin inline-svg
Implemented fancy notice message webcrunch. Realy nice but does only
work with javascript on.
This commit is contained in:
David Böhm
2024-08-06 00:23:29 +02:00
parent 53e3f287ce
commit 19cf60c9a9
596 changed files with 1929 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/views/layouts/_flash.html.erb Normal file
View File

@@ -0,0 +1,13 @@
<%= turbo_frame_tag "flash" do %>
<% flash.each do |type, message| %>
<div data-controller="flash" data-flash-target="toast" class="fixed z-50 top-2 right-2 border p-3 shadow-lg opacity-100 translate-x-full transition-transform ease-in-out duration-300 transform <%= type == :alert ? "bg-red-50 border-red-500/50 text-red-800" : "bg-green-50 border-green-300/90 text-green-800" %>">
<div class="flex items-center justify-between gap-4">
<%= icon "check", class: "size-4 stroke-primary-500" %>
<span class="text-l"><%= message %></span>
<button type="button" data-action="click->flash#dismiss" class="p-1 hover:bg-gray-100/70 flex items-center justify-center rounded-md">
<%= icon "x-mark", class: "size-4 stroke-current text-gray-600 pointer-events-none" %>
</button>
</div>
</div>
<% end %>
<% end %>

10
app/views/layouts/_flashold.html.erb Normal file
View File

@@ -0,0 +1,10 @@
<div id="notice">
<% if notice.present? %>
<div class="flex p-1.5 text-l bg-green-100 text-green-700 font-medium shadow-lg border-l-4 border-green-700>
<span class="flex p-1.5"><%= icon "check", class: "size-8 stroke-primary-500" %></span>
<p class="p-1.5">
<%= notice %>
</p>
</div>
<% end %>
</div>

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

@@ -10,6 +10,7 @@
<%= javascript_importmap_tags %>
</head>
<body>
<%= render "layouts/flash" %>
<header class="container mx-auto px-4 py-6 flex items-center justify-between border-b-2 border-gray-300">
<a href="/" class="font-bold text-black text-4xl">Plottservice Fachbereich AB</a>
<nav>