Corrections format mobile

styles.css

@@ -404,6 +404,13 @@ ul.nav.navbar-nav.ml-auto {
     margin: 0 7px 0 2px;
 }
 
+.iena-progress-wrapper{
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    align-items: center;
+
+}
 .progress-wrapper{
 	vertical-align: 8%;
 }
@@ -430,7 +437,7 @@ ul.nav.navbar-nav.ml-auto {
 
 .iena-progress-legend #caption-iena .caption-status{
 	margin-right: 0;
-	display: block;
+	display: inline-block;
 	margin-bottom: 5px;
 	cursor: default!important;
 }
@@ -439,6 +446,7 @@ ul.nav.navbar-nav.ml-auto {
 	width: 17px;
     height: 17px;
     vertical-align: middle;
+    display: inline-block;
     border-radius: 10px;
 }
 
@@ -450,6 +458,9 @@ ul.nav.navbar-nav.ml-auto {
     display: block;
 }
 
+.iena-progress-legend #caption-iena .caption-icons-iena{
+    margin-top: 10px;
+}
 
 
 /* Section progression block */
@@ -1049,4 +1060,63 @@ th.first-column-iena, th.second-column-iena, th.actions-column-iena, th.third-co
 
 #region-main{
     overflow-x: visible!important;
-}
\ No newline at end of file
+}
+
+.mobile_titre_section, .mobile-bouton-suivi{
+    display: none;
+}
+
+@media only screen and (max-width : 500px) {
+    .mobile_titre_section{
+        display: block;
+        flex-basis: 100%;
+        margin-bottom: 14px;
+padding-bottom: 14px;
+border-bottom: 1px solid #dee2e6;
+
+    }
+    .course-section-header{
+        flex-wrap: wrap;
+    }
+    .titre_section, .right_info .sect-date, .nb_pers.set_height.id_groupe0{
+        display: none!important;
+    }
+
+    .d-flex.align-items-start.position-relative{
+        flex-basis: 85%;
+    }
+    .right-info{
+        flex-basis: 15%;
+    }
+    .mobile-bouton-suivi{
+        display: block;
+        min-width: 1rem;
+        padding: 6px 10px 4px 10px;
+        border-radius: 31px;
+    }
+    .iena-icon-distance::after{
+        font-size: initial;
+        color:var(--main-color);
+    }
+    .label_item.sect-mode{
+        background: white!important;
+        padding: 0px 5px;
+    }
+    .mobile-sect-date{
+        float: right!important;
+    }
+    .iena-progress-wrapper .progress-wrapper{
+        flex-basis: 100%;
+    }
+    .iena-progress-wrapper .progress-wrapper .progress{
+        width: 80%;
+        margin:8px auto;
+    }
+    #progress-details .details-progress {
+        order:2;
+    }
+
+    #progress-details .iena-progress-legend{
+        order: 1;
+    }
+} 
\ No newline at end of file

templates/course-header.mustache

@@ -46,7 +46,7 @@
 				</div>
 				<div class="col-md-5 iena-progress-legend">
 				<div id="caption-iena"><h5>{{# str }} caption, format_iena {{/ str}}</h5>
-					<div class="">
+					<div class="caption-icons-iena">
 						<div class="caption-status"><div class="pointer-help state-0"><span class="icon-progress"></span></div> <span class="caption-title"> {{# str }} status0, format_iena {{/ str}}</span></div>
 						<div class="caption-status"><div class="pointer-help state-1"><span class="icon-progress"></span></div> <span class="caption-title">{{# str }} status1, format_iena {{/ str}}</span></div>
 						<div class="caption-status"><div class="pointer-help state-2"><span class="icon-progress"></span></div>  <span class="caption-title">{{# str }} status2, format_iena {{/ str}}</span></div>

templates/courseformat/content.mustache

@@ -162,7 +162,7 @@
         {{#student}}
         <!--<a href="#" class="btn btn-outline-primary iena-course-h-total" onclick="iena_toggle_course_header(event)">Ma progression : {{progress_total}}%</a>-->
         <div class="iena-progress-header">
-            <div style="display:flex;align-items:center;">
+            <div class="iena-progress-wrapper">
                 <a role="button" data-toggle="collapse" href="#progress-details" aria-expanded="false" aria-controls="progress-details" class="btn btn-icon mr-1 icons-collapse-expand justify-content-center  collapsed" aria-label="Progress">
                         <span class="expanded-icon icon-no-margin p-2" title="Replier">
                             <i class="icon fa fa-chevron-down fa-fw " aria-hidden="true"></i>
@@ -218,7 +218,7 @@
                     </div>
                     <div class="col-md-5 iena-progress-legend">
                     <div id="caption-iena"><h5>{{# str }} caption, format_iena {{/ str}}</h5>
-                        <div class="">
+                        <div class="caption-icons-iena">
                             <div class="caption-status"><div class="pointer-help state-0"><span class="icon-progress"></span></div> <span class="caption-title"> {{# str }} status0, format_iena {{/ str}}</span></div>
                             <div class="caption-status"><div class="pointer-help state-1"><span class="icon-progress"></span></div> <span class="caption-title">{{# str }} status1, format_iena {{/ str}}</span></div>
                             <div class="caption-status"><div class="pointer-help state-2"><span class="icon-progress"></span></div>  <span class="caption-title">{{# str }} status2, format_iena {{/ str}}</span></div>

templates/courseformat/content/section/header.mustache

@@ -44,6 +44,18 @@
         {{#mode}}
             
             {{#presence}}
+            <div class="mobile_titre_section">
+                <div class="label_item sect-mode">
+                    <span class="iena-icon-presence" data-toggle="tooltip" data-placement="top" title="{{#str}} in_presence, format_iena {{/str}}"></span>
+                </div>
+                <span>{{#str}} in_presence, format_iena {{/str}}</span>
+                {{#date}}
+                    <div class="label_item mobile-sect-date sect-date">
+                        {{date}}
+                    </div>
+                {{/date}}
+
+            </div>
             <div class="titre_section set_height">
                 <div class="label_item sect-mode">
                     <span class="iena-icon-presence" data-toggle="tooltip" data-placement="top" title="{{#str}} in_presence, format_iena {{/str}}"></span>
@@ -55,6 +67,18 @@
                 <div class="label_item sect-mode">
                     <span class="iena-icon-distance" data-toggle="tooltip" data-placement="top" title="{{#str}} not_presence, format_iena {{/str}}"></span>
                 </div>
+
+            </div>
+            <div class="mobile_titre_section">
+                <div class="label_item sect-mode">
+                    <span class="iena-icon-distance" data-toggle="tooltip" data-placement="top" title="{{#str}} not_presence, format_iena {{/str}}"></span>
+                </div>
+                <span>{{#str}} not_presence, format_iena {{/str}}</span>
+                {{#date}}
+                    <div class="label_item mobile-sect-date sect-date">
+                        {{date}}
+                    </div>
+                {{/date}}
             </div>
             {{/distance}}
         {{/mode}}
@@ -94,6 +118,7 @@
         {{#link_suivi}}
             <a href='{{link_suivi}}' style='color : white'>
                 <div style="display:block;" class="nb_pers set_height id_groupe0">Suivi étudiant</div>
+                <div class="nb_pers set_height mobile-bouton-suivi"><i class="fa fa-tasks"></i></div>
 
             </a>
         {{/link_suivi}}