- Add tailwindcss-rails gem to Gemfile - Create application.tailwind.css for Tailwind styles - Update Procfile.dev for Tailwind CSS watch command - Add demo action and view for showcasing features - Update application layout to use Tailwind CSS classes - Refactor footer and header for improved styling This commit introduces Tailwind CSS for styling the application, enhancing the UI with utility-first CSS. A new demo page is also added to showcase the application features.
58 lines
2.1 KiB
Plaintext
58 lines
2.1 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- <title><%#= content_for(:title) || "Sample App" %></title>-->
|
|
<title><%= full_title(yield(:title)) %></title>
|
|
<%= render 'layouts/rails_default' %>
|
|
<%= render 'layouts/shim' %>
|
|
<%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
|
|
<%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
|
|
</head>
|
|
|
|
<body>
|
|
<%= render 'layouts/header' %>
|
|
<div class="container pt-16">
|
|
<% flash.each do |message_type, message| %>
|
|
<%= content_tag(:div, message, class: "alert alert-#{message_type}") %>
|
|
<!-- <div class="alert alert-<%#= message_type %>"><%#= message %></div>-->
|
|
<% end %>
|
|
<%= yield %>
|
|
<%= render 'layouts/footer' %>
|
|
<%#= debug(params) if Rails.env.development? %>
|
|
<%#= debug(params.to_yaml) if Rails.env.development? %>
|
|
<%#= debug(session) if Rails.env.development? %>
|
|
<%#= debug(Time.now) if Rails.env.development? %>
|
|
|
|
<% if Rails.env.development? %>
|
|
<div class="container mx-auto px-4 mb-8 pt-4">
|
|
<div class="max-w-4xl mx-auto border-2 border-gray-300 rounded-lg p-6 bg-gray-100">
|
|
<!-- Params -->
|
|
<div class="mb-6">
|
|
<h3 class="text-gray-700 font-bold mb-2">Params:</h3>
|
|
<pre class="bg-white p-4 rounded shadow overflow-x-auto text-sm text-gray-600 border border-gray-200">
|
|
<%= params.to_yaml %>
|
|
</pre>
|
|
</div>
|
|
|
|
<!-- Session -->
|
|
<div class="mb-6">
|
|
<h3 class="text-gray-700 font-bold mb-2">Session:</h3>
|
|
<pre class="bg-white p-4 rounded shadow overflow-x-auto text-sm text-gray-600 border border-gray-200">
|
|
<%= session %>
|
|
</pre>
|
|
</div>
|
|
|
|
<!-- Time -->
|
|
<div>
|
|
<h3 class="text-gray-700 font-bold mb-2">Current Time:</h3>
|
|
<pre class="bg-white p-4 rounded shadow overflow-x-auto text-sm text-gray-600 border border-gray-200">
|
|
<%= Time.now %>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</body>
|
|
</html>
|