From 878952f072a0f8ef7e5dcb82db533d1e4434c9f3 Mon Sep 17 00:00:00 2001
From: Mojca Lorber <mojca.lorber@biosistemika.com>
Date: Wed, 26 Oct 2016 13:41:17 +0200
Subject: [PATCH 1/5] change edit avatar in profile

---
 app/assets/stylesheets/themes/scinote.scss  | 25 +++++++++++++++++++++
 app/views/users/registrations/edit.html.erb | 13 +++++++++--
 config/locales/en.yml                       |  2 +-
 3 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index 5df90e1a6..9f5893bd2 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -1453,3 +1453,28 @@ html.turbolinks-progress-bar::before {
     display: inline;
   }
 }
+
+//edit avatar
+#avatar-container {
+  width: 100px;
+  height: 100px;
+  position: relative;
+}
+
+#avatar-image,
+#avatar-edit {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+#avatar-edit {
+  z-index: 10;
+  opacity: 0.8;
+  margin-top: 70px;
+
+  .btn-greyed {
+    border-radius: 0em;
+    width: 100px;
+  }
+}
diff --git a/app/views/users/registrations/edit.html.erb b/app/views/users/registrations/edit.html.erb
index 3a6effb21..f7afad79d 100644
--- a/app/views/users/registrations/edit.html.erb
+++ b/app/views/users/registrations/edit.html.erb
@@ -15,8 +15,17 @@
       <div class="form-group">
         <%= f.label t("users.registrations.edit.avatar_label") %><br />
         <% @user_avatar_url ||= avatar_path(current_user, :thumb) %>
-        <%= image_tag @user_avatar_url %><br /><br />
-        <a href="#" class="btn btn-default" data-action="edit"><%=t "users.registrations.edit.avatar_btn" %></a>
+        <div id="avatar-container">
+          <div id="avatar-image">
+            <%= image_tag @user_avatar_url %>
+          </div>
+          <div id="avatar-edit">
+            <a href="#" class="btn btn-greyed btn-sm" data-action="edit">
+              <span class="glyphicon glyphicon-pencil"></span>
+              <%=t "users.registrations.edit.avatar_btn" %>
+            </a>
+          </div>
+        </div>
       </div>
     </div>
     <div data-part="edit" style="display: none;">
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 0ef1df7fb..0a2faea0e 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1095,7 +1095,7 @@ en:
         head_title: "My profile"
         title: "My profile"
         avatar_label: "Avatar"
-        avatar_btn: "Change avatar"
+        avatar_btn: "Edit avatar"
         avatar_title: "Change avatar"
         avatar_edit_label: "Upload new avatar file"
         avatar_submit: "Upload"

From 8309df0aafd2d8cbaabc09f44e0e0acc5e00ff51 Mon Sep 17 00:00:00 2001
From: Mojca Lorber <mojca.lorber@biosistemika.com>
Date: Wed, 26 Oct 2016 13:51:05 +0200
Subject: [PATCH 2/5] fix hound

---
 app/assets/stylesheets/themes/scinote.scss  | 18 +++++++++---------
 app/views/users/registrations/edit.html.erb |  6 +++---
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index 9f5893bd2..d93d7a55a 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -1455,26 +1455,26 @@ html.turbolinks-progress-bar::before {
 }
 
 //edit avatar
-#avatar-container {
-  width: 100px;
+.avatar-container {
   height: 100px;
   position: relative;
+  width: 100px;
 }
 
-#avatar-image,
-#avatar-edit {
-  width: 100%;
+.avatar-image,
+.avatar-edit {
   height: 100%;
   position: absolute;
+  width: 100%;
 }
 
-#avatar-edit {
-  z-index: 10;
-  opacity: 0.8;
+.avatar-edit {
   margin-top: 70px;
+  opacity: .8;
+  z-index: 10;
 
   .btn-greyed {
-    border-radius: 0em;
+    border-radius: 0;
     width: 100px;
   }
 }
diff --git a/app/views/users/registrations/edit.html.erb b/app/views/users/registrations/edit.html.erb
index f7afad79d..241f1c1ce 100644
--- a/app/views/users/registrations/edit.html.erb
+++ b/app/views/users/registrations/edit.html.erb
@@ -15,11 +15,11 @@
       <div class="form-group">
         <%= f.label t("users.registrations.edit.avatar_label") %><br />
         <% @user_avatar_url ||= avatar_path(current_user, :thumb) %>
