mirror of
https://github.com/openclassify/openclassify.git
synced 2026-01-11 18:01:10 -06:00
ax
This commit is contained in:
Diatrex
parent
3b859914d2
commit
5ede6467af
@ -33,6 +33,201 @@ ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Filter */
|
||||
#listFilterForm, #filterModal {
|
||||
@media only screen and (min-width: 576px) {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.filter-box {
|
||||
background-color: #FCFCFC;
|
||||
|
||||
& > div {
|
||||
&:first-child {
|
||||
color: #373535;
|
||||
font-weight: 500;
|
||||
font-size: calc(17rem / 16);
|
||||
|
||||
svg {
|
||||
width: calc(11rem / 16);
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
& > label {
|
||||
font-size: calc(14rem / 16);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Category */
|
||||
#category {
|
||||
background-color: #FCFCFC;
|
||||
|
||||
#categoryNav {
|
||||
a {
|
||||
border-bottom: calc(2rem / 16) solid #D7DEEC;
|
||||
|
||||
svg {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #9FA4A4;
|
||||
font-weight: 500;
|
||||
font-size: calc(17rem / 16);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-bottom-color: #373535;
|
||||
|
||||
svg path {
|
||||
fill: #373535;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #373535;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#categoryList {
|
||||
& > li {
|
||||
margin-bottom: .4rem;
|
||||
|
||||
& > div {
|
||||
div {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
svg, img {
|
||||
width: 1.15rem;
|
||||
height: 1.15rem;
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #183F8A;
|
||||
font-size: calc(13rem / 16);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.sub-cat {
|
||||
li {
|
||||
margin-bottom: .25rem;
|
||||
|
||||
a {
|
||||
font-size: calc(12rem / 16);
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: .5rem;
|
||||
margin-top: .25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* End Category */
|
||||
|
||||
/* Location */
|
||||
#location {
|
||||
button:not(.filter-modal-close) {
|
||||
height: 2rem;
|
||||
background: #fff;
|
||||
color: #707070;
|
||||
font-size: calc(12rem / 16);
|
||||
padding: 0 1.25rem;
|
||||
|
||||
svg {
|
||||
width: .48rem;
|
||||
height: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* End Location */
|
||||
|
||||
/* Price */
|
||||
#price {
|
||||
li {
|
||||
& + & {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
padding: 0.15em;
|
||||
color: #373535;
|
||||
border: calc(1rem / 16) solid #E5E5E5;
|
||||
font-size: calc(13rem / 16);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type=radio] {
|
||||
border: 0;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
height: calc(1rem / 16);
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute !important;
|
||||
white-space: nowrap;
|
||||
width: calc(1rem / 16);
|
||||
|
||||
&:checked + label {
|
||||
background-color: #E5E5E5;
|
||||
border: calc(1rem / 16) solid #E5E5E5;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.range-input-wrapper {
|
||||
::placeholder {
|
||||
color: #DFDFDF;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: #DFDFDF;
|
||||
}
|
||||
|
||||
::-ms-input-placeholder {
|
||||
color: #DFDFDF;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 5rem;
|
||||
font-size: calc(14rem / 16);
|
||||
}
|
||||
}
|
||||
}
|
||||
/* End Price */
|
||||
|
||||
/* Map */
|
||||
#mapFilter {
|
||||
label {
|
||||
font-size: calc(14rem / 16);
|
||||
}
|
||||
}
|
||||
/* End Map */
|
||||
|
||||
/* Filter submit */
|
||||
#filterSubmit {
|
||||
button {
|
||||
background-color: #52C946;
|
||||
font-size: calc(12rem / 16);
|
||||
}
|
||||
}
|
||||
/* End Filter submit */
|
||||
}
|
||||
/* End Filter */
|
||||
/* End Main styles */
|
||||
|
||||
#listingPage {
|
||||
@ -81,199 +276,6 @@ ul {
|
||||
#mainContainer {
|
||||
margin-top: .75rem;
|
||||
|
||||
/* Filter */
|
||||
#listFilterForm {
|
||||
width: 25%;
|
||||
|
||||
.filter-box {
|
||||
background-color: #FCFCFC;
|
||||
|
||||
& > div {
|
||||
&:first-child {
|
||||
color: #373535;
|
||||
font-weight: 500;
|
||||
font-size: calc(17rem / 16);
|
||||
|
||||
svg {
|
||||
width: calc(11rem / 16);
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
& > label {
|
||||
font-size: calc(14rem / 16);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Category */
|
||||
#category {
|
||||
background-color: #FCFCFC;
|
||||
|
||||
#categoryNav {
|
||||
a {
|
||||
border-bottom: calc(2rem / 16) solid #D7DEEC;
|
||||
|
||||
svg {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #9FA4A4;
|
||||
font-weight: 500;
|
||||
font-size: calc(17rem / 16);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-bottom-color: #373535;
|
||||
|
||||
svg path {
|
||||
fill: #373535;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #373535;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#categoryList {
|
||||
& > li {
|
||||
margin-bottom: .4rem;
|
||||
|
||||
& > div {
|
||||
div {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
svg, img {
|
||||
width: 1.15rem;
|
||||
height: 1.15rem;
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #183F8A;
|
||||
font-size: calc(13rem / 16);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.sub-cat {
|
||||
li {
|
||||
margin-bottom: .25rem;
|
||||
|
||||
a {
|
||||
font-size: calc(12rem / 16);
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: .5rem;
|
||||
margin-top: .25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* End Category */
|
||||
|
||||
/* Location */
|
||||
#location {
|
||||
button:not(.filter-modal-close) {
|
||||
height: 2rem;
|
||||
background: #fff;
|
||||
color: #707070;
|
||||
font-size: calc(12rem / 16);
|
||||
padding: 0 1.25rem;
|
||||
|
||||
svg {
|
||||
width: .48rem;
|
||||
height: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* End Location */
|
||||
|
||||
/* Price */
|
||||
#price {
|
||||
li {
|
||||
& + & {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
padding: 0.15em;
|
||||
color: #373535;
|
||||
border: calc(1rem / 16) solid #E5E5E5;
|
||||
font-size: calc(13rem / 16);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type=radio] {
|
||||
border: 0;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
height: calc(1rem / 16);
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute !important;
|
||||
white-space: nowrap;
|
||||
width: calc(1rem / 16);
|
||||
|
||||
&:checked + label {
|
||||
background-color: #E5E5E5;
|
||||
border: calc(1rem / 16) solid #E5E5E5;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#priceInputWrapper {
|
||||
::placeholder {
|
||||
color: #DFDFDF;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: #DFDFDF;
|
||||
}
|
||||
|
||||
::-ms-input-placeholder {
|
||||
color: #DFDFDF;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 5rem;
|
||||
font-size: calc(14rem / 16);
|
||||
}
|
||||
}
|
||||
}
|
||||
/* End Price */
|
||||
|
||||
/* Map */
|
||||
#mapFilter {
|
||||
label {
|
||||
font-size: calc(14rem / 16);
|
||||
}
|
||||
}
|
||||
/* End Map */
|
||||
|
||||
/* Filter submit */
|
||||
#filterSubmit {
|
||||
button {
|
||||
background-color: #52C946;
|
||||
font-size: calc(12rem / 16);
|
||||
}
|
||||
}
|
||||
/* End Filter submit */
|
||||
}
|
||||
/* End Filter */
|
||||
|
||||
/* Listing container */
|
||||
#listingContainer {
|
||||
min-width: 0;
|
||||
@ -677,7 +679,7 @@ ul {
|
||||
#mobileListNav {
|
||||
background-color: #F8F9FA;
|
||||
|
||||
& > div:not(.divider) {
|
||||
& > .mobile-list-nav-item {
|
||||
width: percentage(1/3);
|
||||
font-size: calc(11rem / 16);
|
||||
color: #4D5359;
|
||||
|
||||
@ -2,109 +2,98 @@
|
||||
|
||||
{% block styles %}
|
||||
{{ asset_style("visiosoft.module.advs::css/list.css") }}
|
||||
{{ asset_style("visiosoft.module.advs::css/list-new.scss") }}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section>
|
||||
|
||||
<div class="container">
|
||||
{% include "visiosoft.module.advs::list/partials/mobile-list" %}
|
||||
|
||||
<!-- breadcrumb -->
|
||||
{% include "visiosoft.module.advs::list/partials/breadcrumb" %}
|
||||
<!-- breadcrumb -->
|
||||
<div id="listingPage" class="d-none d-sm-block">
|
||||
|
||||
<div class="row my-3 adv-list-wrapper">
|
||||
<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/breadcrumb" %}
|
||||
|
||||
<div id="mainContainer" class="d-flex mb-5">
|
||||
|
||||
{% include "visiosoft.module.advs::list/partials/list-filter" %}
|
||||
|
||||
<div id="listingContainer" class="flex-fill ml-4">
|
||||
<div id="pageTitle" class="d-flex justify-content-between border-bottom pb-2 px-3 mb-3">
|
||||
<p>
|
||||
{{ trans('visiosoft.module.advs::field.search_ad_result_text', {
|
||||
'count': advs.total,
|
||||
'name': catText ? catText : '',
|
||||
})|raw }}
|
||||
</p>
|
||||
|
||||
<a href="javascript:void(0)" class="d-flex align-items-center fav-search-modal">
|
||||
<span class="mr-2">Save Search</span>
|
||||
{{ img('visiosoft.module.advs::images/listing/save-search.svg').data|raw }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<div class="section recommended-classified">
|
||||
<div class="result-text border d-none d-sm-block">
|
||||
<div class="mx-3 py-2">
|
||||
{% if catText %}
|
||||
<h1 class="d-inline text-truncate">
|
||||
"{{ catText }}"
|
||||
</h1>
|
||||
{% endif %}
|
||||
{{ trans('visiosoft.module.advs::field.search_ad_result_prefix')|lower }}
|
||||
<span>
|
||||
{{ advs.total }} {{ trans('visiosoft.module.advs::field.ad')|lower }}
|
||||
</span>
|
||||
{{ trans('visiosoft.module.advs::field.were_found') }}
|
||||
</div>
|
||||
|
||||
{% if count(cFArray) %}
|
||||
<div class="mx-3 border-top py-2 filter-tabs d-flex flex-wrap">
|
||||
{% for customParam in cFArray %}
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="mr-1">{{ customParam['name'] }}</span>
|
||||
{% for customValue in customParam['value'] %}
|
||||
<a href="{{ customValue['removalLink'] }}"
|
||||
class="text-truncate d-flex align-items-center mr-1">
|
||||
<span class="mr-2">{{ customValue['name'] }}</span>
|
||||
<button class="border-0 d-flex align-items-center justify-content-center">
|
||||
{{ img('visiosoft.module.advs::images/close.svg').data|raw }}
|
||||
</button>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="d-flex align-items-center">
|
||||
<a href="{{ app.request.pathinfo }}"
|
||||
class="text-truncate d-flex align-items-center mr-1">
|
||||
{{ trans('visiosoft.module.advs::field.clear_all') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if count(cFArray) %}
|
||||
<div id="queryBar" class="px-3 border py-2 filter-tabs d-flex flex-wrap mb-3">
|
||||
{% for customParam in cFArray %}
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="mr-1">{{ customParam['name'] }}</span>
|
||||
{% for customValue in customParam['value'] %}
|
||||
<a href="{{ customValue['removalLink'] }}"
|
||||
class="text-truncate d-flex align-items-center mr-1">
|
||||
<span class="mr-2">{{ customValue['name'] }}</span>
|
||||
<button class="border-0 d-flex align-items-center justify-content-center">
|
||||
{{ img('visiosoft.module.advs::images/close.svg').data|raw }}
|
||||
</button>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="d-flex align-items-center">
|
||||
<a href="{{ app.request.pathinfo }}"
|
||||
class="text-truncate d-flex align-items-center mr-1">
|
||||
{{ trans('visiosoft.module.advs::field.clear_all') }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="row breadcrumb list-header">
|
||||
|
||||
<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" %}
|
||||
</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 }}
|
||||
<div class="row products-list">
|
||||
{% block listContent %}
|
||||
{% include "visiosoft.module.advs::list/partials/ads" %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
{% include "visiosoft.module.advs::list/partials/pagination" %}
|
||||
|
||||
{{ addBlock('ads-list/row-bottom')|raw }}
|
||||
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div id="viewTypes" class="d-flex justify-content-between">
|
||||
|
||||
{{ addBlock('ads-list/partials/before-display-mode', {'topfields': topfields})|raw }}
|
||||
|
||||
{% include "visiosoft.module.advs::list/partials/display-mode" %}
|
||||
|
||||
</div>
|
||||
|
||||
{{ addBlock('ads-list/row',{'topfields':topfields,'selectRange':selectRange,'advs':advs, 'mainCats':mainCats|length})|raw }}
|
||||
|
||||
<div id="listingWrapper" class="border rounded p-3">
|
||||
{% block listContent %}
|
||||
{% include "visiosoft.module.advs::list/partials/ads" %}
|
||||
{% endblock %}
|
||||
|
||||
{% include "visiosoft.module.advs::list/partials/pagination" %}
|
||||
|
||||
{{ addBlock('ads-list/row-bottom')|raw }}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{% include "visiosoft.module.advs::list/partials/filter-modal" %}
|
||||
{% include "visiosoft.module.advs::list/partials/sort-modal" %}
|
||||
{{ addBlock('list/partials/modal')|raw }}
|
||||
|
||||
<script>
|
||||
var select_trans = "{{ trans('visiosoft.module.advs::field.pick_option') }}";
|
||||
</script>
|
||||
|
||||
{{ asset_add("scripts.js", "visiosoft.module.advs::js/list.js") }}
|
||||
{{ asset_add("scripts.js", "visiosoft.module.advs::js/list-new.js") }}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block customjs %}
|
||||
{{ addBlock('ads-list/list',{'adv':adv})|raw }}
|
||||
{% endblock %}
|
||||
{{ addBlock('ads-list/list', {'adv': adv})|raw }}
|
||||
{% endblock %}
|
||||
|
||||
@ -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>
|
||||
@ -30,7 +30,7 @@
|
||||
{% endfor %}
|
||||
</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"
|
||||
placeholder="{{ trans('visiosoft.module.advs::field.min.name') }}"
|
||||
value="{{ app.request.get('min_price') }}">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user