Skip to content

Commit a95b349

Browse files
cielfcielf
authored
Merge pull request #4943 from coalest/css-fixes
Minor CSS fixes to sign in/up flow
2 parents 42c25ae + 937e4be commit a95b349

File tree

4 files changed

+62
-65
lines changed

4 files changed

+62
-65
lines changed

‎app/assets/stylesheets/custom.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,3 +108,17 @@
108108
width: 3rem;
109109
cursor: not-allowed;
110110
}
111+
112+
// The account request form is placed inside the default devise container which
113+
// is too narrow for the desired form width, so we have to apply a negative
114+
// margin to center it (except on mobile where text would get cut off).
115+
.account-request {
116+
$inner-width: 35rem;
117+
$outer-width: 360px;
118+
width: $inner-width;
119+
margin-left: calc((#{$outer-width} - #{$inner-width}) / 2);
120+
@media (max-width: 620px) {
121+
margin-left: 0;
122+
max-width: 100%;
123+
}
124+
}

‎app/views/account_requests/new.html.erb‎

Lines changed: 12 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,29 @@
11
<% unless Rails.env.staging? %>
2-
<div class="bg-white" style='width: 35rem'>
2+
<div class="bg-white account-request">
33
<div class="p-3">
44
<div class="mb-10">
55
<h1 class='text-3xl text-center'>Essentials Bank Account Request Form</h1>
66
</div>
77

88
<div class="form-check">
9-
<%= radio_button_tag(:account, :bank, false, class: 'form-check-input account_type') %>
9+
<%= radio_button_tag(:account, :bank, @bank_selected, class: 'form-check-input account_type') %>
1010
<%= label_tag(:account, "I am an Essentials Bank. I do NOT distribute diapers/period supplies directly to the public, I distribute them to partner agencies who distribute them to the public.", class: 'form-check-label') %>
1111
</div>
1212
<div class="form-check">
1313
<%= radio_button_tag(:account, :partner, false, class: 'form-check-input account_type') %>
1414
<%= label_tag(:account, "I am a Partner Agency to an Essentials Bank. I distribute the diapers/period supplies that I receive from essentials banks directly to the public.", class: 'form-check-label') %>
1515
</div>
1616

17-
<% if @bank_selected %>
18-
<script type="module">
19-
$(document).ready(function() {
20-
const bankRadioButtons = $('.account_type[value="bank"]:not(:checked)');
21-
22-
if (bankRadioButtons.length > 0) {
23-
bankRadioButtons.eq(0).click();
24-
}
25-
});
26-
</script>
27-
<% else %>
28-
<script type="module">
29-
$(document).ready(function() {
30-
$('#create_bank').hide()
31-
$('#partner_info').hide()
32-
});
33-
</script>
34-
<% end %>
35-
36-
<script type="module">
37-
$('.account_type').change(function() {
38-
if (this.value === 'bank') {
39-
$('#create_bank').show()
40-
$('#partner_info').hide()
41-
} else {
42-
$('#create_bank').hide()
43-
$('#partner_info').show()
44-
}
45-
})
46-
</script>
17+
<%# Hide #partner_info and #create_bank selections unless radio button selected %>
18+
<style>
19+
#partner_info, #create_bank {
20+
display: none;
21+
}
22+
.form-check:has(#account_partner:checked)~#partner_info,
23+
.form-check:has(#account_bank:checked)~#create_bank {
24+
display: block;
25+
}
26+
</style>
4727

4828
<div class='card-text' id='partner_info'>
4929
<p class='p-2'>Are you a current partner to diaper and/or period supply banks? If so please go <a href='https://humanessentials.app/users/sign_in'>here</a> to login.</p>

‎app/views/layouts/_devise_shared.html.erb‎

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<%# required params: title, body_class, masthead_img_src %>
2+
<!doctype html>
23
<html>
34
<head>
45
<meta charset="utf-8">
@@ -31,9 +32,9 @@
3132
padding-left: 0px;
3233
}
3334
</style>
34-
<script type="module">
35-
$(document).ready(function() {
36-
<% if Rails.env.staging? %>
35+
<% if Rails.env.staging? %>
36+
<script type="module">
37+
$(document).ready(function() {
3738
// Prevents users from closing the modal by clicking outside of it or pressing the esc key
3839
new bootstrap.Modal('#warningModal', {
3940
backdrop: 'static',
@@ -48,16 +49,16 @@
4849
$('.continue-btn').attr("disabled", true);
4950
}
5051
});
51-
<% end %>
52-
});
53-
</script>
52+
});
53+
</script>
54+
<% end %>
5455
</head>
5556

