diff --git a/styles.css b/styles.css
index 476177a6ee07d1d124ad407f51573bde7178ccf5..6094210bbda9016d89eb2aca5f0f197325b0785b 100644
--- a/styles.css
+++ b/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
diff --git a/templates/course-header.mustache b/templates/course-header.mustache
index 5202db49444caa420582d80bbc3d4cf18d158251..f0b4013e02a1dcc53a427941c83c0e1230ddedc5 100644
--- a/templates/course-header.mustache
+++ b/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>
diff --git a/templates/courseformat/content.mustache b/templates/courseformat/content.mustache
index 54f8661ae0082f351b541bff048814c58664936b..62f6e2b12ddb63f69bf8d991ee37b95c7ba4dd12 100644
--- a/templates/courseformat/content.mustache
+++ b/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>
diff --git a/templates/courseformat/content/section/header.mustache b/templates/courseformat/content/section/header.mustache
index bd6780b5b7e70077d8c0d03cf7f57abaf58710fb..92d2383883403594345762bb25bc181c0bd291b6 100644
--- a/templates/courseformat/content/section/header.mustache
+++ b/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}}