Skip to content

Commit

Permalink
Merge pull request #4943 from coalest/css-fixes
Browse files Browse the repository at this point in the history 
Minor CSS fixes to sign in/up flow
  • Loading branch information
@cielf
cielf authored Jan 24, 2025
2 parents 42c25ae + 937e4be commit a95b349
Show file tree
Hide file tree
Showing 4 changed files with 62 additions and 65 deletions.
14 changes: 14 additions & 0 deletions app/assets/stylesheets/custom.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,3 +108,17 @@
width: 3rem;
cursor: not-allowed;
}

// The account request form is placed inside the default devise container which
// is too narrow for the desired form width, so we have to apply a negative
// margin to center it (except on mobile where text would get cut off).
.account-request {
$inner-width: 35rem;
$outer-width: 360px;
width: $inner-width;
margin-left: calc((#{$outer-width} - #{$inner-width}) / 2);
@media (max-width: 620px) {
margin-left: 0;
max-width: 100%;
}
}
44 changes: 12 additions & 32 deletions app/views/account_requests/new.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,29 @@
<% unless Rails.env.staging? %>
<div class="bg-white" style='width: 35rem'>
<div class="bg-white account-request">
<div class="p-3">
<div class="mb-10">
<h1 class='text-3xl text-center'>Essentials Bank Account Request Form</h1>
</div>

<div class="form-check">
<%= radio_button_tag(:account, :bank, false, class: 'form-check-input account_type') %>
<%= radio_button_tag(:account, :bank, @bank_selected, class: 'form-check-input account_type') %>
<%= 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') %>
</div>
<div class="form-check">
<%= radio_button_tag(:account, :partner, false, class: 'form-check-input account_type') %>
<%= 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') %>
</div>

<% if @bank_selected %>
<script type="module">
$(document).ready(function() {
const bankRadioButtons = $('.account_type[value="bank"]:not(:checked)');

if (bankRadioButtons.length > 0) {
bankRadioButtons.eq(0).click();
}
});
</script>
<% else %>
<script type="module">
$(document).ready(function() {
$('#create_bank').hide()
$('#partner_info').hide()
});
</script>
<% end %>

<script type="module">
$('.account_type').change(function() {
if (this.value === 'bank') {
$('#create_bank').show()
$('#partner_info').hide()
} else {
$('#create_bank').hide()
$('#partner_info').show()
}
})
</script>
<%# Hide #partner_info and #create_bank selections unless radio button selected %>
<style>
#partner_info, #create_bank {
display: none;
}
.form-check:has(#account_partner:checked)~#partner_info,
.form-check:has(#account_bank:checked)~#create_bank {
display: block;
}
</style>

<div class='card-text' id='partner_info'>
<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>
Expand Down
61 changes: 32 additions & 29 deletions app/views/layouts/_devise_shared.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<%# required params: title, body_class, masthead_img_src %>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
Expand Down Expand Up @@ -31,9 +32,9 @@
padding-left: 0px;
}
</style>
<script type="module">
$(document).ready(function() {
<% if Rails.env.staging? %>
<% if Rails.env.staging? %>
<script type="module">
$(document).ready(function() {
// Prevents users from closing the modal by clicking outside of it or pressing the esc key
new bootstrap.Modal('#warningModal', {
backdrop: 'static',
Expand All @@ -48,16 +49,16 @@
$('.continue-btn').attr("disabled", true);
}
});
<% end %>
});
</script>
});
</script>
<% end %>
</head>

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

Expand All @@ -72,31 +73,33 @@
<!-- /.login-box -->

<!-- Modal -->
<div class="modal fade" id="warningModal" tabindex="-1" role="dialog" aria-labelledby="warningModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="warningModalLabel"><b>This site is for TEST purposes only!</b></h3>
</div>
<div class="modal-body">
You're visiting staging.humanessentials.app, a demo/test site for the full site at <a href="https://humanessentials.app">humanessentials.app</a>.<br>
It is not safe to upload, enter or save any sensitive data here.<br>
<div class="modal-body-warning-text">
If you meant to login to your live account, go to <a href="https://humanessentials.app/users/sign_in">humanessentials.app</a>
<% if Rails.env.staging? %>
<div class="modal fade" id="warningModal" tabindex="-1" role="dialog" aria-labelledby="warningModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="warningModalLabel"><b>This site is for TEST purposes only!</b></h3>
</div>
<br>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
I Understand
</label>
<div class="modal-body">
You're visiting staging.humanessentials.app, a demo/test site for the full site at <a href="https://humanessentials.app">humanessentials.app</a>.<br>
It is not safe to upload, enter or save any sensitive data here.<br>
<div class="modal-body-warning-text">
If you meant to login to your live account, go to <a href="https://humanessentials.app/users/sign_in">humanessentials.app</a>
</div>
<br>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
I Understand
</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning continue-btn" data-bs-dismiss="modal" disabled>Continue To The Test Site</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning continue-btn" data-bs-dismiss="modal" disabled>Continue To The Test Site</button>
</div>
</div>
</div>
</div>
<% end %>
</body>
</html>
8 changes: 4 additions & 4 deletions app/views/users/sessions/new.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
</style>
<%= render partial: "shared/flash" %>
<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="login-box">
<div class="login-box w-100">
<!-- /.login-logo -->
<div class="card">
<div class="card-body login-card-body">
Expand All @@ -27,7 +27,7 @@
</div>
<div class="form-inputs" data-controller="password-visibility">
<div class="password-input-wrapper">
<%= f.input :password, autofocus: true, input_html: { data: { password_visibility_target: 'password' } } %>
<%= f.input :password, autofocus: true, required: true, input_html: { data: { password_visibility_target: 'password' } } %>
<span class="toggle-password">
<i class="fas fa-eye-slash" data-action="click->password-visibility#toggle" data-password-visibility-target="icon"></i>
</span>
Expand All @@ -53,6 +53,6 @@
</div>
<% end %>

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

0 comments on commit a95b349

Please sign in to comment.