mithril
/
livres
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

tailwind css, début1 turbo

main
Bryan 3 weeks ago
parent
d2e9cc52f2
commit
2ea6a88e95
7 changed files with 52 additions and 27 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. 6
      app/assets/stylesheets/input.css
  2. 9
      app/controllers/concerns/turbo_controller.js
  3. 7
      app/controllers/livres_controller.rb
  4. 8
      app/views/layouts/application.html.erb
  5. 2
      app/views/livres/form.html.erb
  6. 23
      app/views/livres/index.html.erb
  7. 18
      app/views/livres/new.html.erb

6
app/assets/stylesheets/input.css
View File

@ -1 +1,7 @@
@import "tailwindcss";
@layer base {
.font-Inter {
font-family: 'Inter', sans-serif;
}
}

9
app/controllers/concerns/turbo_controller.js
View File

@ -0,0 +1,9 @@
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
visit(event) {
event.preventDefault()
Turbo.visit(event.target.dataset.url)
this.element.innerHTML = ""
}
}

7
app/controllers/livres_controller.rb
View File

@ -7,9 +7,14 @@ class LivresController < ApplicationController
end
end
def new
def new
@livre = Livre.new
respond_to do |format|
format.html
format.turbo_stream
end
end
def create
@livre = Livre.new(livre_params)

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

@ -2,8 +2,7 @@
<html>
<head>
<title><%= content_for(:title) || "Bibliotheque" %></title>
<link href="app/assets/css/output.css" rel="stylesheet">
<link href="app/assets/stylesheets/output.css" rel="stylesheet">
<link href="app/assets/stylesheets/css/output.css" rel="stylesheet">
...
<meta name="viewport" content="width=device-width,initial-scale=1">
@ -21,13 +20,16 @@
<link rel="icon" href="/icon.png" type="image/png">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/icon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<%# Includes all stylesheet files in app/assets/stylesheets %>
<%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
</head>
<body>
<body style="background:#E9EBEE;font-family:'Inter', sans-serif;">
<%= yield %>
</body>
</html>

2
app/views/livres/form.html.erb
View File

@ -4,7 +4,7 @@
<div class="flex flex-1 px-3 py-2"><%= form.text_field :titre %></div>
<div class="flex flex-1 px-3 py-2"><%= form.text_field :auteur %></div>
<div class="flex flex-1 px-3 py-2"><%= form.date_field :date_de_sortie %></div>
<div class="flex flex-1 px-3 py-2"><%= form.submit "Enregistrer", class: "btn" %></div>
<div class="flex flex-1 px-3 py-2"><%= form.submit "Enregistrer", class: "shadow-[1px_1px_1px_rgba(0,0,0,0.2)] bg-[#B7E1FF] text-[#0F0F0F] px-3 py-1 rounded-md text-sm hover:bg-[#F6FAFE] transition text-center" %> </div>
</div>
<% end %>
</turbo-frame>

23
app/views/livres/index.html.erb
View File

