improve notification list and show styles

src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss

@@ -240,6 +240,10 @@ table.table-bordered {
    color: $gray-800;
    font-size: 90%;
 
+    p {
+        margin-bottom: 0.75rem !important;
+    }
+
    // test a bottom right decoration (to be confirmed)
    &.test {
       position: relative;

src/Bundle/ChillMainBundle/Resources/public/chill/scss/notification.scss

@@ -36,25 +36,31 @@ div.notification {
 div.notification-list,
 div.notification-show {
     div.item-bloc {
-        div.item-row.header {
+        div.item-row {
-
+            &.notification-header {
-            div.item-col {
+                div.item-col {
-                &:first-child {
+                    &:first-child {
-                    flex-grow: 1;
+                        flex-grow: 1;
 
+                    }
+                    &:last-child {
+                        flex-grow: 0;
+                    }
                 }
-                &:last-child {
+                ul.small_in_title {
-                    flex-grow: 0;
+                    list-style-type: circle;
+                    li {
+                        span.item-key {
+                            display: inline-block;
+                            width: 3em;
+                        }
+                    }
                 }
             }
-
+            div.notification-content {
-            ul.small_in_title {
+                margin: 1.5rem;
-                list-style-type: circle;
+                p {
-                li {
+                    margin-bottom: 0.75rem;
-                    span.item-key {
-                        display: inline-block;
-                        width: 3em;
-                    }
                 }
             }
         }

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue

@@ -34,7 +34,7 @@
             :href="showUrl"
             :title="$t('action.show')"
             >
-            <i class="fa fa-sm fa-eye"></i>
+            <i class="fa fa-sm fa-comment-o"></i>
         </a>
 
     </div>

src/Bundle/ChillMainBundle/Resources/views/Notification/_list_item.html.twig

@@ -6,7 +6,7 @@
             </a>
         </h2>
     </div>
-    <div class="item-row mt-2 header">
+    <div class="item-row mt-2 notification-header">
 
         <div class="item-col">
             <ul class="small_in_title">
@@ -53,11 +53,13 @@
             {% include data.template with data.template_data %}
         </div>
     </div>
-    <div class="item-row row">
+    <div class="item-row">
-        <div>
+        <div class="notification-content">
-            <blockquote class="chill-user-quote">
+            {% if full_content is defined and full_content == 'true' %}
+                {{ notification.message|chill_markdown_to_html }}
+            {% else %}
                 {{ notification.message|u.truncate(250, '…', false)|chill_markdown_to_html }}
-            </blockquote>
+            {% endif %}
         </div>
     </div>
     {% if action_button is not defined or action_button != 'false' %}
@@ -79,7 +81,7 @@
                 {% if is_granted('CHILL_MAIN_NOTIFICATION_SEE', notification) %}
                     <li>
                         <a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}"
-                           class="btn btn-show" title="{{ 'Show'|trans }}"></a>
+                           class="btn btn-show change-icon" title="{{ 'notification.see_comments_thread'|trans }}"><i class="fa fa-comment"></i></a>
                     </li>
                 {% endif %}
             </ul>

src/Bundle/ChillMainBundle/Resources/views/Notification/show.html.twig

@@ -40,7 +40,8 @@
                  'template': handler.getTemplate(notification),
                  'template_data': handler.getTemplateData(notification)
             },
-            'action_button': 'false'
+            'action_button': 'false',
+            'full_content': 'true'
         } %}
     </div>
 
@@ -87,7 +88,7 @@
         {% endif %}
 
         <div class="new-comment my-5">
-            <h2 class="chill-blue">{{ 'Write a new comment'|trans }}</h2>
+            <h2 class="chill-blue mb-4">{{ 'Write a new comment'|trans }}</h2>
 
             {{ form_start(appendCommentForm) }}
             {{ form_errors(appendCommentForm) }}

src/Bundle/ChillMainBundle/translations/messages.fr.yml

@@ -380,4 +380,5 @@ notification:
     you were notified by %sender%:  Vous avez été notifié par %sender%
     you were notified by system: Vous avez été notifié automatiquement
     subject: Objet
+    see_comments_thread: Voir le fil de commentaires associé