fix: ui issues

lms/public/css/style.css

@@ -661,7 +661,7 @@ input[type=checkbox] {
   font-size: var(--text-sm);
   display: flex;
   flex-direction: column;
-  margin-bottom: 3rem;
+  margin-bottom: 2.5rem;
   padding-left: 200px;
   padding-right: 1rem;
   box-shadow: var(--shadow-sm);
@@ -764,7 +764,7 @@ input[type=checkbox] {
 }
 
 .education-details {
-  margin-top: 3rem;
+  margin-top: 1.25rem;
 }
 
 .bold-title {
@@ -1661,3 +1661,9 @@ li {
 .help-article {
     font-size: var(--text-base);
 }
+
+.quiz-row {
+    position: relative;
+    color: var(--text-color);
+    cursor: pointer;
+}

lms/www/batch/learn.html

@@ -223,7 +223,7 @@
 <!-- Help Article -->
 {% macro HelpArticle() %}
 <div class="help-article">
-    <h3> {{ _("Help Article") }} </h3>
+    <h3> {{ _("Embed Components") }} </h3>
     <p>
         {{ _("You can add additional content to the lesson using a special syntax. The table below mentions
             all types of dynamic content that you can add to the lessons and the syntax for the same.") }}
@@ -239,11 +239,11 @@
                 {{ _("YouTube Video") }}
             </td>
             <td>
-                {% raw %} {{ YouTubeVideo("embed_src") }} {% endraw %}
+                {% raw %} {{ YouTubeVideo('Video ID') }} {% endraw %}
             </td>
             <td>
                 <span>
-                    {{ _("Copy and paste the syntax in the editor. Replace 'embed_src' with the embed source
+                    {{ _("Copy and paste the syntax in the editor. Replace 'Video ID' with the embed source
                         that YouTube provides. To get the source, follow the steps mentioned below.") }}
                 </span>
                 <ul class="p-4">
@@ -265,11 +265,12 @@
                 {{ _("Quiz") }}
             </td>
             <td>
-                {% raw %} {{ Quiz("lms_quiz_id") }} {% endraw %}
+                {% raw %} {{ Quiz('Quiz ID') }} {% endraw %}
             </td>
             <td>
                 {% set quiz_link = "<a href='/quizzes'> Quiz List </a>" %}
-                {{ _("Copy and paste the syntax in the editor. Replace 'lms_quiz_id' with the ID of the Quiz. You can get the ID of the quiz from the {0}.").format(quiz_link) }}
+                {{ _("Copy and paste the syntax in the editor. Replace 'Quiz ID' with the Id of the Quiz.
+                You can get the Id of the quiz from the {0}.").format(quiz_link) }}
             </td>
         </tr>
     </table>
@@ -279,8 +280,10 @@
 
 <!-- Discussions Component -->
 {% macro Discussions() %}
-{% set topics_count = frappe.db.count("Discussion Topic",
+{% set topics_count = frappe.db.count("Discussion Topic", {
-    {"reference_doctype": "Course Lesson", "reference_docname": lesson.name}) %}
+    "reference_doctype": "Course Lesson",
+    "reference_docname": lesson.name
+}) %}
 {% set is_instructor = frappe.session.user == course.instructor %}
 {% set condition = is_instructor if is_instructor else membership %}
 {% set doctype, docname = _("Course Lesson"), lesson.name %}

lms/www/batch/learn.js

@@ -66,7 +66,7 @@ frappe.ready(() => {
 
     $(".btn-back").click((e) => {
         window.location.href = window.location.href.split("?")[0];
-    })
+    });
 
     $(document).on("click", ".copy-link", (e) => {
         frappe.utils.copy_to_clipboard($(e.currentTarget).data("link"));
@@ -540,6 +540,11 @@ const build_attachment_table = (file_doc) => {
 
 
 const make_editor = () => {
+    let comment =  `<!--
+    {{ YouTubeVideo('Video Id') }}
+    {{ Quiz('Quiz Id') }}
+-->`
+
     this.code_field_group = new frappe.ui.FieldGroup({
         fields: [
             {
@@ -549,7 +554,7 @@ const make_editor = () => {
                 wrap: true,
                 max_lines: Infinity,
                 min_lines: 20,
-                default: $("#body").data("body"),
+                default: $("#body").data("body") || comment,
                 depends_on: 'eval:doc.type=="Markdown"',
             }
         ],

lms/www/batch/quiz.html

@@ -52,7 +52,7 @@
             <div class="d-flex justify-content-between option-{{ num }}">
                 <div contenteditable="true" data-placeholder="{{ _('Option') }}"
                     class="option-input">{% if option %}{{ option }}{% endif %}</div>
-                <div contenteditable="true" data-placeholder="{{ _('Explanation') }}"
+                <div contenteditable="true" data-placeholder="{{ _('Explain the option') }}"
                     class="option-input">{% if explanation %}{{ explanation }}{% endif %}</div>
                 <div class="option-checkbox">
                     <input type="checkbox" {% if question['is_correct_' + num] %} checked {% endif %}>
@@ -68,8 +68,17 @@
 
     <div class="mt-4">
         <button class="btn btn-secondary btn-sm btn-question"> {{ _("New Question") }} </button>
-        <button class="btn btn-primary btn-sm btn-save-question ml-2
+
-            {% if not quiz.name %} hide {% endif %}"> {{ _("Save Quiz") }} </button>
+        {% if quiz.name %}
+        <button class="btn btn-secondary btn-sm copy-quiz-id ml-2" data-name="'{{ quiz.name }}'">
+            {{ _("Copy Quiz ID") }}
+        </button>
+        {% endif %}
+
+        <button class="btn btn-primary btn-sm btn-save-question ml-2 {% if not quiz.name %} hide {% endif %}">
+            {{ _("Save Quiz") }}
+        </button>
+
     </div>
 </div>
 {% endmacro %}

lms/www/batch/quiz.js

@@ -8,7 +8,11 @@ frappe.ready(() => {
         save_question(e);
     });
 
-    get_questions()
+    $(".copy-quiz-id").click((e) => {
+        frappe.utils.copy_to_clipboard($(e.currentTarget).data("name"));
+    });
+
+    get_questions();
 
 });
 
@@ -54,6 +58,7 @@ const save_question = (e) => {
     if (!$("#quiz-title").text()) {
         frappe.throw(__("Quiz Title is mandatory."));
     }
+
     frappe.call({
         method: "lms.lms.doctype.lms_quiz.lms_quiz.save_quiz",
         args: {

lms/www/batch/quiz_list.html

@@ -15,26 +15,37 @@
         {% if quiz_list | length %}
         <a class="btn btn-secondary btn-sm pull-right" href="/quizzes/new-quiz"> {{ _("Add Quiz") }} </a>
         <div class="course-home-headings"> {{ _("Quiz List") }} </div>
+
         <div class="common-card-style">
             <table class="table">
+
                 <tr style="background-color: var(--fg-hover-color); font-weight: bold">
                     <td style="width: 10%;"> {{ _("No.") }} </td>
                     <td style="width: 45%;"> {{ _("Title") }} </td>
                     <td> {{ _("ID") }} </td>
+                    <td>  </td>
                 </tr>
+
                 {% for quiz in quiz_list %}
-                <tr style="position: relative; color: var(--text-color);">
+                <tr class="quiz-row" data-name="{{ quiz.name }}">
                     <td> {{ loop.index }} </td>
                     <td>
-                        <a class="button-links" href="/quizzes/{{ quiz.name }}">{{ quiz.title }}</a>
+                        {{ quiz.title }}
                     </td>
                     <td>
-                        <a class="button-links" href="/quizzes/{{ quiz.name }}">{{ quiz.name }}</a>
+                        {{ quiz.name }}
+                    </td>
+                    <td>
+                        <a class="btn btn-secondary btn-sm copy-quiz-id" data-name="'{{ quiz.name }}'">
+                            {{ _("Copy Quiz ID") }}
+                        </a>
                     </td>
                 </tr>
                 {% endfor %}
+
             </table>
         </div>
+
         {% else %}
         <div class="empty-state">
             <div class="empty-state-text">
@@ -42,7 +53,8 @@
                 <div class="course-meta mb-6">{{ _("Create a quiz and add it to your course to engage users.") }}</div>
                 <a class="btn btn-secondary btn-sm"
                     href="{% if frappe.session.user == 'Guest' %} /login?redirect-to=/quizzes {% else %} /quizzes/new-quiz  {% endif %}">
-                {{ _("Add Quiz") }} </a>
+                    {{ _("Add Quiz") }}
+                </a>
             </div>
         </div>
         {% endif %}
@@ -50,3 +62,22 @@
 </div>
 {% endblock %}
 
+
+{% block script %}
+<script>
+    frappe.ready(() => {
+
+        $(".copy-quiz-id").click((e) => {
+            e.preventDefault();
+            frappe.utils.copy_to_clipboard($(e.currentTarget).data("name"));
+        });
+
+        $(".quiz-row").click((e) => {
+            if (!$(e.target).hasClass("copy-quiz-id")) {
+                window.location.href = `/quizzes/${$(e.currentTarget).data('name')}`;
+            }
+        });
+
+    });
+</script>
+{% endblock %}

lms/www/courses/course.html

@@ -114,7 +114,9 @@
         </div>
 
         <div class="course-image-attachment {% if not course.image %} hide {% endif %} ">
-            <a href="{{ course.image }}" id="image" target="_blank"> {{ course.image }} </a>
+            <a {% if course.image %} href="{{ course.image }}" {% endif %} id="image" target="_blank">
+                {{ course.image }}
+            </a>
             <button class="btn btn-sm btn-default btn-clear ml-4"> {{ _("Clear") }} </button>
         </div>
         <a class="btn btn-default btn-sm btn-attach mt-1 {% if course.image %} hide {% endif %}"> {{ _("Attach Image") }} </a>

lms/www/courses/course.js

@@ -329,6 +329,7 @@ const add_tag = (e) => {
 const save_course = (e) => {
     let tags = $('.course-card-pills').map((i, el) => $(el).text().trim()).get();
     tags = tags.filter(word => word.trim().length > 0);
+
     frappe.call({
         method: "lms.lms.doctype.lms_course.lms_course.save_course",
         args: {

lms/www/dashboard/index.html

@@ -12,7 +12,7 @@
     <div class="container">
 
         {% if show_creators_section %}
-        <a class="btn btn-secondary btn-md pull-right" id="create-course-link" href="/courses/new-course">
+        <a class="btn btn-secondary btn-sm pull-right" id="create-course-link" href="/courses/new-course">
             {{ _("Create a Course") }}
         </a>
         {% endif %}

lms/www/profiles/profile.html

@@ -3,9 +3,11 @@
 <meta name="description" content="{{ member.full_name }}" />
 {% endblock %}
 
+
 {% block content %}
 <div class="common-page-style profile-page">
     {{ ProfileBanner(member) }}
+
     <div class="profile-page-body">
         <div class="container">
         {% set read_only = member.name != frappe.session.user %}
@@ -18,6 +20,7 @@
         {{ CareerPreference(member) }}
         </div>
     </div>
+
     <div class="container">
         {{ CoursesCreated(member, read_only) }}
         {{ CoursesMentored(member, read_only) }}
@@ -26,16 +29,20 @@
 </div>
 {% endblock %}
 
+
+<!-- Banner -->
 {% macro ProfileBanner(member) %}
 {% set cover_image = member.cover_image if member.cover_image else "/assets/lms/images/profile-banner.png" %}
 {% set enrollment = get_course_membership(frappe.session.user, member_type="Student") | length %}
 {% set enrollment_suffix = _("Courses") if enrollment > 1 else _("Course") %}
+
 <div class="container">
     <div class="profile-banner" style="background-image: url({{ cover_image }})">
         <div class="profile-avatar">
             {{ widgets.Avatar(member=member, avatar_class="avatar-square") }}
         </div>
     </div>
+
     <div class="profile-info">
         <div class="profile-name-section">
             <div class="profile-name"> {{ member.full_name }} </div>
@@ -49,7 +56,10 @@
             {% endif %}
 
             {% if frappe.session.user == member.email %}
-      <a class="button is-secondary ml-auto mt-1" href="/edit-profile?name={{ member.email }}"> {{ _("Edit Profile") }} </a>
+            <div class="ml-auto mt-1">
+                <a class="btn btn-secondary btn-sm" href="/dashboard"> {{ _("Visit Dashboard") }} </a>
+                <a class="btn btn-secondary btn-sm ml-2" href="/edit-profile?name={{ member.email }}"> {{ _("Edit Profile") }} </a>
+            </div>
             {% endif %}
         </div>
 
@@ -61,16 +71,19 @@
             {% if enrollment %}
             <div class="course-meta">
                 <img src="/assets/lms/icons/book_plain.svg">
-        {{ enrollment }} {{ enrollment_suffix }} {{ _("taken") }} </div>
+                {{ enrollment }} {{ enrollment_suffix }} {{ _("taken") }}
+            </div>
             {% endif %}
         </div>
-
     </div>
 </div>
 {% endmacro %}
 
+
+<!-- Courses Created -->
 {% macro CoursesCreated(member, read_only) %}
 {% set authored_courses = get_authored_courses(member.name) %}
+
 {% if authored_courses | length %}
 <div class="profile-courses">
     <div class="course-home-headings"> {{ _("Courses Created") }} </div>
@@ -83,6 +96,8 @@
 {% endif %}
 {% endmacro %}
 
+
+<!-- Courses Mentored -->
 {% macro CoursesMentored(member, read_only) %}
 {% if member.get_mentored_courses() | length %}
 <div class="profile-courses">
@@ -96,6 +111,8 @@
 {% endif %}
 {% endmacro %}
 
+
+<!-- Courses Enrolled -->
 {% macro CoursesEnrolled(member, read_only) %}
 {% set enrolled = get_enrolled_courses() %}
 
@@ -120,9 +137,10 @@
     </div>
 </div>
 {% endif %}
-
 {% endmacro %}
 
+
+<!-- Profile Tabs Extension -->
 {% macro ProfileTabs(profile_tabs) %}
 <div>
     {% for tab in profile_tabs %}
@@ -136,6 +154,8 @@
 </div>
 {% endmacro %}
 
+
+<!-- About Section -->
 {% macro About(member) %}
 {% if member.bio %}
     <div class="">
@@ -147,6 +167,8 @@
 {% endif %}
 {% endmacro %}
 
+
+<!-- Work Preference -->
 {% macro WorkPreference(member) %}
 <div class="education-details">
     <div class="common-card-style profile-card">
@@ -161,12 +183,16 @@
 </div>
 {% endmacro %}
 
+
+<!-- Career Preference -->
 {% macro CareerPreference(member) %}
 {% if member.preferred_functions or member.preferred_industries or member.preferred_location or member.dream_companies %}
 <div class="education-details">
     <div class="common-card-style profile-card">
+
         <div class="course-home-headings"> {{ _("Career Preference") }} </div>
         <div class="profile-column-grid">
+
             {% if member.preferred_functions | length %}
             <div>
                 <b>{{ _("Preferred Functions:") }}</b>
@@ -198,13 +224,15 @@
                 <div class="description"> {{ member.dream_companies }} </div>
             </div>
             {% endif %}
-    </div>
 
         </div>
     </div>
+</div>
 {% endif %}
 {% endmacro %}
 
+
+<!-- Contact Section -->
 {% macro Contact(member) %}
 {% if member.linkedin or member.medium or member.github %}
 <div class="education-details">
@@ -236,6 +264,8 @@
 {% endif %}
 {% endmacro %}
 
+
+<!-- Skills -->
 {% macro Skills(member) %}
 {% if member.skill | length %}
 <div class="education-details">
@@ -251,11 +281,14 @@
 {% endif %}
 {% endmacro %}
 
+
+<!-- Education Details -->
 {% macro EducationDetails(member) %}
 {% if member.education %}
 <div class="education-details">
     <div class="common-card-style profile-card">
         <div class="course-home-headings"> {{ _("Education") }} </div>
+
         <div class="profile-grid-card">
             {% for edu in member.education %}
             <div class="profile-card-row">
@@ -266,44 +299,61 @@
                     {% if edu.grade %} <span></span> {{ edu.grade }}  {% endif %}
                     {% endif %}
                 </div>
+
                 <div class="description">
                     {% if edu.start_date %}
                     {{ frappe.utils.format_date(edu.start_date, "MMM YYYY") }} -
                     {% endif %}
-          {{ frappe.utils.format_date(edu.end_date, "MMM YYYY") }} </div>
+                    {{ frappe.utils.format_date(edu.end_date, "MMM YYYY") }}
+                </div>
                 <div class="description"> {{ edu.location }} </div>
             </div>
             {% endfor %}
         </div>
-
     </div>
 </div>
 {% endif %}
 {% endmacro %}
 
+
+<!-- Work Details -->
 {% macro WorkDetails(member) %}
 {% set work_details = member.work_experience + member.internship %}
+
 {% if work_details | length %}
 <div class="education-details">
     <div class="common-card-style profile-card">
         <div class="course-home-headings"> {{ _("Work Experience") }} </div>
         <div class="profile-grid-card">
+
             {% for work in work_details %}
             <div class="">
                 <div class="bold-title"> {{ work.title }} </div>
                 <div class="profile-item"> {{ work.company }} </div>
-      <div class="description"> {{ frappe.utils.format_date(work.from_date, "MMM YYYY") }} -
+                <div class="description">
-        {% if work.to_date %} {{ frappe.utils.format_date(work.to_date, "MMM YYYY") }} {% else %} Present {% endif %} </div>
+                    {{ frappe.utils.format_date(work.from_date, "MMM YYYY") }} -
+                    {% if work.to_date %} {{ frappe.utils.format_date(work.to_date, "MMM YYYY") }}
+                    {% else %} Present {% endif %}
+                </div>
+
                 <div class="description"> {{ work.location }} </div>
-        {% if work.description %} <div class="profile-item"> {{ work.description }} </div> {% endif %}
+
+                {% if work.description %}
+                <div class="profile-item">
+                    {{ work.description }}
+                </div>
+                {% endif %}
             </div>
             {% endfor %}
+
         </div>
     </div>
 </div>
 {% endif %}
 {% endmacro %}
 
+
+<!-- Certifications -->
 {% macro Certification(member) %}
 {% if member.certification %}
 <div class="education-details">
@@ -312,20 +362,32 @@
         <div class="profile-grid-card">
             {% for cert in member.certification %}
             <div class="">
+
                 <div class="bold-title"> {{ cert.certification_name }} </div>
                 <div class="profile-item"> {{ cert.organization }} </div>
-        <div class="description"> {{ frappe.utils.format_date(cert.issue_date, "MMM YYYY") }}
+
-          {% if cert.expiration_date %} - {{ frappe.utils.format_date(cert.expiration_date, "MMM YYYY") }} {% endif %} </div>
+                <div class="description">
-          {% if cert.description %} <div class="profile-item"> {{ cert.description }} </div> {% endif %}
+                    {{ frappe.utils.format_date(cert.issue_date, "MMM YYYY") }}
+                    {% if cert.expiration_date %}
+                    - {{ frappe.utils.format_date(cert.expiration_date, "MMM YYYY") }}
+                    {% endif %}
+                </div>
+
+                {% if cert.description %}
+                <div class="profile-item">
+                    {{ cert.description }}
+                </div>
+                {% endif %}
+
             </div>
             {% endfor %}
         </div>
-
     </div>
 </div>
 {% endif %}
 {% endmacro %}
 
+
 {% block script %}
 <script>
     frappe.ready(() => {