Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

initial project creation - getting started form #18

Closed
wants to merge 20 commits into from
Closed

initial project creation - getting started form #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
d79d26d
Update routes.rb
JohnRDOrazio Jun 20, 2021
88c4339
Update home.html.erb
JohnRDOrazio Jun 20, 2021
50ed794
Update en.yml
JohnRDOrazio Jun 20, 2021
a90a445
Update it.yml
JohnRDOrazio Jun 20, 2021
e1f0d54
Create new_project.html
JohnRDOrazio Jun 20, 2021
d48b7fb
rename new_project.html to new_project.html.erb
JohnRDOrazio Jun 20, 2021
9394ea8
fix locale in routing
JohnRDOrazio Jun 20, 2021
06967fd
merge from upstream: tailwind
JohnRDOrazio Jun 24, 2021
b4f13f0
add booklet svg
JohnRDOrazio Jun 25, 2021
e96ddea
add i18n-tasks gem
JohnRDOrazio Jun 25, 2021
04f5a35
fix translation key
JohnRDOrazio Jun 25, 2021
49e4da3
upgrade yarn packages, center img
JohnRDOrazio Jun 25, 2021
f1ff2bb
revert changes to package.json
JohnRDOrazio Jun 27, 2021
5841b06
revert changes to yarn.lock
JohnRDOrazio Jun 27, 2021
a4507d8
style form and add english strings
JohnRDOrazio Jun 27, 2021
3491d35
add optional register button
JohnRDOrazio Jun 27, 2021
835ee3d
create required class for required inputs
JohnRDOrazio Jun 27, 2021
a87a694
add js for view
JohnRDOrazio Jun 29, 2021
15adb8e
use structured i18n yml
JohnRDOrazio Jun 29, 2021
5937e60
move i18n-tasks gem to development group
JohnRDOrazio Jun 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions Gemfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ gem 'webpacker', github: 'rails/webpacker', ref: 'b6c2180'
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
gem 'i18n-tasks', '~> 0.9.34'
end

group :development do
Expand Down
22 changes: 22 additions & 0 deletions Gemfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ GEM
minitest (>= 5.1)
tzinfo (~> 2.0)
zeitwerk (~> 2.3)
ast (2.4.2)
builder (3.2.4)
byebug (11.1.3)
concurrent-ruby (1.1.8)
Expand All @@ -79,8 +80,19 @@ GEM
ffi (1.15.1)
globalid (0.4.2)
activesupport (>= 4.2.0)
highline (2.0.3)
i18n (1.8.10)
concurrent-ruby (~> 1.0)
i18n-tasks (0.9.34)
activesupport (>= 4.0.2)
ast (>= 2.1.0)
erubi
highline (>= 2.0.0)
i18n
parser (>= 2.2.3.0)
rails-i18n
rainbow (>= 2.2.2, < 4.0)
terminal-table (>= 1.5.1)
listen (3.5.1)
rb-fsevent (~> 0.10, >= 0.10.3)
rb-inotify (~> 0.9, >= 0.9.10)
Expand All @@ -98,6 +110,8 @@ GEM
nokogiri (1.11.6)
mini_portile2 (~> 2.5.0)
racc (~> 1.4)
parser (3.0.1.1)
ast (~> 2.4.1)
puma (5.3.2)
nio4r (~> 2.0)
racc (1.5.2)
Expand Down Expand Up @@ -126,12 +140,16 @@ GEM
nokogiri (>= 1.6)
rails-html-sanitizer (1.3.0)
loofah (~> 2.3)
rails-i18n (6.0.0)
i18n (>= 0.7, < 2)
railties (>= 6.0.0, < 7)
railties (6.1.3.2)
actionpack (= 6.1.3.2)
activesupport (= 6.1.3.2)
method_source
rake (>= 0.8.7)
thor (~> 1.0)
rainbow (3.0.0)
rake (13.0.3)
rb-fsevent (0.11.0)
rb-inotify (0.10.1)
Expand All @@ -155,10 +173,13 @@ GEM
activesupport (>= 4.0)
sprockets (>= 3.0.0)
sqlite3 (1.4.2)
terminal-table (3.0.1)
unicode-display_width (>= 1.1.1, < 3)
thor (1.1.0)
tilt (2.0.10)
tzinfo (2.0.4)
concurrent-ruby (~> 1.0)
unicode-display_width (2.0.0)
websocket-driver (0.7.4)
websocket-extensions (>= 0.1.0)
websocket-extensions (0.1.5)
Expand All @@ -169,6 +190,7 @@ PLATFORMS

