refactor: course and sidebar cleanup

community/lms/doctype/lms_course/lms_course.json

@@ -28,7 +28,8 @@
   {
    "fieldname": "description",
    "fieldtype": "Markdown Editor",
-   "label": "Description"
+   "label": "Description",
+   "reqd": 1
   },
   {
    "default": "0",
@@ -57,7 +58,8 @@
   {
    "fieldname": "short_introduction",
    "fieldtype": "Small Text",
-   "label": "Short Introduction"
+   "label": "Short Introduction",
+   "reqd": 1
   }
  ],
  "index_web_pages_for_search": 1,
@@ -84,7 +86,7 @@
    "link_fieldname": "course"
   }
  ],
- "modified": "2021-05-06 13:37:03.318829",
+ "modified": "2021-05-23 18:14:32.602647",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Course",

community/lms/widgets/BatchTabs.html

@@ -0,0 +1,28 @@
+<ul class="nav nav-tabs mt-4" id="myTab" role="tablist">
+  <li class="nav-item">
+    <a class="nav-link active" id="home-tab" data-toggle="tab" href="/courses/{{course.name}}/{{batch.name}}/learn"
+      role="tab" aria-controls="home" aria-selected="true">Learn</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" id="schedule-tab" data-toggle="tab" href="/courses/{{course.name}}/{{batch.name}}/schedule"
+      role="tab" aria-controls="schedule" aria-selected="false">Schedule</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" id="members-tab" data-toggle="tab" href="/courses/{{course.name}}/{{batch.name}}/members"
+      role="tab" aria-controls="members" aria-selected="false">Members</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" id="discussion-tab" data-toggle="tab" href="/courses/{{course.name}}/{{batch.name}}/discuss"
+      role="tab" aria-controls="discussion" aria-selected="false">Discussion</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" id="about-tab" data-toggle="tab" href="/courses/{{course.name}}/{{batch.name}}/about" role="tab"
+      aria-controls="about" aria-selected="false">About</a>
+  </li>
+  {% if batch.is_member(frappe.session.user, member_type="Mentor") %}
+  <li class="nav-item">
+    <a class="nav-link" id="progress-tab" data-toggle="tab" href="/courses/{{course.name}}/{{batch.name}}/progress"
+      role="tab" aria-controls="progress" aria-selected="false">Progress</a>
+  </li>
+  {% endif %}
+</ul>

community/lms/widgets/ChapterTeaser.html

@@ -1,14 +1,14 @@
 <div class="chapter-teaser">
   <div class="teaser-body">
-    <h3 class="chapter-title"><span class="chapter-number">{{index}}</span> {{ chapter.title }}</h3>
+    <h3 class="chapter-title"><span class="mr-1">{{index}}.</span> {{ chapter.title }}</h3>
     <div class="chapter-description">
       {{ chapter.description or "" }}
     </div>
     <div class="chapter-lessons">
       {% for lesson in chapter.get_lessons() %}
-        <div class="lesson-teaser">
-          {{lesson.title}}
-        </div>
+      <div class="lesson-teaser">
+        {{lesson.title}}
+      </div>
       {% endfor %}
     </div>
   </div>

community/public/css/style.css

@@ -97,14 +97,6 @@ body {
   border-top: 1px solid #ddc;
 }
 
-.batch .cta button {
-  background: var(--cta-color);
-  color: white;
-  border: none;
-  border-radius: 5px;
-  padding: 5px 10px;
-}
-
 .batch .right {
   float: right;
 }
@@ -227,6 +219,14 @@ img.profile-photo {
 }
 
 .anchor_style {
+  color: inherit;
+}
+
+a:hover {
   text-decoration: none;
   color: inherit;
 }
+
+section {
+  padding: 5rem 0 5rem 0;
+}

community/public/css/style.less

