diff --git a/app/modules/profile/profile-timeline-item/profile-timeline-item.jade b/app/modules/profile/profile-timeline-item/profile-timeline-item.jade index dbf10787..68a22c80 100644 --- a/app/modules/profile/profile-timeline-item/profile-timeline-item.jade +++ b/app/modules/profile/profile-timeline-item/profile-timeline-item.jade @@ -7,7 +7,7 @@ div.activity-image p(tg-compile-html="vm.activity.title") - .activity-comment-quote(ng-if="::vm.activity.description") + blockquote.activity-comment-quote(ng-if="::vm.activity.description") p(ng-bind-html="vm.activity.description") .activity-member-view(ng-if="::vm.activity.member") @@ -19,4 +19,4 @@ div.activity-image p {{::vm.activity.member.role.name}} div(ng-repeat="attachment in vm.activity.attachments") - div(tg-profile-timeline-attachment="vm.attachment") \ No newline at end of file + div(tg-profile-timeline-attachment="vm.attachment") diff --git a/app/modules/profile/profile-timeline/profile-timeline.scss b/app/modules/profile/profile-timeline/profile-timeline.scss index fcb51bd6..8b19e65e 100644 --- a/app/modules/profile/profile-timeline/profile-timeline.scss +++ b/app/modules/profile/profile-timeline/profile-timeline.scss @@ -10,16 +10,18 @@ margin-right: 100px; } .activity-date { - @extend %xsmall; color: $gray-light; + font-size: .75rem; position: absolute; right: .5rem; - top: .5rem; + top: 1.2rem; } .profile-contact-picture { - margin-right: .5rem; + flex-basis: 38px; + flex-shrink: 0; + margin-right: 1rem; vertical-align: center; - width: 35px; + width: 38px; img { width: 100%; } @@ -42,15 +44,10 @@ .activity-comment, .activity-project, .activity-image { - .activity-comment-quote, - .activity-comment-attachment { - @extend %small; - border-left: 2px solid $whitish; - color: $gray-light; + blockquote { margin-bottom: .5rem; - margin-left: calc(35px + .5rem); + margin-left: calc(35px + 1rem); margin-top: .5rem; - padding: .2rem 1rem; img { max-height: 640px; max-width: 100%; @@ -61,7 +58,7 @@ .activity-notification-list { border-left: 2px solid $whitish; margin-bottom: .5rem; - margin-left: calc(35px + .5rem); + margin-left: calc(35px + 1rem); margin-top: .5rem; padding: .2rem 1rem; li { @@ -72,7 +69,7 @@ .activity-member-view { display: flex; margin-bottom: .5rem; - margin-left: calc(35px + .5rem); + margin-left: calc(35px + 1rem); margin-top: .5rem; .activity-member-info { flex: 1; diff --git a/app/modules/profile/profile.jade b/app/modules/profile/profile.jade index 9264c001..8393deba 100644 --- a/app/modules/profile/profile.jade +++ b/app/modules/profile/profile.jade @@ -2,20 +2,17 @@ include ../../partials/includes/components/beta div.profile.centered include includes/profile-bar div.main - div.hero - div(tg-profile-tabs) - div.content-wrapper - div.content - div(tg-profile-tab="activity", tab-title="Activity Tab", tab-icon="icon-timeline", tab-active) - div(tg-profile-timeline) + div.timeline-wrapper(tg-profile-tabs) + div(tg-profile-tab="activity", tab-title="Activity Tab", tab-icon="icon-timeline", tab-active) + div(tg-profile-timeline) - div(tg-profile-tab="projects", tab-title="Projects Tab", tab-icon="icon-project") - div(tg-profile-projects) + div(tg-profile-tab="projects", tab-title="Projects Tab", tab-icon="icon-project") + div(tg-profile-projects) - div(tg-profile-tab="contacts", tab-title="Contacts Tab", tab-icon="icon-team") - include includes/profile-contacts + div(tg-profile-tab="contacts", tab-title="Contacts Tab", tab-icon="icon-team") + include includes/profile-contacts - div(tg-profile-tab="favorities", tab-title="Favorites Tab", tab-icon="icon-star-fill") - include includes/profile-favorites + div(tg-profile-tab="favorities", tab-title="Favorites Tab", tab-icon="icon-star-fill") + include includes/profile-favorites - include includes/profile-sidebar + include includes/profile-sidebar diff --git a/app/modules/profile/profile.scss b/app/modules/profile/profile.scss index cb9a6610..9ff15544 100644 --- a/app/modules/profile/profile.scss +++ b/app/modules/profile/profile.scss @@ -8,24 +8,12 @@ } .main { display: flex; - flex: 1; - flex-direction: column; padding: 0; } - .hero { + .timeline-wrapper { background: lighten($whitish, 10%); - margin-bottom: .3rem; - min-height: 200px; - } - .content-wrapper { - display: flex; - min-height: 100vh; - } - .content { - background: lighten($whitish, 10%); - flex: 1; + flex-basis: 768px; margin-right: 1rem; - max-width: 786px; > div { opacity: 1; padding-top: 0; @@ -38,6 +26,8 @@ } } .profile-sidebar { + flex-basis: 150px; + flex-shrink: 0; width: 150px; } } diff --git a/app/modules/profile/styles/profile-content-tabs.scss b/app/modules/profile/styles/profile-content-tabs.scss index 67cc0e79..648d9d7f 100644 --- a/app/modules/profile/styles/profile-content-tabs.scss +++ b/app/modules/profile/styles/profile-content-tabs.scss @@ -4,7 +4,7 @@ .tab { color: $gray-light; display: inline-block; - padding: .4rem 1rem; + padding: 1rem 1.25rem; &:hover, &.active { color: $grayer; diff --git a/app/styles/core/elements.scss b/app/styles/core/elements.scss index 965dedeb..6644404e 100644 --- a/app/styles/core/elements.scss +++ b/app/styles/core/elements.scss @@ -4,13 +4,12 @@ blockquote, blockquote p { color: $gray; - font-style: italic; - line-height: 24px; + line-height: 1.25rem; } blockquote { - border-left: 1px solid $gray-light; + border-left: 5px solid $whitish; margin: 0 0 20px; - padding: 9px 20px 0 19px; + padding: .5rem 1.25rem; cite { @extend %small; color: $gray;