DEPENDENCIES
byebug
i18n-tasks (~> 0.9.34)
listen (~> 3.3)
puma (~> 5.0)
rails (~> 6.1.3, >= 6.1.3.2)
Expand Down
1 change: 1 addition & 0 deletions app/assets/images/cover.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions app/assets/stylesheets/application.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,11 @@
*= require_tree .
*= require_self
*/
.tangerine {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should consider if we want to do this "the tailwind way" by modifying our tailwind.config.js. Perhaps this could be our display font, or perhaps we could introduce it as its own font family class. Here's the tailwind docs about fonts.

This doesn't need to prevent this PR from merging, just a thought/suggestion, and we could always do it later.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have tried defining a tailwind font class in tailwind.config.js like this:

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'tangerine': ['Tangerine', 'cursive']
      }
    }
  }
}

But it doesn't seem to be working. I apply a font-tangerine class to the div that I want styled with the Tangerine Google WebFont, but the font is not applied, and inspecting the browser console, I don't see any rules for a .font-tangerine class.

Does something need to be run after the tailwind.config.js file is changed, in order for the changes to be picked up? I tried bin/rails assets:precompile but it didn't help, I tried npm run postcss:build but I'm getting an error missing script: postcss:build.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wouldn't be using this font too much in the UI in any case, it's more for show on the home page for a nice first impact.

font-family: 'Tangerine', cursive;
}

label.required::before, legend.required::before {
content: "*";
padding-right: 3px;
}
1 change: 1 addition & 0 deletions app/javascript/packs/new_project.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
console.log("Hello only from new_project");
5 changes: 4 additions & 1 deletion app/views/layouts/application.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<title>MarriageBooklet</title>
<title><%= t('page-title') %></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>

<%= stylesheet_link_tag 'application', media: 'all' %>
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Tangerine&display=swap" rel="stylesheet">
</head>

<body>
Expand Down
24 changes: 22 additions & 2 deletions app/views/pages/home.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,23 @@
<div class="bg-green-300 border-green-600 border-b p-4 m-4 rounded">
<h1><%= t('hello') %></h1>
<div class="flex flex-wrap overflow-hidden h-screen">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This page isn't responsive. That is, it doesn't look good when you make the browser roughly the size of a phone.

If we merge without making the page more responsive, I think we should create an issue to come back and make it more responsive later. At some screen size, it should switch from a horizontal to vertical layout.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for certain, this PR still needs a lot of work, but I figured before I went any further we should check to see if it's going in the right direction for everyone. Further issues can certainly be opened, I'm not a styling expert so any further fixes are quite welcome.


<div class="my-auto px-3 w-1/3 overflow-hidden">
<!-- Column 1 Content -->
</div>

<div class="my-auto px-3 w-1/3 overflow-hidden text-center">
<!-- Column 2 Content -->
<%= image_tag "cover.svg", :style => "height: 600px; box-shadow: 16px 1px 5px -14px black;", :class => "booklet-svg mx-auto" %>
</div>

<div class="my-auto px-3 w-1/3 overflow-hidden">
<!-- Column 3 Content -->
<div class="p-10 m-4 lg:text-5xl md:text-3xl text-center tangerine subpixel-antialiased"><%= t('welcome-greeting-1') %></div>
<div class="p-10 m-4 lg:text-5xl md:text-3xl text-center tangerine subpixel-antialiased"><%= t('welcome-greeting-2') %></div>
<div class="text-center">
<a href="<%= new_project_pages_path %>">
<button class="p-5 m-4 text-xl text-pink-500 bg-pink-100 hover:bg-pink-200 hover:text-pink-800 font-bold uppercase rounded-md outline-pink-200"><%= t('get-started-link') %></button>
</a>
</div>
</div>

</div>
157 changes: 157 additions & 0 deletions app/views/pages/new_project.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
<h1 class="py-6 my-6 text-center"><%= t('pages.new_project.title') %></h1> <!-- New wedding booklet project -->

