add icon that indicates when courselist is collapsed and add hover ef…

…fect to show where to show or hide courselist

CHANGELOG.md

@@ -10,8 +10,8 @@ Reviewed version of pull request with some adaptions.
 5. add calender icon in front of duration
 6. add langstring (category hidden) to the plugin instead of using core lang string 
 7. add indicator for roles that are not core roles and add some css for backgroundcolor for non core roles
-7. add backgroundcolor in css for all core roles and also for all non core roles 
-
+8. add backgroundcolor in css for all core roles and also for all non core roles
+9. add icon that indicates when courselist is collapsed and add hover effect to show where to show or hide courselist
 
 [[v1.5.0]] 20240120
 add pullrequest from eLearning-TUDarmstadt

styles.css

@@ -70,10 +70,28 @@
     padding-right: 5px;
 }
 
-.overviewmyrolesincourses-foldonstart {
+.overviewmyrolesincourses-content-fold {
     display: none;
 }
 
+.overviewmyrolesincourses-unfold {
+    cursor: zoom-in;
+}
+.overviewmyrolesincourses-unfold:before {
+    font-family: "FontAwesome";
+    font-weight: 900;
+    content: "\f0da";
+}
+
+.overviewmyrolesincourses-fold {
+    cursor: zoom-out;
+}
+.overviewmyrolesincourses-fold:before {
+    font-family: "FontAwesome";
+    font-weight: 900;
+    content: "\f0d7";
+}
+
 .overviewmyrolesincourses .row.duration {
     margin-left: 0;
 }

templates/overviewmyrolesincourses.mustache

@@ -86,18 +86,31 @@
 <div class="overviewmyrolesincourses">
     <script>
         function myFunction{{roleshortname}}() {
-            var element = document.getElementById("overviewmyrolesincourses-visibility-{{roleshortname}}");
-            element.classList.toggle("overviewmyrolesincourses-foldonstart");
+            // toggle table header
+            var header = document.getElementById("overviewmyrolesincourses-bg-{{roleshortname}}");
+            header.classList.toggle("overviewmyrolesincourses-unfold");
+            header.classList.toggle("overviewmyrolesincourses-fold");
+
+            // toggle table content
+            var content = document.getElementById("overviewmyrolesincourses-visibility-{{roleshortname}}");
+            content.classList.toggle("overviewmyrolesincourses-content-fold");
         }
     </script>
-    <div class="border p-2 overviewmyrolesincourses-bg-{{roleshortname}} {{#iscorerole}}iscorerole{{/iscorerole}} {{^iscorerole}}isnotcorerole{{/iscorerole}}" onclick="myFunction{{roleshortname}}()">
+    <div id="overviewmyrolesincourses-bg-{{roleshortname}}"
+            class="border p-2 overviewmyrolesincourses-bg-{{roleshortname}}
+                {{#foldonstart}}overviewmyrolesincourses-unfold{{/foldonstart}}
+                {{^foldonstart}}overviewmyrolesincourses-fold{{/foldonstart}}
+                {{#iscorerole}}iscorerole{{/iscorerole}}
+                {{^iscorerole}}isnotcorerole{{/iscorerole}}"
+                onclick="myFunction{{roleshortname}}()">
+        <span class="foldstatus"></span>
         <span class="overviewmyrolesincourses-rolelocalname">{{rolelocalname}}</span>
         <span class="overviewmyrolesincourses-separator">:</span>
         <span class="overviewmyrolesincourses-counter">{{counter}}</span>
         <span class="overviewmyrolesincourses-courses">{{courses}}</span>
     </div>
     <div id="overviewmyrolesincourses-visibility-{{roleshortname}}"
-            class="{{#foldonstart}}overviewmyrolesincourses-foldonstart{{/foldonstart}}">
+            class="{{#foldonstart}}overviewmyrolesincourses-content-fold{{/foldonstart}}">
         {{#mylist}}
         <div class="border">
             <div class="{{cssselectordurationstatusofcourse}} {{dimmed}}">