diff --git a/app/modules/profile/profile-bar/profile-bar.jade b/app/modules/profile/profile-bar/profile-bar.jade index 2c9c38a3..55ba3153 100644 --- a/app/modules/profile/profile-bar/profile-bar.jade +++ b/app/modules/profile/profile-bar/profile-bar.jade @@ -1,10 +1,7 @@ section.profile-bar div.profile-image-wrapper img.profile-img(ng-src="{{::vm.user.big_photo}}", alt="{{::vm.user.full_name}}") - div.edit-profile(title="{{ 'USER.PROFILE.EDIT' | translate }}") - a.profile-edition(title="{{ 'USER.PROFILE.EDIT' | translate }}", tg-nav="user-settings-user-profile") - span.icon.icon-edit - span(translate="USER.PROFILE.EDIT") + a.profile-edition(title="{{ 'USER.PROFILE.EDIT' | translate }}", tg-nav="user-settings-user-profile", translate="USER.PROFILE.EDIT") // a.button-green // span(translate="USER.PROFILE.FOLLOW") div.profile-data diff --git a/app/modules/profile/profile-timeline-attachment/profile-timeline-attachment-image.jade b/app/modules/profile/profile-timeline-attachment/profile-timeline-attachment-image.jade index 14f30f14..6a5c2c16 100644 --- a/app/modules/profile/profile-timeline-attachment/profile-timeline-attachment-image.jade +++ b/app/modules/profile/profile-timeline-attachment/profile-timeline-attachment-image.jade @@ -1,5 +1,5 @@ // timeline-attachment directive div.activity-image-attachment blockquote - a(href="{{::attachment.url}}", title="See {{::attachment.filename}}") + a(href="{{::attachment.url}}", title="See {{::attachment.filename}}", target="_blank") img(ng-src="{{::attachment.url}}", alt="{{::attachment.filename}}") diff --git a/app/modules/profile/profile-timeline-attachment/profile-timeline-attachment.jade b/app/modules/profile/profile-timeline-attachment/profile-timeline-attachment.jade index f8639519..cdac755e 100644 --- a/app/modules/profile/profile-timeline-attachment/profile-timeline-attachment.jade +++ b/app/modules/profile/profile-timeline-attachment/profile-timeline-attachment.jade @@ -1,5 +1,5 @@ div.single-attachment blockquote - a(ng-href="{{ attachment.url }}", title="Click to download {{ attachment.filename }}") + a(ng-href="{{ attachment.url }}", title="Click to download {{ attachment.filename }}", target="_blank") span.icon.icon-document span {{attachment.filename}} diff --git a/app/modules/profile/styles/profile-bar.scss b/app/modules/profile/styles/profile-bar.scss index e9a8d490..713dae40 100644 --- a/app/modules/profile/styles/profile-bar.scss +++ b/app/modules/profile/styles/profile-bar.scss @@ -9,53 +9,36 @@ filter: brightness(40%) saturate(150%) hue-rotate(60deg); transition: all .2s cubic-bezier(.01, .7, 1, 1); } - .edit-profile { + .profile-edition { opacity: 1; - transition: opacity .2s cubic-bezier(.01, .7, 1, 1); + transform: translateY(0); + transition: all .2s cubic-bezier(.01, .7, 1, 1); + transition-delay: .3s; } } } .profile-img { max-width: 100%; } - .edit-profile { + .profile-edition { @extend %large; + @extend %light; + background: rgba($black, .4); bottom: 0; + color: $white; left: 0; opacity: 0; + overflow: hidden; + padding: 1rem; position: absolute; - right: 0; - top: 0; + transform: translateY(100%); + width: 100%; &:hover { - .profile-edition { - opacity: 1; - transition: all .2s cubic-bezier(.01, .7, 1, 1); - transition-delay: .2s; - } + background: rgba($black, .8); + transition: all .3s cubic-bezier(.01, .7, 1, 1); } } - .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; margin-bottom: 1rem;