diff --git a/CHANGELOG.md b/CHANGELOG.md
index 25c713297a53a94122573713fbb587162fff3bb4..f40ba9c69e75e70c340d34b359a897f840df6fdb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -68,7 +68,13 @@ Ajout d'un bouton en haut de page pour éditer le parcours, visible uniquement p
#### Description des sections
-[ ] Revoir l'apparence de la description des sections.
+[x] Revoir l'apparence de la description des sections.
+
+#### Description pliantes
+
+[x] Les descriptions de parcours et de section se plient si elles sont trop longues et un petit icon permet de les déplier pour les lire entièrement.
+
+Elles ne s'affichent pas si elles sont vides.
### Gestion des droits
@@ -90,6 +96,8 @@ Amélioration des textes sur les pages de liste et d'édition des parcours.
Attention : actuellement, on peut ajouter plusieurs fois le même élément ce qui créée des erreurs.
+Ne fonctionne pas sur firefox. Bien tester sur tous les navigateurs.
+
### Bloc en lui-même
#### Amélioration de l'apparence de la liste
diff --git a/career_unit.php b/career_unit.php
index 9a79b997f63bc3e5240d836e080290d994f501de..5d8ebd3769e0ecddc38cc4f53835f47338bae359 100644
--- a/career_unit.php
+++ b/career_unit.php
@@ -13,17 +13,13 @@
$PAGE->set_pagelayout('course');
$PAGE->set_url($url);
- // Getting DB data for the course
$course = $DB->get_record('course', array('id' => $requete->course), '*', MUST_EXIST);
- // Must be logged in
require_login($course, false, NULL);
$PAGE->set_title(get_string('title_plugin', 'block_career'));
$PAGE->set_heading($OUTPUT->heading($COURSE->fullname, 2, 'headingblock header outline'));
echo $OUTPUT->header();
- // $PAGE->requires->js("/blocks/career/js/jquery.min.js");
- // $PAGE->requires->js("/blocks/career/js/file.js");
- // echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"styles.css\">";
+ $PAGE->requires->js("/blocks/career/js/sect-descr.js");
require_once('view/view_career_unit.php');
diff --git "a/img/Capture d\342\200\231\303\251cran 2018-06-19 \303\240 18.18.32.png" "b/img/Capture d\342\200\231\303\251cran 2018-06-19 \303\240 18.18.32.png"
deleted file mode 100644
index 963a9293ae1d940adcd2134b65a095392119cc60..0000000000000000000000000000000000000000
Binary files "a/img/Capture d\342\200\231\303\251cran 2018-06-19 \303\240 18.18.32.png" and /dev/null differ
diff --git a/img/file.txt b/img/file.txt
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/img/numoc-16-9-blanc.png b/img/numoc-16-9-blanc.png
deleted file mode 100644
index e877fb5f7e5d52c439bdcf5882a2f1ce4c429d93..0000000000000000000000000000000000000000
Binary files a/img/numoc-16-9-blanc.png and /dev/null differ
diff --git a/img/rose-rose.jpg b/img/rose-rose.jpg
deleted file mode 100644
index 77b23e9704a58b1ec1c5399d56357d600c9b3546..0000000000000000000000000000000000000000
Binary files a/img/rose-rose.jpg and /dev/null differ
diff --git a/js/sect-descr.js b/js/sect-descr.js
new file mode 100644
index 0000000000000000000000000000000000000000..a86315390cd22d67cdbcb72d2f9fd3b2ff421985
--- /dev/null
+++ b/js/sect-descr.js
@@ -0,0 +1,36 @@
+;(function () {
+
+ /* Descriptions */
+ var descr_area = document.querySelectorAll('.career-descr-fold');
+ /* Links to expand description if it has been folded */
+ var descr_icons = document.querySelectorAll('.career-descr-fold-icon');
+
+ /* If > 175px (too big) => change to 150px + link to unfold to normal size. */
+ for (var i = 0; i < descr_area.length; i++) {
+ var height = descr_area[i].offsetHeight
+ if (height > 175) {
+ descr_area[i].dataset.foldsize = "small"
+ } else {
+ var icon = descr_area[i].querySelector('.career-descr-fold-icon');
+ icon.setAttribute('hidden', 'hidden');
+ }
+ }
+
+ /* onclick on link => target parent section descr and change the foldsize attribute to cause css changes (unfold & icon) */
+ for (var i = 0; i < descr_icons.length; i++) {
+ descr_icons[i].onclick = function(e) {
+ e.preventDefault();
+ var target = e.target;
+ while ( target ) {
+ if (target.getAttribute('class') != null){
+ if (target.getAttribute('class').indexOf('career-descr career-descr-fold') > -1) {
+ break;
+ }
+ }
+ target = target.parentNode;
+ }
+ target.dataset.foldsize == "small" ? target.dataset.foldsize = 'full' : target.dataset.foldsize = 'small';
+ }
+ }
+
+})();
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 5515d94f77c713705e54dd4e237a5d704e2833be..45f670aaf6afa8198f578544bafd3ccb4b87df0d 100644
--- a/styles.css
+++ b/styles.css
@@ -6,17 +6,59 @@
.career-section-title > h3 {
color: #fafafa;
padding: 0.6rem 1rem;
+ margin-bottom: 0;
}
.career-descr {
- padding: .75rem 1.25rem;
- margin-bottom: 1rem;
- border: 0 solid transparent;
- border-color: #f1f3f5;
+ padding: .75rem 1.25rem;
+ margin-bottom: 0;
+ border: 0 solid transparent;
+ border-color: #f1f3f5;
color: #6b6e71;
- background-color: #f5f6f8;
+ background-color: #f5f6f8;
}
+.career-descr-fold {
+ position: relative;
+ overflow: hidden;
+}
+
+.career-descr-fold[data-foldsize="small"] {
+ max-height: 150px;
+}
+
+.career-descr-fold-icon {
+ position: absolute;
+ bottom: 0.25rem;
+ right: 1rem;
+}
+
+.career-descr-fold-icon svg {
+ border-radius: 10em;
+ padding: 9px;
+ background-color: rgba(0, 129, 150, 0.7);
+ box-shadow: 0px 0px 2px 0px #d2d2d2;
+}
+
+.career-descr-fold-icon svg:hover {
+ background-color: rgba(0, 129, 150, 1);
+ box-shadow: 0px 0px 5px 1px #d2d2d2;
+}
+
+.career-descr-fold[data-foldsize="small"] .arraw_to_bottom {
+ display: initial;
+}
+.career-descr-fold[data-foldsize="small"] .arraw_to_top {
+ display: none;
+}
+.career-descr-fold[data-foldsize="full"] .arraw_to_bottom {
+ display: none;
+}
+.career-descr-fold[data-foldsize="full"] .arraw_to_top {
+ display: initial;
+}
+
+
/* Path settings */
.left_course_elements, .right_course_elements {
width: 33%;
diff --git a/view/view_career_unit.php b/view/view_career_unit.php
index 695349daf281d690ae020d4ea00ed8ccdb092819..ac7a244c3fdcc93e01e504d307cce9e231a6cd09 100644
--- a/view/view_career_unit.php
+++ b/view/view_career_unit.php
@@ -54,30 +54,42 @@ ksort($sections);
$cours_url = $CFG->wwwroot . "/course/view.php?id=" . $COURSE->id;
$edit_url = $CFG->wwwroot . "/blocks/career/career_setting.php?courseid=" . $COURSE->id . "&pathid=" . $careerId;
-?>
+function is_not_empty_string($str) {
+ $str_copy = $str;
+ $to_delete = array('<p>', '</p>', '<br>', '</br>', ' ');
+ $str_copy = str_replace($to_delete, '', $str_copy);
+ $str_copy = preg_replace('/\s+/', '', $str_copy);
+ if ( $str_copy != "" ) {
+ return true;
+ }
+ return false;
+}
+?>
<section class="section">
-<?php if (has_capability('moodle/course:update', $context = context_course::instance($COURSE->id), $USER->id)): ?>
- <a class="btn btn-warning" style="float: right; margin-left: 0.25rem;" href="<?php echo $edit_url; ?>">Éditer</a>
-<?php endif; ?>
+ <?php if (has_capability('moodle/course:update', $context = context_course::instance($COURSE->id), $USER->id)): ?>
+ <a class="btn btn-warning" style="float: right; margin-left: 0.25rem;" href="<?php echo $edit_url; ?>">Éditer</a>
+ <?php endif; ?>
<a class="btn btn-primary" style="float: right;" href="<?php echo $cours_url; ?>">Retour au cours</a>
- <h2 class="display-4" style="clear: both;"><?=$titre;?></h2>
-
- <div class="career-descr" style="clear: both;">
- <?php echo $intro; ?>
- </div>
+ <h2 class="display-4" style="clear: both;"><?php echo $titre; ?></h2>
+ <?php
+ if ( is_not_empty_string($intro) ) {
+ echo "<div class='career-descr career-descr-fold' data-foldsize='full'>" . $intro . "<a href='#' class='career-descr-fold-icon'><svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' class='arraw_to_bottom' x='0px' y='0px' width='35px' height='35px' viewBox='0 0 451.847 451.847' style='enable-background:new 0 0 451.847 451.847;' xml:space='preserve'><g><path fill='white' d='M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751 c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0 c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z'></path></g></svg><svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' class='arraw_to_top' x='0px' y='0px' width='35px' height='35px' viewBox='0 0 451.847 451.846' style='enable-background:new 0 0 451.847 451.846;' xml:space='preserve'><g><path fill='white' d='M248.292,106.406l194.281,194.29c12.365,12.359,12.365,32.391,0,44.744c-12.354,12.354-32.391,12.354-44.744,0 L225.923,173.529L54.018,345.44c-12.36,12.354-32.395,12.354-44.748,0c-12.359-12.354-12.359-32.391,0-44.75L203.554,106.4 c6.18-6.174,14.271-9.259,22.369-9.259C234.018,97.141,242.115,100.232,248.292,106.406z'/></g></svg></a></div>";
+ }
+ ?>
<?php foreach ($sections as $section) : ?>
<div style="margin-bottom: 0rem; margin-top: 1rem;">
<div class="career-section-title">
<h3><?php echo $section->name; ?></h3>
</div>
- <div class="iena-career-description wrapper">
- <?php echo $section->intro; ?>
- </div>
- <div class="list-group">
+ <?php
+ if ( is_not_empty_string($section->intro) ) {
+ echo "<div class='career-descr career-descr-fold' data-foldsize='full'>" . $section->intro . "<a href='#' class='career-descr-fold-icon'><svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' class='arraw_to_bottom' x='0px' y='0px' width='35px' height='35px' viewBox='0 0 451.847 451.847' style='enable-background:new 0 0 451.847 451.847;' xml:space='preserve'><g><path fill='white' d='M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751 c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0 c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z'></path></g></svg><svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' class='arraw_to_top' x='0px' y='0px' width='35px' height='35px' viewBox='0 0 451.847 451.846' style='enable-background:new 0 0 451.847 451.846;' xml:space='preserve'><g><path fill='white' d='M248.292,106.406l194.281,194.29c12.365,12.359,12.365,32.391,0,44.744c-12.354,12.354-32.391,12.354-44.744,0 L225.923,173.529L54.018,345.44c-12.36,12.354-32.395,12.354-44.748,0c-12.359-12.354-12.359-32.391,0-44.75L203.554,106.4 c6.18-6.174,14.271-9.259,22.369-9.259C234.018,97.141,242.115,100.232,248.292,106.406z'/></g></svg></a></div>";
+ }?>
+ <div class="list-group" style="margin-top: 1rem;">
<?php foreach ($ressources as $value) : ?>
<?php if($value->section->id == $section->id) : ?>
<a href="<?php echo "$value->link&career=$careerId" ?>" class="list-group-item list-group-item-action flex-column align-items-start">
@@ -88,11 +100,7 @@ $edit_url = $CFG->wwwroot . "/blocks/career/career_setting.php?courseid=" . $COU
<img class="" alt="" src="<?php echo $CFG->wwwroot ?>/theme/image.php/boost/<?php echo $value->type ?>/1/icon>">
</div>
<?php
- $descr = $value->descrition;
- $to_delete = array('<p>', '</p>', '<br>', '</br>', ' ');
- $descr = str_replace($to_delete, '', $descr);
- $descr = preg_replace('/\s+/', '', $descr);
- if ( $descr != "" ) {
+ if ( is_not_empty_string($value->descrition) ) {
echo "<div style='margin-top: 0.25rem;'>" . $value->descrition . "</div>";
}
?>