From 9ffe7276ff2f709bbe4fabd6db29a96b9291f2eb Mon Sep 17 00:00:00 2001
From: Myriam Delaruelle <myriam.delaruelle@univ-lorraine.fr>
Date: Fri, 30 Jun 2023 11:29:05 +0200
Subject: [PATCH] fix css description sections et header
---
format.js | 27 ++++++++++++++++++-
styles.css | 27 ++++++++++++++++---
.../content/section/content.mustache | 15 ++++++++---
3 files changed, 62 insertions(+), 7 deletions(-)
diff --git a/format.js b/format.js
index ab865fc..047ad7a 100644
--- a/format.js
+++ b/format.js
@@ -73,10 +73,35 @@ M.course.format.process_sections = function(Y, sectionlist, response, sectionfro
};
(function () {
+ $(".description-inner").each(function(index){
+ if(parseInt($( this ).css('height'))<=144){
+ $(this).parent().next().hide();
+ }
+ })
+ //Gère les animations sur les descriptions des sections pour agrandir/rétrecir les infos
$('.section').find('a[href="#"].voir-plus').on('click', function (e) {
e.preventDefault();
this.expand = !this.expand;
$(this).text(this.expand?"Réduire la description":"Voir la description complète");
- $(this).closest('.section').find('.small, .big').toggleClass('small big');
+ //$(this).closest('.section').find('.small, .big').toggleClass('small big');
+ //
+
+ if($(this).prev().hasClass('small')){
+ $(this).prev().toggleClass('small big');
+ var height= $(this).prev().find(".description-inner").css("height");
+ $(this).prev().animate({ "max-height": height }, "slow" );
+
+ }
+ else if($(this).prev().hasClass('big')){
+
+ $(this).prev().toggleClass('small big');
+ $(this).prev().animate({ "max-height": '144px' }, "slow" );
+ }
+ else{
+ $(this).prev().addClass("big");
+ var height= $(this).prev().find(".description-inner").css("height");
+ $(this).prev().animate({ "max-height": height }, "slow" );
+ }
+
});
}(jQuery));
\ No newline at end of file
diff --git a/styles.css b/styles.css
index bc671b4..6467925 100644
--- a/styles.css
+++ b/styles.css
@@ -55,6 +55,12 @@ ul.iena-editing .voir-plus {
border-bottom-right-radius: 7px;
}
+
+.voir-plus{
+ margin-left: 3%;
+margin-top: 14px;
+}
+
.iena-section .instancename {
font-size: 1rem;
}
@@ -272,13 +278,28 @@ ul.nav.navbar-nav.ml-auto {
}
.iena-description {
- background: #EEE;
+
color: #323232;
padding: 1rem;
clear: both;
- margin-bottom: 0.5rem;
+ display: flex;
+ align-items: baseline;
+ flex-wrap: wrap;
+ border-top: 1px solid #dee2e6;
}
+.iena-description i{
+ color:#2a657d;
+ flex-basis: 3%;
+}
+.course-description-item.summarytext{
+ flex-basis: 97%;
+ overflow:hidden;
+ max-height: 144px;
+}
+
+
+
/* iENA course format header with progression */
@@ -354,7 +375,7 @@ ul.nav.navbar-nav.ml-auto {
.iena-course-header > .iena-course-header-bottom {
margin-bottom: 40px;
background: #eaeaea;
- padding: 15px;
+ padding: 1.5rem;
border-radius:10px;
}
diff --git a/templates/courseformat/content/section/content.mustache b/templates/courseformat/content/section/content.mustache
index 2df530d..6e1fe9a 100644
--- a/templates/courseformat/content/section/content.mustache
+++ b/templates/courseformat/content/section/content.mustache
@@ -130,9 +130,18 @@
{{/iscoursedisplaymultipage}}">
<div class="{{#hasavailability}}description{{/hasavailability}} my-3" data-for="sectioninfo">
{{#summary}}
- {{$ core_courseformat/local/content/section/summary }}
- {{> core_courseformat/local/content/section/summary }}
- {{/ core_courseformat/local/content/section/summary }}
+ {{#summarytext}}
+ <div class="iena-summary">
+ <div class="iena-description">
+ <i class="fa fa-info-circle" aria-hidden="true"></i>
+ {{$ core_courseformat/local/content/section/summary }}
+ {{> core_courseformat/local/content/section/summary }}
+ {{/ core_courseformat/local/content/section/summary }}
+ <a href="#" class="voir-plus">Voir la description complète</a>
+ </div>
+
+ </div>
+ {{/summarytext}}
{{/summary}}
{{#availability}}
{{$ core_courseformat/local/content/section/availability }}
--
GitLab