Internal: Exercise question pool UI enhancements and bug fixes

assets/css/scss/_exercise.scss

@@ -72,40 +72,149 @@
   padding: 5px;
 }
 
-.data_table {
-  @apply border-collapse w-full;
-}
+.data_table, .table-striped  {
+  @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;
-}
+  }
 
-.data_table tbody td {
+  tbody td {
     @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;
-}
+  }
 
-.data_table tbody tr:hover {
+  tbody tr:hover {
     background-color: #eff6ff;
-}
+  }
 
-.data_table .checkbox label {
+  .checkbox label {
     @apply pl-4;
-}
+  }
 
-.data_table i.mdi {
+  i.mdi {
     @apply align-middle;
-}
+  }
 
-.data_table .mdi::before {
+  .mdi::before {
     @apply inline-block;
     font-size: inherit;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
     transform: translate(0, 0);
+  }
+}
+
+.question-pool-table-actions {
+  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;
+    }
+  }
+}
+
+.question-pool-pagination-nav {
+  display: flex;
+  justify-content: center;
+  padding: 1rem;
+
+  .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 {

public/main/exercise/question_pool.php

@@ -196,6 +196,24 @@ if (!$is_allowedToEdit) {
 $confirmYourChoice = addslashes(api_htmlentities(get_lang('Please confirm your choice'), ENT_QUOTES));
 $htmlHeadXtra[] = "
 <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) {
         document.question_pool.submit();
     }
@@ -715,32 +733,30 @@ $pagination->setTotalItemCount($nbrQuestions);
 $pagination->setItemNumberPerPage($length);
 $pagination->setCurrentPageNumber($page);
 $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">';
 
-    if ($data['current'] > 1) {
-        $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>';
-    }
+    $link = function($page, $text, $label, $isActive = false) use ($url) {
+        $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) {
+        $render .= $link(1, '&laquo;&laquo;', 'First');
         $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);
     $endPage = min($data['pageCount'], $data['current'] + 2);
     for ($i = $startPage; $i <= $endPage; $i++) {
-        $isActive = $data['current'] == $i ? ' active' : '';
-        $render .= '<li class="page-item'.$isActive.'"><a class="page-link" href="'.$url.'&page='.$i.'">'.$i.'</a></li>';
+        $render .= $link($i, $i, 'Page '.$i, $data['current'] == $i);
     }
 
     if ($data['current'] < $data['pageCount']) {
         $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>';
-    }
-
-    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 .= $link($nextPage, '&raquo;', 'Next');
+        $render .= $link($data['pageCount'], '&raquo;&raquo;', 'Last');
     }
 
     $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);
 $row = 0;
 $column = 0;
+$widths = ['10px', '250px', '50px', '200px', '50px', '100px'];
 foreach ($headers as $header) {
     $table->setHeaderContents($row, $column, $header);
+    $width = array_key_exists($column, $widths) ? $widths[$column] : 'auto';
+    $table->setCellAttributes($row, $column, ['style' => "width:$width;"]);
     $column++;
 }
 
+$alignments = ['center', 'left', 'center', 'left', 'center', 'center'];
 $row = 1;
-foreach ($data as $rows) {
+foreach ($data as $rowData) {
     $column = 0;
-    foreach ($rows as $value) {
+    foreach ($rowData as $value) {
         $table->setCellContents($row, $column, $value);
-        $table->updateCellAttributes(
+        if (array_key_exists($column, $alignments)) {
+            $alignment = $alignments[$column];
+            $table->setCellAttributes(
                 $row,
                 $column,
-            $value
+                ['style' => "text-align:{$alignment};"]
             );
+        }
+
         $column++;
     }
     $row++;
@@ -936,7 +960,7 @@ foreach ($data as $rows) {
 $table->display();
 echo '</form>';
 
-$html = '<div class="btn-toolbar">';
+$html = '<div class="btn-toolbar question-pool-table-actions">';
 $html .= '<div class="btn-group">';
 $html .= '<a
         class="btn btn--plain"
@@ -950,11 +974,8 @@ $html .= '<a
             '.get_lang('Unselect all').'</a> ';
 $html .= '</div>';
 $html .= '<div class="btn-group">
-            <button class="btn btn--plain" onclick="javascript:return false;">'.get_lang('Actions').'</button>
-            <button class="btn btn--plain dropdown-toggle" data-toggle="dropdown">
-                <span class="caret"></span>
-            </button>
-            <ul class="dropdown-menu">';
+            <button class="btn btn--plain action-button">' .get_lang('Actions').'</button>
+            <ul class="dropdown-menu" id="action-dropdown" style="display: none;">';
 
 $actionLabel = get_lang('Re-use a copy inside the current test');
 $actions = ['clone' => get_lang('Re-use a copy inside the current test')];