eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ui for class cards

Browse Source
This commit is contained in:
Jannat Patel
2023-03-16 11:23:24 +05:30
parent 07e1aaaa66
commit 817bc4441f
4 changed files with 73 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
lms/public/css/style.css
View File

@@ -1996,7 +1996,7 @@ select {
border-radius: 0.75rem;
/* border: 1px solid var(--gray-200); */
box-shadow: var(--shadow-sm);
padding: 1rem;
padding: 0.5rem;
height: 100%;
position: relative;
}
@@ -2015,4 +2015,15 @@ select {
.add-students ul li:nth-last-child(-n+2) {
display: none;
}
}
.lms-card-title {
color: var(--gray-900);
font-weight: 500;
}
.lms-card-parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 1.5rem;
}

4
lms/public/icons/symbol-defs.svg
View File

@@ -70,4 +70,8 @@
<svg id="icon-green-check-circled" width="24" height="24" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM16.8734 10.1402C17.264 9.74969 17.264 9.11652 16.8734 8.726C16.4829 8.33547 15.8498 8.33547 15.4592 8.726L14.6259 9.55933L12.9592 11.226L10.333 13.8522L9.37345 12.8927L8.54011 12.0593C8.14959 11.6688 7.51643 11.6688 7.1259 12.0593C6.73538 12.4499 6.73538 13.083 7.1259 13.4735L7.95923 14.3069L9.6259 15.9735C9.81344 16.1611 10.0678 16.2664 10.333 16.2664C10.5982 16.2664 10.8526 16.1611 11.0401 15.9735L14.3734 12.6402L16.0401 10.9735L16.8734 10.1402Z" fill="#68D391"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" id="icon-clock" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1F272E" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

79
lms/www/classes/class.html
View File

@@ -35,16 +35,15 @@
{{ class_info.title }}
</div>
<div class="mt-2">
{% if class_info.start_date %}
<svg class="icon icon-sm">
<use href="#icon-calendar"></use>
</svg>
<span>
{{ frappe.utils.format_date(class_info.start_date, "medium") }} -
{{ frappe.utils.format_date(class_info.start_date, "long") }} -
</span>
{% endif %}
{% if class_info.end_date %}
<span>
{{ frappe.utils.format_date(class_info.end_date, "medium") }}
{{ frappe.utils.format_date(class_info.end_date, "long") }}
</span>
{% endif %}
</div>
{% if class_info.description %}
<div class="">
@@ -166,7 +165,7 @@
</table>
{% else %}
<p class="text-muted mt-3"> {{ _("No Students are added to this class.") }} </p>
<p class="text-muted mt-3 ml-5"> {{ _("No Students are added to this class.") }} </p>
{% endif %}
</div>
@@ -229,44 +228,50 @@
{% macro LiveClassList(class_info, live_classes) %}
<div class="cards-parent mt-8">
<div class="lms-card-parent mt-8">
{% for class in live_classes %}
<div class="lms-card">
<div class="course-card-title mb-0">
{{ class.title }}
<div class="mb-0">
<div class="dropdown pull-right">
<svg class="icon icon-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<use href="#icon-dot-horizontal"></use>
</svg>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
{% if class.owner == frappe.session.user %}
<li>
<a class="dropdown-item small" href="{{ class.start_url }}"> {{ _("Start") }} </a>
</li>
{% endif %}
{% if is_student %}
<li>
<a class="dropdown-item small" href="{{ class.join_url }}"> {{ _("Join") }} </a>
</li>
{% endif %}
</ul>
</div>
<div class="lms-card-title mb-4">
{{ class.title }}
</div>
</div>
<div class="small">
{{ frappe.utils.format_date(class.date, "medium") }} {{ _("at") }}
<div>
<svg class="icon icon-sm">
<use href="#icon-calendar"></use>
</svg>
{{ frappe.utils.format_date(class.date, "full") }}
</div>
<div>
<svg class="icon icon-sm">
<use href="#icon-clock"></use>
</svg>
{{ frappe.utils.format_time(class.time, "hh:mm a") }}
</div>
<div class="my-4">
<div class="mt-4">
{{ class.description }}
</div>
<div class="live-class-panel">
{% if class.owner == frappe.session.user %}
<a class="btn btn-secondary btn-sm mr-2" target="_blank" href="{{ class.start_url }}">
{{ _("Start") }}
</a>
{% endif %}
{% if is_student %}
<a class="btn btn-secondary btn-sm mt-auto" target="_blank" href="{{ class.join_url }}">
{{ _("Join Class") }}
</a>
{% endif %}
<!-- {% if class.owner == frappe.session.user %}
<a class="btn btn-secondary btn-sm mr-2" href="{{ class.start_url }}">
{{ _("Edit") }}
</a>
<a class="btn btn-secondary btn-sm" href="{{ class.start_url }}">
{{ _("Delete") }}
</a>
{% endif %} -->
</div>
</div>
{% endfor %}
</div>

24
lms/www/classes/index.html
View File

@@ -29,36 +29,40 @@
{% macro ClassCards(classes) %}
<div class="cards-parent">
<div class="lms-card-parent">
{% for class in classes %}
{% set course_count = frappe.db.count("Class Course", {"parent": class.name}) %}
{% set student_count = frappe.db.count("Class Student", {"parent": class.name}) %}
<div class="lms-card">
<div class="text-muted small">
<div class="lms-card-title">
{{ class.title }}
</div>
<div class="text-muted small mb-4">
{% if course_count %}
<span>
<span class="mr-3">
{{ course_count }} {{ _("Courses") }}
</span>
{% endif %}
{% if student_count %}
<span class="ml-3">
<span>
{{ student_count }} {{ _("Students") }}
</span>
{% endif %}
</div>
<div class="course-card-title mb-4">
{{ class.title }}
</div>
<div class="">
<svg class="icon icon-sm">
<use href="#icon-calendar"></use>
</svg>
<span>
{{ frappe.utils.format_date(class.start_date, "medium") }} -
{{ frappe.utils.format_date(class.start_date, "long") }} -
</span>
<span>
{{ frappe.utils.format_date(class.end_date, "medium") }}
{{ frappe.utils.format_date(class.end_date, "long") }}
</span>
</div>
<a class="stretched-link" href="/classes/{{ class.name }}"></a>