feat: course header wide

community/lms/doctype/chapter/chapter.py

@@ -5,6 +5,7 @@
 from __future__ import unicode_literals
 import frappe
 from frappe.model.document import Document
+from ...utils import slugify
 
 class Chapter(Document):
     def get_lessons(self):
@@ -13,3 +14,6 @@ class Chapter(Document):
             fields='name',
             order_by="index_")
         return [frappe.get_doc('Lesson', row['name']) for row in rows]
+
+    def get_slugified_chapter_title(self):
+        return slugify(self.title)

community/lms/widgets/ChapterTeaser.html

@@ -1,28 +1,42 @@
-<div class="chapter-teaser">
+<div>
-  <div class="teaser-body">
+  <a data-target="#{{ chapter.get_slugified_chapter_title() }}" data-toggle="collapse" aria-expanded="false">
-    <div class="chapter-title mb-5 font-weight-bold"><span class="mr-1">{{index}}.</span> {{ chapter.title }}</div>
+    <img class="" src="/assets/community/icons/side-arrow.svg"/>
-    <div class="chapter-description">
+    <span class="chapter-title">
-      {{ chapter.description or "" }}
+      {{ chapter.title }}
+    </span>
+  </a>
+  <div class="chapter-content collapse navbar-collapse" id="{{ chapter.get_slugified_chapter_title() }}">
+    <div class="course-card-meta">
+      {{ chapter.description }}
     </div>
-    <div class="chapter-lessons">
+    <div class="lessons">
       {% for lesson in chapter.get_lessons() %}
-      <div class="lesson-teaser">
+        <div class="lesson-info">
           {% if show_link or lesson.include_in_preview %}
-        <a class="" href="{{ course.get_learn_url(course.get_lesson_index(lesson.name)) }}{{course.query_parameter}}"
+            <a class="" href="{{ course.get_learn_url(course.get_lesson_index(lesson.name)) }}{{course.query_parameter}}" data-course="{{ course.name }}">
-          data-course="{{ course.name }}">{{ lesson.title }}</a>
+              {{ loop.index }}.
+              {{ lesson.title }}</a>
           {% else %}
-        <div class="no-preview" title="This lesson is not available for preview">
+            <div title="This lesson is not available for preview">
-          <span style="color: #2490ef;">
+              <span class="">
+                {{ loop.index }}.
                 {{ lesson.title }}
               </span>
               <i class="fa fa-lock ml-2"></i>
             </div>
           {% endif %}
-        {% if show_progress and not course.is_mentor(frappe.session.user) and lesson.get_progress() %}
-        <span class="ml-5 badge p-2 {{ lesson.get_slugified_class() }}"> {{ lesson.get_progress() }}</span>
-        {% endif %}
         </div>
       {% endfor %}
     </div>
   </div>
 </div>
+<script>
+  frappe.ready(() => {
+    var elements = $(".collapse")
+    elements.each((i, elem) => {
+      if (i <= 5) {
+        $(elem).addClass("show")
+      }
+    })
+  })
+</script>

community/lms/widgets/CourseOutline.html

@@ -1,7 +1,10 @@
-<div class="mt-5">
+<div class="">
-  <h3> Course Outline </h3>
+  <h3>
-
+    Course Outline
+  </h3>
+  <div class="coure-outline">
     {% for chapter in course.get_chapters() %}
       {{ widgets.ChapterTeaser(index=loop.index, chapter=chapter, course=course, batch=batch, show_link=show_link, show_progress=show_progress)}}
     {% endfor %}
+  </div>
 </div>

community/public/css/style.css

