diff --git a/app/partials/home/home-logged-in.jade b/app/partials/home/home-logged-in.jade index 01d37d8f..81f8e879 100644 --- a/app/partials/home/home-logged-in.jade +++ b/app/partials/home/home-logged-in.jade @@ -5,5 +5,6 @@ div.profile.centered div.hero include ../includes/modules/profile/profile-content-tabs div.content-wrapper - section.content + div.content + include ../includes/modules/profile/profile-timeline include ../includes/modules/profile/profile-sidebar diff --git a/app/partials/includes/modules/profile/profile-sidebar.jade b/app/partials/includes/modules/profile/profile-sidebar.jade index a9edb1c0..dc351a25 100644 --- a/app/partials/includes/modules/profile/profile-sidebar.jade +++ b/app/partials/includes/modules/profile/profile-sidebar.jade @@ -1,4 +1,4 @@ -section.profile-sidebar +aside.profile-sidebar h4 Your profile p Lots of people could see what do you do and what are you working on. Add tags so you will give an enhanced version of your information. a.trans-button diff --git a/app/partials/includes/modules/profile/profile-timeline.jade b/app/partials/includes/modules/profile/profile-timeline.jade new file mode 100644 index 00000000..0fedd998 --- /dev/null +++ b/app/partials/includes/modules/profile/profile-timeline.jade @@ -0,0 +1,89 @@ +section.profile-timeline + - for (var x = 0; x < 3; x++) + // Simple message for favorites, updates, etc. + div.activity-simple + div.activity-info + picture + a(href="", title="{{ user.nickname }}") + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/gerrenlamson/128.jpg", alt="{{ user.nickname }}") + p + a(href="", title="See {{ user.nickname }} profile") Jesús Espino + span has updated the status of the US + a(href="", title="See #{{ us.id }}{{ us.title }}") #23 Web comercial/Ayuda from "UX" to "UX Done" + + // Added comment in us, task or issue. + div.activity-comment + div.activity-info + picture + a(href="", title="{{ user.nickname }}") + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/tonystubblebine/128.jpg", alt="{{ user.nickname }}") + p + a(href="", title="See {{ user.nickname }} profile") JuanFrancisco Alcántara + span has commented in the task + a(href="", title="See #{{ us.id }}{{ us.title }}") #15 Revisar el contraste de los grises + div.activity-comment-quote + p "He subido a GitLab unos wireframes. Echadle un vistazo por favor, a ver si falta algo o tenéis al" + + // Added attachment type image in us, task or issue. + div.activity-image + div.activity-info + picture + a(href="", title="{{ user.nickname }}") + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/jina/128.jpg", alt="{{ user.nickname }}") + p + a(href="", title="See {{ user.nickname }} profile") Alejandro Alonso + span has uploaded an image in the US + a(href="", title="See #{{ us.id }}{{ us.title }}") US #23 Web comercial/Ayuda + div.activity-comment-attachment + p "Eh! Look at this amazing Taiga picture!" + img(src="https://ununsplash.imgix.net/photo-1423753623104-718aaace6772?q=75&fm=jpg&w=1080&fit=max&s=f655534aa0fe8bae35c687e80a2ed399", alt="{{ attachment.name }}") + + // Multiple update message, etc. + div.activity-notification + div.activity-info + picture + a(href="", title="{{ user.nickname }}") + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/idiot/128.jpg", alt="{{ user.nickname }}") + p + a(href="", title="See {{ user.nickname }} profile") Jesús Espino + span closed + ul.activity-notification-list + li + a(href="", title="See #{{ us.id }}{{ us.title }}") US #23 Web comercial/Ayuda + li + a(href="", title="See #{{ us.id }}{{ us.title }}") #2156 Search Page UX is hardly understandable + li + a(href="", title="See #{{ us.id }}{{ us.title }}") #456 Search for users + li + a(href="", title="See #{{ us.id }}{{ us.title }}") #2140 Las notificaciones de cambios están fallando + + // Added attachment type image in us, task or issue. + div.activity-member + div.activity-info + picture + a(href="", title="{{ organization.nickname }}") + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/tofslie/128.jpg", alt="{{ organization.nickname }}") + p + a(href="", title="See {{ organization.nickname }} profile") Mozilla + span has a new member + div.activity-member-view + picture + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/BillSKenney/128.jpg", alt="{{ organization.nickname }}") + div.activity-member-info + a(href="", title="See {{ user.nickname }} profile") + span Andrés González + p Back-end developer & Stake + + // Added comment in us, task or issue. + div.activity-project + div.activity-info + picture + a(href="", title="{{ organization.nickname }}") + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/ekvium/128.jpg", alt="{{ organization.nickname }}") + p + a(href="", title="See {{ user.nickname }} profile") Redhat + span has a new project + a(href="", title="See {{ project.name }}") Nanatubos + div.activity-comment-quote + p We plan to build a hundred of so called "telehubs" so people from all over the world can immediately relocate their physical self at any other telehub in microseconds. + diff --git a/app/styles/layout/profile.scss b/app/styles/layout/profile.scss index 76a860fc..90d3d1b7 100644 --- a/app/styles/layout/profile.scss +++ b/app/styles/layout/profile.scss @@ -25,6 +25,7 @@ background: lighten($whitish, 10%); flex: 1; margin-right: 1rem; + max-width: 786px; } .profile-sidebar { width: 150px; diff --git a/app/styles/modules/profile/profile-timeline.scss b/app/styles/modules/profile/profile-timeline.scss new file mode 100644 index 00000000..124979dd --- /dev/null +++ b/app/styles/modules/profile/profile-timeline.scss @@ -0,0 +1,87 @@ + +.profile-timeline { + border-top: 1px solid $whitish; + %profile-activity { + border-bottom: 1px solid $whitish; + padding: .8rem 1rem; + .activity-info { + align-items: center; + display: flex; + } + picture { + margin-right: .5rem; + vertical-align: center; + width: 35px; + img { + width: 100%; + } + } + p { + margin: 0; + a { + color: $green-taiga; + } + } + } + .activity-simple, + .activity-comment, + .activity-image, + .activity-notification, + .activity-member, + .activity-project { + @extend %profile-activity; + } + .activity-comment, + .activity-project, + .activity-image { + .activity-comment-quote, + .activity-comment-attachment { + @extend %small; + border-left: 2px solid $whitish; + color: $gray-light; + margin-bottom: .5rem; + margin-left: calc(35px + .5rem); + margin-top: .5rem; + padding: .2rem 1rem; + img { + max-height: 640px; + max-width: 100%; + } + } + } + .activity-notification { + .activity-notification-list { + border-left: 2px solid $whitish; + margin-bottom: .5rem; + margin-left: calc(30px + .5rem); + margin-top: .5rem; + padding: .2rem 1rem; + li { + margin-bottom: .5rem; + } + } + } + .activity-member { + .activity-member-view { + display: flex; + margin-bottom: .5rem; + margin-left: calc(30px + .5rem); + margin-top: .5rem; + picture { + margin-right: 1rem; + max-width: 64px; + min-width: 32px; + width: 100%; + } + .activity-member-info { + flex: 1; + } + a { + @extend %bold; + } + p { + color: $gray-light; + } + } + } +}