Change annotations list design.
--- a/src/iconolab/templates/iconolab/detail_image.html Wed Feb 22 18:29:43 2017 +0100
+++ b/src/iconolab/templates/iconolab/detail_image.html Wed Feb 22 18:31:01 2017 +0100
@@ -8,24 +8,31 @@
<div class="annotation-navigator">
<div class="annotation-navigator-list">
- <div id="annotations-{{image.image_guid}}" class="image-annotations-list">
- {% if image.annotations %}
+ <div class="panel panel-default">
+ {% if image.annotations.exists %}
<div class="list-group">
{% for annotation in image.latest_annotations %}
<a href="#{{ annotation.annotation_guid }}" class="list-group-item"
data-annotation-id="{{ annotation.annotation_guid }}"
data-revision-id="{{ annotation.current_revision.revision_guid }}">
- <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
- <h5 class="list-group-item-heading">{{ annotation.current_revision.title }}</h5>
- <p class="list-group-item-text">{{ annotation.current_revision.description }}</p>
+ <h3 class="small list-group-item-heading">
+ {{ annotation.current_revision.title }}
+ <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
+ </h3>
{% for tagging_info in annotation.current_revision.tagginginfo_set.all %}
- <span class="label label-warning">{{ tagging_info.tag.label }}</span>
+ <p class="list-group-item-text">{{ tagging_info.tag.label }}</p>
{% endfor %}
+ <div class="list-group-item-footer">
+ <i class="fa fa-comment"></i>
+ {{ annotation.stats.comments_count }} commentaire{% if annotation.stats.comments_count > 1 %}s{% endif %}
+ </div>
</a>
{% endfor %}
</div>
{% else %}
- Pas d'annotation pour cette image
+ <div class="panel-body">
+ <div class="alert alert-warning">Pas d'annotation pour cette image</div>
+ </div>
{% endif %}
</div>
</div>
--- a/src_js/iconolab-bundle/src/iconolab.scss Wed Feb 22 18:29:43 2017 +0100
+++ b/src_js/iconolab-bundle/src/iconolab.scss Wed Feb 22 18:31:01 2017 +0100
@@ -308,16 +308,29 @@
margin-bottom: 30px;
.annotation-navigator-list {
width: 20%;
- max-height: 600px;
- overflow: scroll;
+ .panel {
+ max-height: 600px;
+ height: 600px;
+ overflow: scroll;
+ }
.list-group-item {
+ .list-group-item-heading {
+ font-weight: bold;
+ margin-bottom: 10px;
+ }
.close {
display: none;
+ line-height: floor(($font-size-small * $headings-line-height));
}
&.active .close {
display: block;
color: #fff;
}
+ .list-group-item-footer {
+ margin-top: 10px;
+ font-size: $font-size-small;
+ text-align: right;
+ }
}
}
.annotation-navigator-canvas {