gavin/maybe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 28 Wiki Activity

WIP: Implement Mobile Responsiveness #2089

Closed
rogueloop wants to merge 3 commits from main into main
pull from: main
merge into: gavin:main
Conversation 1 Commits 3 Files Changed 4 +19 -16
4 changed files with 19 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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-full mx-auto bg-gray-25 flex flex-col justify-center px-4" data-controller="onboarding">
<div>
<div class="space-y-1 mb-6">
<div class="space-y-1 mb-6 text-center">
<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"><%= t(".preview") %></p>
<%= styled_form_with model: @user, data: { turbo: false } do |form| %>
<%= form.hidden_field :onboarded_at, value: Time.current %>

17
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 max-w-lg w-full mx-auto bg-gray-25 flex flex-col justify-center px-4 sm:px-0">
<div>
<div class="space-y-1 mb-6">
<div class="space-y-1 mb-6 text-center">
<h1 class="text-2xl font-medium"><%= t(".title") %></h1>
<p class="text-secondary text-sm"><%= t(".subtitle") %></p>
</div>
@@ -13,13 +13,16 @@
<%= 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>
<%= render "settings/user_avatar_field", form: form, user: @user %>
<%= render "settings/user_avatar_field", form: form, user: @user %>
<div class="rounded-lg border border-gray-200 p-4">
<p class="text-secondary text-sm"><%= t(".upload_profile_photo") %></p>
</div>
</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 sm:flex-row 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-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">

10
app/views/onboardings/show.html.erb
View File

@@ -1,11 +1,11 @@
<div class="bg-gray-25">
<div class="h-screen flex flex-col items-center py-6">
<div class="h-screen flex flex-col items-center py-6 px-4 sm:px-6">
<div class="grow flex justify-center items-center flex-col max-w-sm w-full text-center">
<%= image_tag "logo-color.png", class: "w-16 mb-6" %>
<%= tag.h1 t(".title"), class: "text-3xl font-medium mb-2" %>
<%= tag.p t(".message"), class: "text-sm text-secondary mb-6" %>
<%= image_tag "logo-color.png", class: "w-12 sm:w-16 mb-4 sm:mb-6" %>
<%= tag.h1 t(".title"), class: "text-2xl sm:text-3xl font-medium mb-2" %>
<%= tag.p t(".message"), class: "text-sm sm:text-base text-secondary mb-4 sm:mb-6" %>
<%= link_to t(".setup"), profile_onboarding_path, class: "block flex justify-center items-center btn btn--primary w-full" %>
<%= link_to t(".setup"), profile_onboarding_path, class: "block flex justify-center items-center btn btn--primary w-full text-sm sm:text-base" %>
</div>
</div>
</div>

2
config/locales/views/onboardings/en.yml
View File

@@ -17,7 +17,7 @@ en:
first_name: First Name
household_name: Household Name
last_name: Last Name
profile_image: Profile Image
upload_profile_photo: Upload profile photo (optional)
submit: Continue
subtitle: Let's complete your profile.
title: Let's set up the basics