ac work, design

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

@@ -1,7 +1,4 @@
-
+/// AccompanyingCourse Work list Page
-
-
-
 div.accompanying_course_work-list {
 
     // ?? howto calculate border:groove generated from $orange ??
@@ -33,95 +30,90 @@ div.accompanying_course_work-list {
         }
     }
 
-  /*
+    div.timeline {
+        width: 100%;
+        ul {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            list-style-type: none;
 
+            > li {
+                flex-grow: 1; flex-shrink: 1; flex-basis: auto;
+                min-width: 210px;
 
-    .objective_results {
+                div.date {
-      display: grid;
+                    margin-bottom: 20px;
-      grid-template-areas:
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                }
+                div.label {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+
+                    padding: 0 40px;
+                    border-top: 3px solid var(--bs-chill-green);
+
+                    &:before {
+                        content: '';
+                        display: inline-block;
+                        position: relative;
+                        width: 12px;
+                        height: 12px;
+
+                        background-color: white;
+                        border-radius: 12px;
+                        border: 2px solid var(--bs-chill-green);
+
+                        top: -9px;
+                    }
+                }
+            }
+        }
+    }
+
+    div.objective_results {
+        display: grid;
+        width: 100%;
+        grid-template-areas:
         "obj res"
-    ;
+        ;
-      grid-template-columns: 50%;
+        grid-template-columns: 50%;
-      column-gap: 1rem;
+        column-gap: 1rem;
-
+        padding: 0.3rem;
-      padding: 0.3rem;
+        .obj {
-
+            grid-area: obj;
-      .obj {
-        grid-area: obj;
-      }
-
-      .res {
-        grid-area: res;
-
-        ul.result_list {
-          list-style-type: none;
-          padding: 0;
         }
-      }
+        .res {
-    }
+            grid-area: res;
-
+            ul.result_list {
-    .objective_results:nth-child(2n+2) {
+                list-style-type: none;
-      background-color: var(--bs-chill-llight-gray);
+                padding: 0;
-    }
+            }
-  }
+        }
-
+        &:nth-child(2n+2) {
-  &.short {
+            background-color: var(--bs-chill-llight-gray);
-    .item {
-      padding-bottom: 0;
-      ul.record_actions {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  */
-
-  .updatedBy {
-    margin-top: 1rem;
-    text-align: right;
-    font-size: 0.9rem;
-    font-style: italic;
-  }
-
-  ul.timeline {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    list-style-type: none;
-
-    > li {
-      min-width: 210px;
-
-      div.date {
-        margin-bottom: 20px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-      }
-      div.label {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        padding: 0 40px;
-        border-top: 3px solid var(--bs-chill-green);
-
-        &:before {
-          content: '';
-          display: inline-block;
-          position: relative;
-          width: 12px;
-          height: 12px;
-
-          background-color: white;
-          border-radius: 12px;
-          border: 2px solid var(--bs-chill-green);
-
-          top: -9px;
         }
-      }
     }
-  }
+
+    &.short {
+        .item {
+            padding-bottom: 0;
+            ul.record_actions {
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    .updatedBy {
+        margin-top: 1rem;
+        text-align: right;
+        font-size: 0.9rem;
+        font-style: italic;
+    }
+
 }
 

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

@@ -14,17 +14,18 @@
   <div class="flex-table">
     {% for w in works %}
       <div class="item-bloc">
-
         <div class="item-row">
+
           <h2 class="title">
             <span class="title_label">{{ 'accompanying_course_work.action'|trans }}</span>
             <span class="action_title">{{ w.socialAction|chill_entity_render_string }}</span>
           </h2>
-        </div>
 
+        </div>
         <div class="item-row separator">
+            
           <div class="timeline">
-            <ul class="timeline">
+            <ul>
               <li class="completed">
                 <div class="date">
                   <span>{{ w.createdAt|format_date('long') }}</span>
@@ -51,7 +52,10 @@
               </li>
             </ul>
           </div>
-            {#
+
+        </div>
+        <div class="item-row">
+
           {% if w.results|length > 0 %}
             <div class="objective_results objective_results__without-objectives">
               <div class="obj without_objective">
@@ -91,10 +95,10 @@
               </div>
             {% endfor %}
           {% endif %}
-            #}
-        </div>
 
+        </div>
         <div class="item-row separator">
+
           <div class="updatedBy">
             {{ 'Last updated by'|trans}} <b>{{ w.updatedBy|chill_entity_render_box }}</b>, {{ 'le ' ~ w.updatedAt|format_datetime('long', 'short') }}
           </div>
@@ -106,8 +110,8 @@
               </a>
             </li>
           </ul>
-        </div>
 
+        </div>
       </div>
     {% endfor %}
   </div>