Shiloh/brotherton-erpnext
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Hero Slider Control & Alignment fixes (#27611)

Browse Source 
* fix: Creating unique hash for slider id instead of slider name

* fix: Fixed alignment of Title, Subtitle, Action Button

* chore: linter fix
This commit is contained in:
Marica 2021-10-02 17:06:33 +05:30 committed by GitHub
commit 4e7ec8a068
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
erpnext/public/scss/shopping_cart.scss
View File

@ -31,6 +31,14 @@ body.product-page {
.carousel-control-prev,
.carousel-control-next {
opacity: 1;
width: 8%;
@media (max-width: 1200px) {
width: 10%;
}
@media (max-width: 768px) {
width: 15%;
}
}
.carousel-body {
@ -43,6 +51,8 @@ body.product-page {
.carousel-content {
max-width: 400px;
margin-left: 5rem;
margin-right: 5rem;
}
.card {

31
erpnext/shopping_cart/web_template/hero_slider/hero_slider.html
View File

@ -1,7 +1,7 @@
{%- macro slide(image, title, subtitle, action, label, index, align="Left", theme="Dark") -%}
{%- set align_class = resolve_class({
'text-right': align == 'Right',
'text-centre': align == 'Center',
'text-centre': align == 'Centre',
'text-left': align == 'Left',
}) -%}
@ -15,7 +15,7 @@
<div class="carousel-body container d-flex {{ align_class }}">
<div class="carousel-content align-self-center">
{%- if title -%}<h1 class="{{ heading_class }}">{{ title }}</h1>{%- endif -%}
{%- if subtitle -%}<p class="text-muted mt-2">{{ subtitle }}</p>{%- endif -%}
{%- if subtitle -%}<p class="{{ heading_class }} mt-2">{{ subtitle }}</p>{%- endif -%}
{%- if action -%}
<a href="{{ action }}" class="btn btn-primary mt-3">
{{ label }}
@ -27,12 +27,14 @@
</div>
{%- endmacro -%}
<div id="{{ slider_name }}" class="section-carousel carousel slide" data-ride="carousel">
{%- set hero_slider_id = 'id-' + frappe.utils.generate_hash('HeroSlider', 12) -%}
<div id="{{ hero_slider_id }}" class="section-carousel carousel slide" data-ride="carousel">
{%- if show_indicators -%}
<ol class="carousel-indicators">
{%- for index in ['1', '2', '3', '4', '5'] -%}
{%- if values['slide_' + index + '_image'] -%}
<li data-target="#{{ slider_name }}" data-slide-to="{{ frappe.utils.cint(index) - 1 }}" class="{{ 'active' if index=='1' else ''}}"></li>
<li data-target="#{{ hero_slider_id }}" data-slide-to="{{ frappe.utils.cint(index) - 1 }}" class="{{ 'active' if index=='1' else ''}}"></li>
{%- endif -%}
{%- endfor -%}
</ol>
@ -54,7 +56,7 @@
{%- endfor -%}
</div>
{%- if show_controls -%}
<a class="carousel-control-prev" href="#{{ slider_name }}" role="button" data-slide="prev">
<a class="carousel-control-prev" href="#{{ hero_slider_id }}" role="button" data-slide="prev">
<div class="carousel-control">
<svg class="mr-1" width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.625 3.75L6.375 9L11.625 14.25" stroke="#4C5A67" stroke-linecap="round" stroke-linejoin="round"/>
@ -62,7 +64,7 @@
</div>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#{{ slider_name }}" role="button" data-slide="next">
<a class="carousel-control-next" href="#{{ hero_slider_id }}" role="button" data-slide="next">
<div class="carousel-control">
<svg class="ml-1" width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.375 14.25L11.625 9L6.375 3.75" stroke="#4C5A67" stroke-linecap="round" stroke-linejoin="round"/>
@ -73,13 +75,12 @@
{%- endif -%}
</div>
<script type="text/javascript">
$('.carousel').carousel({
interval: false,
pause: "hover",
wrap: true
})
<script>
frappe.ready(function () {
$('.carousel').carousel({
interval: false,
pause: "hover",
wrap: true
})
});
</script>
<style>
</style>