tailwind config

1 week ago · a86fb41f36
9 changed files with 88 additions and 13 deletions
--- a/app/assets/tailwind/application.css
+++ b/app/assets/tailwind/application.css
@ -1,4 +1,5 @@
@import "tailwindcss";
@config '../../../config/tailwind.config.js';
@plugin "../../../vendor/javascript/daisyui.mjs" {
  themes: light, dark;
@ -7,8 +8,8 @@
@plugin "../../../vendor/javascript/daisyui-theme.mjs" {
  name: "light";
  default: true;
  prefersdark: false;
  color-scheme: "light";
  --color-primary: var(--color-bichik-100);
@ -17,7 +18,6 @@
  --color-secondary-content: var(--color-bichik-100);
  --color-accent: #96d3dd;
  --color-accent-content: #1e2939;
  --color-border-primary: var(--color-bichik-110);
  --color-check-primary: white;
 }
@ -29,18 +29,13 @@
  --color-base-100: #364153;
  --color-base-200: #2a3240;
  /* --color-base-content: white; */
  --color-primary: var(--color-bichik-100);
  --color-primary-content: black;
  --color-secondary: var(--color-base-100);
  --color-secondary-content: var(--color-bichik-80);
  --color-accent: #96d3dd;
  --color-accent-content: #1e2939;
  --color-border-primary: white;
  --color-check-primary: var(--color-bichik-110);
  --radius-selector: 0.5rem;
 }
--- a/app/helpers/button_helper.rb
+++ b/app/helpers/button_helper.rb
@ -0,0 +1,5 @@
 module ButtonHelper
  def button_link_to(text, method: :post, **)
    content_tag(:button, text, { data: { turbo_method: method }, ** })
  end
 end
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@ -1,3 +1,23 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
 import "controllers"
 Turbo.config.drive.progressBarDelay = 300
 Turbo.config.forms.confirm = (title) => {
  const dialog = document.getElementById("main-dialog")
  const dialogTitle = dialog.querySelector('[data-modal=title]')
  const previousTitleContent = dialogTitle.textContent
  dialogTitle.textContent = title
  dialog.showModal()
  return new Promise((resolve, _) => {
    dialog.addEventListener(
      "close",
      () => {
        dialogTitle.textContent = previousTitleContent
        resolve(dialog.returnValue == "confirm")
      },
      { once: true },
    );
  });
 }
 import "controllers"
--- a/app/views/edge/index.html.erb
+++ b/app/views/edge/index.html.erb
@ -1 +1,3 @@
 <h1 class="font-bold text-4xl">Edge#index</h1>
 <%= button_link_to 'Open Dialog', class: "btn btn-primary", command: 'show-modal', commandfor: 'main-dialog' %>
 <%= button_to 'Delete', @meeting, method: :delete, class: "btn btn-accent", data: { turbo_confirm: 'merci de confirmer'} %>
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@ -25,9 +25,10 @@
    <%= javascript_importmap_tags %>
  </head>
  <body>
    <%= render '/layouts/navbar' %>
    <main class="flex m-8 min-h-60"><%= yield %></main>
    <%= render '/layouts/footer' %>
  <body class="flex flex-col">
    <%= render '/layouts/components/main_dialog' %>
    <%= render '/layouts/components/navbar' %>
    <main class="m-8 min-h-60"><%= yield %></main>
    <%= render '/layouts/components/footer' %>
  </body>
 </html>
--- a/app/views/layouts/components/_footer.html.erb
+++ b/app/views/layouts/components/_footer.html.erb
--- a/app/views/layouts/components/_main_dialog.html.erb
+++ b/app/views/layouts/components/_main_dialog.html.erb
@ -0,0 +1,21 @@
 <dialog
  id="main-dialog"
  class="
    top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 shadow-2xl
    backdrop:bg-primary-content/80 rounded-lg p-6 animate-fade-in
  "
 >
  <h2 data-modal="title" class="text-2xl font-bold mb-2">Dialog Title</h2>
  <p class="mb-6">
    This is a centered dialog using the HTML dialog element with Tailwind CSS.
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro quisquam
    enim blanditiis iusto neque accusantium minus, aspernatur ex eius at.
    Aliquam nam ex sit vel nesciunt qui ducimus velit nulla.
  </p>
  <div class="flex gap-2 justify-end">
    <%= button_link_to 'OK', autofocus: true, value: 'confirm', class: "btn btn-primary", command: 'close', commandfor: 'main-dialog' %>
    <%= button_link_to 'Cancel', value: 'cancel', class: "btn btn-neutral", command: 'close', commandfor: 'main-dialog' %>
  </div>
 </dialog>
--- a/app/views/layouts/components/_navbar.html.erb
+++ b/app/views/layouts/components/_navbar.html.erb
--- a/config/tailwind.config.js
+++ b/config/tailwind.config.js
@ -0,0 +1,31 @@
 export const content = [
  "./public/*.html",
  "./app/helpers/**/*.rb",
  "./app/javascript/**/*.js",
  "./app/views/**/*.{erb,html}",
 ];
 export const theme = {
  extend: {
    colors: {},
    keyframes: {
      "fade-in": {
        "0%": { opacity: 0, transform: "translateY(-30)" },
        "60%": { transform: "translateY(0)" },
        "100%": { opacity: "100%" }
      },
    },
    swing: {
      "0%": { transform: "rotate(0deg)" },
      "20%": { transform: "rotate(15deg)" },
      "40%": { transform: "rotate(-10deg)" },
      "60%": { transform: "rotate(5deg)" },
      "100%": { transform: "rotate(0deg)" },
    },
  },
  animation: {
    "fade-in": "fade-in .2s ease-in-out",
    swing: "swing 1s ease-in-out forwards",
  },
 },
 };