Fixes publiclab#4311 optional profile picture at sign up (publiclab#4538

) * Fixes publiclab#4311 optional profile picture at sign up * Fixing profile picture styling * Adding margin
SrinandanPai · Jan 14, 2019 · 8d93669 · 8d93669
1 parent 422608b
commit 8d93669
Showing 1 changed file with 66 additions and 15 deletions.
diff --git a/app/views/users/_create_form.html.erb b/app/views/users/_create_form.html.erb
@@ -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,
@@ -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,
@@ -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,
@@ -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>
 
@@ -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>