fix: reply card ui

This commit is contained in:
pateljannat
2021-08-31 19:17:00 +05:30
parent 941a34784c
commit 9e1daf5062
3 changed files with 22 additions and 18 deletions

View File

@@ -15,7 +15,7 @@
data-docname="{{ docname }}"> data-docname="{{ docname }}">
{% for topic in topics %} {% for topic in topics %}
<div class="topic-parent" data-topic="{{ topic.name }}"> <div class="topic-parent" data-topic="{{ topic.name }}">
<div class="font-weight-bold mb-5">{{ topic.title }}</div> <div class="course-home-headings p-0">{{ topic.title }}</div>
{% set replies = frappe.get_all("Discussion Reply", {"topic": topic.name}, {% set replies = frappe.get_all("Discussion Reply", {"topic": topic.name},
["reply", "owner", "creation"], order_by="creation")%} ["reply", "owner", "creation"], order_by="creation")%}
{% for reply in replies %} {% for reply in replies %}
@@ -24,7 +24,9 @@
</div> </div>
{% endfor %} {% endfor %}
{% if not topics %} {% if not topics %}
<p id="no-discussions" class="text-center"> No discussions yet. </p> <span id="no-discussions" class="text-center">
No discussions yet. <img src="/assets/community/icons/slash.svg">
</span>
{% endif %} {% endif %}
</div> </div>
<script> <script>

View File

@@ -20,7 +20,6 @@
--received-message: var(--c8); --received-message: var(--c8);
--checkbox-size: 14px; --checkbox-size: 14px;
--control-bg: var(--gray-100); --control-bg: var(--gray-100);
--muted-text: #4C5A67;
--button-background: #EEF0F2; --button-background: #EEF0F2;
--text-xs: 11px; --text-xs: 11px;
--text-sm: 12px; --text-sm: 12px;
@@ -109,8 +108,6 @@ input[type=checkbox] {
.muted-text { .muted-text {
font-size: 12px; font-size: 12px;
line-height: 135%; line-height: 135%;
color: var(--muted-text);
height: 15px;
} }
.course-card-meta { .course-card-meta {
@@ -169,7 +166,6 @@ input[type=checkbox] {
.course-student-count { .course-student-count {
font-size: 12px; font-size: 12px;
line-height: 135%; line-height: 135%;
color: var(--muted-text);
float: right; float: right;
} }
@@ -225,9 +221,13 @@ input[type=checkbox] {
padding-right: 1rem; padding-right: 1rem;
} }
} }
.button-links {
color: #4C5A67;
}
.button-links:hover { .button-links:hover {
text-decoration: none; text-decoration: none;
color: #4C5A67;
} }
.icon-background { .icon-background {
@@ -1303,9 +1303,8 @@ textarea.form-control {
justify-content: flex-end; justify-content: flex-end;
} }
.message-author { .reply-card {
color: #192734; margin-bottom: 40px;
margin-left: 0.5rem;
} }
.certificate-page .common-card-style { .certificate-page .common-card-style {

View File

@@ -1,14 +1,17 @@
<div> <div class="reply-card">
{% set member = frappe.get_doc("User", reply.owner) %} {% set member = frappe.get_doc("User", reply.owner) %}
<div class="mb-4"> <div class="d-flex align-items-center">
{% set member = frappe.get_doc("User", reply.owner) %} {% set member = frappe.get_doc("User", reply.owner) %}
{{ widgets.Avatar(member=member, avatar_class="avatar-small")}} {{ widgets.Avatar(member=member, avatar_class="avatar-medium")}}
<div class="ml-2 flex-grow-1">
<a class="button-links" href="/user/{{ member.username }}"> <a class="button-links" href="/user/{{ member.username }}">
<span class="message-author">{{ member.full_name }}</span> <span class="muted-text">{{ member.full_name }}</span>
</a> </a>
<span class="muted-text">{{ frappe.utils.format_datetime(reply.creation, "hh:mm a, dd MMM YYYY") }}</span> <div class="muted-text">{{ frappe.utils.format_datetime(reply.creation, "hh:mm a, dd MMM YYYY") }}</div>
<a href="" class="dark-links muted-text pull-right reply" data-topic="{{ topic.name }}">Reply</a>
</div> </div>
<div class="card-divider"></div>
<a href="" class="dark-links muted-text reply" data-topic="{{ topic.name }}">Reply</a>
</div>
<div class="card-divider mt-3"></div>
<div>{{ reply.reply }}</div> <div>{{ reply.reply }}</div>
</div> </div>