fix: suffix message for course card instructor

school/lms/widgets/CourseCard.html

@@ -37,22 +37,24 @@
   <div class="zindex course-card-footer">
     <span class="">
       {% set instructors = get_instructors(course.name) %}
+      {% set ins_len = instructors | length %}
       {% for instructor in instructors %}
-      {% if instructors | length > 1 and loop.index == 1 %}
+      {% if ins_len > 1 and loop.index == 1 %}
       <div class="avatar-group overlap">
       {% endif %}
       {{ widgets.Avatar(member=instructor, avatar_class="avatar-small") }}
 
-      {% if instructors | length > 1 and loop.index == instructors | length %}
+      {% if ins_len > 1 and loop.index == ins_len %}
       </div>
       {% endif %}
       {% endfor %}
       <a class="button-links" href="{{ get_profile_url(instructors[0].username) }}">
         <span class="course-instructor">
-        {% if instructors | length == 1 %}
+        {% if ins_len == 1 %}
           {{ instructors[0].full_name }}
         {% else %}
-          {{ instructors[0].full_name.split(" ")[0] }} and {{ instructors | length - 1 }} others
+          {% set suffix = "other" if ins_len - 1 == 1 else "others"  %}
+          {{ instructors[0].full_name.split(" ")[0] }} and {{ ins_len - 1 }} {{ suffix }}
         {% endif %}
         </span>
       </a>

school/public/css/style.css

@@ -9,7 +9,7 @@
   --text-2xl: 20px;
   --text-3xl: 22px;
   --text-4xl: 44px;
-  --navbar-shadow: 0px 1px 8px rgba(0, 0, 0, 0.08)
+  --navbar-shadow: 0px 1px 8px rgba(0, 0, 0, 0.08);
   --gray-750: #505A62;
 }
 
@@ -107,6 +107,7 @@ input[type=checkbox] {
 .course-card-meta {
   margin: 0.75rem 0 0.5rem;
   font-size: 14px;
+  color: var(--gray-600);
 }
 
 .course-card-meta-2 {
@@ -157,6 +158,7 @@ input[type=checkbox] {
 .course-instructor {
   margin-left: 0.625rem;
   font-size: 0.875rem;
+  color: var(--gray-750);
 }
 
 .course-student-count {

school/public/icons/rating.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" stroke="#192734" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00001 1.33331L10.06 5.50665L14.6667 6.17998L11.3333 9.42665L12.12 14.0133L8.00001 11.8466L3.88001 14.0133L4.66668 9.42665L1.33334 6.17998L5.94001 5.50665L8.00001 1.33331Z" stroke="#687178" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

school/public/icons/user.svg

@@ -1,4 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="#192734" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="#192734" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.3333 14V12.6667C13.3333 11.9594 13.0524 11.2811 12.5523 10.781C12.0522 10.281 11.3739 10 10.6667 10H5.33332C4.62608 10 3.9478 10.281 3.4477 10.781C2.94761 11.2811 2.66666 11.9594 2.66666 12.6667V14" stroke="#687178" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.00001 7.33333C9.47277 7.33333 10.6667 6.13943 10.6667 4.66667C10.6667 3.19391 9.47277 2 8.00001 2C6.52725 2 5.33334 3.19391 5.33334 4.66667C5.33334 6.13943 6.52725 7.33333 8.00001 7.33333Z" stroke="#687178" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>