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

4
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")
.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")
div(tg-profile-timeline-attachment="vm.attachment")

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

@ -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;

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

@ -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

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

@ -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;
}
}

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

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

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

@ -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;