refactor: cards and hero markup

This commit is contained in:
Shivam Mishra 2019-05-29 18:38:09 +05:30
parent 08425d46fa
commit 5aa8df840e
3 changed files with 28 additions and 32 deletions

View File

@ -32,25 +32,25 @@
{% macro card(program, is_enrolled) %}
<div class="col-sm mb-4 text-left">
<div class="card">
<a href="/lms/program?name={{ program.name }}" class="no-decoration no-underline">
{% if program.hero_image %}
<div class="card-hero-img" style="background-image: url({{ program.hero_image }})"></div>
{% else %}
<div class="card-image-wrapper text-center">
<div class="image-body">{{ program.program_name }}</div>
</div>
{% endif %}
<div class='card-body'>
<h5 class='card-title'>{{ program.program_name }}</h5>
<div>{{ program.description }}</div>
</div>
<div class='card-footer'>
<a href='#' class='small'>Watch Intro</a>
</div>
</a>
<div class="col-sm-6 mb-4 text-left">
<a href="/lms/program?name={{ program.name }}" class="no-decoration no-underline">
<div class="card h-100">
{% if program.hero_image %}
<div class="card-hero-img" style="background-image: url({{ program.hero_image }})"></div>
{% else %}
<div class="card-image-wrapper text-center">
<div class="image-body">{{ program.program_name }}</div>
</div>
{% endif %}
<div class='card-body'>
<h5 class='card-title'>{{ program.program_name }}</h5>
<div>{{ program.description }}</div>
</div>
<div class='card-footer'>
<span class='small'>Watch Intro</span>
</div>
</div>
</a>
</div>
{% endmacro %}
@ -68,9 +68,6 @@
{{ card(program.program, program.is_enrolled) }}
{% endfor %}
</div>
<p class='mt-4'>
<a href='/lms/all-programs' class='text-muted'>View All Programs</a>
</p>
</div>
</section>
{% endblock %}

View File

@ -32,8 +32,8 @@
</style>
{% endblock %}
{% macro card(program, is_enrolled) %}
<div class="col-sm-6 mb-4 text-left">
{% macro card(program) %}
<div class="col-sm mb-4 text-left">
<a href="/lms/program?name={{ program.name }}" class="no-decoration no-underline">
<div class="card h-100">
{% if program.hero_image %}
@ -68,7 +68,7 @@
<div class='container'>
<div class="row mt-5">
{% for program in featured_programs %}
{{ card(program.program, program.is_enrolled) }}
{{ card(program.program) }}
{% endfor %}
</div>
<p class='mt-4'>

View File

@ -1,22 +1,21 @@
{% macro hero(title, description) %}
{% macro hero(title, description, is_enrolled) %}
<div class='container pb-5'>
<h1>{{ title}}</h1>
<p class='lead' style="max-width: 100%;">{{ description }}</p>
<p class="mt-4">
{% if frappe.session.user == 'Guest' %}
<a id="signup" class="btn btn-primary btn-lg" style="width: 170px;" href="/login#signup" hidden=true>Sign Up</a>
<a id="signup" class="btn btn-primary btn-lg" href="/login#signup">Sign Up</a>
{% elif not is_enrolled %}
<button id="enroll" class="btn btn-primary btn-lg" onclick="enroll()">Enroll</button>
{% endif %}
</p>
</div>
{% block script %}
<script type="text/javascript">
frappe.ready(() => {
btn = document.getElementById('signup')
if(frappe.session.user == 'Guest') {
btn.hidden = false;
}
})
function enroll() {
console.log(frappe.utils.get_query_params())
}
</script>
{% endblock %}
{% endmacro %}