@ -1,6 +1,6 @@
<!-- Titre de la page-->
<h1 class="text-4xl font-bold text-gray-800 mb-6">
catalogue de la bibliothèque
<h1 class="text-4xl font-bold text-gray-800 mb-6 ">
Catalogue de la bibliothèque
</h1>
<div class="flex items-center mb-6">
@ -25,7 +25,7 @@ catalogue de la bibliothèque
Nombre total de livres : <%= @livres.count %>
</p>
<div class="flex flex-col w-[40%] mt-8 border border-[#E0E0E0] rounded-md bg-[#FAFAFA] shadow-[1px_1px_1px_rgba(0,0,0,0.2)]">
<div class="flex flex-col w-[45%] mt-8 border border-[#E0E0E0] rounded-md bg-[#FAFAFA] shadow-[1px_1px_1px_rgba(0,0,0,0.2)]">
<div class="flex px-3 py-3 border-b border-[#EAEAEA] bg-[#F5F7FA] font-semibold text-[#A51010] text-sm">
<div class="flex flex-1 px-3 py-2">Titre</div>
<div class="flex flex-1 px-3 py-2">Auteur</div>
@ -38,18 +38,18 @@ catalogue de la bibliothèque
<div class="flex px-3 py-3 border-b border-[#EAEAEA] hover:bg-gray-50 transition text-sm">
<div class="flex flex-1 px-3 py-2"><%= livre.titre %></div>
<div class="flex flex-1 px-3 py-2"><%= livre.auteur %></div>
<div class="flex flex-1 px-3 py-2"><%= livre.date_de_sortie %></div>
<div class="flex flex-1 px-3 py-2 "><%= livre.date_de_sortie %></div>
<!-- Btn Modifier -->
<div class="flex flex-1 px-3 py-2 gap-2 justify-center">
<div class="flex flex-1 px-3 py-2 gap-2 text-center">
<%= link_to "Modifier", edit_livre_path(livre),
data: { turbo_frame: "livre_#{livre.id}" },
class: "shadow-[1px_1px_1px_rgba(0,0,0,0.2)] bg-[#B7E1FF] text-[#0F0F0F] px-3 py-1 rounded-md text-sm hover:bg-[#F6FAFE] transition w-[90px] text-center" %>
class: "shadow-[1px_1px_1px_rgba(0,0,0,0.2)] bg-[#B7E1FF] text-[#0F0F0F] px-0 py-0.5 rounded-md text-sm hover:bg-[#F6FAFE] transition text-center" %>
<!-- Btn Supp -->
<%= button_to "Supprimer", livre_path(livre), method: :delete,
data: { confirm: "Supprimer ce livre ?" },
class: "shadow-[1px_1px_1px_rgba(0,0,0,0.2)] bg-[#B7E1FF] text-[#0F0F0F] px-3 py-1 rounded-md text-sm hover:bg-[#F6FAFE] transition w-[90px] text-center" %>
data: { turbo_method: :delete, turbo_confirm: "Supprimer ce livre ?", turbo_frame: "_top" },
class: "shadow-[1px_1px_1px_rgba(0,0,0,0.2)] bg-[#B7E1FF] text-[#0F0F0F] px-0 py-0.5 rounded-md text-sm hover:bg-[#F6FAFE] transition w-[90px] text-center" %>
</div>
</div>
</turbo-frame>
@ -57,7 +57,6 @@ catalogue de la bibliothèque
</div>
<!-- Pour ajouter un nouveau livre -->
<p class="mt-6">
<%= link_to "Ajouter un nouveau livre", new_livre_path,
class: "text-black underline text-sm hover:text-blue-800 transition" %>
</p>
<turbo-frame id="nouveau_livre">
<%= link_to "Ajouter un nouveau livre", new_livre_path, data: { turbo_frame: "nouveau_livre" } %>
</turbo-frame>

18
app/views/livres/new.html.erb
View File

@ -1,23 +1,27 @@
<h1>Ajouter un nouveau livre</h1>
<turbo-frame id="nouveau_livre">
<h1 class=" font-bold text-gray-800 mb-6">AJOUTER UN NOUVEAU</h1>
<%= form_with model: @livre, local: true do |form| %>
<p>
<%= form.label :titre %><br>
<p >
<%= form.label :titre,class:" font-bold text-gray-800 mb-6 " %><br>
<%= form.text_field :titre %>
</p>
<p>
<%= form.label :auteur %><br>
<%= form.label :auteur,class:" font-bold text-gray-800 mb-6 " %><br>
<%= form.text_field :auteur %>
</p>
<p>
<%= form.label :date_de_sortie, "Date de sortie" %><br>
<%= form.label :date_de_sortie,class:" font-bold text-gray-800 mb-6 " %><br>
<%= form.date_field :date_de_sortie %>
</p>
<div class="font-bold text-gray-800 mb-6 uppercase">
<%= form.submit "Créer le livre" %>
</div>
<% end %>
<p><%= link_to "← Retour au catalogue", livres_path %></p>
<p><%= link_to "← Fermer l'éditeur", livres_path %></p>
</turbo-frame>
Write Preview
Loading…
Cancel
Save