Change annotations list design.
authorAlexandre Segura <mex.zktk@gmail.com>
Wed, 22 Feb 2017 18:31:01 +0100
changeset 349 6425443f0b12
parent 348 ba69fa43cbba
child 350 7c0b98b10e00
Change annotations list design.
src/iconolab/templates/iconolab/detail_image.html
src_js/iconolab-bundle/src/iconolab.scss
--- 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">&times;</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">&times;</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 {