diff --git a/frappe/public/icons/timeless/message.svg b/frappe/public/icons/timeless/message.svg new file mode 100644 index 0000000000..f63327f5e6 --- /dev/null +++ b/frappe/public/icons/timeless/message.svg @@ -0,0 +1,3 @@ + + + diff --git a/frappe/public/icons/timeless/search.svg b/frappe/public/icons/timeless/search.svg new file mode 100644 index 0000000000..b99c657525 --- /dev/null +++ b/frappe/public/icons/timeless/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/frappe/public/js/frappe-web.bundle.js b/frappe/public/js/frappe-web.bundle.js index 9f7875f96b..c962457964 100644 --- a/frappe/public/js/frappe-web.bundle.js +++ b/frappe/public/js/frappe-web.bundle.js @@ -10,6 +10,7 @@ import "./frappe/utils/common.js"; import "./frappe/ui/messages.js"; import "./frappe/translate.js"; import "./frappe/utils/pretty_date.js"; +import "./frappe/utils/datetime.js"; import "./frappe/microtemplate.js"; import "./frappe/query_string.js"; diff --git a/frappe/public/scss/website/index.scss b/frappe/public/scss/website/index.scss index eb6e83e7fe..08d1a0734c 100644 --- a/frappe/public/scss/website/index.scss +++ b/frappe/public/scss/website/index.scss @@ -9,6 +9,7 @@ @import "../common/buttons"; @import "../common/modal"; @import "../desk/toast"; +@import "../desk/css_variables.scss"; @import "../common/indicator"; @import "../common/controls"; @import "../common/awesomeplete"; diff --git a/frappe/templates/base.html b/frappe/templates/base.html index 635fe559ce..3bbb9f46bd 100644 --- a/frappe/templates/base.html +++ b/frappe/templates/base.html @@ -96,6 +96,18 @@ {% block base_scripts %} + + + {{ include_script('frappe-web.bundle.js') }} {% endblock %} diff --git a/frappe/templates/discussions/button.html b/frappe/templates/discussions/button.html index faaa901cbb..b93ff86a47 100644 --- a/frappe/templates/discussions/button.html +++ b/frappe/templates/discussions/button.html @@ -1,7 +1,7 @@ {% if frappe.session.user != "Guest" and (condition is not defined or (condition is defined and condition )) %} - {{ cta_title }} - + {{ cta_title }} + {% endif %} diff --git a/frappe/templates/discussions/comment_box.html b/frappe/templates/discussions/comment_box.html index 328d88234c..f172e24a9c 100644 --- a/frappe/templates/discussions/comment_box.html +++ b/frappe/templates/discussions/comment_box.html @@ -1,32 +1,32 @@
-
-
-
- -
-
-
+
+
+
+ +
+
+
-
-
-
- -
-
-
+
+
+
+ +
+
+
-
-
- Press Cmd+Enter to post your comment -
+
+
+ Press Cmd+Enter to post your comment +
- Cancel -
- Post
-
- + Cancel +
+ Post
+
+ diff --git a/frappe/templates/discussions/discussions.js b/frappe/templates/discussions/discussions.js index 3669ac7883..7ebbeba608 100644 --- a/frappe/templates/discussions/discussions.js +++ b/frappe/templates/discussions/discussions.js @@ -2,8 +2,6 @@ frappe.ready(() => { setup_socket_io(); - set_docname_if_missing(); - add_color_to_avatars(); expand_first_discussion(); @@ -52,14 +50,23 @@ frappe.ready(() => { $(document).on("click", ".cancel-comment", (e) => { clear_comment_box(e); }) + + if ($(document).width() <= 550) { + $(document).on("click", ".sidebar-parent", (e) => { + hide_sidebar(); + }) + } + + $(document).on("click", ".back", (e) => { + back_to_sidebar(e); + }) + }) var show_new_topic_modal = (e) => { e.preventDefault(); $("#discussion-modal").modal("show"); var topic = $(e.currentTarget).attr("data-topic"); - $(".modal-headings").text(topic ? "Reply" : "Start a Discussion"); - topic ? $(".topic-title").addClass("hide") : $(".topic-title").removeClass("hide"); $("#submit-discussion").attr("data-topic", topic ? topic : ""); } @@ -87,8 +94,8 @@ var publish_message = (data) => { $(data.template).insertBefore(`.discussion-on-page[data-topic=${data.topic_info.name}] .discussion-form`); } - else if ((decodeURIComponent($(".discussions-parent .course-content-parent").attr("data-doctype")) == data.topic_info.reference_doctype - && decodeURIComponent($(".discussions-parent .course-content-parent").attr("data-docname")) == data.topic_info.reference_docname)) { + else if ((decodeURIComponent($(".discussions-parent .discussions-card").attr("data-doctype")) == data.topic_info.reference_doctype + && decodeURIComponent($(".discussions-parent .discussions-card").attr("data-docname")) == data.topic_info.reference_docname)) { post_message_cleanup(); data.new_topic_template = style_avatar_frame(data.new_topic_template) @@ -114,6 +121,7 @@ var post_message_cleanup = () => { $(".comment-field").css("height", "48px"); $("#discussion-modal").modal("hide"); $("#no-discussions").addClass("hide"); + $(".cancel-comment").addClass("hide"); } var update_reply_count = (topic) => { @@ -122,23 +130,15 @@ var update_reply_count = (topic) => { $(`[data-target='#t${topic}']`).find(".reply-count").text(reply_count); } -var set_docname_if_missing = () => { - if ($("[data-docname='None']").length) { - frappe.call({ - method: "frappe.website.doctype.discussion_topic.discussion_topic.get_docname", - args: { - "route": window.location.href.split("/").slice(-1)[0] - }, - callback: (data) => { - $("[data-docname='None']").attr("data-docname", data.message); - } - }) - } -} - var expand_first_discussion = () => { - $($(".discussions-parent .collapse")[0]).addClass("show"); - $($(".discussions-sidebar [data-toggle='collapse']")[0]).attr("aria-expanded", true); + if ($(document).width() > 550) { + $($(".discussions-parent .collapse")[0]).addClass("show"); + $($(".discussions-sidebar [data-toggle='collapse']")[0]).attr("aria-expanded", true); + } + else { + $("#discussion-group").addClass("hide"); + } + } var search_topic = (e) => { @@ -217,6 +217,7 @@ var submit_discussion = (e) => { } var login_from_discussion = (e) => { + e.preventDefault(); var redirect = $(e.currentTarget).attr("data-redirect") || window.location.href; window.location.href = `/login?redirect-to=${redirect}`; } @@ -249,3 +250,14 @@ var clear_comment_box = (e) => { $(".discussion-on-page .comment-field").val(""); } } + +var hide_sidebar = () => { + $(".discussions-sidebar").addClass("hide"); + $("#discussion-group").removeClass("hide"); +} + +var back_to_sidebar = () => { + $(".discussions-sidebar").removeClass("hide"); + $("#discussion-group").addClass("hide"); + $(".discussion-on-page").collapse("hide"); +} diff --git a/frappe/templates/discussions/discussions_section.html b/frappe/templates/discussions/discussions_section.html index d587100980..db291d9886 100644 --- a/frappe/templates/discussions/discussions_section.html +++ b/frappe/templates/discussions/discussions_section.html @@ -4,55 +4,55 @@ {% include "frappe/templates/discussions/topic_modal.html" %}
-
- {{ _(title) }} - {% if topics %} - {% include "frappe/templates/discussions/button.html" %} - {% endif %} -
+
+ {{ _(title) }} + {% if topics %} + {% include "frappe/templates/discussions/button.html" %} + {% endif %} +
- {% if topics %} -
+ {% if topics %} +
-
- {% include "frappe/templates/discussions/search.html" %} - {% for topic in topics %} - {% set replies = frappe.get_all("Discussion Reply", {"topic": topic.name})%} - {% include "frappe/templates/discussions/sidebar.html" %} - {% endfor %} -
+
+ {% include "frappe/templates/discussions/search.html" %} + {% for topic in topics %} + {% set replies = frappe.get_all("Discussion Reply", {"topic": topic.name})%} + {% include "frappe/templates/discussions/sidebar.html" %} + {% endfor %} +
-
- {% include "frappe/templates/discussions/reply_section.html" %} -
-
- {% else %} +
+ {% include "frappe/templates/discussions/reply_section.html" %} +
+
+ {% else %} -
-
-
No Discussions
-
There are no discussions for this {{ doctype | lower }}, why don't you start - one!
- {% if frappe.session.user == "Guest" %} -
Log In
- {% elif not condition %} -
- {{ button_name }} -
- {% else %} - {% include "frappe/templates/discussions/button.html" %} - {% endif %} -
-
+
+
+
No {{ title }}
+
There are no {{ title | lower }} for this {{ doctype | lower }}, why don't you start + one!
+ {% if frappe.session.user == "Guest" %} +
Log In
+ {% elif condition is defined and not condition %} + + {{ button_name }} + + {% else %} + {% include "frappe/templates/discussions/button.html" %} + {% endif %} +
+
{% endif %} {% block script %} - + {% endblock %} {% block style %} - + {% endblock %} diff --git a/frappe/templates/discussions/reply_card.html b/frappe/templates/discussions/reply_card.html index 570173ffdb..2ce430aaed 100644 --- a/frappe/templates/discussions/reply_card.html +++ b/frappe/templates/discussions/reply_card.html @@ -1,19 +1,19 @@ {% from "frappe/templates/includes/avatar_macro.html" import avatar %}
- {% set member = frappe.db.get_value("User", reply.owner, ["name", "full_name", "username"], as_dict=True) %} -
- {% if loop.index == 1 %} - {{ avatar(reply.owner) }} - {% endif %} - - {{ member.full_name }} - -
just now
-
- {% if loop.index == 1 %} -
- {% else %} -
- {% endif %} -
{{ frappe.utils.md_to_html(reply.reply) }}
+ {% set member = frappe.db.get_value("User", reply.owner, ["name", "full_name", "username"], as_dict=True) %} +
+ {% if loop.index == 1 %} + {{ avatar(reply.owner) }} + {% endif %} + + {{ member.full_name }} + +
{{ frappe.utils.pretty_date(reply.creation) }}
+
+ {% if loop.index == 1 %} +
+ {% else %} +
+ {% endif %} +
{{ frappe.utils.md_to_html(reply.reply) }}
diff --git a/frappe/templates/discussions/reply_section.html b/frappe/templates/discussions/reply_section.html index 4b6bca3b41..a9eb7be8ba 100644 --- a/frappe/templates/discussions/reply_section.html +++ b/frappe/templates/discussions/reply_section.html @@ -2,32 +2,36 @@ {% set replies = frappe.get_all("Discussion Reply", {"topic": topic.name}, ["reply", "owner", "creation"], order_by="creation")%} - {% if replies %}
-
{{ topic.title }}
- {% for reply in replies %} - {% include "frappe/templates/discussions/reply_card.html" %} + data-parent="#discussion-group"> - {% if loop.index == 1 %} -
- {% endif %} - {% endfor %} +
+ Back +
- {% if frappe.session.user == "Guest" or (condition is defined and not condition) %} -
- Want to join the discussion? - {% if frappe.session.user == "Guest" %} -
Log In
- {% elif not condition %} -
{{ button_name }} -
- {% endif %} -
- {% else %} - {% include "frappe/templates/discussions/comment_box.html" %} - {% endif %} +
{{ topic.title }}
+ {% for reply in replies %} + {% include "frappe/templates/discussions/reply_card.html" %} + + {% if loop.index == 1 %} +
+ {% endif %} + {% endfor %} + + {% if frappe.session.user == "Guest" or (condition is defined and not condition) %} +
+ Want to join the discussion? + {% if frappe.session.user == "Guest" %} +
Log In
+ {% elif not condition %} +
{{ button_name }} +
+ {% endif %} +
+ {% else %} + {% include "frappe/templates/discussions/comment_box.html" %} + {% endif %}
{% endif %} diff --git a/frappe/templates/discussions/search.html b/frappe/templates/discussions/search.html index 572e2f3b40..800f2962fd 100644 --- a/frappe/templates/discussions/search.html +++ b/frappe/templates/discussions/search.html @@ -1,9 +1,9 @@
-
-
- -
-
+
+
+ +
+
diff --git a/frappe/templates/discussions/sidebar.html b/frappe/templates/discussions/sidebar.html index c94abb212a..764d88e0bb 100644 --- a/frappe/templates/discussions/sidebar.html +++ b/frappe/templates/discussions/sidebar.html @@ -1,19 +1,19 @@
- -
+ +
diff --git a/frappe/templates/discussions/topic_modal.html b/frappe/templates/discussions/topic_modal.html index e57c74a35c..6647e7bc9f 100644 --- a/frappe/templates/discussions/topic_modal.html +++ b/frappe/templates/discussions/topic_modal.html @@ -1,15 +1,15 @@ diff --git a/frappe/templates/styles/discussion_style.css b/frappe/templates/styles/discussion_style.css index 336d526aa3..fe161101e0 100644 --- a/frappe/templates/styles/discussion_style.css +++ b/frappe/templates/styles/discussion_style.css @@ -1,4 +1,3 @@ - .thread-card { flex-direction: column; padding: 1rem; @@ -9,18 +8,18 @@ font-size: inherit; color: inherit; padding: 0.75rem 1rem; + border-radius: 4px; + resize: none; +} + +.modal .comment-field { + height: 300px; resize: none; } .discussion-on-page .comment-field { height: 48px; box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.2); - border-radius: 4px; -} - -.modal .comment-field { - height: 300px; - resize: none; } .modal .cancel-comment { @@ -57,7 +56,7 @@ .discussions-parent .search-field { background-color: #E2E6E9; - background-image: url(/assets/community/icons/search.svg); + background-image: url(/assets/frappe/icons/timeless/search.svg); background-repeat: no-repeat; text-indent: 1.5rem; background-position: 1rem 0.7rem; @@ -70,6 +69,19 @@ background-color: #F4F5F6; padding: 0.75rem; border-radius: 4px; + max-height: 700px; + overflow-y: auto; +} + +@media (max-width: 550px) { + .discussions-sidebar { + padding: 1rem; + } +} + +#discussion-group { + max-height: 700px; + overflow-y: auto; } .sidebar-topic { @@ -124,3 +136,123 @@ .reply-text h4 { font-size: 1rem; } + +.sidebar-info { + margin-top: 0.5rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +.course-home-headings { + font-weight: 600; + font-size: 22px; + line-height: 146%; + letter-spacing: -0.0175em; + color: #192734; + margin-bottom: 1rem; + padding: 0 1rem; +} + +.common-card-style { + display: flex; + background: #FFFFFF; + border-radius: 8px; + position: relative; + border: 1px solid #EEF0F2; + box-shadow: 0 0px 4px 2px #19273405; +} + +.button { + box-shadow: var(--btn-shadow); + border-radius: 4px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + width: fit-content; + padding: 8px 12px 8px; + font-size: 12px; + line-height: 135%; + letter-spacing: -0.011em; + border: none; +} + +.is-primary { + background: var(--primary-color); + color: #FFFFFF; +} + +.is-primary:hover { + text-decoration: none; + color: #FFFFFF; +} + +.is-secondary { + background: #FFFFFF; +} + +.is-secondary:hover { + text-decoration: none; + color: inherit; +} + +.is-default { + background: #F4F5F6; + color: #1F272E; +} + + +.discussions-card { + display: grid; + grid-gap: 2rem; + grid-template-columns: 2fr minmax(600px, 5fr); +} + +@media (max-width: 1024px) { + .discussions-card { + grid-template-columns: 3fr minmax(400px, 5fr); + } +} + +@media (max-width: 768px) { + .discussions-card { + grid-template-columns: 4fr minmax(400px, 5fr); + } +} + +@media (max-width: 550px) { + .discussions-card { + display: flex; + } +} + +@media (max-width: 550px) { + .back { + margin-top: 0.5rem; + margin-bottom: 1rem; + } +} + +@media (min-width: 550px) { + .back { + display: none; + } +} + +.course-instructor { + margin: 0px 8px; + font-size: 12px; + line-height: 135%; + color: var(--text-color); +} + +.card-divider { + border: 1px solid #EEF0F2; + margin-bottom: 1rem; +} + + .card-divider-dark { + border: 1px solid #C8CFD5; + margin-bottom: 16px; +} diff --git a/frappe/utils/data.py b/frappe/utils/data.py index 1e213dea3e..473321339a 100644 --- a/frappe/utils/data.py +++ b/frappe/utils/data.py @@ -213,7 +213,6 @@ def today(): return nowdate() def get_abbr(string, max_len=2): - print(string) abbr='' for part in string.split(' '): if len(abbr) < max_len and part: diff --git a/frappe/website/doctype/discussion_topic/discussion_topic.py b/frappe/website/doctype/discussion_topic/discussion_topic.py index 4ab8558f96..28673a47e4 100644 --- a/frappe/website/doctype/discussion_topic/discussion_topic.py +++ b/frappe/website/doctype/discussion_topic/discussion_topic.py @@ -5,31 +5,34 @@ import frappe from frappe.model.document import Document class DiscussionTopic(Document): - pass + pass @frappe.whitelist() def submit_discussion(doctype, docname, reply, title, topic_name=None): - if topic_name: - save_message(reply, topic_name) - return topic_name + if topic_name: + save_message(reply, topic_name) + return topic_name - topic = frappe.get_doc({ - "doctype": "Discussion Topic", - "title": title, - "reference_doctype": doctype, - "reference_docname": docname - }) - topic.save(ignore_permissions=True) - save_message(reply, topic.name) - return topic.name + topic = frappe.get_doc({ + "doctype": "Discussion Topic", + "title": title, + "reference_doctype": doctype, + "reference_docname": docname + }) + topic.save(ignore_permissions=True) + save_message(reply, topic.name) + return topic.name def save_message(reply, topic): - frappe.get_doc({ - "doctype": "Discussion Reply", - "reply": reply, - "topic": topic - }).save(ignore_permissions=True) + frappe.get_doc({ + "doctype": "Discussion Reply", + "reply": reply, + "topic": topic + }).save(ignore_permissions=True) -@frappe.whitelist() +@frappe.whitelist(allow_guest=True) def get_docname(route): - return frappe.db.get_value("Web Page", {"route": route}, ["name"]) + if not route: + route = frappe.db.get_single_value("Website Settings", "home_page") + return frappe.db.get_value("Web Page", {"route": route}, ["name"]) + diff --git a/frappe/website/web_template/discussions/discussions.html b/frappe/website/web_template/discussions/discussions.html index 045927d2fa..a3127ef7e5 100644 --- a/frappe/website/web_template/discussions/discussions.html +++ b/frappe/website/web_template/discussions/discussions.html @@ -1,3 +1,3 @@ -{% set docname = frappe.db.get_value("Web Page", {"route": ""}, ["name"])%} +{% set doctype = "Web Page" %} {% include "frappe/templates/discussions/discussions_section.html" %} diff --git a/frappe/website/web_template/discussions/discussions.json b/frappe/website/web_template/discussions/discussions.json index 96a0e4f56d..565551173b 100644 --- a/frappe/website/web_template/discussions/discussions.json +++ b/frappe/website/web_template/discussions/discussions.json @@ -1,12 +1,31 @@ { - "__islocal": true, "__unsaved": 1, "creation": "2021-08-30 12:42:31.550200", "docstatus": 0, "doctype": "Web Template", - "fields": [], + "fields": [ + { + "fieldname": "title", + "fieldtype": "Data", + "label": "Title", + "reqd": 1 + }, + { + "fieldname": "cta_title", + "fieldtype": "Data", + "label": "CTA Title", + "reqd": 1 + }, + { + "fieldname": "docname", + "fieldtype": "Link", + "label": "Reference Docname", + "options": "Web Page", + "reqd": 1 + } + ], "idx": 0, - "modified": "2021-08-30 12:42:31.550201", + "modified": "2021-09-16 12:11:56.140616", "modified_by": "Administrator", "module": "Website", "name": "Discussions",