taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Timeline layout and styles refactor

stable
Xavier Julián 2015-05-07 08:36:00 +02:00 committed by Juanfran
parent 498d69032f
commit c34bf099eb
6 changed files with 30 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/modules/profile/profile-timeline-item/profile-timeline-item.jade
View File

@ -7,7 +7,7 @@ div.activity-image
p(tg-compile-html="vm.activity.title") 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") p(ng-bind-html="vm.activity.description")
.activity-member-view(ng-if="::vm.activity.member") .activity-member-view(ng-if="::vm.activity.member")

23
app/modules/profile/profile-timeline/profile-timeline.scss
View File

@ -10,16 +10,18 @@
margin-right: 100px; margin-right: 100px;
} }
.activity-date { .activity-date {
@extend %xsmall;
color: $gray-light; color: $gray-light;
font-size: .75rem;
position: absolute; position: absolute;
right: .5rem; right: .5rem;
top: .5rem; top: 1.2rem;
} }
.profile-contact-picture { .profile-contact-picture {
margin-right: .5rem; flex-basis: 38px;
flex-shrink: 0;
margin-right: 1rem;
vertical-align: center; vertical-align: center;
width: 35px; width: 38px;
img { img {
width: 100%; width: 100%;
} }
@ -42,15 +44,10 @@
.activity-comment, .activity-comment,
.activity-project, .activity-project,
.activity-image { .activity-image {
.activity-comment-quote, blockquote {
.activity-comment-attachment {
@extend %small;
border-left: 2px solid $whitish;
color: $gray-light;
margin-bottom: .5rem; margin-bottom: .5rem;
margin-left: calc(35px + .5rem); margin-left: calc(35px + 1rem);
margin-top: .5rem; margin-top: .5rem;
padding: .2rem 1rem;
img { img {
max-height: 640px; max-height: 640px;
max-width: 100%; max-width: 100%;
@ -61,7 +58,7 @@
.activity-notification-list { .activity-notification-list {
border-left: 2px solid $whitish; border-left: 2px solid $whitish;
margin-bottom: .5rem; margin-bottom: .5rem;
margin-left: calc(35px + .5rem); margin-left: calc(35px + 1rem);
margin-top: .5rem; margin-top: .5rem;
padding: .2rem 1rem; padding: .2rem 1rem;
li { li {
@ -72,7 +69,7 @@
.activity-member-view { .activity-member-view {
display: flex; display: flex;
margin-bottom: .5rem; margin-bottom: .5rem;
margin-left: calc(35px + .5rem); margin-left: calc(35px + 1rem);
margin-top: .5rem; margin-top: .5rem;
.activity-member-info { .activity-member-info {
flex: 1; flex: 1;

5
app/modules/profile/profile.jade
View File

@ -2,10 +2,7 @@ include ../../partials/includes/components/beta
div.profile.centered div.profile.centered
include includes/profile-bar include includes/profile-bar
div.main div.main
div.hero div.timeline-wrapper(tg-profile-tabs)
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-tab="activity", tab-title="Activity Tab", tab-icon="icon-timeline", tab-active)
div(tg-profile-timeline) div(tg-profile-timeline)

18
app/modules/profile/profile.scss
View File

@ -8,24 +8,12 @@
} }
.main { .main {
display: flex; display: flex;
flex: 1;
flex-direction: column;
padding: 0; padding: 0;
} }
.hero { .timeline-wrapper {
background: lighten($whitish, 10%); background: lighten($whitish, 10%);
margin-bottom: .3rem; flex-basis: 768px;
min-height: 200px;
}
.content-wrapper {
display: flex;
min-height: 100vh;
}
.content {
background: lighten($whitish, 10%);
flex: 1;
margin-right: 1rem; margin-right: 1rem;
max-width: 786px;
> div { > div {
opacity: 1; opacity: 1;
padding-top: 0; padding-top: 0;
@ -38,6 +26,8 @@
} }
} }
.profile-sidebar { .profile-sidebar {
flex-basis: 150px;
flex-shrink: 0;
width: 150px; width: 150px;
} }
} }

2
app/modules/profile/styles/profile-content-tabs.scss
View File

@ -4,7 +4,7 @@
.tab { .tab {
color: $gray-light; color: $gray-light;
display: inline-block; display: inline-block;
padding: .4rem 1rem; padding: 1rem 1.25rem;
&:hover, &:hover,
&.active { &.active {
color: $grayer; color: $grayer;

7
app/styles/core/elements.scss
View File

@ -4,13 +4,12 @@
blockquote, blockquote,
blockquote p { blockquote p {
color: $gray; color: $gray;
font-style: italic; line-height: 1.25rem;
line-height: 24px;
} }
blockquote { blockquote {
border-left: 1px solid $gray-light; border-left: 5px solid $whitish;
margin: 0 0 20px; margin: 0 0 20px;
padding: 9px 20px 0 19px; padding: .5rem 1.25rem;
cite { cite {
@extend %small; @extend %small;
color: $gray; color: $gray;