<form action="#" method="POST">
<div class="md:grid md:grid-cols-3 md:gap-6 bg-gray-200 p-9 mx-4"><!-- Inner wrapper for title + card start -->
<div class="md:col-span-1"><!-- Title before card start -->
<div class="px-4 sm:px-0">
<h3 class="text-lg font-medium leading-6 text-gray-900"><%= t('pages.new_project.request_info.title') %></h3> <!-- User info -->
<p class="mt-1 text-sm text-gray-600">
<%= t('pages.new_project.request_info.description') %> <!-- Please fill in some information needed for composing the booklet. -->
</p>
<hr class="m-4 border-gray-400">
<p class="mt-1 text-sm text-gray-500 italic">
<%= t('pages.new_project.request_info.optional_login') %> <!-- If you already created an account, you may login instead. In that case any previously entered information will be retrieved. Or you can go ahead and register an account right away if you would like your project to be associated with your account. -->
</p>
<div class="text-center p-4 md:grid md:grid-cols-2 md:gap-3">
<button class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"><%= t('action-login') %></button>
<button class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"><%= t('action-register') %></button>
</div>
</div>
</div><!-- Title before card end -->
<div class="mt-5 md:mt-0 md:col-span-2"><!-- Card outer wrapper start -->
<div class="shadow sm:rounded-md sm:overflow-hidden"><!-- Card inner wrapper start -->
<div class="px-4 py-5 bg-white space-y-6 sm:p-6"><!-- Card content start -->
<fieldset><!-- Category person block start -->
<legend class="text-base font-medium text-gray-900 required"><%= t('pages.new_project.person_category.label') %> <!-- You are: --></legend>
<div class="mt-4 space-y-4">
<div class="flex items-center">
<input id="person_category_bride" name="person_category" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
<label for="person_category_bride" class="ml-3 block text-sm font-medium text-gray-700">
<%= t('pages.new_project.person_category.bride') %>
</label>
</div>
<div class="flex items-center">
<input id="person_category_groom" name="person_category" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
<label for="person_category_groom" class="ml-3 block text-sm font-medium text-gray-700">
<%= t('pages.new_project.person_category.groom') %>
</label>
</div>
<div class="flex items-center">
<input id="person_category_celebrant" name="person_category" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
<label for="person_category_celebrant" class="ml-3 block text-sm font-medium text-gray-700">
<%= t('pages.new_project.person_category.celebrant') %>
</label>
</div>
</div>
</fieldset><!-- Person category block end -->
<div class="grid grid-cols-3 gap-6"><!-- Email address block start -->
<div class="col-span-3 sm:col-span-2">
<label for="email_address" class="block text-sm font-medium text-gray-700 required">
<%= t('pages.new_project.email_address.label') %><!-- Your email address is -->
</label>
<input type="text" name="email_address" id="email_address" class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full border-gray-300 rounded py-2 px-3 sm:text-sm leading-tight" placeholder="[email protected]">
<p class="mt-2 text-sm text-gray-500 italic">
<%= t('pages.new_project.email_address.description') %> <!-- Your email address will never be shared without your permission. Wedding booklet projects you create will be associated with your email address. -->
</p>
</div>
</div><!-- Email address block end -->
<div class="grid grid-cols-3 gap-6"><!-- Marriage date block start -->
<div class="col-span-3 sm:col-span-2">
<label for="marriage_date" class="block text-sm font-medium text-gray-700 required">
<%= t('pages.new_project.marriage_date.label') %><!-- The wedding will take place on: -->
</label>
<input type="datetime-local" name="marriage_date" id="marriage_date" class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full border-gray-300 rounded py-2 px-3 sm:text-sm leading-tight">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could there be a placeholder here? It's unclear what kind of time/date format would be best.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think pretty much all browsers now have a calendar picker? That should pretty much take care of getting the format right, because it will change between locales anyways and browsers handle that with the calendar picker.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For example my Chrome browser is set to Italian, so it renders the the datetime input like this:
datetime input

gg = giorno = day
mm = mese = month
aaaa = anno = year

I'm guessing in an English browser it will show up something like this:
mm/dd/yyyy
Month - Day - Year

</div>
</div><!--Marriage date block end -->
<div class="grid grid-cols-3 gap-6"><!-- Marriage location church block start -->
<div class="col-span-3 sm:col-span-2">
<label for="marriage_location.church" class="block text-sm font-medium text-gray-700 required">
<%= t('pages.new_project.marriage_location.church_label') %><!-- The wedding ceremony will take place at: -->
</label>
<input type="text" name="marriage_location.church" id="marriage_location.church" class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full border-gray-300 rounded py-2 px-3 sm:text-sm leading-tight" placeholder="Saint Patrick Cathedral">
</div>
</div><!--Marriage location block end -->
<div class="grid grid-cols-3 gap-6"><!-- Marriage location city / nation block start -->
<div class="col-span-3 sm:col-span-2">
<label for="marriage_location.city" class="block text-sm font-medium text-gray-700">
<%= t('pages.new_project.marriage_location.city_label') %> <!-- The wedding ceremony will take place in: -->
</label>
<input type="text" name="marriage_location.city" id="marriage_location.city" class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full border-gray-300 rounded py-2 px-3 sm:text-sm leading-tight" placeholder="New York City, New York">
</div>
</div><!--Marriage location block end -->

