More entry styling.

This commit is contained in:
Paulo Reis 2016-11-10 15:08:41 +00:00
parent 997addf355
commit c5e6ca5200
2 changed files with 45 additions and 12 deletions

View file

@ -69,7 +69,7 @@ div.full-size(
.rp-entry-metadata .rp-entry-metadata
p.rp-entry-metadata-line(style="color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].name }} p.rp-entry-metadata-line(style="color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].name }}
p.rp-entry-metadata-line {{ entry.metadata.ts }} p.rp-entry-metadata-line {{ entry.metadata.ts | date : 'MMM d, y h:mm a' }}
.rp-entry-avatar(style="background-color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].avatar_text }} .rp-entry-avatar(style="background-color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].avatar_text }}
.rp-entry-body(ng-switch="entry.type") .rp-entry-body(ng-switch="entry.type")
span(ng-switch-when="insert") Added span(ng-switch-when="insert") Added
@ -77,8 +77,12 @@ div.full-size(
span(ng-switch-when="delete") Deleted span(ng-switch-when="delete") Deleted
span.rp-content-highlight  {{ entry.content }} span.rp-content-highlight  {{ entry.content }}
.rp-entry-actions .rp-entry-actions
a(href, ng-click="acceptChange(entry_id)") Accept a.rp-entry-button(href, ng-click="acceptChange(entry_id)")
a(href, ng-click="rejectChange(entry_id)") Reject i.fa.fa-check
|  Accept
a.rp-entry-button(href, ng-click="rejectChange(entry_id)")
i.fa.fa-times
|  Reject
div(ng-if="entry.type == 'comment'") div(ng-if="entry.type == 'comment'")
div(ng-repeat="comment in entry.thread", class="comment-thread__comment") div(ng-repeat="comment in entry.thread", class="comment-thread__comment")

View file

@ -89,6 +89,7 @@
} }
.rp-entry-action-icon { .rp-entry-action-icon {
font-size: @rp-icon-large-size; font-size: @rp-icon-large-size;
padding: 0 5px;
} }
.rp-entry-metadata { .rp-entry-metadata {
@ -101,11 +102,19 @@
} }
.rp-entry-avatar { .rp-entry-avatar {
border-radius: 3px;
font-weight: @rp-semibold-weight;
font-size: @rp-icon-large-size;
line-height: 1.2;
text-transform: uppercase;
color: #FFF;
width: 1.3em;
height: 1.3em;
text-align: center;
} }
.rp-entry-body { .rp-entry-body {
padding: 0 5px; padding: 10px 5px 5px;
} }
.rp-content-highlight { .rp-content-highlight {
color: @rp-type-darkgrey; color: @rp-type-darkgrey;
@ -113,8 +122,28 @@
} }
.rp-entry-actions { .rp-entry-actions {
display: flex;
} }
.rp-entry-button {
flex: 1 0 50%;
background-color: @rp-highlight-blue;
color: #FFF;
text-align: center;
border-right: solid 1px #FFF;
padding: 2px 0;
&:hover,
&:focus {
background-color: darken(@rp-highlight-blue, 5%);
text-decoration: none;
color: #FFF;
}
&:last-child {
border-bottom-right-radius: 3px;
border-right-width: 0;
}
}
.rp-icon-delete { .rp-icon-delete {
@ -145,23 +174,23 @@
} }
&-insert { &-insert {
border-color: green; border-color: @rp-green;
&:after { &:after {
border-color: green; border-color: @rp-green;
} }
} }
&-delete { &-delete {
border-color: red; border-color: @rp-red;
&:after { &:after {
border-color: red; border-color: @rp-red;
} }
} }
&-comment { &-comment {
border-color: orange; border-color: @rp-yellow;
&:after { &:after {
border-color: orange; border-color: @rp-yellow;
} }
} }
} }