AccourseWork list : design title

src/Bundle/ChillPersonBundle/Resources/public/chill/scss/accompanying_period_work.scss

@@ -1,28 +1,41 @@
 
-.chill-entity__social-action {
+
-  .badge-primary {
+
-    background-color: var(--chill-green);
-  }
-}
 
 div.accompanying_course_work-list {
 
-  .item {
+    // ?? howto calculate border:groove generated from $orange ??
-    margin-bottom: 1.5rem;
+    // see mixin badge_social_action
-    padding: 1rem;
+    $groove-border-color-connect: #965028;
-    border: 1px solid gray;
 
-    .title_label {
+    h2.title {
-      display: block;
+        display: flex;
-      margin: 0;
+        flex-direction: row;
+        width: 100%;
+        color: $dark;
+        height: 40px;
 
-      font-variant-caps: small-caps;
+        span.title_label {
-
+            border-radius: 0.35rem 0 0 0.35rem;
-      + * {
+            background-color: $groove-border-color-connect;
-        margin-top: 0;
+            color: $white;
+            font-size: 80%;
+            padding: 0.5em;
+            padding-right: 0;
+        }
+        span.action_title {
+            flex-grow: 1;
+            margin: 0 0 0 auto;
+            border-radius: 0 0.35rem 0.35rem 0;
+            background-color: $light;
+            padding: 0.2em 0.7em;
+            @include badge_social_action;
         }
     }
 
+  /*
+
+
     .objective_results {
       display: grid;
       grid-template-areas:
@@ -61,13 +74,14 @@ div.accompanying_course_work-list {
     }
   }
 
+  */
+
   .updatedBy {
     margin-top: 1rem;
     text-align: right;
-    font-size: 0.8rem;
+    font-size: 0.9rem;
     font-style: italic;
   }
-}
 
   ul.timeline {
     display: flex;
@@ -109,3 +123,5 @@ ul.timeline {
       }
     }
   }
+}
+

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/list_by_accompanying_period.html.twig

@@ -2,22 +2,27 @@
 
 {% block title 'accompanying_course_work.List accompanying course work'|trans %}
 
-
 {% block content %}
 <div class="accompanying_course_work-list">
 
   <h1>{{ block('title') }}</h1>
 
+  {% if works|length == 0 %}
+    <p class="chill-no-data-statement">{{ 'accompanying_course_work.Any work'|trans }}</p>
+  {% endif %}
 
+  <div class="flex-table">
     {% for w in works %}
-      <div class="item">
+      <div class="item-bloc">
-        <div class="title">
+
-          <p class="title_label">{{ 'accompanying_course_work.action'|trans }}</p >
+        <div class="item-row">
-          <h2 class="action_title">
+          <h2 class="title">
-            {{ w.socialAction|chill_entity_render_box }}
+            <span class="title_label">{{ 'accompanying_course_work.action'|trans }}</span>
+            <span class="action_title">{{ w.socialAction|chill_entity_render_string }}</span>
           </h2>
         </div>
 
+        <div class="item-row separator">
           <div class="timeline">
             <ul class="timeline">
               <li class="completed">
@@ -46,7 +51,7 @@
               </li>
             </ul>
           </div>
-
+            {#
           {% if w.results|length > 0 %}
             <div class="objective_results objective_results__without-objectives">
               <div class="obj without_objective">
@@ -63,7 +68,6 @@
               </div>
             </div>
           {% endif %}
-
           {% if w.goals|length > 0 %}
             {% for g in w.goals %}
               <div class="objective_results objective_results--with-objectives">
@@ -87,26 +91,26 @@
               </div>
             {% endfor %}
           {% endif %}
-
+            #}
-        <div class="updatedBy">
-          {{ 'Last updated by'|trans}}: {{ w.updatedBy|chill_entity_render_box }}, {{ w.updatedAt|format_datetime('long', 'short') }}
         </div>
 
-
+        <div class="item-row separator">
-        <div class="actions">
+          <div class="updatedBy">
+            {{ 'Last updated by'|trans}} <b>{{ w.updatedBy|chill_entity_render_box }}</b>, {{ 'le ' ~ w.updatedAt|format_datetime('long', 'short') }}
+          </div>
           <ul class="record_actions">
             <li>
-              <a
+              <a class="btn btn-edit"
-                class="btn btn-edit"
+                href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_edit', { 'id': w.id }) }}">
-                href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_edit', { 'id': w.id }) }}">{{ 'Edit'|trans }}</a>
+                  {{ 'Edit'|trans }}
+              </a>
             </li>
           </ul>
         </div>
-      </div>
-    {% else %}
-      <p class="chill-no-data-statement">{{ 'accompanying_course_work.Any work'|trans }}</p>
-    {% endfor %}
 
+      </div>
+    {% endfor %}
+  </div>
 
   <ul class="record_actions sticky-form-buttons">
     <li>
@@ -120,3 +124,4 @@
 </div>
 {% endblock %}
 
+

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig

@@ -113,18 +113,18 @@
                         {# TODO if enable_accompanying_course_with_multiple_persons is true ... #}
                         <li>
                             <a href="{{ path('chill_person_accompanying_course_index', { 'accompanying_period_id': accompanying_period.id }) }}"
-                               class="btn btn-sm btn-show" title="{{ 'See accompanying period'|trans }}">{# {{ 'See this period'|trans }} #}</a>
+                               class="btn btn-show" title="{{ 'See accompanying period'|trans }}">{# {{ 'See this period'|trans }} #}</a>
                         </li>
 
                         {% if person is defined %}
                             <li>
                                 <a  href="{{ path('chill_person_accompanying_period_update', {'person_id' : person.id, 'period_id' : accompanying_period.id } ) }}"
-                                    class="btn btn-sm btn-update" title="{{ 'Edit accompanying period'|trans }}"></a>
+                                    class="btn btn-update" title="{{ 'Edit accompanying period'|trans }}"></a>
                             </li>
                             {% if accompanying_period.isOpen == true %}
                                 <li>
                                     <a href="{{ path('chill_person_accompanying_period_close', {'person_id' : person.id}) }}"
-                                       class="btn btn-sm btn-update change-icon">
+                                       class="btn btn-update change-icon">
                                         <i class="fa fa-fw fa-lock" aria-hidden="true"></i>
                                         {{'Close accompanying period'|trans }}
                                     </a>
@@ -133,7 +133,7 @@
                             {% if accompanying_period.canBeReOpened(person) == true %}
                                 <li>
                                     <a href="{{ path('chill_person_accompanying_period_re_open', {'person_id' : person.id, 'period_id' : accompanying_period.id } ) }}"
-                                       class="btn btn-sm btn-create change-icon">
+                                       class="btn btn-create change-icon">
                                         <i class="fa fa-fw fa-unlock" aria-hidden="true"></i>
                                         {{'Re-open accompanying period'|trans }}
                                     </a>