Merge pull request #53 from CH1006/175

175: edit-profile
luongvietdung · Sep 3, 2019 · 1cb612c · 1cb612c
2 parents d56b06e + 07ab82c
commit 1cb612c
Show file tree

Hide file tree

Showing 17 changed files with 219 additions and 84 deletions.
diff --git a/app/assets/javascripts/custom.js b/app/assets/javascripts/custom.js
@@ -26,6 +26,17 @@ $(document).ready(function() {
   $(".preview-signup").change(function() {
     readURL(this, '#img-prev-signup');
   });
+
+  $(".preview-edit-profile").change(function() {
+    readURL(this, '.img-circle');
+  });
+
+  $(".hide-form-password").css('display', 'none');
+  $(".show-form").on('click', function(){
+    $(".hide-form-password").toggle();
+    $(this).text( $(this).text() == 'More' ? "Hide" : "More");
+  });
+
 });
 
 function readURL(f, previewId) {

diff --git a/app/assets/stylesheets/custom.scss b/app/assets/stylesheets/custom.scss
@@ -41,7 +41,7 @@ header {
   animation: fade-in 0.75s 0.25s ease-in forwards;
 }
 
-nav {
+.custom-nav {
   position: fixed;
   width: 100%;
   z-index: 10;
@@ -384,13 +384,13 @@ $offWhite: #e9eaea;
 }
 
 @media (min-width: 992px) {
-  .container div div {
+  .title-welcome {
     flex-basis: 58.33333%;
     max-width: 58.33333%;
   }
 }
 
-.container div div {
+.title-welcome {
   flex-basis: 100%;
   max-width: 100%;
 }
@@ -570,3 +570,72 @@ h1, h2, h3, h4, h5, h6 {
 #error_explanation {
   color: red;
 }
+
+.custom-avatar-drop {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+}
+
+#show-dropdown {
+  position: relative;
+  height: 52px;
+}
+
+#hidden-dropdown {
+  visibility: hidden;
+  position: absolute;
+  background-color: #222;
+  box-shadow: 2px 4px 8px 0px rgba(0, 0, 0, 0.2);
+  transition: .1s;
+  opacity: 0;
+  margin-left: 20px;
+  margin-top: 27px;
+  width: 104%
+}
+
+#hidden-dropdown a:hover {
+  color: #999;
+}
+
+#show-dropdown:hover #hidden-dropdown {
+  visibility: visible;
+  opacity: 1;
+}
+
+.custom-col-3 {
+  width: 23%;
+  float: left;
+}
+
+.personal-info {
+  float: left;
+  margin-left: 15px;
+}
+
+.img-circle {
+  margin-top: 9px;
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+}
+
+.label-profile {
+  text-align: center;
+}
+
+.form-profile {
+  width: 100%;
+}
+
+.align-attr {
+  margin-top: 18px;
+}
+
+.margin-btn .btn {
+  margin: 10px;
+}
+
+.preview-edit-profile {
+  padding: 3px;
+}
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
@@ -24,6 +24,6 @@ def after_sign_out_path_for(resource_or_scope)
   def configure_permitted_parameters
     devise_parameter_sanitizer.permit(:sign_up, keys: %i[name email address password password_confirmation avatar])
     devise_parameter_sanitizer
-      .permit(:account_update, keys: %i[name email address password password_confirmation avatar])
+      .permit(:account_update, keys: %i[name email address password password_confirmation avatar current_password])
   end
 end
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -5,20 +5,4 @@ def full_title(page_title = "")
     base_title = t ".title"
     page_title.empty? ? base_title : "#{page_title} | #{base_title}"
   end
-
-  def avatar_member(member)
-    if member.avatar?
-      image_tag member.avatar.url, class: "avatar-default-member", id: "img_member_prev"
-    else
-      image_tag "defaultavatar.jpeg", class: "avatar-default-member", id: "img_member_prev"
-    end
-  end
-
-  def avatar_admin(admin)
-    if admin.avatar?
-      image_tag admin.avatar.url, class: "avatar-default", id: "img_prev"
-    else
-      image_tag "defaultavatar.jpeg", class: "avatar-default", id: "img_prev"
-    end
-  end
 end
