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

Add Timeline style fixes for images and items

stable
Xavier Julián 2015-05-12 11:50:58 +02:00 committed by Juanfran
parent 7be8c1e658
commit 0b5d09ca0c
4 changed files with 50 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/modules/profile/profile-timeline-attachment/profile-timeline-attachment-image.jade
View File

@ -1,3 +1,4 @@
// timeline-attachment directive // timeline-attachment directive
div.activity-comment-attachment div.activity-image-attachment
blockquote
img(ng-src="{{::attachment.url}}", alt="{{::attachment.filename}}") img(ng-src="{{::attachment.url}}", alt="{{::attachment.filename}}")

8
app/modules/profile/profile-timeline-attachment/profile-timeline-attachment.jade
View File

@ -1,3 +1,5 @@
p TODO: ATTACHMENT div.single-attachment
p blockquote
a(ng-href="attachment.url") {{attachment.filename}} a(ng-href="{{ attachment.url }}", title="Click to download {{ attachment.filename }}")
span.icon.icon-document
span {{attachment.filename}}

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

@ -1,4 +1,4 @@
div.activity-image div.activity-item
span.activity-date {{::vm.activity.created_formated}} span.activity-date {{::vm.activity.created_formated}}
div.activity-info div.activity-info
div.profile-contact-picture div.profile-contact-picture
@ -18,5 +18,5 @@ div.activity-image
span {{::vm.activity.member.user.name}} span {{::vm.activity.member.user.name}}
p {{::vm.activity.member.role.name}} p {{::vm.activity.member.role.name}}
div(ng-repeat="attachment in vm.activity.attachments") div(ng-repeat="attachment in vm.activity.attachments")
div(tg-profile-timeline-attachment="attachment") div(tg-profile-timeline-attachment="attachment")

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

@ -1,9 +1,31 @@
.profile-timeline { .profile-timeline {
border-top: 1px solid $whitish; border-top: 1px solid $whitish;
%profile-activity { .activity-item {
border-bottom: 1px solid $whitish; border-bottom: 1px solid $whitish;
padding: .8rem 1rem; padding: 1rem .5rem;
position: relative; position: relative;
p {
margin-bottom: .5rem;
}
a {
color: $green-taiga;
&:first-child {
@extend %bold;
color: $gray;
}
&:hover {
color: $fresh-taiga;
}
}
blockquote {
margin-bottom: 0;
margin-left: calc(35px + 1rem);
margin-top: .5rem;
}
img {
max-height: 640px;
max-width: 100%;
}
.activity-info { .activity-info {
align-items: center; align-items: center;
color: $gray-light; color: $gray-light;
@ -27,52 +49,6 @@
width: 100%; width: 100%;
} }
} }
p {
margin-bottom: .5rem;
}
a {
color: $green-taiga;
&:first-child {
@extend %bold;
color: $gray;
}
&:hover {
color: $fresh-taiga;
}
}
}
.activity-simple,
.activity-comment,
.activity-image,
.activity-notification,
.activity-member,
.activity-project {
@extend %profile-activity;
}
.activity-comment,
.activity-project,
.activity-image {
blockquote {
margin-bottom: .5rem;
margin-left: calc(35px + 1rem);
margin-top: .5rem;
img {
max-height: 640px;
max-width: 100%;
}
}
}
.activity-notification {
.activity-notification-list {
border-left: 2px solid $whitish;
margin-bottom: .5rem;
margin-left: calc(35px + 1rem);
margin-top: .5rem;
padding: .2rem 1rem;
li {
margin-bottom: .5rem;
}
}
} }
.activity-member-view { .activity-member-view {
display: flex; display: flex;
@ -89,12 +65,21 @@
color: $gray-light; color: $gray-light;
} }
} }
.profile-member-picture { .single-attachment {
img { border: 0;
margin-right: 1rem; padding: 0;
max-width: 64px; span {
min-width: 32px; @extend %text;
width: 100%; @extend %medium;
display: inline-block;
max-width: 95%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
}
.icon {
margin-right: .3rem;
} }
} }
} }