-        <div id="avatar-container">
-          <div id="avatar-image">
+        <div class="avatar-container">
+          <div class="avatar-image">
             <%= image_tag @user_avatar_url %>
           </div>
-          <div id="avatar-edit">
+          <div class="avatar-edit">
             <a href="#" class="btn btn-greyed btn-sm" data-action="edit">
               <span class="glyphicon glyphicon-pencil"></span>
               <%=t "users.registrations.edit.avatar_btn" %>

From 5719d4c61f25f68c7d256c1a2f7060e5dac18195 Mon Sep 17 00:00:00 2001
From: Mojca Lorber <mojca.lorber@biosistemika.com>
Date: Thu, 27 Oct 2016 11:09:30 +0200
Subject: [PATCH 3/5] show edit avatar on mouse hover, add background and
 center image

---
 app/assets/stylesheets/themes/scinote.scss | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index d93d7a55a..c9e1e06ff 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -1459,17 +1459,24 @@ html.turbolinks-progress-bar::before {
   height: 100px;
   position: relative;
   width: 100px;
+  background-color: lighten($color-concrete, 2%);
 }
 
-.avatar-image,
-.avatar-edit {
-  height: 100%;
+.avatar-container:hover .avatar-edit{
+  display : block;
+}
+
+.avatar-image {
   position: absolute;
-  width: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
 }
 
 .avatar-edit {
-  margin-top: 70px;
+  display: none;
+  position: absolute;
+  margin-top: 70%;
   opacity: .8;
   z-index: 10;
 

From 888aa31aed2bf82505048dd59577cbb7a4225847 Mon Sep 17 00:00:00 2001
From: Mojca Lorber <mojca.lorber@biosistemika.com>
Date: Thu, 27 Oct 2016 11:18:11 +0200
Subject: [PATCH 4/5] fix hound

---
 app/assets/stylesheets/themes/scinote.scss | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index c9e1e06ff..5c9b4431e 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -1456,28 +1456,28 @@ html.turbolinks-progress-bar::before {
 
 //edit avatar
 .avatar-container {
+  background-color: lighten($color-concrete, 2%);
   height: 100px;
   position: relative;
   width: 100px;
-  background-color: lighten($color-concrete, 2%);
 }
 
-.avatar-container:hover .avatar-edit{
-  display : block;
+.avatar-container:hover .avatar-edit {
+  display: block;
 }
 
 .avatar-image {
+  left: 50%;
   position: absolute;
   top: 50%;
-  left: 50%;
-  transform: translate(-50%,-50%);
+  transform: translate(-50%, -50%);
 }
 
 .avatar-edit {
   display: none;
-  position: absolute;
   margin-top: 70%;
   opacity: .8;
+  position: absolute;
   z-index: 10;
 
   .btn-greyed {

From 91ec201fd0f9f27dad4e0ba9451ec7a4bb83d504 Mon Sep 17 00:00:00 2001
From: Mojca Lorber <mojca.lorber@biosistemika.com>
Date: Thu, 27 Oct 2016 16:18:31 +0200
Subject: [PATCH 5/5] make image clickable

---
 app/views/users/registrations/edit.html.erb | 22 +++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/app/views/users/registrations/edit.html.erb b/app/views/users/registrations/edit.html.erb
index 241f1c1ce..047e40533 100644
--- a/app/views/users/registrations/edit.html.erb
+++ b/app/views/users/registrations/edit.html.erb
@@ -15,17 +15,19 @@
       <div class="form-group">
         <%= f.label t("users.registrations.edit.avatar_label") %><br />
         <% @user_avatar_url ||= avatar_path(current_user, :thumb) %>
-        <div class="avatar-container">
-          <div class="avatar-image">
-            <%= image_tag @user_avatar_url %>
+        <a href="#" data-action="edit">
+          <div class="avatar-container">
+            <div class="avatar-image">
+              <%= image_tag @user_avatar_url %>
+            </div>
+            <div class="avatar-edit">
+              <div class="btn btn-greyed btn-sm">
+                <span class="glyphicon glyphicon-pencil"></span>
+                <%=t "users.registrations.edit.avatar_btn" %>
+              </div>
+            </div>
           </div>
-          <div class="avatar-edit">
-            <a href="#" class="btn btn-greyed btn-sm" data-action="edit">
-              <span class="glyphicon glyphicon-pencil"></span>
-              <%=t "users.registrations.edit.avatar_btn" %>
-            </a>
-          </div>
-        </div>
+        </a>
       </div>
     </div>
     <div data-part="edit" style="display: none;">