essai avec un pseudo template TailwindCSS
This commit is contained in:
parent
7849514a6e
commit
69b5e3e542
|
|
@ -15,4 +15,23 @@
|
|||
</tbody>
|
||||
</table>
|
||||
|
||||
<%= paginate @emails %>
|
||||
<div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
|
||||
<div class="flex-1 flex justify-between sm:hidden">
|
||||
<%= link_to_previous_page @emails, 'Previous page', class: "ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500" %>
|
||||
<%= link_to_next_page @emails, 'Next Page', class: "relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500" %>
|
||||
</div>
|
||||
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-700">
|
||||
Showing
|
||||
<span class="font-medium"><%= @emails.offset_value + 1 %></span>
|
||||
to
|
||||
<span class="font-medium"><%= @emails.offset_value + (@emails.respond_to?(:records) ? @emails.records : @emails.to_a).size %></span>
|
||||
of
|
||||
<span class="font-medium"><%= @emails.total_count %></span>
|
||||
results
|
||||
</p>
|
||||
</div>
|
||||
<%= paginate @emails %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<p id="notice"><%= notice %></p>
|
||||
<% content_for :main_title do %>
|
||||
Emails
|
||||
<% end %>
|
||||
|
||||
<h1>Emails</h1>
|
||||
<p id="notice"><%= notice %></p>
|
||||
|
||||
<%= turbo_frame_tag "emails" do %>
|
||||
<%= render partial: "list", object: @emails, as: :emails %>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
<% content_for :main_title do %>
|
||||
Email #
|
||||
<% end %>
|
||||
|
||||
<p id="notice"><%= notice %></p>
|
||||
|
||||
<%= turbo_stream_from @email %>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,27 @@
|
|||
<div id="<%= dom_id filter %>">
|
||||
<div id="<%= dom_id filter %>" class="filter-<%= filter.enabled? ? 'enabled' : 'disabled' %> flex bg-orange-500 px-4">
|
||||
|
||||
<p>
|
||||
<div class="col-span-2 bg-yellow-500 px-4">
|
||||
<strong>Description:</strong>
|
||||
<%= filter.description %>
|
||||
</p>
|
||||
<%= filter.description || "<i>No description</i>" %>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<strong>Enabled:</strong>
|
||||
<%= filter.enabled %>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<div class="bg-yellow-500 px-4">
|
||||
<strong>Operator:</strong>
|
||||
<%= filter.operator %>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<div class="bg-yellow-500 px-4">
|
||||
<strong>Inverted:</strong>
|
||||
<%= filter.inverted %>
|
||||
</p>
|
||||
<%= filter.inverted? ? 'Yes' : 'No' %>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 divide-y flex-none bg-gray-500">
|
||||
<%= link_to 'Edit', edit_filter_path(@filter) %>
|
||||
<%= button_to 'Delete', @filter, method: :delete, data: { confirm: 'Are you sure?' } %>
|
||||
<% if filter.enabled? %>
|
||||
<%= button_to 'Disable', filter_disable_path(@filter), data: { method: :patch } %>
|
||||
<% else %>
|
||||
<%= button_to 'Enable', filter_enable_path(@filter), data: { method: :patch } %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<p id="notice"><%= notice %></p>
|
||||
<% content_for :main_title do %>
|
||||
Filters
|
||||
<% end %>
|
||||
|
||||
<h1>Filters</h1>
|
||||
<p id="notice"><%= notice %></p>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
<% content_for :main_title do %>
|
||||
Filter #<%= @filter.id %>
|
||||
<% end %>
|
||||
|
||||
<p id="notice"><%= notice %></p>
|
||||
|
||||
<%= link_to 'Back to filters list', filters_path %>
|
||||
|
||||
<%= turbo_frame_tag "filter" do %>
|
||||
<%= render @filter %>
|
||||
|
||||
<p>
|
||||
<%= link_to 'Edit', edit_filter_path(@filter) %> |
|
||||
<%= link_to 'Back', filters_path, "data-turbo-frame": "_top" %>
|
||||
</p>
|
||||
<% end %>
|
||||
|
||||
<div id="conditions">
|
||||
|
|
|
|||
|
|
@ -12,8 +12,115 @@
|
|||
</head>
|
||||
|
||||
<body class="bg-gray-100">
|
||||
<div class="bg-white p-4 md:container md:mx-auto">
|
||||
<%= yield %>
|
||||
<div>
|
||||
<nav class="bg-gray-800">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="h-8 w-8" src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg" alt="Workflow">
|
||||
</div>
|
||||
<div class="hidden md:block">
|
||||
<div class="ml-10 flex items-baseline space-x-4">
|
||||
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
||||
<%= link_to "Emails", emails_path, class: "#{ current_page?(emails_path) ? "bg-gray-900 text-white" : "text-gray-300 hover:bg-gray-700 hover:text-white"} px-3 py-2 rounded-md text-sm font-medium" %>
|
||||
<%= link_to "Filters", filters_path, class: "#{ current_page?(filters_path) ? "bg-gray-900 text-white" : "text-gray-300 hover:bg-gray-700 hover:text-white"} px-3 py-2 rounded-md text-sm font-medium" %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden md:block">
|
||||
<div class="ml-4 flex items-center md:ml-6">
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<div class="ml-3 relative">
|
||||
<div>
|
||||
<button class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu" aria-haspopup="true">
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
||||
</button>
|
||||
</div>
|
||||
<!--
|
||||
Profile dropdown panel, show/hide based on dropdown state.
|
||||
|
||||
Entering: "transition ease-out duration-100"
|
||||
From: "transform opacity-0 scale-95"
|
||||
To: "transform opacity-100 scale-100"
|
||||
Leaving: "transition ease-in duration-75"
|
||||
From: "transform opacity-100 scale-100"
|
||||
To: "transform opacity-0 scale-95"
|
||||
-->
|
||||
<div class="origin-top-right absolute right-0 mt-2 w-32 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
|
||||
<%= button_to "Sign out", destroy_user_session_path, class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100", role: "menuitem", method: :delete, data: { confirm: 'Are you sure?', "turbo-frame": "_top" } %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="-mr-2 flex md:hidden">
|
||||
<!-- Mobile menu button -->
|
||||
<button class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<!--
|
||||
Heroicon name: outline/menu
|
||||
|
||||
Menu open: "hidden", Menu closed: "block"
|
||||
-->
|
||||
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
<!--
|
||||
Heroicon name: outline/x
|
||||
|
||||
Menu open: "block", Menu closed: "hidden"
|
||||
-->
|
||||
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
Mobile menu, toggle classes based on menu state.
|
||||
|
||||
Open: "block", closed: "hidden"
|
||||
-->
|
||||
<div class="hidden md:hidden">
|
||||
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
||||
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-whites" -->
|
||||
<%= link_to "Emails", emails_path, class: "#{ current_page?(emails_path) ? "bg-gray-900 text-white" : "text-gray-300 hover:bg-gray-700 hover:text-white"} px-3 py-2 rounded-md text-base font-medium" %>
|
||||
<%= link_to "Filters", filters_path, class: "#{ current_page?(filters_path) ? "bg-gray-900 text-white" : "text-gray-300 hover:bg-gray-700 hover:text-white"} px-3 py-2 rounded-md text-base font-medium" %>
|
||||
</div>
|
||||
<div class="pt-4 pb-3 border-t border-gray-700">
|
||||
<div class="flex items-center px-5">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<div class="text-base font-medium leading-none text-white">Tom Cook</div>
|
||||
<div class="text-sm font-medium leading-none text-gray-400">tom@example.com</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 px-2 space-y-1">
|
||||
<%= button_to "Sign out", destroy_user_session_path, class: "block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700", role: "menuitem", method: :delete, data: { confirm: 'Are you sure?', "turbo-frame": "_top" } %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<header class="bg-white shadow">
|
||||
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
||||
<h1 class="text-3xl font-bold leading-tight text-gray-900">
|
||||
<%= yield :main_title %>
|
||||
</h1>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
||||
<%= yield %>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue