Theme: fix tooltips being cut off by other content, fix alignment and…

… spacing issues

modules/Attendance/attendance_future_byPerson.php

@@ -52,7 +52,6 @@
     $attendance = new AttendanceView($gibbon, $pdo, $container->get(SettingGateway::class));
     $attendanceLogGateway = $container->get(AttendanceLogPersonGateway::class);
     $courseEnrolmentGateway = $container->get(CourseEnrolmentGateway::class);
-    $gibbonThemeName = $session->get('gibbonThemeName');
 
     $scope = (isset($_GET['scope']))? $_GET['scope'] : 'single';
 
@@ -237,10 +236,10 @@
 
                 $table->addColumn('date', __('Date'))->format(Format::using('date', 'date'));
                 $table->addColumn('attendance', __('Attendance'))
-                    ->format(function($log) use ($gibbonThemeName) {
+                    ->format(function($log) {
                         $output = '<b>'.__($log['direction']).'</b> ('.__($log['type']). (!empty($log['reason'])? ', '.$log['reason'] : '') .')';
                         if (!empty($log['comment']) ) {
-                            $output .= '&nbsp;<img title="'.$log['comment'].'" src="./themes/'.$gibbonThemeName.'/img/messageWall.png" width=16 height=16/>';
+                            $output .= Format::tooltip(icon('solid', 'chat-bubble-text', 'size-4'), htmlPrep($log['comment']));
                         }
                         return $output;
                     });

modules/Attendance/attendance_take_byPerson.php

@@ -134,12 +134,12 @@
                     });
 
                 $table->addColumn('direction', __('Attendance'))
