Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-09 23:45:21 +02:00
Code Issues Releases Activity Actions

feat: Implement mobile responsiveness to onboarding process.

Browse source
This commit is contained in:
Joseph Ho 2025-04-10 18:14:14 -04:00
parent 52d170e36c
commit 1f0670fc46
4 changed files with 15 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/views/onboardings/_header.html.erb
View file

@ -1,4 +1,4 @@
<header class="flex justify-between items-center p-4">
<header class="hidden sm:flex justify-between items-center p-4">
<%= image_tag "logo.svg", class: "h-[22px]" %>
<div class="flex items-center gap-2">
<%= lucide_icon "log-in", class: "w-5 h-5 shrink-0 text-secondary gap-2" %>

6
app/views/onboardings/preferences.html.erb
View file

@ -1,9 +1,9 @@
<div class="bg-gray-25 h-screen flex flex-col justify-between">
<%= render "onboardings/header" %>
<div class="grow max-w-lg w-full mx-auto bg-gray-25 flex flex-col justify-center" data-controller="onboarding">
<div class="grow max-w-lg w-19/20 sm:w-full mx-auto bg-gray-25 flex flex-col justify-center" data-controller="onboarding">
<div>
<div class="space-y-1 mb-6">
<div class="space-y-1 mb-6 text-center sm:text-start">
<h1 class="text-2xl font-medium"><%= t(".title") %></h1>
<p class="text-secondary text-sm"><%= t(".subtitle") %></p>
</div>
@ -54,7 +54,7 @@
</div>
</div>
<p class="text-secondary text-xs mb-4"><%= t(".preview") %></p>
<p class="text-secondary text-xs mb-4 text-center sm:text-start"><%= t(".preview") %></p>
<%= styled_form_with model: @user, data: { turbo: false } do |form| %>
<%= form.hidden_field :onboarded_at, value: Time.current %>

12
app/views/onboardings/profile.html.erb
View file

@ -1,9 +1,9 @@
<div class="bg-gray-25 h-screen flex flex-col justify-between">
<%= render "onboardings/header" %>
<div class="grow max-w-lg w-full mx-auto bg-gray-25 flex flex-col justify-center">
<div class="grow w-19/20 max-w-lg sm:w-full mx-auto bg-gray-25 flex flex-col justify-center">
<div>
<div class="space-y-1 mb-6">
<div class="flex flex-col items-center sm:items-start space-y-1 mb-6">
<h1 class="text-2xl font-medium"><%= t(".title") %></h1>
<p class="text-secondary text-sm"><%= t(".subtitle") %></p>
</div>
@ -13,13 +13,13 @@
<%= form.hidden_field :onboarded_at, value: Time.current if @invitation %>
<div class="space-y-4 mb-4">
<p class="text-secondary text-xs"><%= t(".profile_image") %></p>
<p class="hidden text-secondary text-xs sm:block"><%= t(".profile_image") %></p>
<%= render "settings/user_avatar_field", form: form, user: @user %>
</div>
<div class="flex justify-between items-center gap-4 mb-4">
<%= form.text_field :first_name, placeholder: t(".first_name"), label: t(".first_name"), container_class: "bg-white w-1/2", required: true %>
<%= form.text_field :last_name, placeholder: t(".last_name"), label: t(".last_name"), container_class: "bg-white w-1/2", required: true %>
<div class="flex flex-col justify-between items-center gap-4 mb-4 sm:flex-row">
<%= form.text_field :first_name, placeholder: t(".first_name"), label: t(".first_name"), container_class: "bg-white w-full sm:w-1/2", required: true %>
<%= form.text_field :last_name, placeholder: t(".last_name"), label: t(".last_name"), container_class: "bg-white w-full sm:w-1/2", required: true %>
</div>
<% unless @invitation %>
<div class="space-y-4 mb-4">

12
app/views/settings/_user_avatar_field.html.erb
View file

@ -1,6 +1,6 @@
<%# locals: (form:, user:) %>
<div class="flex items-center gap-4" data-controller="profile-image-preview">
<div class="flex flex-col items-center gap-4 sm:flex-row" data-controller="profile-image-preview">
<div class="relative flex justify-center items-center bg-gray-50 w-24 h-24 rounded-full border-alpha-black-300 border border-dashed">
<%# The image preview once user has uploaded a new file %>
@ -29,18 +29,15 @@
<button type="button"
data-profile-image-preview-target="clearBtn"
data-action="click->profile-image-preview#clearFileInput"
class="<%= user.profile_image.attached? ? "" : "hidden" %> cursor-pointer absolute bottom-0 right-0 w-8 h-8 bg-gray-50 rounded-full flex justify-center items-center border border-white border-2">
class="<%= user.profile_image.attached? ? "" : "hidden" %> cursor-pointer invisible sm:visible absolute bottom-0 right-0 w-8 h-8 bg-gray-50 rounded-full flex justify-center items-center border border-white border-2">
<%= lucide_icon "x", class: "w-4 h-4 text-secondary" %>
</button>
</div>
<div>
<div class="flex flex-col gap-y-[8] sm:gap-y-[0] items-center sm:items-start">
<%= form.hidden_field :delete_profile_image, value: "0", data: { profile_image_preview_target: "deleteProfileImage" } %>
<p class="mb-3"><%= t(".accepted_formats") %></p>
<%= form.label :profile_image, t(".choose"),
class: "btn btn--outline inline-block" %>
class: "btn btn--outline inline-block sm:order-2 text-center sm:text-start w-fit" %>
<%= form.file_field :profile_image,
accept: "image/png, image/jpeg",
class: "hidden px-3 py-2 bg-gray-50 text-primary rounded-md text-sm font-medium",
@ -48,5 +45,6 @@
profile_image_preview_target: "input",
action: "change->profile-image-preview#showFileInputPreview"
} %>
<p class="text-xs text-gray-500 mb-3 sm:text-base sm:order-1 sm:text-gray-900"><%= t(".accepted_formats") %></p>
</div>
</div>