diff --git a/app/uploaders/avatar_uploader.rb b/app/uploaders/avatar_uploader.rb
@@ -16,12 +16,11 @@ def store_dir
   end
 
   # Provide a default URL as a default if there hasn't been a file uploaded:
-  # def default_url(*args)
-  #   # For Rails 3.1+ asset pipeline compatibility:
-  #   # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
-  #
-  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
-  # end
+  def default_url
+    # For Rails 3.1+ asset pipeline compatibility:
+    "defaultavatar.jpeg"
+    # "/images/fallback/" + [version_name, "default.png"].compact.join('_')
+  end
 
   # Process files as they are uploaded:
   # process scale: [200, 300]

diff --git a/app/views/layouts/_footer.html.slim b/app/views/layouts/_footer.html.slim
@@ -1,40 +1,41 @@
 footer.fixed_footer
-  .row
-    .col-md-2
-      .logo
-    .col-md-7
-      p Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-    .col-md-3.social-media-links
-      ul
-        li
-          /! twitter
-          a href="#"
-            svg.glow viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
-              path.st0 d=("M9.5 27.1c11.2 0 17.4-9.3 17.4-17.4 0-0.3 0-0.5 0-0.8 1.2-0.9 2.2-1.9 3-3.2 -1.1 0.5-2.3 0.8-3.5 1 1.3-0.8 2.2-2 2.7-3.4 -1.2 0.7-2.5 1.2-3.9 1.5 -1.1-1.2-2.7-1.9-4.5-1.9 -3.4 0-6.1 2.7-6.1 6.1 0 0.5 0.1 0.9 0.2 1.4C9.7 10.1 5.2 7.7 2.2 4 1.7 4.9 1.4 6 1.4 7.1c0 2.1 1.1 4 2.7 5.1 -1 0-1.9-0.3-2.8-0.8 0 0 0 0.1 0 0.1 0 3 2.1 5.4 4.9 6 -0.5 0.1-1.1 0.2-1.6 0.2 -0.4 0-0.8 0-1.1-0.1 0.8 2.4 3 4.2 5.7 4.2 -2.1 1.6-4.7 2.6-7.6 2.6 -0.5 0-1 0-1.5-0.1C2.8 26.1 6 27.1 9.5 27.1") /
-            svg viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
-              path.st0 d=("M9.5 27.1c11.2 0 17.4-9.3 17.4-17.4 0-0.3 0-0.5 0-0.8 1.2-0.9 2.2-1.9 3-3.2 -1.1 0.5-2.3 0.8-3.5 1 1.3-0.8 2.2-2 2.7-3.4 -1.2 0.7-2.5 1.2-3.9 1.5 -1.1-1.2-2.7-1.9-4.5-1.9 -3.4 0-6.1 2.7-6.1 6.1 0 0.5 0.1 0.9 0.2 1.4C9.7 10.1 5.2 7.7 2.2 4 1.7 4.9 1.4 6 1.4 7.1c0 2.1 1.1 4 2.7 5.1 -1 0-1.9-0.3-2.8-0.8 0 0 0 0.1 0 0.1 0 3 2.1 5.4 4.9 6 -0.5 0.1-1.1 0.2-1.6 0.2 -0.4 0-0.8 0-1.1-0.1 0.8 2.4 3 4.2 5.7 4.2 -2.1 1.6-4.7 2.6-7.6 2.6 -0.5 0-1 0-1.5-0.1C2.8 26.1 6 27.1 9.5 27.1") /
-        li
-          /! facebook
-          a href="#"
-            svg.glow viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
-              path.st0 d=("M28.3 0.1H1.7c-0.9 0-1.6 0.7-1.6 1.6v26.5c0 0.9 0.7 1.6 1.6 1.6H16V18.4h-3.9v-4.5H16v-3.3c0-3.9 2.4-5.9 5.8-5.9 1.6 0 3.1 0.1 3.5 0.2v4l-2.4 0c-1.9 0-2.2 0.9-2.2 2.2v2.9h4.5l-0.6 4.5h-3.9v11.5h7.6c0.9 0 1.6-0.7 1.6-1.6V1.7C29.9 0.8 29.2 0.1 28.3 0.1z") /
-            svg viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
-              path.st0 d=("M28.3 0.1H1.7c-0.9 0-1.6 0.7-1.6 1.6v26.5c0 0.9 0.7 1.6 1.6 1.6H16V18.4h-3.9v-4.5H16v-3.3c0-3.9 2.4-5.9 5.8-5.9 1.6 0 3.1 0.1 3.5 0.2v4l-2.4 0c-1.9 0-2.2 0.9-2.2 2.2v2.9h4.5l-0.6 4.5h-3.9v11.5h7.6c0.9 0 1.6-0.7 1.6-1.6V1.7C29.9 0.8 29.2 0.1 28.3 0.1z") /
-        li
-          /! youtube
-          a href="#"
-            svg.glow viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
-              path.st0 d=("M29.7 9c0 0-0.3-2.1-1.2-3 -1.1-1.2-2.4-1.2-3-1.3C21.3 4.5 15 4.5 15 4.5h0c0 0-6.3 0-10.5 0.3C3.9 4.8 2.6 4.8 1.5 6 0.6 6.9 0.3 9 0.3 9S0 11.4 0 13.9v2.3C0 18.6 0.3 21 0.3 21s0.3 2.1 1.2 3c1.1 1.2 2.6 1.2 3.3 1.3C7.2 25.5 15 25.6 15 25.6s6.3 0 10.5-0.3c0.6-0.1 1.9-0.1 3-1.3 0.9-0.9 1.2-3 1.2-3s0.3-2.4 0.3-4.9v-2.3C30 11.4 29.7 9 29.7 9zM11.9 18.9l0-8.4 8.1 4.2L11.9 18.9z") /
-            svg viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
-              path.st0 d=("M29.7 9c0 0-0.3-2.1-1.2-3 -1.1-1.2-2.4-1.2-3-1.3C21.3 4.5 15 4.5 15 4.5h0c0 0-6.3 0-10.5 0.3C3.9 4.8 2.6 4.8 1.5 6 0.6 6.9 0.3 9 0.3 9S0 11.4 0 13.9v2.3C0 18.6 0.3 21 0.3 21s0.3 2.1 1.2 3c1.1 1.2 2.6 1.2 3.3 1.3C7.2 25.5 15 25.6 15 25.6s6.3 0 10.5-0.3c0.6-0.1 1.9-0.1 3-1.3 0.9-0.9 1.2-3 1.2-3s0.3-2.4 0.3-4.9v-2.3C30 11.4 29.7 9 29.7 9zM11.9 18.9l0-8.4 8.1 4.2L11.9 18.9z") /
-        li
-          /! instagram
-          a href="#"
-            svg.glow viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
-              path.st0 d=("M15 2.8c4 0 4.4 0 6 0.1 1.4 0.1 2.2 0.3 2.8 0.5 0.7 0.3 1.2 0.6 1.7 1.1 0.5 0.5 0.8 1 1.1 1.7C26.8 6.8 27 7.6 27.1 9c0.1 1.6 0.1 2 0.1 6s0 4.4-0.1 6c-0.1 1.4-0.3 2.2-0.5 2.8 -0.3 0.7-0.6 1.2-1.1 1.7 -0.5 0.5-1 0.8-1.7 1.1 -0.5 0.2-1.3 0.4-2.8 0.5 -1.6 0.1-2 0.1-6 0.1s-4.4 0-6-0.1c-1.4-0.1-2.2-0.3-2.8-0.5 -0.7-0.3-1.2-0.6-1.7-1.1 -0.5-0.5-0.8-1-1.1-1.7C3.2 23.2 3 22.4 2.9 21c-0.1-1.6-0.1-2-0.1-6s0-4.4 0.1-6C3 7.6 3.2 6.8 3.4 6.2 3.7 5.5 4 5.1 4.5 4.5c0.5-0.5 1-0.8 1.7-1.1C6.8 3.2 7.6 3 9 2.9 10.6 2.8 11 2.8 15 2.8M15 0.2c-4 0-4.5 0-6.1 0.1C7.3 0.3 6.2 0.6 5.3 0.9c-1 0.4-1.8 0.9-2.6 1.7C1.8 3.5 1.3 4.3 0.9 5.3c-0.4 0.9-0.6 2-0.7 3.6C0.2 10.5 0.1 11 0.1 15c0 4 0 4.5 0.1 6.1 0.1 1.6 0.3 2.7 0.7 3.6 0.4 1 0.9 1.8 1.7 2.6 0.8 0.8 1.7 1.3 2.6 1.7 0.9 0.4 2 0.6 3.6 0.7 1.6 0.1 2.1 0.1 6.1 0.1s4.5 0 6.1-0.1c1.6-0.1 2.7-0.3 3.6-0.7 1-0.4 1.8-0.9 2.6-1.7 0.8-0.8 1.3-1.7 1.7-2.6 0.4-0.9 0.6-2 0.7-3.6 0.1-1.6 0.1-2.1 0.1-6.1s0-4.5-0.1-6.1c-0.1-1.6-0.3-2.7-0.7-3.6 -0.4-1-0.9-1.8-1.7-2.6 -0.8-0.8-1.7-1.3-2.6-1.7 -0.9-0.4-2-0.6-3.6-0.7C19.5 0.2 19 0.2 15 0.2L15 0.2z") /
-              path.st0 d=("M15 7.4c-4.2 0-7.6 3.4-7.6 7.6s3.4 7.6 7.6 7.6 7.6-3.4 7.6-7.6S19.2 7.4 15 7.4zM15 20c-2.7 0-5-2.2-5-5s2.2-5 5-5c2.7 0 5 2.2 5 5S17.7 20 15 20z") /
-              circle.st0 cx="22.9" cy="7.1" r="1.8" /
-            svg viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
-              path.st0 d=("M15 2.8c4 0 4.4 0 6 0.1 1.4 0.1 2.2 0.3 2.8 0.5 0.7 0.3 1.2 0.6 1.7 1.1 0.5 0.5 0.8 1 1.1 1.7C26.8 6.8 27 7.6 27.1 9c0.1 1.6 0.1 2 0.1 6s0 4.4-0.1 6c-0.1 1.4-0.3 2.2-0.5 2.8 -0.3 0.7-0.6 1.2-1.1 1.7 -0.5 0.5-1 0.8-1.7 1.1 -0.5 0.2-1.3 0.4-2.8 0.5 -1.6 0.1-2 0.1-6 0.1s-4.4 0-6-0.1c-1.4-0.1-2.2-0.3-2.8-0.5 -0.7-0.3-1.2-0.6-1.7-1.1 -0.5-0.5-0.8-1-1.1-1.7C3.2 23.2 3 22.4 2.9 21c-0.1-1.6-0.1-2-0.1-6s0-4.4 0.1-6C3 7.6 3.2 6.8 3.4 6.2 3.7 5.5 4 5.1 4.5 4.5c0.5-0.5 1-0.8 1.7-1.1C6.8 3.2 7.6 3 9 2.9 10.6 2.8 11 2.8 15 2.8M15 0.2c-4 0-4.5 0-6.1 0.1C7.3 0.3 6.2 0.6 5.3 0.9c-1 0.4-1.8 0.9-2.6 1.7C1.8 3.5 1.3 4.3 0.9 5.3c-0.4 0.9-0.6 2-0.7 3.6C0.2 10.5 0.1 11 0.1 15c0 4 0 4.5 0.1 6.1 0.1 1.6 0.3 2.7 0.7 3.6 0.4 1 0.9 1.8 1.7 2.6 0.8 0.8 1.7 1.3 2.6 1.7 0.9 0.4 2 0.6 3.6 0.7 1.6 0.1 2.1 0.1 6.1 0.1s4.5 0 6.1-0.1c1.6-0.1 2.7-0.3 3.6-0.7 1-0.4 1.8-0.9 2.6-1.7 0.8-0.8 1.3-1.7 1.7-2.6 0.4-0.9 0.6-2 0.7-3.6 0.1-1.6 0.1-2.1 0.1-6.1s0-4.5-0.1-6.1c-0.1-1.6-0.3-2.7-0.7-3.6 -0.4-1-0.9-1.8-1.7-2.6 -0.8-0.8-1.7-1.3-2.6-1.7 -0.9-0.4-2-0.6-3.6-0.7C19.5 0.2 19 0.2 15 0.2L15 0.2z") /
-              path.st0 d=("M15 7.4c-4.2 0-7.6 3.4-7.6 7.6s3.4 7.6 7.6 7.6 7.6-3.4 7.6-7.6S19.2 7.4 15 7.4zM15 20c-2.7 0-5-2.2-5-5s2.2-5 5-5c2.7 0 5 2.2 5 5S17.7 20 15 20z") /
-              circle.st0 cx="22.9" cy="7.1" r="1.8" /
+  .container-fluid
+    .row
+      .col-md-2
+        .logo
+      .col-md-7
+        p Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      .col-md-3.social-media-links
+        ul
+          li
+            /! twitter
+            a href="#"
+              svg.glow viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
+                path.st0 d=("M9.5 27.1c11.2 0 17.4-9.3 17.4-17.4 0-0.3 0-0.5 0-0.8 1.2-0.9 2.2-1.9 3-3.2 -1.1 0.5-2.3 0.8-3.5 1 1.3-0.8 2.2-2 2.7-3.4 -1.2 0.7-2.5 1.2-3.9 1.5 -1.1-1.2-2.7-1.9-4.5-1.9 -3.4 0-6.1 2.7-6.1 6.1 0 0.5 0.1 0.9 0.2 1.4C9.7 10.1 5.2 7.7 2.2 4 1.7 4.9 1.4 6 1.4 7.1c0 2.1 1.1 4 2.7 5.1 -1 0-1.9-0.3-2.8-0.8 0 0 0 0.1 0 0.1 0 3 2.1 5.4 4.9 6 -0.5 0.1-1.1 0.2-1.6 0.2 -0.4 0-0.8 0-1.1-0.1 0.8 2.4 3 4.2 5.7 4.2 -2.1 1.6-4.7 2.6-7.6 2.6 -0.5 0-1 0-1.5-0.1C2.8 26.1 6 27.1 9.5 27.1") /
+              svg viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
+                path.st0 d=("M9.5 27.1c11.2 0 17.4-9.3 17.4-17.4 0-0.3 0-0.5 0-0.8 1.2-0.9 2.2-1.9 3-3.2 -1.1 0.5-2.3 0.8-3.5 1 1.3-0.8 2.2-2 2.7-3.4 -1.2 0.7-2.5 1.2-3.9 1.5 -1.1-1.2-2.7-1.9-4.5-1.9 -3.4 0-6.1 2.7-6.1 6.1 0 0.5 0.1 0.9 0.2 1.4C9.7 10.1 5.2 7.7 2.2 4 1.7 4.9 1.4 6 1.4 7.1c0 2.1 1.1 4 2.7 5.1 -1 0-1.9-0.3-2.8-0.8 0 0 0 0.1 0 0.1 0 3 2.1 5.4 4.9 6 -0.5 0.1-1.1 0.2-1.6 0.2 -0.4 0-0.8 0-1.1-0.1 0.8 2.4 3 4.2 5.7 4.2 -2.1 1.6-4.7 2.6-7.6 2.6 -0.5 0-1 0-1.5-0.1C2.8 26.1 6 27.1 9.5 27.1") /
+          li
+            /! facebook
+            a href="#"
+              svg.glow viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
+                path.st0 d=("M28.3 0.1H1.7c-0.9 0-1.6 0.7-1.6 1.6v26.5c0 0.9 0.7 1.6 1.6 1.6H16V18.4h-3.9v-4.5H16v-3.3c0-3.9 2.4-5.9 5.8-5.9 1.6 0 3.1 0.1 3.5 0.2v4l-2.4 0c-1.9 0-2.2 0.9-2.2 2.2v2.9h4.5l-0.6 4.5h-3.9v11.5h7.6c0.9 0 1.6-0.7 1.6-1.6V1.7C29.9 0.8 29.2 0.1 28.3 0.1z") /
+              svg viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
+                path.st0 d=("M28.3 0.1H1.7c-0.9 0-1.6 0.7-1.6 1.6v26.5c0 0.9 0.7 1.6 1.6 1.6H16V18.4h-3.9v-4.5H16v-3.3c0-3.9 2.4-5.9 5.8-5.9 1.6 0 3.1 0.1 3.5 0.2v4l-2.4 0c-1.9 0-2.2 0.9-2.2 2.2v2.9h4.5l-0.6 4.5h-3.9v11.5h7.6c0.9 0 1.6-0.7 1.6-1.6V1.7C29.9 0.8 29.2 0.1 28.3 0.1z") /
+          li
+            /! youtube
+            a href="#"
+              svg.glow viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
+                path.st0 d=("M29.7 9c0 0-0.3-2.1-1.2-3 -1.1-1.2-2.4-1.2-3-1.3C21.3 4.5 15 4.5 15 4.5h0c0 0-6.3 0-10.5 0.3C3.9 4.8 2.6 4.8 1.5 6 0.6 6.9 0.3 9 0.3 9S0 11.4 0 13.9v2.3C0 18.6 0.3 21 0.3 21s0.3 2.1 1.2 3c1.1 1.2 2.6 1.2 3.3 1.3C7.2 25.5 15 25.6 15 25.6s6.3 0 10.5-0.3c0.6-0.1 1.9-0.1 3-1.3 0.9-0.9 1.2-3 1.2-3s0.3-2.4 0.3-4.9v-2.3C30 11.4 29.7 9 29.7 9zM11.9 18.9l0-8.4 8.1 4.2L11.9 18.9z") /
+              svg viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
+                path.st0 d=("M29.7 9c0 0-0.3-2.1-1.2-3 -1.1-1.2-2.4-1.2-3-1.3C21.3 4.5 15 4.5 15 4.5h0c0 0-6.3 0-10.5 0.3C3.9 4.8 2.6 4.8 1.5 6 0.6 6.9 0.3 9 0.3 9S0 11.4 0 13.9v2.3C0 18.6 0.3 21 0.3 21s0.3 2.1 1.2 3c1.1 1.2 2.6 1.2 3.3 1.3C7.2 25.5 15 25.6 15 25.6s6.3 0 10.5-0.3c0.6-0.1 1.9-0.1 3-1.3 0.9-0.9 1.2-3 1.2-3s0.3-2.4 0.3-4.9v-2.3C30 11.4 29.7 9 29.7 9zM11.9 18.9l0-8.4 8.1 4.2L11.9 18.9z") /
+          li
+            /! instagram
+            a href="#"
+              svg.glow viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
+                path.st0 d=("M15 2.8c4 0 4.4 0 6 0.1 1.4 0.1 2.2 0.3 2.8 0.5 0.7 0.3 1.2 0.6 1.7 1.1 0.5 0.5 0.8 1 1.1 1.7C26.8 6.8 27 7.6 27.1 9c0.1 1.6 0.1 2 0.1 6s0 4.4-0.1 6c-0.1 1.4-0.3 2.2-0.5 2.8 -0.3 0.7-0.6 1.2-1.1 1.7 -0.5 0.5-1 0.8-1.7 1.1 -0.5 0.2-1.3 0.4-2.8 0.5 -1.6 0.1-2 0.1-6 0.1s-4.4 0-6-0.1c-1.4-0.1-2.2-0.3-2.8-0.5 -0.7-0.3-1.2-0.6-1.7-1.1 -0.5-0.5-0.8-1-1.1-1.7C3.2 23.2 3 22.4 2.9 21c-0.1-1.6-0.1-2-0.1-6s0-4.4 0.1-6C3 7.6 3.2 6.8 3.4 6.2 3.7 5.5 4 5.1 4.5 4.5c0.5-0.5 1-0.8 1.7-1.1C6.8 3.2 7.6 3 9 2.9 10.6 2.8 11 2.8 15 2.8M15 0.2c-4 0-4.5 0-6.1 0.1C7.3 0.3 6.2 0.6 5.3 0.9c-1 0.4-1.8 0.9-2.6 1.7C1.8 3.5 1.3 4.3 0.9 5.3c-0.4 0.9-0.6 2-0.7 3.6C0.2 10.5 0.1 11 0.1 15c0 4 0 4.5 0.1 6.1 0.1 1.6 0.3 2.7 0.7 3.6 0.4 1 0.9 1.8 1.7 2.6 0.8 0.8 1.7 1.3 2.6 1.7 0.9 0.4 2 0.6 3.6 0.7 1.6 0.1 2.1 0.1 6.1 0.1s4.5 0 6.1-0.1c1.6-0.1 2.7-0.3 3.6-0.7 1-0.4 1.8-0.9 2.6-1.7 0.8-0.8 1.3-1.7 1.7-2.6 0.4-0.9 0.6-2 0.7-3.6 0.1-1.6 0.1-2.1 0.1-6.1s0-4.5-0.1-6.1c-0.1-1.6-0.3-2.7-0.7-3.6 -0.4-1-0.9-1.8-1.7-2.6 -0.8-0.8-1.7-1.3-2.6-1.7 -0.9-0.4-2-0.6-3.6-0.7C19.5 0.2 19 0.2 15 0.2L15 0.2z") /
+                path.st0 d=("M15 7.4c-4.2 0-7.6 3.4-7.6 7.6s3.4 7.6 7.6 7.6 7.6-3.4 7.6-7.6S19.2 7.4 15 7.4zM15 20c-2.7 0-5-2.2-5-5s2.2-5 5-5c2.7 0 5 2.2 5 5S17.7 20 15 20z") /
+                circle.st0 cx="22.9" cy="7.1" r="1.8" /
+              svg viewbox=("0 0 30 30") xmlns="http://www.w3.org/2000/svg"
+                path.st0 d=("M15 2.8c4 0 4.4 0 6 0.1 1.4 0.1 2.2 0.3 2.8 0.5 0.7 0.3 1.2 0.6 1.7 1.1 0.5 0.5 0.8 1 1.1 1.7C26.8 6.8 27 7.6 27.1 9c0.1 1.6 0.1 2 0.1 6s0 4.4-0.1 6c-0.1 1.4-0.3 2.2-0.5 2.8 -0.3 0.7-0.6 1.2-1.1 1.7 -0.5 0.5-1 0.8-1.7 1.1 -0.5 0.2-1.3 0.4-2.8 0.5 -1.6 0.1-2 0.1-6 0.1s-4.4 0-6-0.1c-1.4-0.1-2.2-0.3-2.8-0.5 -0.7-0.3-1.2-0.6-1.7-1.1 -0.5-0.5-0.8-1-1.1-1.7C3.2 23.2 3 22.4 2.9 21c-0.1-1.6-0.1-2-0.1-6s0-4.4 0.1-6C3 7.6 3.2 6.8 3.4 6.2 3.7 5.5 4 5.1 4.5 4.5c0.5-0.5 1-0.8 1.7-1.1C6.8 3.2 7.6 3 9 2.9 10.6 2.8 11 2.8 15 2.8M15 0.2c-4 0-4.5 0-6.1 0.1C7.3 0.3 6.2 0.6 5.3 0.9c-1 0.4-1.8 0.9-2.6 1.7C1.8 3.5 1.3 4.3 0.9 5.3c-0.4 0.9-0.6 2-0.7 3.6C0.2 10.5 0.1 11 0.1 15c0 4 0 4.5 0.1 6.1 0.1 1.6 0.3 2.7 0.7 3.6 0.4 1 0.9 1.8 1.7 2.6 0.8 0.8 1.7 1.3 2.6 1.7 0.9 0.4 2 0.6 3.6 0.7 1.6 0.1 2.1 0.1 6.1 0.1s4.5 0 6.1-0.1c1.6-0.1 2.7-0.3 3.6-0.7 1-0.4 1.8-0.9 2.6-1.7 0.8-0.8 1.3-1.7 1.7-2.6 0.4-0.9 0.6-2 0.7-3.6 0.1-1.6 0.1-2.1 0.1-6.1s0-4.5-0.1-6.1c-0.1-1.6-0.3-2.7-0.7-3.6 -0.4-1-0.9-1.8-1.7-2.6 -0.8-0.8-1.7-1.3-2.6-1.7 -0.9-0.4-2-0.6-3.6-0.7C19.5 0.2 19 0.2 15 0.2L15 0.2z") /
+                path.st0 d=("M15 7.4c-4.2 0-7.6 3.4-7.6 7.6s3.4 7.6 7.6 7.6 7.6-3.4 7.6-7.6S19.2 7.4 15 7.4zM15 20c-2.7 0-5-2.2-5-5s2.2-5 5-5c2.7 0 5 2.2 5 5S17.7 20 15 20z") /
+                circle.st0 cx="22.9" cy="7.1" r="1.8" /
diff --git a/app/views/layouts/_header.html.slim b/app/views/layouts/_header.html.slim
@@ -1,13 +1,21 @@
-nav
+nav.custom-nav
   = link_to "", root_path, class: "logo"
   ul
     li = link_to "item1", "#"
