Commit e8d2bb13 authored by Thomas Fradet's avatar Thomas Fradet
Browse files

path descr improvement

parent 2bcbe5ef
......@@ -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
......
......@@ -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');
......
;(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
......@@ -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%;
......
......@@ -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>";
}
?>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment