refactor: styling cards and article
This commit is contained in:
parent
6132c8527b
commit
2a0483dee3
@ -3,6 +3,26 @@
|
||||
|
||||
{% block head_include %}
|
||||
<style>
|
||||
.lms-content {
|
||||
line-height: 1.8em;
|
||||
}
|
||||
|
||||
.lms-content h1 {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.lms-content h2 {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.lms-content h3 {
|
||||
margin-top: 0.8em;
|
||||
}
|
||||
|
||||
.lms-content h4 {
|
||||
margin-top: 0.6em;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 5rem 0 5rem 0;
|
||||
}
|
||||
@ -79,7 +99,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="player" data-plyr-provider="{{ content.provider|lower }}" data-plyr-embed-id="{{ content.url }}"></div>
|
||||
<div class="my-5" style="line-height: 1.8em;">
|
||||
<div class="my-5 lms-content">
|
||||
{{ content.description }}
|
||||
</div>
|
||||
{% endmacro %}
|
||||
@ -99,7 +119,7 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div style="line-height: 1.8em;">
|
||||
<div class="lms-content">
|
||||
{{ content.content }}
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
@ -1,6 +1,7 @@
|
||||
{% extends "templates/base.html" %}
|
||||
{% block title %}{{ course.course_name }}{% endblock %}
|
||||
{% from "www/lms/macros/hero.html" import hero %}
|
||||
{% from "www/lms/macros/card.html" import null_card %}
|
||||
|
||||
{% block head_include %}
|
||||
<style>
|
||||
@ -35,8 +36,8 @@
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% macro card(topic, index, length) %}
|
||||
<div class="col-sm-{{ 12 if length%3 == 1 and index == 1 else 6 if length%3 == 2 and index in [1,2] else 4}} mb-4 text-left">
|
||||
{% macro card(topic) %}
|
||||
<div class="col-sm-4 mb-4 text-left">
|
||||
<div class="card h-100">
|
||||
{% if has_access %}
|
||||
<a href="/lms/topic?program={{ program }}&course={{ course.name }}&topic={{ topic.name }}" class="no-decoration no-underline">
|
||||
@ -92,8 +93,13 @@
|
||||
<div class='container'>
|
||||
<div class="row mt-5">
|
||||
{% for topic in topics %}
|
||||
{{ card(topic, loop.index, topics|length) }}
|
||||
{{ card(topic) }}
|
||||
{% endfor %}
|
||||
{% if topics %}
|
||||
{% for n in range(3 - ((topics|length)%3)) %}
|
||||
{{ null_card() }}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
@ -1,6 +1,7 @@
|
||||
{% extends "templates/base.html" %}
|
||||
{% block title %}{{ education_settings.portal_title }}{% endblock %}
|
||||
{% from "www/lms/macros/card.html" import program_card %}
|
||||
{% from "www/lms/macros/card.html" import null_card %}
|
||||
|
||||
{% block head_include %}
|
||||
<meta name="description" content="{{ education_settings.description }}" />
|
||||
@ -43,7 +44,9 @@
|
||||
<h1>{{ education_settings.portal_title }}</h1>
|
||||
<p class='lead'>{{ education_settings.description }}</p>
|
||||
<p class="mt-4">
|
||||
<a class="btn btn-primary btn-lg" href="{{ '/login#signup' if frappe.session.user == 'Guest' else '/lms/all-programs' }}">{{ 'Start Learning' if frappe.session.user == 'Guest' else 'Explore Programs'}}</a>
|
||||
{% if frappe.session.user == 'Guest' %}
|
||||
<a class="btn btn-primary btn-lg" href="'/login#signup'}}">Start Learning</a>
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
<div class='container'>
|
||||
@ -51,6 +54,11 @@
|
||||
{% for program in featured_programs %}
|
||||
{{ program_card(program.program, program.has_access) }}
|
||||
{% endfor %}
|
||||
{% if featured_programs %}
|
||||
{% for n in range(3 - ((featured_programs|length)%3)) %}
|
||||
{{ null_card() }}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
@ -1,5 +1,5 @@
|
||||
{% macro program_card(program, has_access) %}
|
||||
<div class="col-sm mb-4 text-left">
|
||||
<div class="col-sm-4 mb-4 text-left">
|
||||
<a href="/lms/program?program={{ program.name }}" class="no-decoration no-underline">
|
||||
<div class="card h-100">
|
||||
{% if program.hero_image %}
|
||||
@ -11,7 +11,7 @@
|
||||
{% endif %}
|
||||
<div class='card-body'>
|
||||
<h5 class='card-title'>{{ program.program_name }}</h5>
|
||||
<div class="text-muted">{{ program.description or '' }}</div>
|
||||
<div class="text-muted">{{ program.description[:110] + '...' if program.description else '' }}</div>
|
||||
</div>
|
||||
{% if has_access or program.intro_video%}
|
||||
<div class='card-footer'>
|
||||
@ -23,4 +23,12 @@
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
|
||||
{% macro null_card() %}
|
||||
<div class="col-sm-4 mb-4 text-left">
|
||||
<div class="h-100" style="border: 1px solid rgba(209,216,221,0.5);border-radius: 0.25rem;background-color: rgb(250, 251, 252);">
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
@ -1,6 +1,7 @@
|
||||
{% extends "templates/base.html" %}
|
||||
{% block title %}{{ program.program_name }}{% endblock %}
|
||||
{% from "www/lms/macros/hero.html" import hero %}
|
||||
{% from "www/lms/macros/card.html" import null_card %}
|
||||
|
||||
{% block head_include %}
|
||||
<style>
|
||||
@ -36,8 +37,8 @@
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% macro card(course, index, length) %}
|
||||
<div class="col-sm-{{ 12 if length%3 == 1 and index == 1 else 6 if length%3 == 2 and index in [1,2] else 4}} mb-4 text-left">
|
||||
{% macro card(course) %}
|
||||
<div class="col-sm-4 mb-4 text-left">
|
||||
<a href="/lms/course?name={{ course.name }}&program={{ program.name }}" class="no-decoration no-underline">
|
||||
<div class="card h-100">
|
||||
{% if course.hero_image %}
|
||||
@ -49,7 +50,7 @@
|
||||
{% endif %}
|
||||
<div class='card-body'>
|
||||
<h5 class='card-title'>{{ course.course_name }}</h5>
|
||||
<div class="text-muted">{{ course.description or '' }}</div>
|
||||
<div class="text-muted">{{ course.description[:110] + '...' if course.description else '' }}</div>
|
||||
</div>
|
||||
{% if has_access and progress[course.name] %}
|
||||
<div class='card-footer'>
|
||||
@ -73,8 +74,13 @@
|
||||
<div class='container'>
|
||||
<div class="row mt-5">
|
||||
{% for course in courses %}
|
||||
{{ card(course, loop.index, courses|length) }}
|
||||
{{ card(course) }}
|
||||
{% endfor %}
|
||||
{% if courses %}
|
||||
{% for n in range(3 - ((courses|length)%3)) %}
|
||||
{{ null_card() }}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
@ -1,6 +1,7 @@
|
||||
{% extends "templates/base.html" %}
|
||||
{% block title %}Topic Title{% endblock %}
|
||||
{% from "www/lms/macros/hero.html" import hero %}
|
||||
{% from "www/lms/macros/card.html" import null_card %}
|
||||
|
||||
{% block head_include %}
|
||||
<style>
|
||||
@ -46,6 +47,11 @@
|
||||
{% for content in contents %}
|
||||
{{ card(content, loop.index, topic.contents|length) }}
|
||||
{% endfor %}
|
||||
{% if contents %}
|
||||
{% for n in range(3 - ((contents|length)%3)) %}
|
||||
{{ null_card() }}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
Loading…
x
Reference in New Issue
Block a user