feat: discussions sidebar

community/community/widgets/DiscussionMessage.html

@@ -1,33 +1,65 @@
 {% set topics = frappe.get_all("Discussion Topic",
-{"reference_doctype": doctype, "reference_docname": docname}, ["name", "title"]) %}
+{"reference_doctype": doctype, "reference_docname": docname}, ["name", "title", "owner", "creation"]) %}
 
-<div class="courses-header mt-10">
-  <span>{{_('Discussions')}}</span>
-  <div class="button is-primary pull-right reply">
-    <img src="/assets/community/icons/small-add.svg">
-    Start a Discussion
+<div class="discussions-parent">
+  <div class="mt-10 mb-5">
+    <span class="course-home-headings">{{_('Discussions')}}</span>
+    <span class="review-link button is-secondary pull-right">
+      New Topic
+      <img src="/assets/community/icons/small-add-black.svg">
+    </span>
   </div>
-</div>
+  {{ widgets.DiscussionComment(doctype=doctype, docname=docname) }}
 
-{{ widgets.DiscussionComment(doctype=doctype, docname=docname) }}
+  <div class="common-card-style thread-card course-content-parent" data-doctype="{{ doctype }}"
+    data-docname="{{ docname }}">
+
+    <div>
+      {% for topic in topics %}
+      {% set replies = frappe.get_all("Discussion Reply", {"topic": topic.name})%}
+      <div class="pl-3 pr-3" data-target="#t{{ topic.name }}" data-toggle="collapse" aria-expanded="false">
+        <div class="discussion-topic-title">{{ topic.title }}</div>
+        <div class="mt-2 mb-3">
+          {% set creator = frappe.get_doc("User", topic.owner) %}
+          {{ widgets.Avatar(member=creator, avatar_class="avatar-small") }}
+          <a class="button-links" href="/users/{{ creator.username }}">
+            <span class="course-instructor">
+              {{ creator.full_name }}
+            </span>
+          </a>
+          <span class="muted-text">
+            <img src="/assets/community/icons/message.svg"> {{ replies | length }}
+          </span>
+        </div>
+      </div>
+      {% if loop.index != topics | length %}
+      <div class="card-divider"></div>
+      {% endif %}
+      {% endfor %}
+
+    </div>
+
+    <div id="discussion-group">
+      {% for topic in topics %}
+      {% set replies = frappe.get_all("Discussion Reply", {"topic": topic.name},
+      ["reply", "owner", "creation"], order_by="creation")%}
+      <div class="collapse" id="t{{ topic.name }}" class="topic-parent" data-topic="{{ topic.name }}"
+        data-parent="#discussion-group">
+        <div class="course-home-headings p-0">{{ topic.title }}</div>
+        {% for reply in replies %}
+        {% include "community/templates/reply_card.html" %}
+        {% endfor %}
+      </div>
+      {% endfor %}
+    </div>
+
+    {% if not topics %}
+    <span id="no-discussions" class="text-center">
+      No discussions yet. <img src="/assets/community/icons/slash.svg">
+    </span>
+    {% endif %}
 
-<div class="common-card-style thread-card discussions-section" data-doctype="{{ doctype }}"
-  data-docname="{{ docname }}">
-  {% for topic in topics %}
-  <div class="topic-parent" data-topic="{{ topic.name }}">
-    <div class="course-home-headings p-0">{{ topic.title }}</div>
-    {% set replies = frappe.get_all("Discussion Reply", {"topic": topic.name},
-    ["reply", "owner", "creation"], order_by="creation")%}
-    {% for reply in replies %}
-    {% include "community/templates/reply_card.html" %}
-    {% endfor %}
   </div>
-  {% endfor %}
-  {% if not topics %}
-  <span id="no-discussions" class="text-center">
-    No discussions yet. <img src="/assets/community/icons/slash.svg">
-  </span>
-  {% endif %}
 </div>
 <script>
   frappe.ready(() => {
@@ -35,6 +67,8 @@
 
     set_docname_if_missing();
 
+    expand_first_discussion();
+
     $(document).on("click", ".reply", (e) => {
       show_new_topic_modal(e);
     })
@@ -106,4 +140,14 @@
       })
     }
   }
+
+  var expand_first_discussion = () => {
+    var elements = $(".discussions-parent .collapse");
+    elements.each((i, element) => {
+      if (i < 1) {
+        $(element).addClass("show");
+        return false;
+      }
+    });
+  }
 </script>

community/lms/widgets/ChapterTeaser.html

