Skip to content

Commit

Permalink
Unify annotation card link styles
Browse files Browse the repository at this point in the history
Use a single CSS class for the annotation timestamp,
reply count and 'More'/'Less' link for truncated annotation bodies.

This gives the 'More' link a consistent style with the other links
and removes some duplicated styling.
  • Loading branch information
robertknight committed Dec 20, 2015
1 parent f60c515 commit e91123d
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 15 deletions.
16 changes: 5 additions & 11 deletions h/static/styles/annotations.scss
Original file line number Diff line number Diff line change
Expand Up @@ -20,22 +20,16 @@ $annotation-card-left-padding: 10px;
font-family: $sans-font-family;
font-weight: 300;
position: relative;

.reply-count {
color: $gray-light;
&:focus { outline: 0; }
}

&:hover .annotation-timestamp, &:hover .reply-count {
color: $link-color;
}
}

.annotation-timestamp {
.annotation-link {
font-size: $body1-font-size;
color: $color-gray;
&:hover { color: $link-color-hover; }
&:focus { outline: 0; }

.annotation:hover & {
color: $link-color;
}
}

.annotation-quote-list,
Expand Down
8 changes: 4 additions & 4 deletions h/templates/client/annotation.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
</span>

<span class="annotation-collapsed-replies">
<a class="reply-count small" href=""
<a class="annotation-link" href=""
ng-click="replyCountClick()"
ng-pluralize count="replyCount"
when="{'0': '', 'one': '1 reply', 'other': '{} replies'}"></a>
Expand Down Expand Up @@ -45,7 +45,7 @@
<span class="u-flex-spacer"></span>

<!-- Timestamp -->
<a class="annotation-timestamp"
<a class="annotation-link"
target="_blank"
title="{{vm.updatedString()}}"
ng-if="!vm.editing() && vm.updated()"
Expand Down Expand Up @@ -108,7 +108,7 @@
</li>
</ul>
<div class="u-stretch"></div>
<a class="u-strong" ng-show="vm.canCollapseBody"
<a class="annotation-link u-strong" ng-show="vm.canCollapseBody"
ng-click="vm.collapseBody = !vm.collapseBody"
ng-title="vm.collapseBody ? 'Show the full annotation text' : 'Show the first few lines only'"
ng-bind="vm.collapseBody ? 'More' : 'Less'"></a>
Expand Down Expand Up @@ -141,7 +141,7 @@
</div>

<div class="annotation-replies" ng-if="replyCount > 0">
<a class="reply-count small" href=""
<a class="annotation-link" href=""
ng-click="replyCountClick()"
ng-pluralize count="replyCount"
when="{'0': '', 'one': '1 reply', 'other': '{} replies'}"></a>
Expand Down

0 comments on commit e91123d

Please sign in to comment.