diff --git a/app/assets/javascripts/initializePage.js.erb b/app/assets/javascripts/initializePage.js.erb index 2ebd6b221..b8708e26c 100644 --- a/app/assets/javascripts/initializePage.js.erb +++ b/app/assets/javascripts/initializePage.js.erb @@ -42,6 +42,7 @@ function callInitalizers(){ initializeEllipsisMenu(); initializeArchivedPostFilter(); initializeCreditsPage(); + initializeUserProfilePage(); initializeDrawerSliders(); diff --git a/app/assets/javascripts/initializers/initializeUserProfilePage.js b/app/assets/javascripts/initializers/initializeUserProfilePage.js new file mode 100644 index 000000000..188fc8636 --- /dev/null +++ b/app/assets/javascripts/initializers/initializeUserProfilePage.js @@ -0,0 +1,11 @@ +'use strict'; + +function initializeUserProfilePage() { + if (document.getElementById('user-profile-dropdown')) { + document.getElementById('user-profile-dropdown').onclick = function() { + document + .getElementById('user-profile-dropdownmenu') + .classList.toggle('showing'); + }; + } +} diff --git a/app/assets/stylesheets/user-profile-header.scss b/app/assets/stylesheets/user-profile-header.scss index 155841705..dc5eb74d2 100644 --- a/app/assets/stylesheets/user-profile-header.scss +++ b/app/assets/stylesheets/user-profile-header.scss @@ -475,5 +475,41 @@ } } } - + .profile-dropdown { + position: absolute; + top: 0px; + right: 6px; + button { + border: 0px; + background: transparent; + padding: 8px; + } + img { + height: 22px; + width: 22px; + } + .profile-dropdownmenu { + display: none; + position: absolute; + top: 30px; + right: 3px; + width: 200px; + border: 1px solid $light-medium-gray; + border-radius: 3px; + background: white; + z-index: 20; + width: 130px; + box-shadow: $shadow; + a { + font-size: 0.75em; + color: $black; + display: block; + padding: 6px 10px; + font-weight: bold; + } + &.showing { + display: block; + } + } + } } diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb index 5f7391022..4b86c0b6b 100644 --- a/app/views/users/show.html.erb +++ b/app/views/users/show.html.erb @@ -145,6 +145,14 @@ <%= render "articles/user_metadata", context: "profile" %> +