This commit is contained in:
Diatrex 2021-04-09 15:52:18 +03:00
parent 3b859914d2
commit 5ede6467af
4 changed files with 303 additions and 276 deletions

View File

@ -33,57 +33,12 @@ ul {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
/* End Main styles */
#listingPage {
/* Breadcrumb */
#breadcrumb {
border-radius: 0 0 .25rem .25rem;
padding: .2rem 1.5rem;
background-color: #FCFCFC;
div {
&:first-child {
span {
color: #8598AA;
font-size: calc(13rem / 16);
&:not(:first-child):before {
content: '>';
margin-left: 0.4rem;
}
a {
color: #8598AA;
}
}
}
&:last-child {
span {
color: #87BBF1;
font-size: calc(11rem / 16);
&:not(:first-child):before {
content: '|';
margin: 0 .25rem;
}
a {
color: #87BBF1;
}
}
}
}
}
/* End Breadcrumb */
#mainContainer {
margin-top: .75rem;
/* Filter */ /* Filter */
#listFilterForm { #listFilterForm, #filterModal {
@media only screen and (min-width: 576px) {
width: 25%; width: 25%;
}
.filter-box { .filter-box {
background-color: #FCFCFC; background-color: #FCFCFC;
@ -233,7 +188,7 @@ ul {
} }
} }
#priceInputWrapper { .range-input-wrapper {
::placeholder { ::placeholder {
color: #DFDFDF; color: #DFDFDF;
opacity: 1; opacity: 1;
@ -273,6 +228,53 @@ ul {
/* End Filter submit */ /* End Filter submit */
} }
/* End Filter */ /* End Filter */
/* End Main styles */
#listingPage {
/* Breadcrumb */
#breadcrumb {
border-radius: 0 0 .25rem .25rem;
padding: .2rem 1.5rem;
background-color: #FCFCFC;
div {
&:first-child {
span {
color: #8598AA;
font-size: calc(13rem / 16);
&:not(:first-child):before {
content: '>';
margin-left: 0.4rem;
}
a {
color: #8598AA;
}
}
}
&:last-child {
span {
color: #87BBF1;
font-size: calc(11rem / 16);
&:not(:first-child):before {
content: '|';
margin: 0 .25rem;
}
a {
color: #87BBF1;
}
}
}
}
}
/* End Breadcrumb */
#mainContainer {
margin-top: .75rem;
/* Listing container */ /* Listing container */
#listingContainer { #listingContainer {
@ -677,7 +679,7 @@ ul {
#mobileListNav { #mobileListNav {
background-color: #F8F9FA; background-color: #F8F9FA;
& > div:not(.divider) { & > .mobile-list-nav-item {
width: percentage(1/3); width: percentage(1/3);
font-size: calc(11rem / 16); font-size: calc(11rem / 16);
color: #4D5359; color: #4D5359;

View File

@ -2,39 +2,38 @@
{% block styles %} {% block styles %}
{{ asset_style("visiosoft.module.advs::css/list.css") }} {{ asset_style("visiosoft.module.advs::css/list.css") }}
{{ asset_style("visiosoft.module.advs::css/list-new.scss") }}
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<section>
<div class="container"> {% include "visiosoft.module.advs::list/partials/mobile-list" %}
<div id="listingPage" class="d-none d-sm-block">
<!-- breadcrumb -->
{% include "visiosoft.module.advs::list/partials/breadcrumb" %} {% include "visiosoft.module.advs::list/partials/breadcrumb" %}
<!-- breadcrumb -->
<div class="row my-3 adv-list-wrapper"> <div id="mainContainer" class="d-flex mb-5">
<div class="col-md-3 d-none d-sm-block filter-section">
{% include "visiosoft.module.advs::list/partials/list-filter" %} {% include "visiosoft.module.advs::list/partials/list-filter" %}
</div>
<div class="col-md-9"> <div id="listingContainer" class="flex-fill ml-4">
<div class="section recommended-classified"> <div id="pageTitle" class="d-flex justify-content-between border-bottom pb-2 px-3 mb-3">
<div class="result-text border d-none d-sm-block"> <p>
<div class="mx-3 py-2"> {{ trans('visiosoft.module.advs::field.search_ad_result_text', {
{% if catText %} 'count': advs.total,
<h1 class="d-inline text-truncate"> 'name': catText ? catText : '',
"{{ catText }}" })|raw }}
</h1> </p>
{% endif %}
{{ trans('visiosoft.module.advs::field.search_ad_result_prefix')|lower }} <a href="javascript:void(0)" class="d-flex align-items-center fav-search-modal">
<span> <span class="mr-2">Save Search</span>
{{ advs.total }} {{ trans('visiosoft.module.advs::field.ad')|lower }} {{ img('visiosoft.module.advs::images/listing/save-search.svg').data|raw }}
</span> </a>
{{ trans('visiosoft.module.advs::field.were_found') }}
</div> </div>
{% if count(cFArray) %} {% if count(cFArray) %}
<div class="mx-3 border-top py-2 filter-tabs d-flex flex-wrap"> <div id="queryBar" class="px-3 border py-2 filter-tabs d-flex flex-wrap mb-3">
{% for customParam in cFArray %} {% for customParam in cFArray %}
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<span class="mr-1">{{ customParam['name'] }}</span> <span class="mr-1">{{ customParam['name'] }}</span>
@ -57,34 +56,22 @@
</div> </div>
</div> </div>
{% endif %} {% endif %}
</div>
<div class="row breadcrumb list-header"> <div id="viewTypes" class="d-flex justify-content-between">
{{ addBlock('ads-list/partials/before-display-mode', {'topfields': topfields})|raw }}
<div class="col-md-6 my-2 d-none d-sm-block">
{% include "visiosoft.module.advs::list/partials/list-sort-by" %}
</div>
<div class="col-md-6 my-2">
{% include "visiosoft.module.advs::list/partials/display-mode" %} {% include "visiosoft.module.advs::list/partials/display-mode" %}
</div> </div>
</div>
<div class="my-2 p-0 bg-light d-flex d-sm-none mobile-list-action row text-center align-items-center">
<div class="col-4" id="filter_modal_btn">
<i class="fas fa-filter w-100"></i>
<a href="javascript:;">{{ trans('visiosoft.module.advs::field.filter') }}</a>
</div>
<div class="col-4" id="sort_modal_btn">
<i class="fas fa-sort-amount-down w-100"></i>
<a href="javascript:;">{{ trans('visiosoft.module.advs::field.sort') }}</a>
</div>
{{ addBlock('ads-list/row-bottom',{'show_favorite_search':true})|raw }}
</div>
{{ addBlock('ads-list/row',{'topfields':topfields,'selectRange':selectRange,'advs':advs, 'mainCats':mainCats|length})|raw }} {{ addBlock('ads-list/row',{'topfields':topfields,'selectRange':selectRange,'advs':advs, 'mainCats':mainCats|length})|raw }}
<div class="row products-list">
<div id="listingWrapper" class="border rounded p-3">
{% block listContent %} {% block listContent %}
{% include "visiosoft.module.advs::list/partials/ads" %} {% include "visiosoft.module.advs::list/partials/ads" %}
{% endblock %} {% endblock %}
</div>
{% include "visiosoft.module.advs::list/partials/pagination" %} {% include "visiosoft.module.advs::list/partials/pagination" %}
{{ addBlock('ads-list/row-bottom')|raw }} {{ addBlock('ads-list/row-bottom')|raw }}
@ -93,18 +80,20 @@
</div> </div>
</div> </div>
</div> </div>
</section>
{% include "visiosoft.module.advs::list/partials/filter-modal" %} {% include "visiosoft.module.advs::list/partials/filter-modal" %}
{% include "visiosoft.module.advs::list/partials/sort-modal" %} {% include "visiosoft.module.advs::list/partials/sort-modal" %}
{{ addBlock('list/partials/modal')|raw }}
<script> <script>
var select_trans = "{{ trans('visiosoft.module.advs::field.pick_option') }}"; var select_trans = "{{ trans('visiosoft.module.advs::field.pick_option') }}";
</script> </script>
{{ asset_add("scripts.js", "visiosoft.module.advs::js/list.js") }} {{ asset_add("scripts.js", "visiosoft.module.advs::js/list.js") }}
{{ asset_add("scripts.js", "visiosoft.module.advs::js/list-new.js") }}
{% endblock %} {% endblock %}
{% block customjs %} {% block customjs %}
{{ addBlock('ads-list/list', {'adv': adv})|raw }} {{ addBlock('ads-list/list', {'adv': adv})|raw }}
{% endblock %} {% endblock %}

View File

@ -0,0 +1,36 @@
<div id="mobileListingPage" class="d-sm-none mb-5">
{% include "visiosoft.module.advs::list/partials/mobile-breadcrumb" %}
<div id="mobileListNav" class="d-flex p-2 align-items-center mb-1">
<div id="filter_modal_btn" class="d-flex flex-column align-items-center mobile-list-nav-item">
{{ img('visiosoft.module.advs::images/listing/mobile-filter.svg').data|raw }}
<p class="mt-1">{{ trans('visiosoft.module.advs::field.filter') }}</p>
</div>
<div class="divider"></div>
<div id="sort_modal_btn" class="d-flex flex-column align-items-center mobile-list-nav-item">
{{ img('visiosoft.module.advs::images/listing/mobile-sort.svg').data|raw }}
<p class="mt-1">{{ trans('visiosoft.module.advs::field.sort') }}</p>
</div>
<div class="divider"></div>
{{ addBlock('ads-list/mobile/action-bar')|raw }}
</div>
<div id="mobileListing">
{% for adv in advs %}
<a href="{{ adv.detail_url }}" class="listing-item d-flex p-2">
<img src="{{ adv.cover_photo }}" alt="{{ adv.name }}" class="rounded-sm">
<div class="ml-3 mt-1">
<h6 class="mb-1">{{ adv.name }}</h6>
<p class="mb-1">{{ adv.country_name }} / {{ adv.city_name }}</p>
<p>{{ adv.price != '0' ? currency_format(adv.price,adv.currency) : trans('visiosoft.module.advs::field.free') }}</p>
</div>
</a>
{% endfor %}
</div>
{% include "visiosoft.module.advs::list/partials/pagination" %}
</div>

View File

@ -30,7 +30,7 @@
{% endfor %} {% endfor %}
</ul> </ul>
<div id="priceInputWrapper" class="d-flex justify-content-around mt-3"> <div id="priceInputWrapper" class="d-flex justify-content-around mt-3 range-input-wrapper">
<input type="number" class="border-0 shadow-sm rounded px-3 py-1" name="min_price" min="0" <input type="number" class="border-0 shadow-sm rounded px-3 py-1" name="min_price" min="0"
placeholder="{{ trans('visiosoft.module.advs::field.min.name') }}" placeholder="{{ trans('visiosoft.module.advs::field.min.name') }}"
value="{{ app.request.get('min_price') }}"> value="{{ app.request.get('min_price') }}">