</div><!-- Card content end -->
</div><!-- Card inner wrapper end -->
</div><!-- Card outer wrapper end -->
</div><!-- Inner wrapper for title + card end -->

<div class="hidden sm:block" aria-hidden="true">
<div class="py-5">
<div class="border-t border-gray-200"></div>
</div>
</div>

<div class="mt-10 sm:mt-0 md:grid md:grid-cols-3 md:gap-6 bg-gray-200 p-9 mx-4">
<div class="md:col-span-1">
<div class="px-4 sm:px-0">
<h3 class="text-lg font-medium leading-6 text-gray-900"><%= t('pages.new_project.wedding_party.title') %></h3><!-- Wedding party -->
<p class="mt-1 text-sm text-gray-600">
<%= t('pages.new_project.wedding_party.description') %><!-- C -->
</p>
</div>
</div>
<div class="mt-5 md:mt-0 md:col-span-2">
<div class="shadow overflow-hidden sm:rounded-md">
<div class="px-4 py-5 bg-white sm:p-6">
<div class="grid grid-cols-6 gap-6">
<div class="col-span-6 sm:col-span-3">
<label for="bride_firstname" class="block text-sm font-medium text-gray-700 required"><%= t('pages.new_project.wedding_party.bride.firstname_label') %></label>
<input type="text" name="bride_firstname" id="bride_firstname" autocomplete="off" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
</div>

<div class="col-span-6 sm:col-span-3">
<label for="bride_lastname" class="block text-sm font-medium text-gray-700 required"><%= t('pages.new_project.wedding_party.bride.lastname_label') %></label>
<input type="text" name="bride_lastname" id="bride_lastname" autocomplete="off" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
</div>

<div class="col-span-6 sm:col-span-3">
<label for="groom_firstname" class="block text-sm font-medium text-gray-700 required"><%= t('pages.new_project.wedding_party.groom.firstname_label') %></label>
<input type="text" name="groom_firstname" id="groom_firstname" autocomplete="off" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
</div>

<div class="col-span-6 sm:col-span-3">
<label for="groom_lastname" class="block text-sm font-medium text-gray-700 required"><%= t('pages.new_project.wedding_party.groom.lastname_label') %></label>
<input type="text" name="groom_lastname" id="groom_lastname" autocomplete="off" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
</div>

<div class="col-span-6 sm:col-span-3">
<label for="maidofhonor_firstname" class="block text-sm font-medium text-gray-700 required"><%= t('pages.new_project.wedding_party.maidofhonor.firstname_label') %></label>
<input type="text" name="maidofhonor_firstname" id="maidofhonor_firstname" autocomplete="off" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
</div>

<div class="col-span-6 sm:col-span-3">
<label for="maidofhonor_lastname" class="block text-sm font-medium text-gray-700 required"><%= t('pages.new_project.wedding_party.maidofhonor.lastname_label') %></label>
<input type="text" name="maidofhonor_lastname" id="maidofhonor_lastname" autocomplete="off" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
</div>

<div class="col-span-6 sm:col-span-3">
<label for="bestman_firstname" class="block text-sm font-medium text-gray-700 required"><%= t('pages.new_project.wedding_party.bestman.firstname_label') %></label>
<input type="text" name="bestman_firstname" id="bestman_firstname" autocomplete="off" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
</div>

<div class="col-span-6 sm:col-span-3">
<label for="bestman_lastname" class="block text-sm font-medium text-gray-700 required"><%= t('pages.new_project.wedding_party.bestman.lastname_label') %></label>
<input type="text" name="bestman_lastname" id="bestman_lastname" autocomplete="off" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
</div>
</div>
</div>
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
<button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<%= t('pages.new_project.create_project_button') %><!-- Create project -->
</button>
</div>
</div>
</div>
</div>
</form>
<%= javascript_pack_tag 'new_project' %>
Loading