chamilo
/
chamilo-lms
mirror of https://github.com/chamilo/chamilo-lms/tree/1.11.x
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Internal: Exercise question pool UI enhancements and bug fixes

Browse Source
pull/5256/head
christianbeeznst 2 years ago
parent 2985f0d013
commit f4d24890b1
2 changed files with 180 additions and 50 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 159
      assets/css/scss/_exercise.scss
  2. 71
      public/main/exercise/question_pool.php

159
assets/css/scss/_exercise.scss
Unescape View File

@ -72,40 +72,149 @@
padding: 5px; padding: 5px;
} }
.data_table { .data_table, .table-striped {
@apply border-collapse w-full; @apply border-collapse w-full mt-2;
}
.data_table thead th { thead th {
@apply bg-gray-20 text-gray-90 font-semibold text-left px-4 py-3 border-b border-gray-30 border-l border-r border-gray-30 text-center; @apply bg-gray-20 text-gray-90 font-semibold text-left px-4 py-3 border-b border-gray-30 border-l border-r border-gray-30 text-center;
} }
.data_table tbody td { tbody td {
@apply px-4 py-3 border-b border-gray-30 border-l border-r border-gray-30; @apply px-4 py-3 border-b border-gray-30 border-l border-r border-gray-30;
} }
.data_table tbody tr:nth-child(odd) { tbody tr:nth-child(odd) {
@apply bg-gray-5; @apply bg-gray-5;
} }
.data_table tbody tr:hover { tbody tr:hover {
background-color: #eff6ff; background-color: #eff6ff;
} }
.checkbox label {
@apply pl-4;
}
.data_table .checkbox label { i.mdi {
@apply pl-4; @apply align-middle;
}
.mdi::before {
@apply inline-block;
font-size: inherit;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
transform: translate(0, 0);
}
} }
.data_table i.mdi { .question-pool-table-actions {
@apply align-middle; display: flex;
align-items: center;
justify-content: flex-start;
padding: 10px 0;
position: relative;
.btn-group {
margin-right: 5px;
position:relative;
}
.btn-group .btn--plain {
background-color: #f8f9fa;
border: 1px solid #ccc;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
cursor: pointer;
color: #333;
}
.btn-group .dropdown-toggle::after {
content: "▼";
margin-left: 5px;
}
.btn-group .dropdown-toggle[data-toggle="dropdown"] {
cursor: pointer;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
padding: 10px;
width: 300px;
}
.btn--plain:hover,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background-color: #e2e6ea;
color: #333;
}
.btn-group:hover .dropdown-menu {
display: block;
}
@media (max-width: 768px) {
.question-pool-table-actions {
flex-direction: column;
align-items: flex-start;
}
.btn-group {
width: 100%;
margin-bottom: 5px;
}
.btn-group .dropdown-toggle::after {
content: "▼";
margin-left: auto;
margin-right: 10px;
}
}
} }
.data_table .mdi::before { .question-pool-pagination-nav {
@apply inline-block; display: flex;
font-size: inherit; justify-content: center;
-webkit-font-smoothing: antialiased; padding: 1rem;
text-rendering: optimizeLegibility;
transform: translate(0, 0); .pagination {
display: inline-flex;
list-style: none;
padding: 0;
}
.page-item {
margin: 0 0.25rem;
}
.page-item a {
color: #007bff;
background-color: #fff;
border: 1px solid #dee2e6;
padding: 0.5rem 0.75rem;
text-decoration: none;
}
.page-item.active a {
background-color: #007bff;
color: #fff;
}
.page-item a:hover {
background-color: #e9ecef;
}
} }
#question_list { #question_list {

71
public/main/exercise/question_pool.php
Unescape View File