@@ -179,11 +179,8 @@ section.lightgray {
 .chapter-number {
   background: var(--text-color);
   color: white;
-  border-radius: 50%;
   height: 24px;
   min-width: 24px;
-  align-items: center;
-  padding: 5px 8px 2px 8px;
   margin-right: 5px;
 }
 

community/www/batch/about.html

@@ -1,5 +1,4 @@
 {% extends "templates/base.html" %}
-{% from "www/macros/sidebar.html" import Sidebar %}
 {% from "www/macros/common_macro.html" import InstructorsSection, MentorsSection %}
 
 {% block title %}About{% endblock %}
@@ -11,25 +10,26 @@
 {% endblock %}
 
 {% block content %}
-{{ Sidebar(course, batch) }}
-
-<div class="container">
-	{{ CourseBasicDetail(course)}}
-	{{ InstructorsSection(course.get_instructor()) }}
-	{{ BatchDetails(batch)}}
+<div>
+  {{ widgets.BatchTabs(course=course, batch=batch) }}
+  <div class="container">
+    {{ CourseBasicDetail(course)}}
+    {{ InstructorsSection(course.get_instructor()) }}
+    {{ BatchDetails(batch)}}
+  </div>
 </div>
 {% endblock %}
 
 {% macro CourseBasicDetail(course) %}
 <h2>{{course.title}}</h2>
 <div class="course-description">
-	{{course.short_introduction}}
+  {{course.short_introduction}}
 </div>
 {% 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>
+  <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 %}
 <h2>About the Course</h2>
@@ -41,18 +41,19 @@
 
 <div class="batch">
   <div class="batch-details">
-  <div>Session every {{batch.sessions_on}}</div>
-  <div>{{frappe.utils.format_time(batch.start_time, "short")}} -
-    {{frappe.utils.format_time(batch.end_time, "short")}}</div>
-  <div>Starting {{frappe.utils.format_date(batch.start_date, "medium")}}</div>
-  <div class="course-type" style="color: #888; padding: 10px 0px;">mentors</div>
+    <div>Session every {{batch.sessions_on}}</div>
+    <div>{{frappe.utils.format_time(batch.start_time, "short")}} -
+      {{frappe.utils.format_time(batch.end_time, "short")}}
+    </div>
+    <div>Starting {{frappe.utils.format_date(batch.start_date, "medium")}}</div>
+    <div class="course-type" style="color: #888; padding: 10px 0px;">mentors</div>
 
-  {% for m in batch.get_mentors() %}
+    {% for m in batch.get_mentors() %}
     <div>
       {{ widgets.Avatar(member=m, avatar_class="avatar-medium" ) }}
       <span class="instructor-title">{{m.full_name}}</span>
     </div>
-  {% endfor %}
+    {% endfor %}
   </div>
 </div>
 {% endmacro %}

community/www/batch/discuss.html

@@ -1,5 +1,4 @@
 {% extends "templates/base.html" %}
-{% from "www/macros/sidebar.html" import Sidebar %}
 {% from "www/macros/common_macro.html" import BatchHearder %}
 
 {% block title %}Discuss{% endblock %}
@@ -11,17 +10,19 @@
 {% endblock %}
 
 {% block content %}
-{{ Sidebar(course, batch) }}
+<div>
+  {{ widgets.BatchTabs(course=course, batch=batch) }}
 
-<div class="">
-  <div class="batch-header">
-    {{ BatchHearder(course.title, member_count) }}
-  </div>
-  <div class="messages">
-    <div class="message-section">
-      {{ Messages(messages) }}
+  <div class="">
+    <div class="batch-header">
+      {{ BatchHearder(course.title, member_count) }}
+    </div>
+    <div class="messages">
+      <div class="message-section">
+        {{ Messages(messages) }}
+      </div>
+      {{ TextArea() }}
     </div>
-    {{ TextArea() }}
   </div>
 </div>
 {% endblock %}

community/www/batch/learn.html

@@ -1,13 +1,12 @@
 {% extends "templates/base.html" %}
-{% from "www/macros/sidebar.html" import Sidebar %}
 {% from "www/macros/livecode.html" import LiveCodeEditorJS, LiveCodeEditor with context %}
 {% block title %}{{ lesson.title }}{% endblock %}
 
 {% block head_include %}
-	<meta name="description" content="{{lesson.title}} - {{course.title}}" />
-	<meta name="keywords" content="{{lesson.title}} - {{course.title}}" />
-	<style>
-	</style>
+<meta name="description" content="{{lesson.title}} - {{course.title}}" />
+<meta name="keywords" content="{{lesson.title}} - {{course.title}}" />
+<style>
+</style>
 
 <link rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
 <link rel="stylesheet" href="{{ livecode_url }}/static/codemirror/lib/codemirror.css">
@@ -23,69 +22,70 @@
 
 
 {% block content %}
-{{ Sidebar(course, batch) }}
+<div>
+  {{ widgets.BatchTabs(course=course, batch=batch) }}
 
-<div class="container">
-  <div class="lesson-page">
-    {{ pagination(prev_url, next_url) }}
+  <div class="container">
+    <div class="lesson-page">
+      {{ pagination(prev_url, next_url) }}
 
-    <h2>{{ lesson.title }}</h2>
+      <h2>{{ lesson.title }}</h2>
 
-    {% for s in lesson.get_sections() %}
-    <div class="section section-{{ s.type }}">
-      {{ render_section(s) }}
+      {% for s in lesson.get_sections() %}
+      <div class="section section-{{ s.type }}">
+        {{ render_section(s) }}
+      </div>
+      {% endfor %}
+
+      {{ pagination(prev_url, next_url) }}
     </div>
-    {% endfor %}
-
-    {{ pagination(prev_url, next_url) }}
-
   </div>
 </div>
 {% endblock %}
 
 
 {% macro render_section(s) %}
-  {% if s.type == "text" %}
-    {{ render_section_text(s) }}
-  {% elif s.type == "example" or s.type == "code" %}
-    {{ LiveCodeEditor(s.name,
+{% if s.type == "text" %}
+{{ render_section_text(s) }}
+{% elif s.type == "example" or s.type == "code" %}
+{{ LiveCodeEditor(s.name,
           code=s.get_latest_code_for_user(),
           reset_code=s.contents,
           is_exercise=False)
     }}
-  {% elif s.type == "exercise" %}
-    {{ widgets.Exercise(exercise=s.get_exercise())}}
-  {% else %}
-    <div>Unknown section type: {{s.type}}</div>
-  {% endif %}
+{% elif s.type == "exercise" %}
+{{ widgets.Exercise(exercise=s.get_exercise())}}
+{% else %}
+<div>Unknown section type: {{s.type}}</div>
+{% endif %}
 {% endmacro %}
 
 {% macro render_section_text(s) %}
-  <div class="row">
-    <div class="col-md-9">
-      {{ frappe.utils.md_to_html(s.contents) }}
-    </div>
+<div class="row">
+  <div class="col-md-9">
+    {{ frappe.utils.md_to_html(s.contents) }}
   </div>
+</div>
 {% endmacro %}
 
 {% macro pagination(prev_url, next_url) %}
-  <div class="lesson-pagination">
-    {% if prev_url %}
-      <a href="{{prev_url}}" class="btn">&larr; Prev</a>
-    {% endif %}
-    {% if next_url %}
-      <a href="{{next_url}}" class="btn pull-right">Next &rarr;</a>
-    {% endif %}
-    <div style="clear: both;"></div>
-  </div>
+<div class="lesson-pagination">
+  {% if prev_url %}
+  <a href="{{prev_url}}" class="btn">&larr; Prev</a>
+  {% endif %}
+  {% if next_url %}
+  <a href="{{next_url}}" class="btn pull-right">Next &rarr;</a>
+  {% endif %}
+  <div style="clear: both;"></div>
+</div>
 {% endmacro %}
 
 {%- block script %}
-  {{ super() }}
-  {{ LiveCodeEditorJS() }}
+{{ super() }}
+{{ LiveCodeEditorJS() }}
 
 
-  <!-- <script type="text/javascript">
+<!-- <script type="text/javascript">
     $(function() {
       var editorLookup = {};
 

community/www/batch/members.html

@@ -1,5 +1,4 @@
 {% extends "templates/base.html" %}
-{% from "www/macros/sidebar.html" import Sidebar %}
 {% from "www/macros/common_macro.html" import BatchHearder %}
 
 {% block title %}Members{% endblock %}
@@ -10,11 +9,13 @@
 {% endblock %}
 
 {% block content %}
-{{ Sidebar(course, batch) }}
+<div>
+  {{ widgets.BatchTabs(course=course, batch=batch) }}
 
-<div class="container">
-  {{ BatchHearder(course.title, member_count)}}
-  {{ MembersList(members)}}
+  <div class="container">
+    {{ BatchHearder(course.title, member_count)}}
+    {{ MembersList(members)}}
+  </div>
 </div>
 {% endblock %}
 

community/www/batch/progress.html

@@ -1,13 +1,12 @@
 {% extends "templates/base.html" %}
-{% from "www/macros/sidebar.html" import Sidebar %}
 {% from "www/macros/livecode.html" import LiveCodeEditorJS, LiveCodeEditor with context %}
-{% block title %}{{ course.title  }} - Batch Dashboard{% endblock %}
+{% block title %}{{ course.title }} - Batch Dashboard{% endblock %}
 
 {% block head_include %}
-	<meta name="description" content="{{course.title}} - Batch Dashboard" />
-	<meta name="keywords" content="{{course.title}} - Batch Dashboard" />
-	<style>
-	</style>
+<meta name="description" content="{{course.title}} - Batch Dashboard" />
+<meta name="keywords" content="{{course.title}} - Batch Dashboard" />
+<style>
+</style>
 
 <link rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
 <link rel="stylesheet" href="{{ livecode_url }}/static/codemirror/lib/codemirror.css">
@@ -23,30 +22,32 @@
 
 
 {% block content %}
-{{ Sidebar(course, batch) }}
+<div>
+  {{ widgets.BatchTabs(course=course, batch=batch) }}
 
-<div class="container">
-  <div class="mentor-dashboard">
-    <h1>Batch Progress</h1>
-    {% for exercise in report.exercises %}
+  <div class="container">
+    <div class="mentor-dashboard">
+      <h1>Batch Progress</h1>
+      {% for exercise in report.exercises %}
       <div class="exercise-submissions">
         <h2>{{exercise.title}}</h2>
         {% for s in report.get_submissions_of_exercise(exercise.name) %}
-          <div class="submission">
-            <h4><a href="/{{s.owner.username}}">{{s.owner.full_name}}</a></h4>
-            <div class="livecode-editor-small">
-              {{ LiveCodeEditor(name=s.name, code=s.solution, reset_code=s.solution) }}
-            </div>
+        <div class="submission">
+          <h4><a href="/{{s.owner.username}}">{{s.owner.full_name}}</a></h4>
+          <div class="livecode-editor-small">
+            {{ LiveCodeEditor(name=s.name, code=s.solution, reset_code=s.solution) }}
           </div>
+        </div>
         {% endfor %}
       </div>
-    {% endfor %}
+      {% endfor %}
+    </div>
   </div>
 </div>
 {% endblock %}
 
 
 {%- block script %}
-  {{ super() }}
-  {{ LiveCodeEditorJS() }}
+{{ super() }}
+{{ LiveCodeEditorJS() }}
 {% endblock %}

community/www/batch/schedule.html

@@ -1,6 +1,6 @@
 {% extends "templates/base.html" %}
-{% from "www/macros/sidebar.html" import Sidebar %}
 {% block title %}Schedule{% endblock %}
+
 {% block head_include %}
 <meta name="description" content="Courses" />
 <meta name="keywords" content="" />
@@ -8,7 +8,12 @@
 {% endblock %}
 
 {% block content %}
-{{ Sidebar(course, batch) }}
-<div class="container">
+<div>
+  {{ widgetsBatchTabs(course=course, batch=batch) }}
+  <div class="container">
+    <h3>
+      Schedule
+    </h3>
+  </div>
 </div>
 {% endblock %}

community/www/courses/course.html

@@ -9,7 +9,9 @@
 {% block content %}
 <div class="container">
   <div class="course-header">
-    <div class="course-type">course</div>
+    <div class="mb-5">
+      <a class="font-weight-bold anchor_style" href="/courses">Courses</a> / <span class="text-muted">{{ course.title }}</span>
+    </div>
     <h1 id="course-title" data-course="{{course.name}}">{{course.title}}</h1>
     <div class="course-short-intro">{{ course.short_introduction }}</div>
   </div>
@@ -88,7 +90,7 @@
       {% if can_manage %}
         <a href="/courses/{{course.name}}/{{batch.name}}/about" class="btn btn-secondary">Manage</a>
       {% else %}
-        <button class="join-batch" data-batch="{{ batch.name | urlencode }}"
+        <button class="join-batch btn btn-primary" data-batch="{{ batch.name | urlencode }}"
         data-course="{{ course.name | urlencode }}">Join this Batch</button>
       {% endif %}
     </div>

community/www/courses/index.html

@@ -1,10 +1,11 @@
 {% extends "templates/base.html" %}
+{% from "www/hackathons/macros/card.html" import null_card %}
 {% block title %}{{ 'Courses' }}{% endblock %}
 {% block head_include %}
-  <meta name="description" content="{{ 'Courses' }}" />
-  <meta name="keywords" content="Courses" />
-  <style>
-  </style>
+<meta name="description" content="{{ 'Courses' }}" />
+<meta name="keywords" content="Courses" />
+<style>
+</style>
 {% endblock %}
 
 {% block content %}
@@ -15,8 +16,13 @@
   <div class='container'>
     <div class="row mt-5">
       {% for course in courses %}
-        {{ course_card(course) }}
+      {{ course_card(course) }}
       {% endfor %}
+      {% if courses %}
+      {% for n in range( (3 - (courses|length)) %3) %}
+      {{ null_card() }}
+      {% endfor %}
+      {% endif %}
     </div>
   </div>
 </section>
@@ -24,13 +30,16 @@
 
 
 {% macro course_card(course) %}
-<div class="card mb-5 w-100">
-  <div class="card-body">
-    <h5 class="card-title"><a href="/courses/{{course.name}}">{{course.title}}</a></h5>
-    {% if course.description %}
-    <p class="card-text">{{ frappe.utils.md_to_html(course.description[:250]) }}</p>
-    {% endif %}
-    <a href="/courses/{{course.name}}" class="card-link">See more &rarr;</a>
-  </div>
+<div class="col-sm-4 mb-4 text-left">
+  <a class="anchor_style" href="/courses/{{course.name}}">
+    <div class="card h-100">
+      <div class='card-body'>
+        <h5 class='card-title'>{{ course.title }}</h5>
+        {% if course.description %}
+        {{ frappe.utils.md_to_html(course.description[:250]) }}
+        {% endif %}
+      </div>
+    </div>
+  </a>
 </div>
 {% endmacro %}

community/www/hackathons/hackathon.html

@@ -126,4 +126,4 @@
 		</div>
 	</div>
 </section>
-{% endblock %}
+{% endblock %}

community/www/macros/sidebar.html

@@ -1,14 +1,30 @@
-{% macro Sidebar(course, batch, is_mentor=False) %}
-<div class="sidebar-batch">
-    <a href=""><i class="fa fa-bars fa-lg"></i></a>
-    <br>
-    <a href="/courses/{{course.name}}/{{batch.name}}/learn"><i class="fa fa-book fa-lg"></i></a>
-    <a href="/courses/{{course.name}}/{{batch.name}}/schedule"><i class="fa fa-calendar fa-lg"></i></a>
-    <a href="/courses/{{course.name}}/{{batch.name}}/members"><i class="fa fa-users fa-lg"></i></a>
-    <a href="/courses/{{course.name}}/{{batch.name}}/discuss"><i class="fa fa-comments fa-lg"></i></a>
-    <a href="/courses/{{course.name}}/{{batch.name}}/about"><i class="fa fa-info-circle fa-lg"></i></a>
-    {% if batch.is_member(frappe.session.user, member_type="Mentor") %}
-      <a href="/courses/{{course.name}}/{{batch.name}}/progress"><i class="fa fa-flag-checkered fa-lg"></i></a>
-    {% endif %}
-</div>
+{% macro BatchTabs(course, batch, is_mentor=False) %}
+<ul class="nav nav-tabs mt-4" id="myTab" role="tablist">
+  <li class="nav-item">
+    <a class="nav-link active" id="home-tab" data-toggle="tab" href="/courses/{{course.name}}/{{batch.name}}/learn"
+      role="tab" aria-controls="home" aria-selected="true">Learn</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" id="schedule-tab" data-toggle="tab" href="/courses/{{course.name}}/{{batch.name}}/schedule"
+      role="tab" aria-controls="schedule" aria-selected="false">Schedule</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" id="members-tab" data-toggle="tab" href="/courses/{{course.name}}/{{batch.name}}/members"
+      role="tab" aria-controls="members" aria-selected="false">Members</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" id="discussion-tab" data-toggle="tab" href="/courses/{{course.name}}/{{batch.name}}/discuss"
+      role="tab" aria-controls="discussion" aria-selected="false">Discussion</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" id="about-tab" data-toggle="tab" href="/courses/{{course.name}}/{{batch.name}}/about" role="tab"
+      aria-controls="about" aria-selected="false">About</a>
+  </li>
+  {% if batch.is_member(frappe.session.user, member_type="Mentor") %}
+  <li class="nav-item">
+    <a class="nav-link" id="progress-tab" data-toggle="tab" href="/courses/{{course.name}}/{{batch.name}}/progress"
+      role="tab" aria-controls="progress" aria-selected="false">Progress</a>
+  </li>
+  {% endif %}
+</ul>
 {% endmacro %}