ui/ux improvements

templates/internal/before-signing-the-lease.php

@@ -107,12 +107,12 @@ $firstTimeRentIssues = [
             ?>
 
               <li class="accordion issues-columns">
-                <div class="flex px-2 rounded-md justify-between">
-                  <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
-                    <p><?php echo $issue['issue'] ?></p>
+                <div class="relative flex px-2 rounded-md justify-between">
+                  <div class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
+                    <p class="pr-4"><?php echo $issue['issue'] ?></p>
                   </div>
 
-                  <button class="accordion-toggle">
+                  <button class="accordion-toggle absolute inset-0 flex w-full h-full">
                     <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                     <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
                   </button>
@@ -120,7 +120,7 @@ $firstTimeRentIssues = [
                 </div>
                 <div class="accordion-content space-y-4">
 
-                  <!-- Issue Content  -->
+                  <!-- Leasing Issue   -->
                   <div>
                     <ul class="<?php
                                 if (count($issue['content']) > 1) {

templates/internal/budgeting-your-money.php

@@ -36,13 +36,13 @@
       <!-- Links -->
       <div class="accordion bg-cadet-500 my-2">
 
-        <div class="flex px-2 rounded-md justify-between">
+        <div class="relative flex px-2 rounded-md justify-between">
 
           <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
             <p class="font-bold">Quick Links</p>
           </div>
 
-          <button class="accordion-toggle">
+          <button class="accordion-toggle absolute inset-0 flex w-full h-full">
             <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
             <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
           </button>
@@ -78,13 +78,13 @@
       <!-- Links -->
       <div class="accordion bg-cadet-500 my-2">
 
-        <div class="flex px-2 rounded-md justify-between">
+        <div class="relative flex px-2 rounded-md justify-between">
 
           <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
             <p class="font-bold">Quick Links</p>
           </div>
 
-          <button class="accordion-toggle">
+          <button class="accordion-toggle absolute inset-0 flex w-full h-full">
             <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
             <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
           </button>

templates/internal/education-level-differences.php

@@ -137,13 +137,13 @@ $educationLevelDifferences = [
 
             <li class="accordion differences-columns">
 
-              <div class="flex px-2 rounded-md justify-between">
+              <div class="relative flex px-2 rounded-md justify-between">
 
-                <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
-                  <p><?php echo $difference['title'] ?></p>
+                <div class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
+                  <p class="pr-4"><?php echo $difference['title'] ?></p>
                 </div>
 
-                <button class="accordion-toggle">
+                <button class="accordion-toggle absolute inset-0 flex w-full h-full">
                   <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                   <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
                 </button>

templates/internal/gender-identity-and-sexual-orientation.php

@@ -91,12 +91,12 @@ $genderIdentities = [
               ?>
 
                 <li class="accordion terms-columns">
-                  <div class="flex px-2 rounded-md justify-between">
+                  <div class="relative flex px-2 rounded-md justify-between">
                     <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
-                      <p class="font-bold"><?php echo $term['title'] ?></p>
+                      <p class="font-bold pr-4"><?php echo $term['title'] ?></p>
                     </div>
 
-                    <button class="accordion-toggle">
+                    <button class="accordion-toggle absolute inset-0 flex w-full h-full">
                       <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                       <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
                     </button>
@@ -155,12 +155,12 @@ $genderIdentities = [
               ?>
 
                 <li class="accordion identity-columns">
-                  <div class="flex px-2 rounded-md justify-between">
+                  <div class="relative flex px-2 rounded-md justify-between">
                     <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
-                      <p class="font-bold"><?php echo $identity['title'] ?></p>
+                      <p class="font-bold pr-4"><?php echo $identity['title'] ?></p>
                     </div>
 
-                    <button class="accordion-toggle">
+                    <button class="accordion-toggle absolute inset-0 flex w-full h-full">
                       <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                       <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
                     </button>
@@ -168,7 +168,7 @@ $genderIdentities = [
                   </div>
                   <div class="accordion-content space-y-4">
 
-                    <!-- Identity Content  -->
+                    <!-- Gender Identity Info  -->
                     <div>
                       <ul class="<?php
                                   if (count($identity['content']) > 1) {

templates/internal/grants-bursaries-and-loans.php

@@ -60,12 +60,12 @@ $studentFinancialTerms = [
               ?>
 
                 <li class="accordion terms-columns">
-                  <div class="flex px-2 rounded-md justify-between">
+                  <div class="relative flex px-2 rounded-md justify-between">
                     <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
-                      <p><?php echo $term['title'] ?></p>
+                      <p class="pr-4"><?php echo $term['title'] ?></p>
                     </div>
 
-                    <button class="accordion-toggle">
+                    <button class="accordion-toggle absolute inset-0 flex w-full h-full">
                       <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                       <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
                     </button>
@@ -73,7 +73,7 @@ $studentFinancialTerms = [
                   </div>
                   <div class="accordion-content space-y-4">
 
-                    <!-- Term Content  -->
+                    <!-- Grants and Bursaries Terms  -->
                     <div>
                       <ul class="<?php
                                   if (count($term['content']) > 1) {

templates/internal/living-in-balance.php

@@ -97,12 +97,12 @@ $statesOfWellness = [
               ?>
 
                 <li class="accordion bg-<?= $state['color']['bg'] ?> text-<?= $state['color']['text'] ?>">
-                  <div class="flex px-2 rounded-md justify-between">
+                  <div class="relative flex px-2 rounded-md justify-between">
                     <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
                       <p><?php echo $state['title'] ?></p>
                     </div>
 
-                    <button class="accordion-toggle">
+                    <button class="accordion-toggle absolute inset-0 flex w-full h-full">
                       <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                       <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
                     </button>
@@ -110,7 +110,7 @@ $statesOfWellness = [
                   </div>
                   <div class="accordion-content space-y-4">
 
-                    <!-- State Content  -->
+                    <!-- States Of Balance Information  -->
                     <div>
                       <ul class="px-4 <?php
                                       if (count($state['content']) > 1) {

templates/internal/managing-stress.php

@@ -35,12 +35,12 @@
       <a class="font-medium underline" href="https://www.stressstrategies.ca/">(www.stressstrategies.ca/)</a>
       <!-- Links -->
       <div class="accordion bg-red-500 text-white my-2">
-        <div class="flex px-2 rounded-md justify-between">
+        <div class="relative flex px-2 rounded-md justify-between">
           <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
             <p class="font-bold">Quick Links</p>
           </div>
 
-          <button class="accordion-toggle">
+          <button class="accordion-toggle absolute inset-0 flex w-full h-full">
             <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
             <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
           </button>

templates/internal/nan-tribal-councils.php

@@ -195,10 +195,10 @@ $tribalCouncils = [
         <!-- Contact Information -->
         <?php if ($tribalCouncil['contact']) : ?>
           <div class="accordion bg-red-500 text-white my-2">
-            <div class="flex px-2 rounded-md justify-between">
+            <div class="relative flex px-2 rounded-md justify-between">
               <p class="gap-x-3 rounded-md p-2 text-sm leading-6 flex items-center align-middle font-bold">Contact Information</p>
 
-              <button class="accordion-toggle">
+              <button class="accordion-toggle absolute inset-0 flex w-full h-full">
                 <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                 <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
               </button>
@@ -232,10 +232,10 @@ $tribalCouncils = [
 
         <!-- Tribal Councils -->
         <div class="accordion bg-green-900 text-white my-2">
-          <div class="flex px-2 rounded-md justify-between">
+          <div class="relative flex px-2 rounded-md justify-between">
             <p class="gap-x-3 rounded-md p-2 text-sm leading-6 flex items-center align-middle font-bold">Tribal Councils</p>
 
-            <button class="accordion-toggle">
+            <button class="accordion-toggle absolute inset-0 flex w-full h-full">
               <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
               <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
             </button>

templates/internal/off-campus-housing.php

@@ -108,12 +108,12 @@ $rentProsCons = [
 
                 <!-- Pros Loop -->
                 <li class="accordion comparisons-columns">
-                  <div class="flex px-2 rounded-md justify-between">
+                  <div class="relative flex px-2 rounded-md justify-between">
                     <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
                       <p>Pros</p>
                     </div>
 
-                    <button class="accordion-toggle">
+                    <button class="accordion-toggle absolute inset-0 flex w-full h-full">
                       <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                       <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
                     </button>
@@ -136,12 +136,12 @@ $rentProsCons = [
 
                 <!-- Cons Loop -->
                 <li class="accordion comparisons-columns">
-                  <div class="flex px-2 rounded-md justify-between">
+                  <div class="relative flex px-2 rounded-md justify-between">
                     <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
                       <p>Cons</p>
                     </div>
 
-                    <button class="accordion-toggle">
+                    <button class="accordion-toggle absolute inset-0 flex w-full h-full">
                       <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                       <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
                     </button>

templates/internal/online-learning-and-remote-work.php

@@ -160,12 +160,12 @@ $onlineLearningTips = [
             ?>
 
               <li class="accordion tips-columns">
-                <div class="flex px-2 rounded-md justify-between">
+                <div class="relative flex px-2 rounded-md justify-between">
                   <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
                     <p><?php echo $tip['title'] ?></p>
                   </div>
 
-                  <button class="accordion-toggle">
+                  <button class="accordion-toggle absolute inset-0 flex w-full h-full">
                     <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                     <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
                   </button>

templates/internal/ontario-native-education-counseling-associations.php

@@ -67,12 +67,12 @@ $onecaLinks = [
               ?>
 
                 <li class="accordion oneca-links-columns">
-                  <div class="flex px-2 rounded-md justify-between">
+                  <div class="relative flex px-2 rounded-md justify-between">
                     <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
-                      <p><?php echo $onecaLink['title'] ?></p>
+                      <p class="pr-4"><?php echo $onecaLink['title'] ?></p>
                     </div>
 
-                    <button class="accordion-toggle">
+                    <button class="accordion-toggle absolute inset-0 flex w-full h-full">
                       <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                       <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
                     </button>
@@ -80,7 +80,7 @@ $onecaLinks = [
                   </div>
                   <div class="accordion-content space-y-4">
 
-                    <!-- OnecaLink Content  -->
+                    <!-- OnecaLink  -->
                     <div>
                       <ul class="<?php
                                   if (count($onecaLink['content']) > 1) {

templates/internal/safety.php

@@ -62,12 +62,12 @@ $safetyPrecaution = [
             ?>
 
               <li class="accordion precautions-columns">
-                <div class="flex px-2 rounded-md justify-between">
+                <div class="relative flex px-2 rounded-md justify-between">
                   <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
                     <p><?php echo $precaution['title'] ?></p>
                   </div>
 
-                  <button class="accordion-toggle">
+                  <button class="accordion-toggle absolute inset-0 flex w-full h-full">
                     <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                     <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
                   </button>
@@ -75,7 +75,7 @@ $safetyPrecaution = [
                 </div>
                 <div class="accordion-content space-y-4">
 
-                  <!-- Precaution Content  -->
+                  <!-- Precaution  -->
                   <div>
                     <ul class="<?php
                                 if (count($precaution['content']) > 1) {

templates/internal/strategies-for-success.php

@@ -164,12 +164,12 @@ $strategiesForSuccess = [
             ?>
 
               <li class="accordion differences-columns">
-                <div class="flex px-2 rounded-md justify-between">
+                <div class="relative flex px-2 rounded-md justify-between">
                   <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
-                    <p><?php echo $strategy['title'] ?></p>
+                    <p class="pr-4"><?php echo $strategy['title'] ?></p>
                   </div>
 
-                  <button class="accordion-toggle">
+                  <button class="accordion-toggle absolute inset-0 flex w-full h-full">
                     <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                     <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
                   </button>