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

Fixes #4311 optional profile picture at sign up #4538

Merged
merged 3 commits into from Jan 14, 2019
Merged

Fixes #4311 optional profile picture at sign up #4538

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7a5a07c
Fixes #4311 optional profile picture at sign up
IshaGupta18 Jan 5, 2019
dd777f4
Fixing profile picture styling
IshaGupta18 Jan 9, 2019
16334a5
Adding margin
IshaGupta18 Jan 10, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
81 changes: 66 additions & 15 deletions app/views/users/_create_form.html.erb
View file
Open in desktop
Expand Up @@ -13,23 +13,36 @@

<br style="clear:both;"/>

<div class="row">

<div class="col-sm-6" style="display:flex; justify-content: center;">
<div class="propic">
<img src="" class="something_something img-circle" style="width: 120px; height: 115px; margin-top: 10px; margin-bottom: 25px; margin-left: 55px" onerror="this.src='https://www.gravatar.com/avatar/1aedb8d9dc4751e229a335e371db8058'">
<div class="form-group">
<span class="btn btn-outline-primary btn-file">
<u>Choose image</u> or Drop one here
<%= f.file_field :photo, id:"something_else_unique", onchange:'showFile(this, "something_something");', accept: "image/*", style: 'draggable: true' %>
</span>
</div>
</div>
</div>

<div class="row col-sm-6">

<div class="row">

<div class="form-group col-sm-6">
<div class="form-group col-sm-12" id="username_div">
<label for="username"><%= t('user_sessions.new.username') %></label>
<%= f.text_field :username, { tabindex: 1, placeholder: "Username", class: 'form-control', id: 'username-signup' } %>
</div>

<div class="form-group col-sm-6">
<div class="form-group col-sm-12">
<label for="email"><%= t('users._form.email') %></label>
<%= f.text_field :email, { tabindex: 3, placeholder: "you@email.com", class: 'form-control', id: 'email' } %>
</div>

</div>
</div>

<div class="row">
<div class="form-group col-sm-6">
<div class="form-group col-sm-12">
<label for="password"><%= t('users._form.create_password') %></label>
<%= f.password_field :password, { placeholder: 'Enter your new password',
tabindex: 4,
Expand All @@ -39,7 +52,7 @@
%>
</div>

<div class="form-group col-sm-6">
<div class="form-group col-sm-12">
<label for="password_confirmation"><%= t('users._form.confirmation') %></label>
<%= f.password_field :password_confirmation, { placeholder: I18n.t('users._form.confirm_password'),
tabindex: 5,
Expand All @@ -49,9 +62,7 @@
%>
</div>

</div>

<div class="form-group">
<div class="form-group col-sm-12">
<label for="user_bio"><%= t('users._form.bio') %></label>
<%= f.text_area :bio, { placeholder: I18n.t('users._form.add_bio'),
rows: 8,
Expand All @@ -75,14 +86,13 @@
})();
</script>

<% cache('feature_signup-notice-modal', skip_digest: true) do %>
<%= feature('signup-notice-modal') %>
<% end %>


<div class="form-group form-inline" style="clear:both;padding-top:10px;">
<!-- button for creating new users -->
<button class="btn btn-lg btn-primary btn-save" type="submit" tabindex="7"><%= t('users._form.sign_up') %></button>
<a class="btn btn-lg btn-default" id="toLogin" href="/login">
<a class="btn btn-lg btn-default" id="toLogin">
<!-- <a class="btn btn-lg btn-default" id="toLogin" href="/login"> -->
<%= t('users._form.log_in') %>
</a>

Expand All @@ -105,5 +115,46 @@
$('#loginModal').modal(); //Toggles the modal
})
</script>
<script>
function showFile(inp, disp){
if (inp.files && inp.files[0]){
var reader = new FileReader();
let dp = $(`.${disp}`);
reader.onload = function(e) {
dp.attr('src', e.target.result);
dp.css("border", "1px solid #e6e6e6");

};
reader.readAsDataURL(inp.files[0]);
}
}
</script>
</div>

<style>
.btn-file {
position: relative;
overflow: hidden;
border-color: #0059b3;
border-style: dashed;
border-width: 2px;
padding: 13px;
height: 50px;
margin-bottom: 10px;
}

.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
</style>