@@ -64,10 +64,11 @@
   })
 
   var expand_the_first_chapter = () => {
-    var elements = $(".collapse");
+    var elements = $(".course-outline .collapse");
     elements.each((i, element) => {
-      if (i <= 1) {
+      if (i < 1) {
         show_section(element);
+        return false;
       }
     });
   }

community/public/css/style.css

@@ -438,7 +438,7 @@ input[type=checkbox] {
 
 .button {
   box-shadow: var(--btn-shadow);
-  border-radius: 8px;
+  border-radius: 4px;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -1281,7 +1281,7 @@ pre {
 
 .thread-card {
   flex-direction: column;
-  padding: 1.5rem;
+  padding: 1rem;
 }
 
 textarea.form-control {
@@ -1307,6 +1307,14 @@ textarea.form-control {
   margin-bottom: 40px;
 }
 
+.discussions-parent .collapsing {
+  transition: height 0s;
+}
+
+.discussion-topic-title {
+  color: var(--text-color);
+}
+
 .certificate-page .common-card-style {
   color: black;
   font-size: 1.25rem;

community/public/icons/message.svg

@@ -1,5 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.00001 3.00001H12L15.5 3C16.6046 3 17.5 3.89543 17.5 5V9.78889V12.2556C17.5 13.3601 16.6046 14.2556 15.5 14.2556H14.5C14.2239 14.2556 14 14.4794 14 14.7556V16.4507C14 16.8715 13.5119 17.1041 13.185 16.839L10.2754 14.4789C10.0972 14.3344 9.87483 14.2556 9.64544 14.2556H4.49997C3.39539 14.2556 2.49995 13.3601 2.49997 12.2555L2.50001 9.78889V5.00001C2.50001 3.89544 3.39544 3.00001 4.50001 3.00001L6.00001 3.00001Z" stroke="#1F272E" stroke-miterlimit="10" stroke-linecap="square"/>
-<path d="M6 6.5H13" stroke="#1F272E" stroke-miterlimit="10" stroke-linecap="round"/>
-<path d="M6 9H10" stroke="#1F272E" stroke-miterlimit="10" stroke-linecap="round"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 14.6667C4 15.1382 4.1873 15.5903 4.5207 15.9237C4.8541 16.2571 5.30628 16.4444 5.77778 16.4444H16.4444L20 20V5.77778C20 5.30628 19.8127 4.8541 19.4793 4.5207C19.1459 4.1873 18.6937 4 18.2222 4H5.77778C5.30628 4 4.8541 4.1873 4.5207 4.5207C4.1873 4.8541 4 5.30628 4 5.77778V14.6667Z" stroke="#4C5A67" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

community/public/icons/small-add-black.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.5005 4.3335C8.5005 4.05735 8.27665 3.8335 8.0005 3.8335C7.72436 3.8335 7.5005 4.05735 7.5005 4.3335V7.50062H4.33337C4.05723 7.50062 3.83337 7.72447 3.83337 8.00062C3.83337 8.27676 4.05723 8.50062 4.33337 8.50062H7.5005V11.6677C7.5005 11.9439 7.72436 12.1677 8.0005 12.1677C8.27665 12.1677 8.5005 11.9439 8.5005 11.6677V8.50062H11.6676C11.9438 8.50062 12.1676 8.27676 12.1676 8.00062C12.1676 7.72447 11.9438 7.50062 11.6676 7.50062H8.5005V4.3335Z" fill="#4C5A67"/>
+</svg>

community/www/batch/learn.html

@@ -27,14 +27,9 @@
         {% if membership %}
         {{ pagination(prev_url, next_url) }}
         {% endif %}
-
-        {% set title = lesson.title + " - " + course.title %}
-        {% set condition = membership or is_instructor %}
-        {{ widgets.DiscussionMessage(doctype="Lesson", docname=lesson.name,
-          condition=condition, button_name="Start Learning",
-          redirect_to="/courses/" + course.name) }}
       </div>
     </div>
+    {{ Discussions() }}
   </div>
 </div>
 {% endblock %}
@@ -96,7 +91,7 @@
       Next
       <img class="ml-2" src="/assets/community/icons/side-arrow-white.svg">
     </a>
-    {% elif course.enable_certification  %}
+    {% elif course.enable_certification %}
     <div class="button is-primary {% if course.get_course_progress() != 100 %} hide {% endif %}" id="certification">
       Get Certificate
     </div>
@@ -106,6 +101,14 @@
 </div>
 {% endmacro %}
 
+{% macro Discussions() %}
+{% set title = lesson.title + " - " + course.title %}
+{% set condition = membership or is_instructor %}
+{{ widgets.DiscussionMessage(doctype="Lesson", docname=lesson.name,
+          condition=condition, button_name="Start Learning",
+          redirect_to="/courses/" + course.name) }}
+{% endmacro %}
+
 {%- block script %}
 {{ super() }}