fix style in calendar shift list

members_space/static/css/members-space-shifts-exchange.css

@@ -64,13 +64,39 @@
     }
 }
 
+.shift_line_container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.shift_line_extra_actions {
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+}
+
+@media screen and (max-width:768px) {
+    .shift_line_container {
+        flex-direction: column;
+    }
+
+    .shift_line_extra_actions {
+        width: 100%;
+    }
+    
+    .affect_associate_registered {
+        margin: 0.5rem 0;
+    }
+}
+
+
 .selectable_shift_line {
     min-width: 325px;
     display: flex;
     align-items: center;
-    margin-left: 15px;
     border-radius: 5px;
-    margin-right: 15px;
 }
 
 .selectable_shift_line .checkbox {
@@ -84,10 +110,19 @@
 .affect_associate_registered {
     display: flex;
     align-items: center;
-    margin-left: 15px;
     border-radius: 5px;
 }
 
+@media screen and (min-width:768px) {
+    .selectable_shift_line {
+        margin: 0 15px;
+    }
+
+    .affect_associate_registered {
+        margin-left: 15px;
+    }
+}
+
 .selectable_shift{
     margin: 1rem 0;
 }
@@ -127,9 +162,9 @@
 
 #can_delete_future_registrations_area {
     display: none;
-    align-self: center;
+    justify-content: center;
+    align-items: center;
     margin: 0 1rem 1rem 1rem;
-    padding: 1rem 1.25rem;
 }
 
 #can_delete_future_registrations_area button {
@@ -229,4 +264,14 @@ td{
 #calendar_explaination_button {
     max-width: 60%;
     margin: 2rem auto 0.5rem auto;
+}
+
+/* -- Assign shift modal */
+
+.modal_affect_shift_buttons {
+    margin: 1rem 0;
+}
+
+.assign_shift_button {
+    margin: 0.25rem;
 }
\ No newline at end of file

members_space/static/js/members-space-shifts-exchange.js

@@ -352,7 +352,7 @@ function init_shifts_list() {
                 if (shift_line_template.find(".delete_registration_button").length === 0) {
                     let delete_reg_button_template = $("#delete_registration_button_template");
 
-                    shift_line_template.find(".shift_line_container").append(delete_reg_button_template.html());
+                    shift_line_template.find(".shift_line_extra_actions").append(delete_reg_button_template.html());
                 }
             } else {
                 shift_line_template.find(".delete_registration_button").remove();
@@ -470,7 +470,7 @@ function init_calendar_page() {
 
     if (partner_data.extra_shift_done > 0) {
         $(".extra_shift_done").text(partner_data.extra_shift_done);
-        $("#can_delete_future_registrations_area").show();
+        $("#can_delete_future_registrations_area").css('display', 'flex');
 
         $("#offer_extra_shift").on("click", () => {
             openModal(

templates/members_space/index.html

@@ -43,8 +43,10 @@
             <span class="shift_line_date"></span> - <span class="shift_line_time"></span>
           </div>
         </div>
-        <div class="affect_associate_registered">
-          
+        <div class="shift_line_extra_actions">
+          <div class="affect_associate_registered">
+            
+          </div>
         </div>
       </div>
     </div>
@@ -55,12 +57,14 @@
 
     <div id="modal_affect_shift">
       <div>Qui sera présent.e ?</div>
-      <div id="shift_partner" class="btn--primary">
-      </div>
-      <div id="shift_associate" class=" btn--primary">
-      </div>
-      <div id="shift_both" class=" btn--primary">
-        Les deux
+      <div class="modal_affect_shift_buttons">
+        <div id="shift_partner" class="btn--primary assign_shift_button">
+        </div>
+        <div id="shift_associate" class=" btn--primary assign_shift_button">
+        </div>
+        <div id="shift_both" class=" btn--primary assign_shift_button">
+          Les deux
+        </div>
       </div>
     </div>