diff --git a/app/modules/profile/includes/profile-bar.jade b/app/modules/profile/includes/profile-bar.jade index 873fa152..fdae316e 100644 --- a/app/modules/profile/includes/profile-bar.jade +++ b/app/modules/profile/includes/profile-bar.jade @@ -1,8 +1,10 @@ section.profile-bar div.profile-image-wrapper img.profile-img(src="http://i.imgur.com/gPiHzHN.jpg", alt="{{ user.nickname }}") - a.edit-profile(href="", title="Edit profile") - span.icon.icon-edit + div.edit-profile(title="Edit profile") + a.profile-edition(title="Edit Profile", href="") + span.icon.icon-edit + span Edit Profile a.button-green span Follow div.profile-data @@ -10,12 +12,11 @@ section.profile-bar // If user has no defined role in its profile use all its project defined roles followed by an & h2 Backend Developer & Stackeholder div.location - // span.icon.icon-location + include ../../../svg/location.svg span Madrid // Remove Abuse Flag when a user is seeing itself a.flag(href="", title="Report Abuse") - svg(xmlns:svg="http://www.w3.org/2000/svg", xmlns="http://www.w3.org/2000/svg", xml:space="preserve", enable-background="new 0 0 100 100" viewBox="0 0 14.7 20.3", y="0", x="0", version="1.1") - path(d="M2.9 4C2 4.5 1 5.4 0.8 5.6L0.7 5.5 0 5.9 8.3 20.3 9.1 19.9 5.4 13.6c0.2-0.2 1.2-1.1 2.1-1.6 1.8-1.1 2.7-0.8 4.5-1.9 1.8-1 2.6-2.3 2.6-2.3L10.2 0C10.2 0 9.3 1.2 7.5 2.2 5.7 3.3 4.7 2.9 2.9 4Z") + include ../../../svg/flag.svg // These values in profile stats are not defined yet in UX. Please ask div.profile-stats div.stat diff --git a/app/modules/profile/profile-timeline/profile-timeline.scss b/app/modules/profile/profile-timeline/profile-timeline.scss index 8b19e65e..8dc6f266 100644 --- a/app/modules/profile/profile-timeline/profile-timeline.scss +++ b/app/modules/profile/profile-timeline/profile-timeline.scss @@ -6,6 +6,7 @@ position: relative; .activity-info { align-items: center; + color: $gray-light; display: flex; margin-right: 100px; } diff --git a/app/modules/profile/styles/profile-bar.scss b/app/modules/profile/styles/profile-bar.scss index 59aba130..61c5d76d 100644 --- a/app/modules/profile/styles/profile-bar.scss +++ b/app/modules/profile/styles/profile-bar.scss @@ -1,19 +1,57 @@ .profile-bar { .profile-image-wrapper { + height: 200px; + margin-bottom: .25rem; + overflow: hidden; position: relative; + &:hover { + .edit-profile { + opacity: 1; + transition: opacity .2s cubic-bezier(.01, .7, 1, 1); + } + } } .profile-img { max-width: 100%; } .edit-profile { @extend %large; - background: rgba(255, 255, 255, .6); - border-radius: 50%; - color: $grayer; - left: calc(50% - 1rem); - padding: 1rem; + background: rgba($black, .6); + bottom: 0; + left: 0; + opacity: 0; position: absolute; - top: calc(50% - 1rem); + right: 0; + top: 0; + &:hover { + .profile-edition { + opacity: 1; + transition: all .2s cubic-bezier(.01, .7, 1, 1); + transition-delay: .2s; + } + } + + } + .profile-edition { + @extend %small; + background: rgba($white, .1); + color: $white; + height: 30px; + left: calc(50% - 55px); + opacity: 0; + padding: .4rem; + position: absolute; + top: calc(50% - 5px); + width: 110px; + .icon-edit { + color: $white; + margin-right: .3rem; + } + &:hover { + background: rgba($white, .4); + color: $white; + transition: all .2s cubic-bezier(.77, .01, .97, .85); + } } .button-green { display: block; @@ -57,6 +95,14 @@ .location { color: $gray-light; margin-bottom: 1rem; + svg { + position: relative; + top: 2px; + width: .75rem; + } + path { + fill: $gray-light; + } } .profile-stats { background: $whitish; diff --git a/app/modules/profile/styles/profile-sidebar.scss b/app/modules/profile/styles/profile-sidebar.scss index 299821cb..3be11664 100644 --- a/app/modules/profile/styles/profile-sidebar.scss +++ b/app/modules/profile/styles/profile-sidebar.scss @@ -8,6 +8,7 @@ .icon { color: $gray-light; margin-right: .3rem; + vertical-align: text-bottom; } } p { diff --git a/app/svg/location.svg b/app/svg/location.svg new file mode 100644 index 00000000..2e4b6957 --- /dev/null +++ b/app/svg/location.svg @@ -0,0 +1,7 @@ + + + + Location + + +