5657
<body id="devise" class="hold-transition login-page <%= body_class %> <%= Rails.env.staging? ? 'login-page-test' : '' %>">
5758
<div class="login-box">
5859
<% if masthead_img_src %>
59-
<div class="login-logo text-center">
60-
<img id="MastheadLogo" src="<%= masthead_img_src %>" alt="Human Essentials" title="Human Essentials" class="serv_icon">
60+
<div class="login-logo">
61+
<img id="MastheadLogo" src="<%= masthead_img_src %>" alt="Human Essentials" title="Human Essentials" class="serv_icon mw-100">
6162
</div>
6263
<% end %>
6364

@@ -72,31 +73,33 @@
7273
<!-- /.login-box -->
7374

7475
<!-- Modal -->
75-
<div class="modal fade" id="warningModal" tabindex="-1" role="dialog" aria-labelledby="warningModalLabel" aria-hidden="true">
76-
<div class="modal-dialog" role="document">
77-
<div class="modal-content">
78-
<div class="modal-header">
79-
<h3 class="modal-title" id="warningModalLabel"><b>This site is for TEST purposes only!</b></h3>
80-
</div>
81-
<div class="modal-body">
82-
You're visiting staging.humanessentials.app, a demo/test site for the full site at <a href="https://humanessentials.app">humanessentials.app</a>.<br>
83-
It is not safe to upload, enter or save any sensitive data here.<br>
84-
<div class="modal-body-warning-text">
85-
If you meant to login to your live account, go to <a href="https://humanessentials.app/users/sign_in">humanessentials.app</a>
76+
<% if Rails.env.staging? %>
77+
<div class="modal fade" id="warningModal" tabindex="-1" role="dialog" aria-labelledby="warningModalLabel" aria-hidden="true">
78+
<div class="modal-dialog" role="document">
79+
<div class="modal-content">
80+
<div class="modal-header">
81+
<h3 class="modal-title" id="warningModalLabel"><b>This site is for TEST purposes only!</b></h3>
8682
</div>
87-
<br>
88-
<div class="form-check">
89-
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
90-
<label class="form-check-label" for="defaultCheck1">
91-
I Understand
92-
</label>
83+
<div class="modal-body">
84+
You're visiting staging.humanessentials.app, a demo/test site for the full site at <a href="https://humanessentials.app">humanessentials.app</a>.<br>
85+
It is not safe to upload, enter or save any sensitive data here.<br>
86+
<div class="modal-body-warning-text">
87+
If you meant to login to your live account, go to <a href="https://humanessentials.app/users/sign_in">humanessentials.app</a>
88+
</div>
89+
<br>
90+
<div class="form-check">
91+
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
92+
<label class="form-check-label" for="defaultCheck1">
93+
I Understand
94+
</label>
95+
</div>
96+
</div>
97+
<div class="modal-footer">
98+
<button type="button" class="btn btn-warning continue-btn" data-bs-dismiss="modal" disabled>Continue To The Test Site</button>
9399
</div>
94-
</div>
95-
<div class="modal-footer">
96-
<button type="button" class="btn btn-warning continue-btn" data-bs-dismiss="modal" disabled>Continue To The Test Site</button>
97100
</div>
98101
</div>
99102
</div>
100-
</div>
103+
<% end %>
101104
</body>
102105
</html>

‎app/views/users/sessions/new.html.erb‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
</style>
1515
<%= render partial: "shared/flash" %>
1616
<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
17-
<div class="login-box">
17+
<div class="login-box w-100">
1818
<!-- /.login-logo -->
1919
<div class="card">
2020
<div class="card-body login-card-body">
@@ -27,7 +27,7 @@
2727
</div>
2828
<div class="form-inputs" data-controller="password-visibility">
2929
<div class="password-input-wrapper">
30-
<%= f.input :password, autofocus: true, input_html: { data: { password_visibility_target: 'password' } } %>
30+
<%= f.input :password, autofocus: true, required: true, input_html: { data: { password_visibility_target: 'password' } } %>
3131
<span class="toggle-password">
3232
<i class="fas fa-eye-slash" data-action="click->password-visibility#toggle" data-password-visibility-target="icon"></i>
3333
</span>
@@ -53,6 +53,6 @@
5353
</div>
5454
<% end %>
5555

56-
<%= link_to user_google_oauth2_omniauth_authorize_path, method: :post do %>
57-
<img src="../img/[email protected]" alt="Sign in with Google">
56+
<%= link_to user_google_oauth2_omniauth_authorize_path, method: :post, class: "d-block" do %>
57+
<img src="../img/[email protected]" alt="Sign in with Google" class="d-block w-100">
5858
<% end %>

0 commit comments

Comments
 (0)