Merge pull request #91 from WisdmLabs/dev40

Merge dev40 into stable40
WisdmLabs · Feb 2, 2024 · b9bc9ac · b9bc9ac
2 parents 4576d3b + 7020577
commit b9bc9ac
Show file tree

Hide file tree

Showing 7 changed files with 147 additions and 49 deletions.
diff --git a/changes.txt b/changes.txt
@@ -1,5 +1,9 @@
 CHANGES LOG
 
+Version 4.1.6
+=============
+Tweak - UI improvement in Course header for teachers information.
+
 Version 4.1.5
 =============
 Tweak - UI improvements:

diff --git a/lang/en/format_remuiformat.php b/lang/en/format_remuiformat.php
@@ -186,3 +186,4 @@
 
 $string['headeroverlayopacity'] = "Change the header overlay opacity";
 $string['headeroverlayopacity_help'] = "The default value is already set to '100'. To adjust opacity, please enter a value between 0 and 100";
+$string['viewalltext'] = 'View all';
diff --git a/lib.php b/lib.php
@@ -822,21 +822,34 @@ function format_remuiformat_check_plugin_available($component) {
      * Get Enrolled Teachers Context
      */
 function get_enrolled_teachers_context_formate($courseid = null, $frontlineteacher = false) {
-    global $OUTPUT;
+    global $OUTPUT, $CFG;
     $coursecontext = \context_course::instance($courseid);
     $teachers = get_enrolled_users($coursecontext, 'mod/folder:managefiles', 0, '*', 'firstname');
+    $roles =   new stdClass();
+
+    $allroles = get_all_roles();
+    foreach($allroles as $singlerole){
+        if($singlerole->shortname == 'editingteacher'){
+            $roles = $singlerole;
+            break;
+        }
+    }
+    if(!isset($roles)){
+        $roles->id = "";
+    }
 
     $context = array();
 
     if ($teachers) {
-        $namescount = 2;
+        $namescount = 4;
         $profilecount = 0;
-
         foreach ($teachers as $key => $teacher) {
             if ($frontlineteacher && $profilecount < $namescount) {
                 $instructor = array();
+                $instructor['id'] = $teacher->id;
                 $instructor['name'] = fullname($teacher, true);
-                $instructor['avatars'][] = $OUTPUT->user_picture($teacher);
+                $instructor['avatars'] = $OUTPUT->user_picture($teacher);
+                $instructor['teacherprofileurl'] = $CFG->wwwroot.'/user/profile.php?id='.$teacher->id;
                 if ($profilecount != 0) {
                     $instructor['hasanother'] = true;
                 }
@@ -847,6 +860,7 @@ function get_enrolled_teachers_context_formate($courseid = null, $frontlineteach
         if ($profilecount > $namescount) {
             $context['teachercount'] = $profilecount - $namescount;
         }
+        $context['participantspageurl'] = $CFG->wwwroot.'/user/index.php?id='.$courseid.'&roleid='.$roles->id;
         $context['hasteachers'] = true;
     }
     return $context;

diff --git a/scss/styles.scss b/scss/styles.scss
@@ -69,30 +69,31 @@ body#page-course-view-remuiformat {
             flex-direction: row;
             justify-content: space-between;
             align-items: center;
-            gap: $gap-24;
-            flex-wrap: wrap;
+            gap: $gap-32 $gap-24;
+            // flex-wrap: wrap;
 
             @media (max-width:1200px) {
-                align-items: unset;
-                justify-content: space-between;
+                // align-items: unset;
+                // justify-content: space-between;
             }
 
             @media (max-width:$sm-screen-bp) {
                 // align-items: unset;
                 flex-direction: column;
-                gap: 32px;
+                // gap: 32px;
                 // justify-content: space-between;
             }
 
             .rating-instructor-wrapper {
                 display: flex;
-                gap: $gap-24;
+                gap: $gap-12 $gap-24;
                 flex-wrap: wrap;
+                align-items: center;
 
                 @media (max-width:1200px) {
-                    gap: $gap-24;
-                    flex-direction: column;
-                    justify-content: space-between;
+                    // gap: $gap-24;
+                    // flex-direction: column;
+                    // justify-content: space-between;
                 }
 
                 @media (max-width:$sm-screen-bp) {
@@ -123,33 +124,68 @@ body#page-course-view-remuiformat {
                     }
                 }
 
+                .stat-container {
+                    display: flex;
+                    align-items: center;
+                    flex-wrap: wrap;
+                    gap: 8px 16px;
+                }
+
                 .instructor-info {
                     color: $white;
 
                     .stat {
-                        @include frmt-font-styling(14px,22px,400);
+                        @include frmt-font-styling(14px,22px,600);
                         color: #313848;
                         padding: $pad-4;
                         border-radius: $border-radius-4;
                         background-color: #fff;
                     }
+
+                    .userpicture,
+                    .userinitials {
+                        width: 24px;
+                        height: 24px;
+                        border: unset;
+                    }
+
+                    .userinitials {
+                        font-size: 12px;
+                    }
+
+                    .view-user-profile-link {
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 100%;
+                    }
+
+                    .titles {
+                        @include frmt-font-styling(14px,22px,400);
+                        color: $white;
+                    }
+                    .view-all-instructorslink {
+                        @include frmt-font-styling(14px,22px,600);
+                        color: $white;
+                    }
                 }
             }
 
             .progress-resume-wrapper {
                 display: flex;
                 align-items: center;
-                gap: 40px;
+                gap: $gap-24 $gap-40;
 
                 @media (max-width:1200px) {
-                    gap: $gap-24;
                     flex-direction: column;
                 }
 
                 @media (max-width: $sm-screen-bp) {
                     gap: $gap-16;
                     flex-wrap: wrap;
                     align-items: flex-start;
+                    width: 100%;
                 }
 
                 .progressbar-text-wrapper {
@@ -976,4 +1012,14 @@ body#page-course-view-remuiformat {
             }
         }
     }
+
+    &.limitedwidth  {
+        header.hasbackground.design-1 {
+            .header-sub-section {
+                .progress-resume-wrapper {
+                    flex-direction: column;
+                }
+            }
+        }
+    }
 }
diff --git a/styles.css b/styles.css
@@ -1468,36 +1468,20 @@ body#page-course-view-remuiformat header.hasbackground.design-1 .header-sub-sect
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  gap: 24px;
-  flex-wrap: wrap;
-}
-
-@media (max-width: 1200px) {
-  body#page-course-view-remuiformat header.hasbackground.design-1 .header-sub-section {
-    align-items: unset;
-    justify-content: space-between;
-  }
+  gap: 32px 24px;
 }
 
 @media (max-width: 568px) {
   body#page-course-view-remuiformat header.hasbackground.design-1 .header-sub-section {
     flex-direction: column;
-    gap: 32px;
   }
 }
 
 body#page-course-view-remuiformat header.hasbackground.design-1 .header-sub-section .rating-instructor-wrapper {
   display: flex;