-                    ->format(function ($log) use ($session) {
+                    ->format(function ($log) {
                         if (empty($log['direction'])) return Format::small(__('Not Taken'));
 
                         $output = '<b>'.__($log['direction']).'</b> ('.__($log['type']). (!empty($log['reason'])? ', '.__($log['reason']) : '') .')';
                         if (!empty($log['comment'])) {
-                            $output .= '&nbsp;<img title="'.$log['comment'].'" src="./themes/'.$session->get('gibbonThemeName').'/img/messageWall.png" width=16 height=16/>';
+                            $output .= Format::tooltip(icon('solid', 'chat-bubble-text', 'size-4'), htmlPrep($log['comment']));
                         }
 
                         return $output;

modules/Data Updater/data_family_manage_edit.php

@@ -85,7 +85,7 @@
 			$form->addHiddenValue('address', $session->get('address'));
 			$form->addHiddenValue('gibbonFamilyID', $oldValues['gibbonFamilyID']);
 
-			$row = $form->addRow()->setClass('head heading');
+			$row = $form->addRow()->setClass('head bg-gray-200');
 				$row->addContent(__('Field'));
 				$row->addContent(__('Current Value'));
 				$row->addContent(__('New Value'));

modules/Data Updater/data_finance_manage_edit.php

@@ -92,7 +92,7 @@
             $form->addHiddenValue('address', $session->get('address'));
             $form->addHiddenValue('gibbonFinanceInvoiceeID', $oldValues['gibbonFinanceInvoiceeID']);
 
-            $row = $form->addRow()->setClass('head heading');
+            $row = $form->addRow()->setClass('head bg-gray-200');
                 $row->addContent(__('Field'));
                 $row->addContent(__('Current Value'));
                 $row->addContent(__('New Value'));

modules/Data Updater/data_medical_manage_edit.php

@@ -111,7 +111,7 @@
             $form->addHiddenValue('gibbonPersonID', $newValues['gibbonPersonID']);
             $form->addHiddenValue('formExists', !empty($oldValues['gibbonPersonMedicalID']));
 
-            $row = $form->addRow()->setClass('head heading');
+            $row = $form->addRow()->setClass('head bg-gray-200');
                 $row->addContent(__('Field'));
                 $row->addContent(__('Current Value'));
                 $row->addContent(__('New Value'));

modules/Data Updater/data_personal_manage_edit.php

@@ -165,7 +165,7 @@
             $form->addHiddenValue('address', $session->get('address'));
             $form->addHiddenValue('gibbonPersonID', $oldValues['gibbonPersonID']);
 
-            $row = $form->addRow()->setClass('head heading');
+            $row = $form->addRow()->setClass('head bg-gray-200');
                 $row->addContent(__('Field'));
                 $row->addContent(__('Current Value'));
                 $row->addContent(__('New Value'));

modules/Data Updater/data_staff_manage_edit.php

@@ -103,7 +103,7 @@
             ->displayLabel();    
      }
 
-    $row = $form->addRow()->setClass('head heading');
+    $row = $form->addRow()->setClass('head bg-gray-200');
         $row->addContent(__('Field'));
         $row->addContent(__('Current Value'));
         $row->addContent(__('New Value'));

modules/Markbook/css/module.css

@@ -245,7 +245,7 @@ select[id$="effortValue"] {
 .doublescroll-container tr.head th.firstColumn {
 	position:absolute; 
     width:174px; 
-    height: 170px;
+    height: 130px;
     left:1px;
     top:0;
     padding: 5px 12px 5px !important;

modules/Messenger/groups_manage_edit.php

@@ -84,7 +84,7 @@
             echo '</h2>';
 
             $criteria = $groupGateway->newQueryCriteria(true)
-                ->sortBy(['surname', 'preferredName'])
+                ->sortBy(['roleCategory', 'surname', 'preferredName'])
                 ->fromPOST();
 
             $members = $groupGateway->queryGroupMembers($criteria, $gibbonGroupID);
@@ -95,6 +95,8 @@
                 ->sortable(['surname', 'preferredName'])
                 ->format(Format::using('name', ['', 'preferredName', 'surname', 'Student', true]));
 
+            $table->addColumn('roleCategory', __('Role'))->sortable();
+
             $table->addColumn('email', __('Email'))->sortable();
 
             $table->addActionColumn()

modules/Planner/planner_add.php

@@ -338,11 +338,11 @@
 
             // OUTCOMES
             if ($viewBy == 'date') {
-                $form->addRow()->addHeading('Outcomes', __('Outcomes'))->addClass('advanced');
-                $form->addRow()->addAlert(__('Outcomes cannot be set when viewing the Planner by date. Use the "Choose A Class" dropdown in the sidebar to switch to a class. Make sure to save your changes first.'), 'warning')->addClass('advanced');
+                $form->addRow()->addClass('advanced')->addHeading('Outcomes', __('Outcomes'));
+                $form->addRow()->addClass('advanced')->addAlert(__('Outcomes cannot be set when viewing the Planner by date. Use the "Choose A Class" dropdown in the sidebar to switch to a class. Make sure to save your changes first.'), 'warning');
             } else {
-                $form->addRow()->addHeading('Outcomes', __('Outcomes'))->addClass('advanced');
-                $form->addRow()->addContent(__('Link this lesson to outcomes (defined in the Manage Outcomes section of the Planner), and track which outcomes are being met in which lessons.'))->addClass('advanced');
+                $form->addRow()->addClass('advanced')->addHeading('Outcomes', __('Outcomes'));
+                $form->addRow()->addClass('advanced')->addContent(__('Link this lesson to outcomes (defined in the Manage Outcomes section of the Planner), and track which outcomes are being met in which lessons.'));
 
                 $allowOutcomeEditing = $settingGateway->getSettingByScope('Planner', 'allowOutcomeEditing');
 
@@ -351,7 +351,7 @@
             }
 
             //Access
-            $form->addRow()->addHeading('Access', __('Access'))->addClass('advanced');
+            $form->addRow()->addClass('advanced')->addHeading('Access', __('Access'));
 
             $sharingDefaultStudents = $settingGateway->getSettingByScope('Planner', 'sharingDefaultStudents');
             $row = $form->addRow()->addClass('advanced');
@@ -364,7 +364,7 @@
                 $row->addYesNo('viewableParents')->required()->selected($sharingDefaultParents);
 
             //Guests
-            $form->addRow()->addHeading('Guests', __('Guests'))->addClass('advanced');
+            $form->addRow()->addClass('advanced')->addHeading('Guests', __('Guests'));
 
             $row = $form->addRow()->addClass('advanced');
                 $row->addLabel('guests', __('Guest List'));

modules/System Admin/formBuilder_edit.php

@@ -213,10 +213,10 @@
             });
 
             if (!$form->hasHeading($view->getHeading())) {
-                $form->addRow()->addHeading($view->getHeading(), __($view->getHeading()))->addClass('bg-gray-400');
+                $form->addRow()->addClass('bg-gray-150')->addHeading($view->getHeading(), __($view->getHeading()));
             }
 
-            $row = $form->addRow()->addClass('bg-gray-300');
+            $row = $form->addRow()->addClass('bg-gray-150');
                 $row->addLabel($processName, $view->getName())->description($view->getDescription());
                 $col = $row->addColumn()->addClass('justify-start w-full sm:max-w-lg');
                 $col->addContent(__('Required fields: '))->addClass('w-48');

modules/System Admin/js/module.js

@@ -49,7 +49,7 @@ $(function(){
     $("select.columnOrder").on('change', function(){
 
         var currentSelection = $(this).val();
-        var textBox = $(this).parent().parent().parent().find('input.columnText');
+        var textBox = $(this).parent().parent().find('input.columnText');
 
         textBox.prop("readonly", currentSelection != columnDataCustom );
         textBox.prop("disabled", currentSelection != columnDataCustom );

modules/Timetable/spaceChange_manage_add.php

@@ -164,8 +164,8 @@
                 $row = $form->addRow();
                     $row->addLabel('gibbonSpaceID', __('Facility'));
                     $col = $row->addColumn()->addClass('flex-col');
-                    $col->addSelectSpace('gibbonSpaceID')->addClass('flex-1');
-                    $col->addContent('<br/><div id="facilityStatus"></div>');
+                    $col->addSelectSpace('gibbonSpaceID')->addClass('flex-1 w-full');
+                    $col->addContent('<br/><div id="facilityStatus" class="w-full"></div>');
 
                 $row = $form->addRow();
                     $row->addFooter();

notificationsDeleteAllProcess.php

@@ -23,7 +23,7 @@
 
 include './gibbon.php';
 
-$URL = Url::fromRoute('notifications');
+$URL = Url::fromRoute('notifications')->withQueryParam('sidebar', 'false');
 
 try {
     $data = array('gibbonPersonID' => $session->get('gibbonPersonID'));

notificationsDeleteProcess.php

@@ -23,7 +23,7 @@
 
 include './gibbon.php';
 
-$URL = Url::fromRoute('notifications');
+$URL = Url::fromRoute('notifications')->withQueryParam('sidebar', 'false');
 
 if (!isset($_GET['gibbonNotificationID'])) {
     header("Location: {$URL->withReturn('error1')}");

resources/assets/css/theme.css

@@ -379,7 +379,7 @@ input[type="color"]::-moz-color-swatch {
 
 .error-msg,
 .inline-msg {
-    @apply absolute block w-full left-0 top-10 text-xs font-bold leading-relaxed pointer-events-none whitespace-nowrap;
+    @apply absolute block w-full left-0 top-10 text-xs font-bold leading-6 pointer-events-none whitespace-nowrap;
 }
 
 .error-msg {
@@ -397,6 +397,10 @@ input[type="checkbox"] + .error-msg {
     @apply top-5;
 }
 
+select[multiple] + .error-msg {
+    @apply top-auto -bottom-5;
+}
+
 .tinymce + .error-msg,
 .tox-tinymce + .error-msg  {
     @apply top-auto bottom-0 mb-6 ml-2;

resources/assets/js/core.js

@@ -45,20 +45,22 @@ document.addEventListener('alpine:init', () => {
         }
 
         let tooltipHTML = `
-            <div id="${tooltipId}" x-cloak x-data="{ tooltipVisible: false, tooltipArrow: ${tooltipArrow}, tooltipPosition: '${tooltipPosition}' }" x-ref="tooltip" x-init="setTimeout(function(){ tooltipVisible = true; }, 1);" x-show="tooltipVisible" :class="{ 'top-0 left-1/2 -translate-x-1/2 -mt-1.5 -translate-y-full' : tooltipPosition == 'top', 'top-1/2 -translate-y-1/2 -ml-1.5 left-0 -translate-x-full' : tooltipPosition == 'left', 'bottom-0 left-1/2 -translate-x-1/2 -mb-0.5 translate-y-full' : tooltipPosition == 'bottom', 'top-1/2 -translate-y-1/2 -mr-1.5 right-0 translate-x-full' : tooltipPosition == 'right' }" class="absolute pointer-events-none max-w-sm text-sm font-normal" style="z-index: 100;" >
+            <template x-teleport="body"><div id="${tooltipId}" x-cloak x-data="{ tooltipVisible: false, tooltipArrow: ${tooltipArrow}, tooltipPosition: '${tooltipPosition}' }" x-ref="tooltip" x-init="setTimeout(function(){ tooltipVisible = true; }, 1);" x-show="tooltipVisible" :class="{ 'top-0 left-1/2 -translate-x-1/2 -mt-1.5 -translate-y-full' : tooltipPosition == 'top', 'top-1/2 -translate-y-1/2 -ml-1.5 left-0 -translate-x-full' : tooltipPosition == 'left', 'bottom-0 left-1/2 -translate-x-1/2 -mb-0.5 translate-y-full' : tooltipPosition == 'bottom', 'top-1/2 -translate-y-1/2 -mr-1.5 right-0 translate-x-full' : tooltipPosition == 'right' }" class="absolute pointer-events-none max-w-sm text-sm font-normal" style="z-index: 100;" >
+            
                 <div x-show="tooltipVisible" class="relative px-2 py-1 text-white bg-black bg-opacity-80 backdrop-blur-lg backdrop-contrast-125 backdrop-saturate-150 rounded-md"
                     x-transition:enter="transition delay-75 ease-out duration-200"
                     x-transition:enter-start="opacity-0 scale-50"
                     x-transition:enter-end="opacity-100 scale-100"
                     x-transition:leave="transition ease-in duration-200"
                     x-transition:leave-start="opacity-100 scale-100"
                     x-transition:leave-end="opacity-0 scale-50" >
-                    <p class="flex-shrink-0 block m-0 p-1 text-xs whitespace-nowrap" >${tooltipText}</p>
+                    <p class="flex-shrink-0 block m-0 p-1 text-xs " >${tooltipText}</p>
                     <div x-ref="tooltipArrow" x-show="tooltipArrow" :class="{ 'bottom-0 -translate-x-1/2 left-1/2 w-2.5 translate-y-full' : tooltipPosition == 'top', 'right-0 -translate-y-1/2 top-1/2 h-2.5 -mt-px translate-x-full' : tooltipPosition == 'left', 'top-0 -translate-x-1/2 left-1/2 w-2.5 -translate-y-full' : tooltipPosition == 'bottom', 'left-0 -translate-y-1/2 top-1/2 h-2.5 -mt-px -translate-x-full' : tooltipPosition == 'right' }" class="absolute inline-flex items-center justify-center overflow-hidden">
                         <div :class="{ 'origin-top-left -rotate-45' : tooltipPosition == 'top', 'origin-top-left rotate-45' : tooltipPosition == 'left', 'origin-bottom-left rotate-45' : tooltipPosition == 'bottom', 'origin-top-right -rotate-45' : tooltipPosition == 'right' }" class="w-1.5 h-1.5 transform bg-black bg-opacity-80"></div>
                     </div>
                 </div>
-            </div>
+                
+            </div></template>
         `;
 
         el.dataset.tooltip = tooltipId;
@@ -68,7 +70,17 @@ document.addEventListener('alpine:init', () => {
                 currentTooltip.dispatchEvent(new Event('mouseleave'));
             }
             if (!tooltipActive) {
+                var elPos = el.getBoundingClientRect();
+
                 el.insertAdjacentHTML('beforeend', tooltipHTML);
+                setTimeout(function(){
+                    var tooltip = document.getElementById(tooltipId);
+                    if (tooltip != null) {
+                        tooltip.style.top = (elPos.top + window.scrollY )+"px";
+                        tooltip.style.left = (elPos.left + window.scrollX + (elPos.width/2.0))+"px";
+                    }
+                }, 50);
+
                 tooltipActive = true;
                 currentTooltip = el;
             }

resources/templates/components/form.twig.html

@@ -96,7 +96,7 @@ <h2>{{ form.getTitle }}</h2>
             {% set sectionLoop = loop %}
 
             {% if useSections %}
-            <div class="{{ (rows|first).class|split(' ')|first }} mb-6 rounded bg-gray-50 border  {{ not sectionLoop.last ? 'border-t-4 focus-within:border-t-blue-500 transition' }} {{ section == 'submit' ? 'w-full sm:sticky -bottom-px -mt-px mb-px z-40' : standardLayout ? ' py-2 sm:py-3 ' : ''}}" >
+            <div class="{{ (rows|first).class|split(' ')|first }} mb-6 rounded bg-gray-50 border  {{ not sectionLoop.last ? 'border-t-4 focus-within:border-t-blue-500 transition' }} {{ section == 'submit' ? 'w-full sm:sticky -bottom-px -mt-px mb-px z-40' : standardLayout ? '  ' : ''}}" >
             {% endif %}
 
             {% for num, row in rows %}
@@ -108,7 +108,7 @@ <h2>{{ form.getTitle }}</h2>
                     : 'flex flex-col sm:flex-row  content-center p-0 gap-2 sm:gap-4 justify-between sm:items-start' 
                 %}
 
-                <div id="{{ row.getID }}" class="{{ standardLayout ? ' px-4 sm:px-8 py-4' : smallLayout ? 'px-2 py-2' : "noIntBorder" in form.getClass ? 'py-2' }}  {{ row.getClass|replace({'standardWidth': ''}) }} {{ rowClass }}  " {{ row.getAttributeString('', 'id,class')|raw }}>
+                <div id="{{ row.getID }}" class="{{ standardLayout ? ' px-4 sm:px-8 py-4' : smallLayout ? 'px-2 py-2' : "noIntBorder" in form.getClass ? 'py-2' }} {{ standardLayout and rowLoop.last ? 'pb-8' }} {{ row.getClass|replace({'standardWidth': ''}) }} {{ rowClass }}  " {{ row.getAttributeString('', 'id,class')|raw }}>
 
                 {% if quickSave and section == 'submit' %}
                     <span class="text-xs text-gray-600 flex-1">

resources/templates/components/formTable.twig.html

@@ -24,7 +24,7 @@ <h2>{{ form.getTitle }}</h2>
         <input type="hidden" name="{{ values.name }}" value="{{ values.value }}">
     {% endfor %}
 
-    <table class="{{ form.getClass }} font-sans text-xs text-gray-700 relative overflow-hidden bg-gray-100 rounded border mt-3" cellspacing="0">
+    <table class="{{ form.getClass }} font-sans text-xs text-gray-700 relative overflow-hidden bg-gray-50 rounded border mt-3" cellspacing="0">
 
     {% for row in form.getRows %}
         {% set rowLoop = loop %}
@@ -33,14 +33,6 @@ <h2>{{ form.getTitle }}</h2>
 
         {% for element in row.getElements %}
             {% set colspan = loop.last and loop.length < totalColumns ? (totalColumns + 1 - loop.length) : 0  %}
-
-            {% if element.isInstanceOf('Gibbon\\Forms\\Layout\\Heading') %}
-                {% set class = ' bg-gray-300' %}
-            {% elseif element.isInstanceOf('Gibbon\\Forms\\Layout\\Label') %}
-                {% set class = '-mb-1 sm:mb-0' %}
-            {% elseif loop.last and loop.length == 1 %}
-                {% set class = 'flex-1 relative flex justify-end items-center' %}
-            {% endif %}
 
             <td class="{{ class }} {{ element.getClass|replace({'standardWidth': ''}) }}" {{ colspan ? 'colspan="%s"'|format(colspan)|raw }}>
                 {{ element.getOutput|raw }}

resources/templates/navigation.twig.html

@@ -14,7 +14,7 @@
 
 {% set sidebarClass = 'shadow bg-white rounded px-6 mb-6' %}
 
-{% if sidebar or menuModule %}
+{% if sidebar or menuModule is not empty %}
 <div class="mx-4 sm:mx-0 relative sm:static" x-data="{moduleMenu: false}" @keydown.escape.window="moduleMenu = false" @click.outside="moduleMenu = false" x-init="moduleMenu = false">
 
     {% if menuModule %}

resources/templates/ui/tabs.twig.html

@@ -26,7 +26,7 @@
     <div class="overflow-y-hidden w-full">
         <div x-ref="tabButtons" @keydown.right.prevent="$focus.wrap().next()" @keydown.left.prevent="$focus.wrap().previous()" class="flex flex-wrap justify-start items-end" role="tablist" aria-label="tab options">
             {% for tabID, tab in tabs %}
-            <button :id="$id(tabId)" @click="tabButtonClicked($el);" :aria-selected="tabActive($el)" type="button" :class="tabActive($el) ? 'text-gray-900 border border-gray-400 border-b-white z-10 bg-white shadow' : 'text-gray-800 hover:bg-gray-200 border border-transparent  bg-transparent'" class="inline-flex flex-col sm:flex-row gap-1.5 items-center px-4 sm:px-5 xl:px-6 py-2 -mr-1 sm:-mr-2 font-normal rounded-t-md  " role="tab" tabindex="tabActive($el) ? '0' : '-1'" aria-selected="true">
+            <button :id="$id(tabId)" @click="tabButtonClicked($el);" :aria-selected="tabActive($el)" type="button" :class="tabActive($el) ? 'text-gray-900 border border-gray-400 border-b-white z-10 bg-white shadow' : 'text-gray-800 hover:bg-gray-200 border border-transparent hover:border-b-gray-400 bg-transparent'" class="inline-flex flex-col sm:flex-row gap-1.5 items-center px-4 sm:px-5 xl:px-6 py-2 -mr-1 sm:-mr-2 font-normal rounded-t-md  " role="tab" tabindex="tabActive($el) ? '0' : '-1'" aria-selected="true">
                 {% if icons and tab.icon %}
                     <span x-cloak x-show="tabActive($el.parentElement)" class="inline-flex">
                     {{ icon('solid', tab.icon, 'inline-block size-5  sm:-ml-1 opacity-50') }}