hotstovejer/openclassify
0
0
Fork 0
mirror of https://github.com/openclassify/openclassify.git synced 2026-01-11 18:01:10 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

added if statement for banner. category cards have carousel now

Browse Source
This commit is contained in:
Metehan Celik 2022-01-05 16:55:36 +03:00
parent 3c8301e6a9
commit bde46c8064
2 changed files with 59 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
addons/default/visiosoft/advs-module/resources/views/list/gallery.twig
View File

@ -13,8 +13,16 @@
<div class="col-xl-4 col-6 p-sm-3 p-0">
<div class="d-flex flex-column product-hb gallery-card pb-3 px-1 pt-1 border shadow-sm rounded">
<div class="product-image-hb p-sm-3 p-1">
<a href="{{ adv.detail_url }}">
<img class="product-image-in" src="{{ adv.cover_photo }}" alt="{{ adv.name }}">
<a href="{{ adv.detail_url }}" class="imgs" id="{{ adv.id }}">
{% for key,photo in adv.getViewPhotoUrl %}
<img src="{{ photo }}" class="product-image-in ads-img img-{{ adv.id ~ '-' ~ key }}" alt="">
{% endfor %}
<div class="hover-area">
{% for key, photo in adv.getViewPhotoUrl %}
<div class="hover-{{ key }}" data-parent="{{ adv.id }}" data-id="img-{{ adv.id ~ '-' ~ key }}"></div>
{% endfor %}
</div>
</a>
{{ addBlock('list/extra-actions', {'ad': adv, 'vars': _context}, ['favs'])|raw }}
</div>
@ -36,6 +44,19 @@
</div>
{% endfor %}
</div>
<script>
$('.ads-img').first().css('display', 'block');
$('.hover-area').mouseover((e) => {
var el = $(e);
var img = $(`.${$(el[0].target).data('id')}`);
img.siblings('img').css('display', 'none');
img.css('display', 'block');
});
</script>
{% endblock %}
@ -48,3 +69,5 @@
{{ asset_add("scripts.js", "visiosoft.module.advs::js/list-table.js") }}
{% include "theme::scroll-modal" %}
{% endblock %}

34
addons/default/visiosoft/base-theme/resources/css/gallery.css
View File

@ -52,4 +52,38 @@
}
.fs-14{
font-size: 14px;
}
.imgs{
position: relative;
}
.ads-img{
position:inherit;
}
.imgs .ads-img {
width: 100%;
height: 100%;
display: none;
}
.imgs .ads-img:first-child {
display: flex;
}
.hover-area{
position: absolute;
display: flex;
height: 100%;
width: 200px;
top: 0;
left: 0;
}
.hover-0 {
width: 33%;
height: 100%;
}
.hover-1 {
width: 33%;
height: 100%;
}
.hover-2 {
width: 33%;
height: 100%;
}