songtianlun/sample_rails_tailwind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance layout responsiveness and style

Browse Source 
- Update footer layout to improve styling and center alignment
- Change header theme control from 'synthwave' to 'light'
- Enhance home page layout with hero and background styles
- Refactor user sign-up form with better styling and structure
- Add copyright notice and responsive design to the footer

These changes focus on enhancing the overall user experience with a
more modern layout and improved responsiveness across devices. The
footer now includes copyright information and a cleaner design, while
the sign-up form has additional styling to improve usability.
This commit is contained in:
songtianlun 2025-01-17 00:01:13 +08:00
parent 99c5e8afe9
commit 42d8d5ce1d
6 changed files with 58 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
app/views/layouts/_footer.html.erb
View File

@ -1,50 +1,10 @@
<footer class="mt-12 pt-5 border-t border-gray-200 text-gray-600"> <footer class="footer footer-center bg-base-200 text-base-content rounded p-10">
<div class="container mx-auto px-4"> <nav class="grid grid-flow-col gap-4">
<div class="flex flex-col md:flex-row md:justify-between items-center"> <%= link_to "About", about_url, class: "link link-hover" %>
<!-- 左侧文本 --> <%= link_to "Contact", contact_url, class: "link link-hover" %>
<small class="text-sm mb-4 md:mb-0"> <a href="https://news.railstutorial.org" class="text-gray-600 hover:text-gray-900">News</a>
The
<a href="https://www.railstutorial.org"
class="text-gray-600 hover:text-gray-900">
Ruby on Rails Tutorial
</a>
by
<a href="https://www.michaelhartl.com"
class="text-gray-600 hover:text-gray-900">
Michael Hartl
</a>
</small>
<!-- 右侧导航 -->
<nav>
<ul class="flex flex-wrap justify-center space-x-4">
<li>
<%= link_to "About", about_url,
class: "text-gray-600 hover:text-gray-900" %>
</li>
<li>
<%= link_to "Contact", contact_url,
class: "text-gray-600 hover:text-gray-900" %>
</li>
<li>
<a href="https://news.railstutorial.org"
class="text-gray-600 hover:text-gray-900">
News
</a>
</li>
</ul>
</nav>
</div>
</div>
</footer>
<footer class="footer bg-neutral text-neutral-content p-10">
<small>
The <a href="https://www.railstutorial.org">Ruby on Rails Tutorial</a>
by <a href="https://www.michaelhartl.com">Michael Hartl</a>
</small>
<nav>
<%= link_to "About", about_url, class: "link link-hover"%>
<%= link_to "Contact", contact_url, class: "link link-hover"%>
<a href="https://news.railstutorial.org" class="link link-hover" >News</a>
</nav> </nav>
<aside>
<p>Copyright © <%= Date.current.year %> - All right reserved by ACME Industries Ltd</p>
</aside>
</footer> </footer>

2
app/views/layouts/_header.html.erb
View File

@ -69,7 +69,7 @@
</details> </details>
<label class="swap swap-rotate"> <label class="swap swap-rotate">
<!-- this hidden checkbox controls the state --> <!-- this hidden checkbox controls the state -->
<input type="checkbox" class="theme-controller" value="synthwave" /> <input type="checkbox" class="theme-controller" value="light" />
<!-- sun icon --> <!-- sun icon -->
<svg <svg

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

@ -11,7 +11,7 @@
<body> <body>
<%= render 'layouts/header' %> <%= render 'layouts/header' %>
<div class="container pt-16"> <div class="">
<% flash.each do |message_type, message| %> <% flash.each do |message_type, message| %>
<%= content_tag(:div, message, class: "alert alert-#{message_type}") %> <%= content_tag(:div, message, class: "alert alert-#{message_type}") %>
<!-- <div class="alert alert-<%#= message_type %>"><%#= message %></div>--> <!-- <div class="alert alert-<%#= message_type %>"><%#= message %></div>-->

26
app/views/static_pages/home.html.erb
View File

@ -1,16 +1,20 @@
<% provide(:title, "Home") %> <% provide(:title, "Home") %>
<div class="center jumbotron"> <div class="hero bg-base-200 min-h-screen">
<h1>Welcome to the Sample App</h1> <div class="hero-content text-center">
<h2> <div class="max-w-md">
This is the home page for the <h1 class="text-5xl font-bold">Welcome to the Sample App</h1>
<a href="https://www.railstutorial.org">Ruby on Rails Tutorial</a> <p class="py-6">
Sample application. This is the home page for the
</h2> <a href="https://www.railstutorial.org">Ruby on Rails Tutorial</a>
Sample application.
<%= link_to "Sing up now!", signup_path, class:"btn btn-lg btn-primary" %> </p>
<%= link_to "Sing up now!", signup_path, class:"btn btn-lg btn-primary" %>
<%= link_to image_tag("rails.svg", alt:"Rails logo", width: "200"),
"https://rubyonrails.org/" %>
</div>
</div>
</div> </div>
<%= link_to image_tag("rails.svg", alt:"Rails logo", width: "200"),
"https://rubyonrails.org/" %>
<%#= link_to image_tag("kitten.jpg", alt:"Kitten", width:"200") %> <%#= link_to image_tag("kitten.jpg", alt:"Kitten", width:"200") %>

40
app/views/users/_form.html.erb
View File

@ -1,18 +1,36 @@
<%= form_with(model: @user, local: true) do |f| %> <%= form_with(model: @user, local: true, class: "space-y-4") do |f| %>
<%= render 'shared/error_messages' %> <%= render 'shared/error_messages' %>
<%= f.label :name %> <div class="form-control">
<%= f.text_field :name, class: 'form-control' %> <%= f.label :name, class: "label" do %>
<span class="label-text">Name</span>
<% end %>
<%= f.text_field :name, class: "input input-bordered w-full" %>
</div>
<%= f.label :email %> <div class="form-control">
<%= f.email_field :email, class: 'form-control' %> <%= f.label :email, class: "label" do %>
<span class="label-text">Email</span>
<% end %>
<%= f.email_field :email, class: "input input-bordered w-full" %>
</div>
<%= f.label :password %> <div class="form-control">
<%= f.password_field :password, class: 'form-control' %> <%= f.label :password, class: "label" do %>
<span class="label-text">Password</span>
<% end %>
<%= f.password_field :password, class: "input input-bordered w-full" %>
</div>
<%= f.label :password_confirmation, "Confirmation" %> <div class="form-control">
<%= f.password_field :password_confirmation, class: 'form-control' %> <%= f.label :password_confirmation, class: "label" do %>
<span class="label-text">Confirmation</span>
<% end %>
<%= f.password_field :password_confirmation, class: "input input-bordered w-full" %>
</div>
<%= f.submit yield(:button_text), class: "btn btn-primary" %> <div class="form-control mt-6">
<% end %> <%= f.submit yield(:button_text), class: "btn btn-primary" %>
</div>
<% end %>

8
app/views/users/new.html.erb
View File

@ -1,9 +1,9 @@
<% provide(:title, 'Sign up') %> <% provide(:title, 'Sign up') %>
<% provide(:button_text, 'Create my account') %> <% provide(:button_text, 'Create my account') %>
<h1>Sign up</h1> <div class="container mx-auto px-4">
<h1 class="text-3xl font-bold text-center my-8">Sign up</h1>
<div class="row"> <div class="max-w-md mx-auto">
<div class="col-md-6 col-md-offset-3">
<%= render 'form' %> <%= render 'form' %>
</div> </div>
</div> </div>