@ -196,6 +196,24 @@ if (!$is_allowedToEdit) {
$confirmYourChoice = addslashes(api_htmlentities(get_lang('Please confirm your choice'), ENT_QUOTES)); $confirmYourChoice = addslashes(api_htmlentities(get_lang('Please confirm your choice'), ENT_QUOTES));
$htmlHeadXtra[] = " $htmlHeadXtra[] = "
<script> <script>
document.addEventListener('DOMContentLoaded', function() {
var actionButton = document.querySelector('.action-button');
var dropdownMenu = document.getElementById('action-dropdown');
function toggleDropdown(event) {
event.preventDefault();
var isDisplayed = dropdownMenu.style.display === 'block';
dropdownMenu.style.display = isDisplayed ? 'none' : 'block';
}
actionButton.addEventListener('click', toggleDropdown);
document.addEventListener('click', function(event) {
if (!dropdownMenu.contains(event.target) && !actionButton.contains(event.target)) {
dropdownMenu.style.display = 'none';
}
});
});
function submit_form(obj) { function submit_form(obj) {
document.question_pool.submit(); document.question_pool.submit();
} }
@ -715,32 +733,30 @@ $pagination->setTotalItemCount($nbrQuestions);
$pagination->setItemNumberPerPage($length); $pagination->setItemNumberPerPage($length);
$pagination->setCurrentPageNumber($page); $pagination->setCurrentPageNumber($page);
$pagination->renderer = function ($data) use ($url) { $pagination->renderer = function ($data) use ($url) {
$render = '<nav aria-label="Page navigation" style="display: flex; justify-content: center;">'; $render = '<nav aria-label="Page navigation" class="question-pool-pagination-nav">';
$render .= '<ul class="pagination">'; $render .= '<ul class="pagination">';
if ($data['current'] > 1) { $link = function($page, $text, $label, $isActive = false) use ($url) {
$render .= '<li class="page-item"><a class="page-link" href="'.$url.'&page=1" aria-label="First"><span aria-hidden="true">&laquo;&laquo;</span></a></li>'; $activeClass = $isActive ? ' active' : '';
} return '<li class="page-item'.$activeClass.'"><a class="page-link" href="'.$url.'&page='.$page.'" aria-label="'.$label.'">'.$text.'</a></li>';
};
if ($data['current'] > 1) { if ($data['current'] > 1) {
$render .= $link(1, '&laquo;&laquo;', 'First');
$prevPage = $data['current'] - 1; $prevPage = $data['current'] - 1;
$render .= '<li class="page-item"><a class="page-link" href="'.$url.'&page='.$prevPage.'" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>'; $render .= $link($prevPage, '&laquo;', 'Previous');
} }
$startPage = max(1, $data['current'] - 2); $startPage = max(1, $data['current'] - 2);
$endPage = min($data['pageCount'], $data['current'] + 2); $endPage = min($data['pageCount'], $data['current'] + 2);
for ($i = $startPage; $i <= $endPage; $i++) { for ($i = $startPage; $i <= $endPage; $i++) {
$isActive = $data['current'] == $i ? ' active' : ''; $render .= $link($i, $i, 'Page '.$i, $data['current'] == $i);
$render .= '<li class="page-item'.$isActive.'"><a class="page-link" href="'.$url.'&page='.$i.'">'.$i.'</a></li>';
} }
if ($data['current'] < $data['pageCount']) { if ($data['current'] < $data['pageCount']) {
$nextPage = $data['current'] + 1; $nextPage = $data['current'] + 1;
$render .= '<li class="page-item"><a class="page-link" href="'.$url.'&page='.$nextPage.'" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>'; $render .= $link($nextPage, '&raquo;', 'Next');
} $render .= $link($data['pageCount'], '&raquo;&raquo;', 'Last');
if ($data['current'] < $data['pageCount']) {
$render .= '<li class="page-item"><a class="page-link" href="'.$url.'&page='.$data['pageCount'].'" aria-label="Last"><span aria-hidden="true">&raquo;&raquo;</span></a></li>';
} }
$render .= '</ul></nav>'; $render .= '</ul></nav>';
@ -914,21 +930,29 @@ echo '<input type="hidden" name="action">';
$table = new HTML_Table(['class' => 'table table-hover table-striped table-bordered data_table'], false); $table = new HTML_Table(['class' => 'table table-hover table-striped table-bordered data_table'], false);
$row = 0; $row = 0;
$column = 0; $column = 0;
$widths = ['10px', '250px', '50px', '200px', '50px', '100px'];
foreach ($headers as $header) { foreach ($headers as $header) {
$table->setHeaderContents($row, $column, $header); $table->setHeaderContents($row, $column, $header);
$width = array_key_exists($column, $widths) ? $widths[$column] : 'auto';
$table->setCellAttributes($row, $column, ['style' => "width:$width;"]);
$column++; $column++;
} }
$alignments = ['center', 'left', 'center', 'left', 'center', 'center'];
$row = 1; $row = 1;
foreach ($data as $rows) { foreach ($data as $rowData) {
$column = 0; $column = 0;
foreach ($rows as $value) { foreach ($rowData as $value) {
$table->setCellContents($row, $column, $value); $table->setCellContents($row, $column, $value);
$table->updateCellAttributes( if (array_key_exists($column, $alignments)) {
$row, $alignment = $alignments[$column];
$column, $table->setCellAttributes(
$value $row,
); $column,
['style' => "text-align:{$alignment};"]
);
}
$column++; $column++;
} }
$row++; $row++;
@ -936,7 +960,7 @@ foreach ($data as $rows) {
$table->display(); $table->display();
echo '</form>'; echo '</form>';
$html = '<div class="btn-toolbar">'; $html = '<div class="btn-toolbar question-pool-table-actions">';
$html .= '<div class="btn-group">'; $html .= '<div class="btn-group">';
$html .= '<a $html .= '<a
class="btn btn--plain" class="btn btn--plain"
@ -950,11 +974,8 @@ $html .= '<a
'.get_lang('Unselect all').'</a> '; '.get_lang('Unselect all').'</a> ';
$html .= '</div>'; $html .= '</div>';
$html .= '<div class="btn-group"> $html .= '<div class="btn-group">
<button class="btn btn--plain" onclick="javascript:return false;">'.get_lang('Actions').'</button> <button class="btn btn--plain action-button">' .get_lang('Actions').'</button>
<button class="btn btn--plain dropdown-toggle" data-toggle="dropdown"> <ul class="dropdown-menu" id="action-dropdown" style="display: none;">';
<span class="caret"></span>
</button>
<ul class="dropdown-menu">';
$actionLabel = get_lang('Re-use a copy inside the current test'); $actionLabel = get_lang('Re-use a copy inside the current test');
$actions = ['clone' => get_lang('Re-use a copy inside the current test')]; $actions = ['clone' => get_lang('Re-use a copy inside the current test')];

Write Preview
Loading…
Cancel
Save