-  gap: 24px;
+  gap: 12px 24px;
   flex-wrap: wrap;
-}
-
-@media (max-width: 1200px) {
-  body#page-course-view-remuiformat header.hasbackground.design-1 .header-sub-section .rating-instructor-wrapper {
-    gap: 24px;
-    flex-direction: column;
-    justify-content: space-between;
-  }
+  align-items: center;
 }
 
 @media (max-width: 568px) {
@@ -1510,6 +1494,11 @@ body#page-course-view-remuiformat header.hasbackground.design-1 .header-sub-sect
   color: #fff;
 }
 
+body#page-course-view-remuiformat header.hasbackground.design-1 .header-sub-section .rating-instructor-wrapper .edw-ratings-wrapper .inner {
+  flex-direction: row-reverse;
+  gap: 8px;
+}
+
 body#page-course-view-remuiformat header.hasbackground.design-1 .header-sub-section .rating-instructor-wrapper .edw-ratings-wrapper .avgrating {
   order: 2;
   margin-left: 4px;
@@ -1525,29 +1514,68 @@ body#page-course-view-remuiformat header.hasbackground.design-1 .header-sub-sect
   color: #fff;
 }
 
+body#page-course-view-remuiformat header.hasbackground.design-1 .header-sub-section .rating-instructor-wrapper .stat-container {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+}
+
 body#page-course-view-remuiformat header.hasbackground.design-1 .header-sub-section .rating-instructor-wrapper .instructor-info {
   color: #fff;
 }
 
 body#page-course-view-remuiformat header.hasbackground.design-1 .header-sub-section .rating-instructor-wrapper .instructor-info .stat {
   font-size: 14px;
   line-height: 22px;