@@ -1,4 +1,3 @@
-
 :root {
     --c1: #fefae0;
     --c2: #264653;
@@ -8,18 +7,14 @@
     --c6: #e76f51;
     --c7: #ccd5ae;
     --c8: #EEEEEE;
-
     --bg: var(--c1);
     --header-bg: var(--c2);
     --header-color: var(--c3);
     --tag-color: var(--c7);
     --sidebar-bg: var(--c7);
-
     --h-color: var(--c2);
-
     --text-color: #192734;
     --text-color-light: #ccc;
-
     --cta-color: var(--c4);
     --send-message: var(--c7);
     --received-message: var(--c8);
@@ -47,14 +42,6 @@ body {
     font-weight: bold;
 }
 
-.lessons {
-  padding-left: 20px;
-}
-.lessons .lesson {
-  margin: 5px 0px;
-  font-weight: bold;
-}
-
 .batch {
     border-radius: 10px;
     margin: 10px 0px;
@@ -111,12 +98,14 @@ img.profile-photo {
     background: #eee;
     z-index: 1;
 }
+
 .msger-inputarea * {
     padding: 10px;
     border: none;
     border-radius: 3px;
     font-size: 1em;
 }
+
 .msger-input {
     flex: 1;
     background: #ddd;
@@ -144,7 +133,6 @@ section {
 }
 
 .messages {
-  overflow: auto;
     height: 450px;
     display: flex;
     flex-direction: column;
@@ -177,7 +165,6 @@ section {
     border: 2px solid #ddd;
 }
 
-
 .page-card {
     max-width: 360px;
     padding: 15px;
@@ -187,19 +174,23 @@ section {
     background-color: #fff;
     box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
 }
+
 .page-card .page-card-head {
     padding: 10px 15px;
     margin: -15px;
     margin-bottom: 15px;
     border-bottom: 1px solid #d1d8dd;
 }
+
 .page-card .page-card-head .indicator {
     color: #36414C;
     font-size: 14px;
 }
+
 .page-card .page-card-head .indicator::before {
     margin: 0 6px 0.5px 0px;
 }
+
 .page-card .btn {
     margin-top: 30px;
 }
@@ -292,7 +283,6 @@ input[type=checkbox] {
 
 .common-card-style {
     display: flex;
-  flex-direction: column;
     align-items: flex-start;
     background: #FFFFFF;
     border-radius: 8px;
@@ -301,6 +291,7 @@ input[type=checkbox] {
 }
 
 .course-card {
+    flex-direction: column;
     width: 352px;
     height: 380px;
     margin: 0px 16px 32px;
@@ -459,3 +450,98 @@ input[type=checkbox] {
     font-size: 15px;
     line-height: 135%;
 }
+
+div.custom-checkbox>label>input {
+    visibility: hidden;
+}
+
+div.custom-checkbox>label>img {
+    height: 20px;
+    width: 20px;
+    border: 1px solid black;
+    border-radius: 5px;
+}
+
+div.custom-checkbox>label>input:checked+img {
+    background: url(/assets/community/images/Vector.png);
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 15px 15px;
+    object-fit: contain;
+}
+
+.course-card-wide {
+    width: 1120px;
+    height: 248px;
+    display: flex;
+    flex-direction: row;
+    padding: 24px;
+    background: #E2E6E9;
+    border-radius: 12px;
+}
+
+.course-image-wide {
+    width: 352px;
+    height: 200px;
+    background-size: 352px 200px;
+    margin-right: 32px;
+    border-radius: 5px;
+}
+
+.course-home-page {
+    padding: 80px;
+}
+
+.course-card-wide-content {
+    display: flex;
+    flex-direction: column;
+}
+
+.course-card-wide-title {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 40px;
+    line-height: 120%;
+    color: #192734;
+    margin-bottom: 8px;
+}
+
+.course-card-wide-intro {
+    font-size: 16px;
+    line-height: 172%;
+    letter-spacing: -0.011em;
+    color: #4C5A67;
+    width: 688px;
+    height: 80px;
+    margin-bottom: 16px;
+}
+
+.wide-button {
+    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.13), 0px 0px 0.5px rgba(0, 0, 0, 0.5);
+    border-radius: 6px;
+    padding: 12px 0px 12px 24px;
+    margin-right: 16px;
+}
+
+.start-learning {
+    background: var(--primary-color);
+    width: 185px;
+    height: 48px;
+    color: #FFFFFF;
+}
+
+.video-preview {
+    background: #FFFFFF;
+    width: 234px;
+    height: 48px;
+}
+
+.course-buttons {
+    display: flex;
+}
+
+* {
+    outline: 1px solid #f00 !important;
+    opacity: 1 !important;
+    visibility: visible !important;
+}

community/public/icons/down-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1L5 5L9 1" stroke="#4C5A67" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

community/public/icons/play.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8 18L16 12L8 6" stroke="#4C5A67" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

community/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"/>
+  <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>

community/public/icons/side-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 9L5 5L1 1" stroke="#4C5A67" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

community/public/icons/tick.svg

@@ -0,0 +1,3 @@
+<svg class="icon">
+  <use href="#icon-tick"></use>
+</svg>

community/templates/quiz.html

@@ -14,9 +14,12 @@
     {% set options = [question.option_1, question.option_2, question.option_3, question.option_4] %}
     {% for option in options %}
     {% if option %}
-    <div class="checkbox mb-2">
+    <div class="custom-checkbox mb-2">
+      <label>
         <input {% if question.multiple %} type="checkbox" {% else %} type="radio"
           name="{{ question.question | urlencode }}" {% endif %} class="option" value="{{ option | urlencode }}">
+          <img />
+      </label>
       <span class="label-area">{{ option }}</span>
     </div>
     {% endif %}

community/www/batch/members.html

@@ -20,19 +20,16 @@
 <div class="mt-5">
   {% for member in members %}
   <div class="d-flex align-items-center">
-    {{ widgets.Avatar(member=member, avatar_class="avatar-large") }}
+    {{ widgets.Avatar(member=member, avatar_class="avatar-medium") }}
     <div class="d-flex flex-column ml-2">
       <div class="d-flex">
         <a class="anchor_style ml-2" href="/{{member.username}}">
-          <h3>{{ member.full_name }}</h3>
+          <div class="review-content">{{ member.full_name }}</div>
         </a>
         {% if course.is_mentor(member.name) %}
         <div class="badge badge-success ml-2 align-self-start">Mentor</div>
         {% endif %}
       </div>
-      {% if member.bio %}
-      <i class="ml-2">{{member.bio}}</i>
-      {% endif %}
     </div>
   </div>
   {% if loop.index != member_count %}

community/www/courses/course.html

@@ -1,66 +1,64 @@
 {% extends "templates/base.html" %}
 {% from "www/macros/common_macro.html" import MentorsSection %}
-{% block title %}{{ course.title }}{% endblock %}
+{% block title %}{{ course.title }}
-{% block head_include %}
+{% endblock %}
-<meta name="description" content="Courses" />
+{% block head_include %}
-<meta name="keywords" content="Courses {{course.title}}" />
+  <meta name="description" content="Courses"/>
-<link rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
+  <meta name="keywords" content="Courses {{course.title}}"/>
+  <link rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
 {% endblock %}
-
 {% block content %}
-<div class="container">
+  <div class="common-page-style course-home-page">
-  <div class="course-header">
+    <div class="common-card-style course-card-wide">
-    <div class="mb-5">
+      <div class="course-image-wide" style="background-image: url({{ course.image }});">
-      <a class="anchor_style" href="/courses">Courses</a> / <span class="text-muted">{{ course.title }}</span>
+        <div class="course-tags">
+          {% for tag in course.get_tags() %}
+            <div class="course-card-pills">{{ tag }}</div>
+          {% endfor %}
         </div>
-    <div class="d-flex justify-content-between align-items-end">
+      </div>
-      <h2 id="course-title" data-course="{{course.name}}">{{course.title}}</h2>
+      <div class="course-card-wide-content">
-      {% if not course.disable_self_learning and not membership %}
+        <div class="course-card-wide-title">
-      <div>
+          {{ course.title }}
-        <button class="btn btn-primary join-batch" data-course="{{ course.name | urlencode }}"> Start Learning </button>
+        </div>
+        <div class="course-card-wide-intro">
+          {{ course.short_introduction }}
+        </div>
+        <div class="course-buttons">
+          <div class="wide-button start-learning">
+            Start Learning
+            <img class="" src="/assets/community/icons/white-arrow.svg"/>
+          </div>
+          <div class="wide-button video-preview">
+            Watch Video Preview
+            <img class="" src="/assets/community/icons/play.svg"/>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="course-home-outline">
+      {{ widgets.CourseOutline(course=course, show_link=membership) }}
+    </div>
+  </div>
+{% endblock %}
+{% macro CourseVideo(course) %}
+  {% if course.video_link %}
+    <div class="preview-video">
+      <iframe width="560" height="315" src="{{course.video_link}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe>
     </div>
   {% endif %}
-    </div>
-    <div class="course-short-intro">{{ course.short_introduction }}</div>
-  </div>
-
-  <div class="">
-    <div class="">
-      <div class="course-details">
-        {{ CourseVideo(course) }}
-        {{ CourseDescription(course) }}
-        {{ widgets.InstructorSection(instructor=course.get_instructor()) }}
-        {{ BatchSection(course) }}
-        {{ widgets.CourseOutline(course=course, show_link=membership) }}
-        {{ widgets.Reviews(course=course, membership=membership) }}
-      </div>
-    </div>
-  </div>
-</div>
-{% endblock %}
-
-{% macro CourseVideo(course) %}
-{% if course.video_link %}
-<div class="preview-video">
-  <iframe width="560" height="315" src="{{course.video_link}}" title="YouTube video player" frameborder="0"
-    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-    allowfullscreen></iframe>
-</div>
-{% endif %}
 {% endmacro %}
-
 {% macro CourseDescription(course) %}
-<div class="mt-5">
+  <div class="mt-5">
     <h3>Course Description</h3>
 
     <div class="course-description text-justify">
       {{ frappe.utils.md_to_html(course.description) }}
     </div>
-</div>
+  </div>
 {% endmacro %}
-
 {% macro BatchSection(course) %}
-<div class="row">
+  <div class="row">
     <div class="col-lg-8 col-md-12">
       {% if course.is_mentor(frappe.session.user) %}
         {{ BatchSectionForMentors(course, course.get_batches(mentor=frappe.session.user)) }}
@@ -68,35 +66,34 @@
         {{ BatchSectionForStudents(course, course.get_upcoming_batches()) }}
       {% endif %}
     </div>
-</div>
+  </div>
 {% endmacro %}
-
 {% macro BatchSectionForMentors(course, mentor_batches) %}
-<h2>Your Batches</h2>
+  <h2>Your Batches</h2>
 
-{% if mentor_batches %}
+  {% if mentor_batches %}
 
-<div class="row">
+    <div class="row">
       {% for batch in mentor_batches %}
         <div class="col-lg-4 col-md-6">
           {{ widgets.RenderBatch(course=course, batch=batch, can_manage=True) }}
         </div>
       {% endfor %}
-</div>
+    </div>
 
-<a class="add-batch margin-bottom" href="/add-a-new-batch?new=1&course={{course.name}}">Add a new
+    <a class="add-batch margin-bottom" href="/add-a-new-batch?new=1&course={{course.name}}">Add a new batch</a>
-  batch</a>
+  {% else %}
-{% else %}
+    <div class="mentor_message">
-<div class="mentor_message">
+      <p>
-  <p> You are a mentor for this course. </p>
+        You are a mentor for this course.
+      </p>
       <a class="" href="/add-a-new-batch?new=1&course={{course.name}}">Create your first batch</a>
-</div>
+    </div>
-{% endif %}
+  {% endif %}
 {% endmacro %}
-
 {% macro BatchSectionForStudents(course, upcoming_batches) %}
-{% if upcoming_batches %}
+  {% if upcoming_batches %}
-<div class="mt-5">
+    <div class="mt-5">
       <h3 class="upcoming">Upcoming Batches</h3>
       <div class="row">
         {% for batch in upcoming_batches %}
@@ -108,5 +105,5 @@
     {% else %}
       <div class="mt-5 upcoming">There are no Upcoming Batches for this course currently.</div>
     {% endif %}
-</div>
+  </div>
 {% endmacro %}