From 7f68943f2031fcc088a00fc0bfebce452b8d5843 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20Arag=C3=B3n?= <aragcar@gmail.com>
Date: Tue, 26 Feb 2019 16:07:01 -0500
Subject: [PATCH] Improved accordion view of list of exercises created
---
assets/css/scss/_base.scss | 1 -
assets/css/scss/_jqueryui.scss | 47 +++++++++
assets/css/scss/index.scss | 1 +
main/exercise/exercise.php | 3 +-
main/exercise/question_list_admin.inc.php | 119 +++++++++++-----------
main/inc/ajax/exercise.ajax.php | 4 +-
main/inc/lib/exercise.lib.php | 4 +-
7 files changed, 111 insertions(+), 68 deletions(-)
create mode 100644 assets/css/scss/_jqueryui.scss
diff --git a/assets/css/scss/_base.scss b/assets/css/scss/_base.scss
index 48e50c0f2e..4b027659a5 100755
--- a/assets/css/scss/_base.scss
+++ b/assets/css/scss/_base.scss
@@ -933,7 +933,6 @@ hr {
}
/******************* ACCORDION B4 *****************/
-
.accordion-b4 {
.card {
border: 0 none;
diff --git a/assets/css/scss/_jqueryui.scss b/assets/css/scss/_jqueryui.scss
new file mode 100644
index 0000000000..5fc94ec28d
--- /dev/null
+++ b/assets/css/scss/_jqueryui.scss
@@ -0,0 +1,47 @@
+.ui-widget{
+ font-family: inherit;
+}
+.ui-accordion{
+ .ui-accordion-header{
+ padding: 0;
+ margin: 0;
+ }
+ .card{
+ margin-bottom: 0;
+ margin-top: 1rem;
+ .card-body{
+ padding: 0;
+ .question-title{
+ padding-top: .5rem;
+ padding-bottom: .5rem;
+ font-weight: bold;
+ }
+ }
+ .btn-moved{
+ padding: .6rem .5rem;
+ font-size: 1.25rem;
+ display: block;
+ text-align: center;
+ }
+ }
+}
+.ui-state-default{
+ border: none;
+ background: transparent;
+}
+.ui-sortable-helper{
+ .card{
+ background: #ffffd9;
+ }
+}
+.ui-accordion-header-active{
+ &.ui-state-active{
+ .card{
+ background-color: #607d8b;
+ }
+ }
+}
+.ui-widget-content{
+ border: 1px solid #e5e9f2;
+ background: #faffff;
+}
diff --git a/assets/css/scss/index.scss b/assets/css/scss/index.scss
index fafdea91a4..a4d40257e3 100755
--- a/assets/css/scss/index.scss
+++ b/assets/css/scss/index.scss
@@ -7,5 +7,6 @@
@import "forms";
@import 'base';
@import 'announcement';
+@import "jqueryui";
/*
@import "spinner";*/
diff --git a/main/exercise/exercise.php b/main/exercise/exercise.php
index 87a8604470..e9c5bd2e96 100644
--- a/main/exercise/exercise.php
+++ b/main/exercise/exercise.php
@@ -1009,8 +1009,9 @@ if (!empty($exerciseList)) {
),
'',
[
- 'onclick' => "javascript:if(!confirm('".addslashes(api_htmlentities(get_lang('AreYouSureToDeleteJS'), ENT_QUOTES, $charset))." ".addslashes($exercise->getUnformattedTitle())."?"."')) return false;",
'href' => 'exercise.php?'.api_get_cidreq().'&choice=delete&sec_token='.$token.'&exerciseId='.$row['id'],
+ 'title' => addslashes(api_htmlentities(get_lang('AreYouSureToDeleteJS'),ENT_QUOTES, $charset))." ".addslashes($exercise->getUnformattedTitle())."?",
+ 'class' => 'delete-swal'
]
);
} else {
diff --git a/main/exercise/question_list_admin.inc.php b/main/exercise/question_list_admin.inc.php
index 02504f58f6..b673f78152 100755
--- a/main/exercise/question_list_admin.inc.php
+++ b/main/exercise/question_list_admin.inc.php
@@ -204,13 +204,8 @@ if (!$inATest) {
}
echo '
- <div class="row hidden-xs">
- <div class="col-sm-5"><strong>'.get_lang('Questions').'</strong></div>
- <div class="col-sm-1 text-center"><strong>'.get_lang('Type').'</strong></div>
- <div class="col-sm-2"><strong>'.get_lang('Category').'</strong></div>
- <div class="col-sm-1 text-right"><strong>'.get_lang('Difficulty').'</strong></div>
- <div class="col-sm-1 text-right"><strong>'.get_lang('MaximumScore').'</strong></div>
- <div class="col-sm-2 text-right"><strong>'.get_lang('Actions').'</strong></div>
+ <div class="list-header-question">
+ <h2>'.get_lang('List Questions').'</h2>
</div>
<div id="question_list">
';
@@ -231,49 +226,39 @@ if (!$inATest) {
}
$clone_link = Display::url(
- Display::return_icon(
- 'cd.png',
- get_lang('Copy'),
- [],
- ICON_SIZE_TINY
- ),
+ Display::returnFontAwesomeIcon('copy'),
api_get_self().'?'.api_get_cidreq().'&clone_question='.$id,
- ['class' => 'btn btn-default btn-sm']
+ [
+ 'class' => 'btn btn-outline-secondary btn-sm',
+ 'title' => get_lang('Copy')
+ ]
);
$edit_link = $objQuestionTmp->type == CALCULATED_ANSWER && $objQuestionTmp->isAnswered()
? Display::span(
- Display::return_icon(
- 'edit_na.png',
- get_lang('QuestionEditionNotAvailableBecauseItIsAlreadyAnsweredHoweverYouCanCopyItAndModifyTheCopy'),
- [],
- ICON_SIZE_TINY
- ),
- ['class' => 'btn btn-default btn-sm']
+ Display::returnFontAwesomeIcon('pencil-alt'),
+ [
+ 'class' => 'btn btn-outline-secondary btn-sm',
+ 'title' => get_lang('QuestionEditionNotAvailableBecauseItIsAlreadyAnsweredHoweverYouCanCopyItAndModifyTheCopy'),
+ 'disabled'
+ ]
)
: Display::url(
- Display::return_icon(
- 'edit.png',
- get_lang('Modify'),
- [],
- ICON_SIZE_TINY
- ),
+ Display::returnFontAwesomeIcon('pencil-alt'),
api_get_self().'?'.api_get_cidreq().'&'
.http_build_query([
'type' => $objQuestionTmp->selectType(),
'myid' => 1,
'editQuestion' => $id,
]),
- ['class' => 'btn btn-default btn-sm']
+ [
+ 'class' => 'btn btn-outline-secondary btn-sm',
+ 'title' => get_lang('Modify')
+ ]
);
$delete_link = null;
if ($objExercise->edit_exercise_in_lp == true) {
$delete_link = Display::url(
- Display::return_icon(
- 'delete.png',
- get_lang('RemoveFromTest'),
- [],
- ICON_SIZE_TINY
- ),
+ Display::returnFontAwesomeIcon('trash-alt'),
api_get_self().'?'.api_get_cidreq().'&'
.http_build_query([
'exerciseId' => $exerciseId,
@@ -281,7 +266,8 @@ if (!$inATest) {
]),
[
'id' => "delete_$id",
- 'class' => 'opener btn btn-default btn-sm',
+ 'title' => get_lang('RemoveFromTest'),
+ 'class' => 'btn btn-outline-secondary btn-sm delete-swal',
]
);
}
@@ -297,20 +283,29 @@ if (!$inATest) {
$title = Security::remove_XSS($objQuestionTmp->selectTitle());
$title = strip_tags($title);
- $move = ' ';
+ $move = null;
if ($alloQuestionOrdering) {
- $move = Display::returnFontAwesomeIcon('arrows moved', 1, true);
+ $move .= Display::tag(
+ 'div',
+ Display::returnFontAwesomeIcon(
+ 'arrows-alt ',
+ 1,
+ true),
+ [
+ 'class' => 'btn-moved moved'
+ ]
+ );
}
// Question name
$questionName =
'<a href="#" title = "'.Security::remove_XSS($title).'">
- '.$move.' '.cut($title, 42).'
+ '.cut($title, 42).'
</a>';
// Question type
list($typeImg, $typeExpl) = $objQuestionTmp->get_type_icon_html();
- $questionType = Display::return_icon($typeImg, $typeExpl);
+ $questionType = Display::return_icon($typeImg, $typeExpl,[],ICON_SIZE_MEDIUM);
// Question category
$txtQuestionCat = Security::remove_XSS(
@@ -333,29 +328,29 @@ if (!$inATest) {
echo '<div id="question_id_list_'.$id.'">
<div class="header_operations" data-exercise="'.$objExercise->selectId().'"
data-question="'.$id.'">
- <div class="row">
- <div class="question col-sm-5 col-xs-12">'
- .$questionName.'
- </div>
- <div class="type text-center col-sm-1 col-xs-12">
- <span class="visible-xs-inline">'.get_lang('Type').' </span>'
- .$questionType.'
- </div>
- <div class="category col-sm-2 col-xs-12" title="'.$txtQuestionCat.'">
- <span class="visible-xs-inline">'.get_lang('Category').' </span>'
- .cut($txtQuestionCat, 42).'
- </div>
- <div class="level text-right col-sm-1 col-xs-6">
- <span class="visible-xs-inline">'.get_lang('Difficulty').' </span>'
- .$questionLevel.'
- </div>
- <div class="score text-right col-sm-1 col-xs-6">
- <span class="visible-xs-inline">'.get_lang('Score').' </span>'
- .$questionScore.'
- </div>
- <div class="btn-actions text-right col-sm-2 col-xs-6">
- <div class="edition">'.$btnActions.'</div>
- </div>
+ <div class="card">
+ <div class="card-body">
+ <div class="row">
+ <div class="col-md-1">
+ '.$move.'
+ </div>
+ <div class="col-md-5">
+ <div class="question-title">
+ '.$questionType.$questionName.'
+ </div>
+ </div>
+ <div class="col-md-4">
+ <div class="d-flex flex-row bd-highlight mt-2 mb-2">
+ <div class="p-2 bd-highlight">'.get_lang('Category').': '.cut($txtQuestionCat, 42).'</div>
+ <div class="p-2 bd-highlight">'.get_lang('Difficulty').': '.$questionLevel.'</div>
+ <div class="p-2 bd-highlight">'.get_lang('Score').': '.$questionScore.'</div>
+ </div>
+ </div>
+ <div class="col-md-2">
+ <div class="text-right mt-2 mb-2 mr-2">'.$btnActions.'</div>
+ </div>
+ </div>
+ </div>
</div>
</div>
<div class="question-list-description-block" id="pnl-question-'.$id.'">
diff --git a/main/inc/ajax/exercise.ajax.php b/main/inc/ajax/exercise.ajax.php
index ff7f56ea64..3db718fb89 100755
--- a/main/inc/ajax/exercise.ajax.php
+++ b/main/inc/ajax/exercise.ajax.php
@@ -732,10 +732,10 @@ switch ($action) {
$objQuestion = Question::read($questionId);
$id = '';
if (api_get_configuration_value('show_question_id')) {
- $id = '<h4>#'.$objQuestion->course['code'].'-'.$objQuestion->iid.'</h4>';
+ $id = '<h4 class="question-type">#'.$objQuestion->course['code'].'-'.$objQuestion->iid.'</h4>';
}
echo $id;
- echo '<p class="lead">'.$objQuestion->get_question_type_name().'</p>';
+ echo '<h4 class="question-type">'.$objQuestion->get_question_type_name().'</h4>';
if ($objQuestion->type === FILL_IN_BLANKS) {
echo '<script>
$(function() {
diff --git a/main/inc/lib/exercise.lib.php b/main/inc/lib/exercise.lib.php
index bd86ff4d72..f038f22c50 100644
--- a/main/inc/lib/exercise.lib.php
+++ b/main/inc/lib/exercise.lib.php
@@ -244,7 +244,7 @@ class ExerciseLib
if ($show_comment) {
$header .= Display::tag('th', get_lang('Feedback'));
}
- $s .= '<table class="table table-hover table-striped">';
+ $s .= '<table class="table table-hover">';
$s .= Display::tag(
'tr',
$header,
@@ -429,7 +429,7 @@ class ExerciseLib
if ($exercise->feedback_type == EXERCISE_FEEDBACK_TYPE_END) {
$header .= Display::tag('th', get_lang('Feedback'));
}
- $s .= '<table class="table table-hover table-striped">';
+ $s .= '<table class="table table-hover">';
$s .= Display::tag(
'tr',
$header,