+    li = link_to "item4", "#"
     - if member_signed_in?
-      li = link_to t(".signout"), destroy_member_session_path, method: :delete
+      li#show-dropdown
+        = link_to("#") do
+          span
+            = image_tag current_member.avatar.url, class: "custom-avatar-drop"
+            = truncate(current_member.name, length: 10)
+        #hidden-dropdown
+          = link_to "Profile", "#"
+          = link_to t(".setting"), edit_member_registration_path
+          = link_to t(".signout"), destroy_member_session_path, method: :delete
     - else
       li = link_to t(".signup"), new_member_registration_path
       li = link_to t(".signin"), new_member_session_path
-    li = link_to "item4", "#"
 header
   .headline
     .inner
diff --git a/app/views/manager/admins/_admin.html.slim b/app/views/manager/admins/_admin.html.slim
@@ -2,10 +2,7 @@ tr.data-user
   td
     = admin.id
   td
-    - if admin.avatar?
-      = image_tag admin.avatar.url, class: "show-avatar-index"
-    - else
-      = image_tag "defaultavatar.jpeg", class: "show-avatar-index"
+    = image_tag admin.avatar.url, class: "show-avatar-index"
     = admin.name
   td
     = admin.email

diff --git a/app/views/manager/admins/_form.html.slim b/app/views/manager/admins/_form.html.slim
@@ -7,7 +7,7 @@
         hr
         .form-group.row[style="padding: 25px"]
           .col-sm-3
-            = avatar_admin admin
+            = image_tag admin.avatar.url, class: "avatar-default", id: "img_prev"
           .prev.col-sm-9
             = f.file_field :avatar, class: "form-control preview"
         .form-group

diff --git a/app/views/manager/admins/update.js.slim b/app/views/manager/admins/update.js.slim
@@ -14,4 +14,4 @@
     toastr.success("#{flash[:success]}");
   - if current_admin.id == @admin.id
     |
-      $('#load-current').attr("src","#{@admin.avatar}");
+      $('#load-current').attr("src","#{@admin.avatar.url}");
diff --git a/app/views/manager/members/_form.html.slim b/app/views/manager/members/_form.html.slim
@@ -7,7 +7,7 @@
         hr
         .form-group.row[style="padding: 25px"]
           .col-sm-3
-            = avatar_member member
+            = image_tag member.avatar.url, class: "avatar-default-member", id: "img_member_prev"
           .prev.col-sm-9
             = f.file_field :avatar, class: "form-control preview_member"
         .form-group

diff --git a/app/views/manager/members/_member.html.slim b/app/views/manager/members/_member.html.slim
@@ -2,10 +2,7 @@ tr.data-user
   td
     = member.id
   td
-    - if member.avatar?
-      = image_tag member.avatar.url, class: "show-avatar-index"
-    - else
-      = image_tag "defaultavatar.jpeg", class: "show-avatar-index"
+    = image_tag member.avatar.url, class: "show-avatar-index"
     = member.name
   td
     = member.email