-  font-weight: 400;
+  font-weight: 600;
   color: #313848;
   padding: 4px;
   border-radius: 4px;
   background-color: #fff;
 }
 
+body#page-course-view-remuiformat header.hasbackground.design-1 .header-sub-section .rating-instructor-wrapper .instructor-info .userpicture,
+body#page-course-view-remuiformat header.hasbackground.design-1 .header-sub-section .rating-instructor-wrapper .instructor-info .userinitials {
+  width: 24px;
+  height: 24px;
+  border: unset;
+}
+
+body#page-course-view-remuiformat header.hasbackground.design-1 .header-sub-section .rating-instructor-wrapper .instructor-info .userinitials {
+  font-size: 12px;
+}
+
+body#page-course-view-remuiformat header.hasbackground.design-1 .header-sub-section .rating-instructor-wrapper .instructor-info .view-user-profile-link {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+body#page-course-view-remuiformat header.hasbackground.design-1 .header-sub-section .rating-instructor-wrapper .instructor-info .titles {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 400;
+  color: #fff;
+}
+
+body#page-course-view-remuiformat header.hasbackground.design-1 .header-sub-section .rating-instructor-wrapper .instructor-info .view-all-instructorslink {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 600;
+  color: #fff;
+}
+
 body#page-course-view-remuiformat header.hasbackground.design-1 .header-sub-section .progress-resume-wrapper {
   display: flex;
   align-items: center;
-  gap: 40px;
+  gap: 24px 40px;
 }
 
 @media (max-width: 1200px) {
   body#page-course-view-remuiformat header.hasbackground.design-1 .header-sub-section .progress-resume-wrapper {
-    gap: 24px;
     flex-direction: column;
   }
 }
@@ -1557,6 +1585,7 @@ body#page-course-view-remuiformat header.hasbackground.design-1 .header-sub-sect
     gap: 16px;
     flex-wrap: wrap;
     align-items: flex-start;
+    width: 100%;
   }
 }
 
@@ -2363,3 +2392,7 @@ body#page-course-view-remuiformat .availabilityinfo.isrestricted .showmore-conta
 body#page-course-view-remuiformat .availabilityinfo.isrestricted ul {
   padding-left: 1rem !important;
 }
+
+body#page-course-view-remuiformat.limitedwidth header.hasbackground.design-1 .header-sub-section .progress-resume-wrapper {
+  flex-direction: column;
+}
diff --git a/templates/optional_secheader.mustache b/templates/optional_secheader.mustache
@@ -29,16 +29,16 @@
                                 </div>
                                 {{/rnrdesign}}
                                 {{#teachers}}
-                                <div class="instructor-info stat-container">
-                                    <span class="titles h-semibold-6">
-                                        {{#instructors}}{{!
-                                        }}{{#hasanother}},&nbsp;{{/hasanother}}{{name}}{{!
-                                        }}{{/instructors}}
-                                    </span>
+                                <div class="instructor-info stat-container position-relative">
+                                    {{#instructors}}
+                                    <div class="position-relative">
+                                        <a class="view-user-profile-link" href="{{teacherprofileurl}}" class="" title="{{name}}"></a>
+                                        {{{avatars}}}
+                                        <span class="titles ">{{name}}</span>
+                                    </div>
+                                    {{/instructors}}
                                     {{#teachercount}}
-                                    <span class="stat">
-                                        <b class="count"> +{{teachercount}}</b>
-                                    </span>
+                                        <a class="view-all-instructorslink" href="{{participantspageurl}}" class="">view all</a>
                                     {{/teachercount}}
                                 </div>
                                 {{/teachers}}

diff --git a/version.php b/version.php
@@ -23,8 +23,8 @@
 
 defined('MOODLE_INTERNAL') || die();
 
-$plugin->version   = 2024011000;                    // The current plugin version (Date: YYYYMMDDXX).
-$plugin->release   = '4.1.5';
+$plugin->version   = 2024020200;                    // The current plugin version (Date: YYYYMMDDXX).
+$plugin->release   = '4.1.6';
 $plugin->requires  = 2022041900;                    // Requires this Moodle version (Moodle V4.0).
 $plugin->maturity  = MATURITY_STABLE;
 $plugin->component = 'format_remuiformat';          // Full name of the plugin (used for diagnostics).