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

feat: enhance user registration UI and navigation

Browse Source 
- Improve the user registration form layout with card styling.
- Add input classes for better design consistency.
- Introduce a new navbar partial for better component management.
- Removed the old navbar code to streamline application layout.

These changes provide a more modern and user-friendly experience during
user registration and improve the overall site's navigation structure.
This commit is contained in:
songtianlun 2025-02-11 15:28:42 +08:00
parent 1545b33539
commit cba76e718f
3 changed files with 64 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
app/views/devise/registrations/new.html.erb
View File

@ -1,29 +1,51 @@
<h2>Sign up</h2>
<div class="min-h-screen flex flex-col items-center justify-center px-4">
<div class="card w-full max-w-md bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-2xl font-bold text-center mb-6">Sign up</h2>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { class: "space-y-4" }) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<div class="field">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
<div class="form-control">
<%= f.label :email, class: "label" %>
<%= f.email_field :email,
autofocus: true,
autocomplete: "email",
class: "input input-bordered w-full",
placeholder: "your@email.com" %>
</div>
<div class="form-control">
<%= f.label :password, class: "label" do %>
<span class="label-text">Password</span>
<% if @minimum_password_length %>
<span class="label-text-alt">(<%= @minimum_password_length %> characters minimum)</span>
<% end %>
<% end %>
<%= f.password_field :password,
autocomplete: "new-password",
class: "input input-bordered w-full",
placeholder: "••••••••" %>
</div>
<div class="form-control">
<%= f.label :password_confirmation, class: "label" %>
<%= f.password_field :password_confirmation,
autocomplete: "new-password",
class: "input input-bordered w-full",
placeholder: "••••••••" %>
</div>
<div class="form-control mt-6">
<%= f.submit "Sign up", class: "btn btn-primary w-full" %>
</div>
<% end %>
<div class="divider">OR</div>
<div class="text-center space-y-2">
<%= render "devise/shared/links" %>
</div>
</div>
</div>
<div class="field">
<%= f.label :password %>
<% if @minimum_password_length %>
<em>(<%= @minimum_password_length %> characters minimum)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "new-password" %>
</div>
<div class="field">
<%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation, autocomplete: "new-password" %>
</div>
<div class="actions">
<%= f.submit "Sign up" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>

13
app/views/layouts/_navbar.html.erb Normal file
View File

@ -0,0 +1,13 @@
<div class="navbar bg-base-100/80 backdrop-blur-sm fixed top-0 z-50">
<div class="container mx-auto">
<div class="flex-1">
<%= link_to root_path, class: "text-2xl font-display font-bold hover:text-primary transition-colors" do %>
Today AI Weather
<% end %>
</div>
<div class="flex-none">
<%= link_to "Cities", cities_path, class: "btn btn-ghost font-sans" %>
<%= link_to "Arts", arts_path, class: "btn btn-ghost font-sans" %>
</div>
</div>
</div>

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

@ -54,23 +54,12 @@
<body class="min-h-screen bg-base-100 font-sans">
<!-- 导航栏 -->
<div class="navbar bg-base-100/80 backdrop-blur-sm fixed top-0 z-50">
<div class="container mx-auto">
<div class="flex-1">
<%= link_to root_path, class: "text-2xl font-display font-bold hover:text-primary transition-colors" do %>
Today AI Weather
<% end %>
</div>
<div class="flex-none">
<%= link_to "Cities", cities_path, class: "btn btn-ghost font-sans" %>
<%= link_to "Arts", arts_path, class: "btn btn-ghost font-sans" %>
</div>
</div>
</div>
<%= render 'layouts/navbar' %> <!-- 使用局部渲染 -->
<!-- 主要内容 -->
<main class="pt-16 relative">
<div class="toast toast-top toast-end z-[100] fixed">
<div class="toast toast-top toast-end z-[100] fixed pt-20">
<% if notice %>
<div class="alert alert-success shadow-lg">
<div>