From 3ef866323e0b5e858009e48007e6f78552ef2614 Mon Sep 17 00:00:00 2001
From: Diatrex <diahshalabi@hotmail.com>
Date: Fri, 9 Apr 2021 11:30:55 +0300
Subject: [PATCH] #3472 listing design improvments - Integrate

---
 .../advs-module/resources/lang/en/field.php   |   7 +
 .../resources/views/list/partials/ads.twig    | 116 ++++---
 .../views/list/partials/display-mode.twig     |  50 ++-
 .../views/list/partials/list-filter.twig      | 317 +++++++-----------
 .../views/list/partials/list-sort-by.twig     |  65 ++--
 5 files changed, 242 insertions(+), 313 deletions(-)

diff --git a/addons/default/visiosoft/advs-module/resources/lang/en/field.php b/addons/default/visiosoft/advs-module/resources/lang/en/field.php
index 384be6a8c..15d55eb6a 100644
--- a/addons/default/visiosoft/advs-module/resources/lang/en/field.php
+++ b/addons/default/visiosoft/advs-module/resources/lang/en/field.php
@@ -337,6 +337,13 @@ return [
     'owner' => 'Owner',
     'default_owner_instruction' => 'The owner will default to the current user if no user is selected',
 
+    // Listing page
+    'ad_title' => 'Ad title',
+    'listing_date' => 'Listing Date',
+    'view' => 'View',
+    'ads_with_map' => 'Ads With Map',
+    'advanced_sorting' => 'Advanced Sorting',
+
     'free' => 'Free',
     'ad_date' => 'Ad Date',
     'photo_video' => 'Photo, Video',
diff --git a/addons/default/visiosoft/advs-module/resources/views/list/partials/ads.twig b/addons/default/visiosoft/advs-module/resources/views/list/partials/ads.twig
index 20c4cbe0f..f958ac041 100644
--- a/addons/default/visiosoft/advs-module/resources/views/list/partials/ads.twig
+++ b/addons/default/visiosoft/advs-module/resources/views/list/partials/ads.twig
@@ -1,51 +1,69 @@
-{{ addBlock('ad-list/partials/ads',{'featured_advs':featured_advs})|raw }}
-{% for adv in advs %}
-    <div class="col-md-12 mb-2 list-classified bg-light">
-        <a href="{{ adv.detail_url }}" class="text-dark">
-            <div class="row{{ adv.doping_type ? ' doping_type' ~ adv.doping_type }}">
-                <div class="col-md-2 justify-content-center align-self-center text-center border-right border-white">
-                    <img class="img-thumbnail lazy" src="{{ img('visiosoft.theme.base::images/no-image.png').url }}"
-                         data-src="{{ adv.cover_photo }}" alt="{{ adv.name }}"
-                         style="max-height:80px;">
-                </div>
-                <div class="col-md-7 justify-content-center align-self-center border-right border-white">
-                    <div class="row">
-                        <div class="col-md-12">
-                            <p class="mb-0">{{ adv.name }}</p>
+{% set hideStandard = setting_value('visiosoft.module.advs::hide_listing_standard_price') %}
+{% set listLocation = setting_value('visiosoft.module.location::list_page_location') %}
+
+<div id="listing">
+    <table class="w-100 text-center">
+        <thead>
+            <tr class="text-white">
+                <th class="text-nowrap" colspan="2">{{ trans('visiosoft.module.advs::field.ad_title') }}</th>
+                {% if listLocation %}
+                    <th class="text-nowrap">
+                        {{ trans('visiosoft.module.advs::field.city.name') }} / {{ trans('visiosoft.module.advs::field.district.name') }}
+                    </th>
+                {% endif %}
+                <th class="text-nowrap">{{ trans('visiosoft.module.advs::field.listing_date') }}</th>
+                <th class="text-nowrap">{{ trans('visiosoft.module.advs::field.price.name') }}</th>
+            </tr>
+        </thead>
+
+        <tbody>
+
+            {{ addBlock('ad-list/partials/ads', {'featured_advs': featured_advs})|raw }}
+
+            {% for adv in advs %}
+                <tr class="{{ adv.doping_type ? 'doping_type' ~ adv.doping_type }}">
+                    <td>
+                        <a href="{{ adv.detail_url }}">
+                            <img src="{{ img('visiosoft.theme.base::images/no-image.png').url }}" class="rounded lazy"
+                                 alt="{{ adv.name }}" data-src="{{ adv.cover_photo }}">
+                        </a>
+                    </td>
+                    <td class="text-left pl-2">
+                        <p class="id-data">#{{ adv.id }}</p>
+                        <h6 class="mb-1">
+                            <a href="{{ adv.detail_url }}">{{ adv.name }}</a>
+                        </h6>
+                        <p class="cat-data mb-1">{{ adv.cat1_name }} /{{ adv.cat2_name }}</p>
+                        <div class="action-data d-flex align-items-center">
+
+                            {{ addBlock('list/extra-actions', {'ad': adv, 'vars': _context})|raw }}
+
                         </div>
-                        <div class="col-md-12 text-truncate">
-                            <small class="text-muted">{{ adv.cat1_name }}, {{ adv.cat2_name }}</small>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-md-3 text-left justify-content-center align-self-center">
-                    <div class="row">
-                        <div class="col-md-12">
-                            {% if not setting_value('visiosoft.module.advs::hide_listing_standard_price') %}
-                                <p class="theme-price-old small mb-0"><del>
-                                        {{ adv.standard_price != adv.price and adv.standard_price != '0'
-                                        ? currency_format(adv.standard_price,adv.currency)
-                                        : '' }}
-                                </del></p>
-                            {% endif %}
-                            <b>{{ adv.price != '0'
-                                    ? currency_format(adv.price,adv.currency)
-                                    : trans('visiosoft.module.advs::field.free') }}</b>
-                        </div>
-                        {% if setting_value('visiosoft.module.location::list_page_location') %}
-                            <div class="col-md-12 justify-content-center align-self-center text-truncate">
-                                <small>{{ adv.city_name }} {{ adv.country_name }}</small>
-                            </div>
+                    </td>
+                    {% if listLocation %}
+                        <td class="location-data">
+                            <p>{{ adv.country_name }}</p>
+                            <p>{{ adv.city_name }}</p>
+                        </td>
+                    {% endif %}
+                    <td class="date-data">
+                        <p>{{ adv.publish_at.value|date('d F') }}</p>
+                        <p>{{ adv.publish_at.value|date('Y') }}</p>
+                    </td>
+                    <td class="price-data">
+                        {% if not hideStandard %}
+                            <p class="text-nowrap">
+                                <s>
+                                    {{ adv.standard_price != adv.price and adv.standard_price != '0' ? currency_format(adv.standard_price,adv.currency) : '' }}
+                                </s>
+                            </p>
                         {% endif %}
-                    </div>
-                </div>
-            </div>
-        </a>
-        <div class="row mb-2">
-            <div class="col-md-2"></div>
-            <div class="col-md-7 justify-content-center align-self-center border-right border-white">
-                {{ addBlock('list/extra-actions', {'ad': adv})|raw }}
-            </div>
-        </div>
-    </div>
-{% endfor %}
+                        <p class="text-nowrap">
+                            {{ adv.price != '0' ? currency_format(adv.price,adv.currency) : trans('visiosoft.module.advs::field.free') }}
+                        </p>
+                    </td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
diff --git a/addons/default/visiosoft/advs-module/resources/views/list/partials/display-mode.twig b/addons/default/visiosoft/advs-module/resources/views/list/partials/display-mode.twig
index f30dc0eac..6a1391ca2 100644
--- a/addons/default/visiosoft/advs-module/resources/views/list/partials/display-mode.twig
+++ b/addons/default/visiosoft/advs-module/resources/views/list/partials/display-mode.twig
@@ -1,34 +1,22 @@
-<div class="row text-center list-view-type justify-content-center subbreadcrumb">
-    <div class="col-4 col-md-3">
-        {% if setting_value('visiosoft.module.location::list_page_location') %}
-            <button onclick="changeViewType('{{ url_route('visiosoft.module.advs::view_type', ['map']) }}')"
-               class="mx-auto border-0 text-dark d-flex align-items-center justify-content-center">
-                <img src="{{ img('visiosoft.module.advs::images/map-icon.svg').url }}" alt="map icon" class="mr-1">
-                <small class="d-md-none d-lg-inline">{{ trans("visiosoft.module.advs::field.show_display_mode.map") }}</small>
-            </button>
-        {% endif %}
-    </div>
-    <div class="col-4 col-md-3">
-        <button onclick="changeViewType('{{ url_route('visiosoft.module.advs::view_type', ['list']) }}')"
-           class="mx-auto border-0 text-dark d-flex align-items-center justify-content-center">
-            <img src="{{ img('visiosoft.module.advs::images/list-icon.svg').url }}" alt="list icon" class="mr-1">
-            <small class="d-md-none d-lg-inline">{{ trans('visiosoft.module.advs::field.show_list_view.name') }}</small>
-        </button>
-    </div>
-    <div class="col-3 col-md-3 list-table-view d-none d-md-block">
-        <button onclick="changeViewType('{{ url_route('visiosoft.module.advs::view_type', ['table']) }}')"
-           class="border-0 text-dark d-flex align-items-center justify-content-center">
-            <img src="{{ img('visiosoft.module.advs::images/table-icon.svg').url }}" alt="table icon" class="mr-1">
-            <small class="d-md-none d-lg-inline">{{ trans('visiosoft.module.advs::field.show_table_view.name') }}</small>
-        </button>
-    </div>
-    <div class="col-4 col-md-3">
-        <button onclick="changeViewType('{{ url_route('visiosoft.module.advs::view_type', ['gallery']) }}')"
-           class="mx-auto border-0 text-dark d-flex align-items-center justify-content-center">
-            <img src="{{ img('visiosoft.module.advs::images/gallery-icon.svg').url }}" alt="gallery icon" class="mr-1">
-            <small class="d-md-none d-lg-inline"> {{ trans('visiosoft.module.advs::field.gallery') }}</small>
-        </button>
+<div class="d-flex rounded ml-1 px-2">
+    <div class="d-flex px-2 align-items-center">
+        <p class="text-nowrap">{{ trans('visiosoft.module.advs::field.view') }}</p>
+        <div class="d-flex">
+            <a href="{{ url_route('visiosoft.module.advs::view_type', ['list']) }}" rel="nofollow"
+               class="mr-2{{ not request().cookie.viewType or request().cookie.viewType == "list" ? ' active' }}"
+               data-toggle="tooltip" data-placement="top" title="{{ trans('visiosoft.module.advs::field.list') }}">
+                {{ img('visiosoft.module.advs::images/listing/list-type.svg').data|raw }}
+            </a>
+            <a href="{{ url_route('visiosoft.module.advs::view_type', ['gallery']) }}" rel="nofollow"
+               class="{{ request().cookie.viewType == "gallery" ? ' active' }}" data-toggle="tooltip"
+               data-placement="top" title="{{ trans('visiosoft.module.advs::field.gallery') }}">
+                {{ img('visiosoft.module.advs::images/listing/gallery-type.svg').data|raw }}
+            </a>
+        </div>
     </div>
+
+    {% include "visiosoft.module.advs::list/partials/list-sort-by" %}
+
 </div>
 
-{{ asset_add('scripts.js', 'visiosoft.module.advs::js/list.js') }}
\ No newline at end of file
+{{ asset_add('scripts.js', 'visiosoft.module.advs::js/list.js') }}
diff --git a/addons/default/visiosoft/advs-module/resources/views/list/partials/list-filter.twig b/addons/default/visiosoft/advs-module/resources/views/list/partials/list-filter.twig
index d977a7892..4658f388b 100644
--- a/addons/default/visiosoft/advs-module/resources/views/list/partials/list-filter.twig
+++ b/addons/default/visiosoft/advs-module/resources/views/list/partials/list-filter.twig
@@ -1,201 +1,132 @@
-{% set formHtml %}
-<form action="{{ url_route('visiosoft.module.advs::list') }}" method="get" id="{{ (filter_id) ? filter_id : "listFilterForm" }}" rel="nofollow">
-    {% endset %}
-    {% set catSlug = null %}
-    {% set citySlug = null %}
-    {% set pathInfo = app.request.pathinfo|split('/') %}
-    {% if pathInfo[1] == 'c' %}
-        {% set catSlug = pathInfo[2] %}
-    {% endif %}
-    {% if pathInfo|length is same as(4) %}
-        {% set citySlug = pathInfo[3] %}
-    {% endif %}
-    {% if catSlug %}
-    {% set formHtml %}
-    <form action="{{ url_route('adv_list_seo', [catSlug, citySlug]) }}" method="get" id="{{ (filter_id) ? filter_id : "listFilterForm" }}" rel="nofollow">
-        {% endset %}
-        {% endif %}
-        {{ formHtml }}
-        <div>
-            <input type="hidden" name="cat" value="{{ app.request.get('cat') }}">
-            <input type="hidden" name="user" value="{{ app.request.get('user') }}">
-            <div>
-                <div>
-                    <div id="filter" class="w-100 mb-3">
+{% set pathInfo = app.request.pathinfo|split('/') %}
+{% set catSlug = pathInfo[1] == 'c' ? pathInfo[2] : null %}
+{% set citySlug = pathInfo|length is same as(4) ? pathInfo[3] : null %}
+{% set formAction = catSlug ? url_route('adv_list_seo', [catSlug, citySlug]) : url_route('visiosoft.module.advs::list') %}
+<form action="{{ formAction }}" method="get" id="{{ (filter_id) ? filter_id : "listFilterForm" }}" rel="nofollow"
+      class="flex-shrink-0">
+    <input type="hidden" name="cat" value="{{ app.request.get('cat') }}">
+    <input type="hidden" name="user" value="{{ app.request.get('user') }}">
 
-                        {{ addBlock('ads-list/partials/list-filter',{
-                            'mainCats':mainCats,
-                            'subCats':subCats,
-                            'ranges':ranges,
-                            'checkboxes':checkboxes,
-                            'topfields' : topfields,
-                            'selectDropdown' : selectDropdown,
-                            'selectRange' : selectRange,
-                            'selectImage' : selectImage,
-                            'radio':radio,
-                            'countries':countries,
-                            'cities':cities,
-                            'districts':districts,
-                            'neighborhoods':neighborhoods,
-                            'villages':villages,
-                            'param':param,
-                            'categoryId':categoryId,
-                            'cityId':cityId
-                        })|raw }}
+    <div id="category" class="border rounded p-3 mb-3 d-none d-sm-block">
+        <div id="categoryNav" class="d-flex">
+            <a href="{{ url_route('visiosoft.module.advs::view_type', ['list']) }}" rel="nofollow"
+               class="d-flex w-50 align-items-center pl-2 pb-1{{ request().cookie.viewType != "map" ? ' active' }}">
+                {{ img('visiosoft.module.advs::images/listing/list.svg').data|raw }}
+                <p class="ml-2">{{ trans("visiosoft.module.advs::field.list") }}</p>
+            </a>
+            <a href="{{ url_route('visiosoft.module.advs::view_type', ['map']) }}" rel="nofollow"
+               class="d-flex w-50 align-items-center pr-2 pb-1 justify-content-end{{ request().cookie.viewType == "map" ? ' active' }}">
+                {{ img('visiosoft.module.advs::images/listing/map.svg').data|raw }}
+                <p class="ml-2">{{ trans("visiosoft.module.advs::field.map.name") }}</p>
+            </a>
+        </div>
 
-                        <!-- Price Filter Start -->
-                        {% include 'visiosoft.module.advs::list/partials/price-filter' %}
-                        <!-- Price Filter End -->
+        {% include 'visiosoft.module.cats::ads-list/partials/cat-filter' %}
+    </div>
 
-                        {% if setting_value('visiosoft.module.advs::hide_date_filter') == false %}
-                            <!-- Date Filter Start -->
-                            <div class="card mb-3">
-                                <div class="card-header breadcrumb mb-0" id="dateHeading">
-                                    <h5 class="mb-0">
-                                        <button class="btn btn-link text-dark d-flex align-items-center"
-                                                data-toggle="collapse" data-target="#dateContainer"
-                                                aria-expanded="true" aria-controls="dateContainer">
-{#                                            <img src="{{ img('visiosoft.module.advs::images/date-icon.svg').url }}"#}
-{#                                                 class="mr-2"#}
-{#                                                 alt="date icon">#}
-                                            <span>{{ trans("visiosoft.module.advs::field.date.name") }}</span>
-                                        </button>
-                                    </h5>
-                                </div>
-                                <div id="dateContainer" class="collapse show overflow-auto"
-                                     aria-labelledby="dateHeading"
-                                     style="max-height: 300px;">
-                                    <div class="d-flex flex-column p-3 m-0">
-                                        <div class="form-check py-1">
-                                            <input class="form-check-input"
-                                                    {% if app.request.get('date') == 'day' %}
-                                                        checked
-                                                    {% endif %}
-                                                   type="radio" name="date" id="dateDay"
-                                                   value="day">
-                                            <label class="form-check-label" for="dateDay">
-                                                {{ trans("visiosoft.module.advs::field.in_the_last_24_hours.name") }}
-                                            </label>
-                                        </div>
-                                        <div class="form-check py-1">
-                                            <input class="form-check-input"
-                                                    {% if app.request.get('date') == 'week' %}
-                                                        checked
-                                                    {% endif %}
-                                                   type="radio" name="date" id="dateWeek"
-                                                   value="week">
-                                            <label class="form-check-label" for="dateWeek">
-                                                {{ trans("visiosoft.module.advs::field.in_the_last_week.name") }}
-                                            </label>
-                                        </div>
-                                        <div class="form-check py-1">
-                                            <input class="form-check-input"
-                                                    {% if app.request.get('date') == 'month' %}
-                                                        checked
-                                                    {% endif %}
-                                                   type="radio" name="date" id="dateMonth"
-                                                   value="month">
-                                            <label class="form-check-label" for="dateMonth">
-                                                {{ trans("visiosoft.module.advs::field.in_the_last_month.name") }}
-                                            </label>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <!-- Date Filter End -->
-                        {% endif %}
+    {{ addBlock('ads-list/partials/list-filter',{
+        'mainCats':mainCats,
+        'subCats':subCats,
+        'ranges':ranges,
+        'checkboxes':checkboxes,
+        'topfields' : topfields,
+        'selectDropdown' : selectDropdown,
+        'selectRange' : selectRange,
+        'selectImage' : selectImage,
+        'radio':radio,
+        'countries':countries,
+        'cities':cities,
+        'districts':districts,
+        'neighborhoods':neighborhoods,
+        'villages':villages,
+        'param':param,
+        'categoryId':categoryId,
+        'cityId':cityId
+    })|raw }}
 
-                        {% if setting_value('visiosoft.module.advs::hide_photo_filter') == false %}
-                            <!-- Media Filter Start -->
-                            <div class="card mb-3">
-                                <div class="card-header breadcrumb mb-0" id="mediaHeading">
-                                    <h5 class="mb-0">
-                                        <button class="btn btn-link text-dark" data-toggle="collapse"
-                                                data-target="#mediaContainer"
-                                                aria-expanded="true" aria-controls="mediaContainer">
-{#                                            <i class="fa fa-camera"></i>#}
-                                            {{ trans("visiosoft.module.advs::field.photo.name") }}
-                                            , {{ trans("visiosoft.module.advs::field.video.name") }}
-                                        </button>
-                                    </h5>
-                                </div>
-                                <div id="mediaContainer" class="collapse show overflow-auto"
-                                     aria-labelledby="mediaHeading"
-                                     style="max-height: 300px;">
-                                    <div class="d-flex p-3 m-0 flex-column">
-                                        <div class="form-check py-1">
-                                            <input class="form-check-input" type="checkbox"
-                                                    {% if app.request.get('photo') == true %}
-                                                        checked
-                                                    {% endif %}
-                                                   value="true" name="photo"
-                                                   id="photo">
-                                            <label class="form-check-label" for="photo">
-                                                {{ trans("visiosoft.module.advs::field.ads_with_photo.name") }}
-                                            </label>
-                                        </div>
-                                        <div class="form-check py-1">
-                                            <input class="form-check-input" type="checkbox"
-                                                    {% if app.request.get('video') == true %}
-                                                        checked
-                                                    {% endif %}
-                                                   value="true" name="video"
-                                                   id="video">
-                                            <label class="form-check-label" for="video">
-                                                {{ trans("visiosoft.module.advs::field.ads_with_video.name") }}
-                                            </label>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <!-- Media Filter End -->
-                        {% endif %}
+    <!-- Price Filter Start -->
+    {% include 'visiosoft.module.advs::list/partials/price-filter' %}
+    <!-- Price Filter End -->
 
-                        {% if setting_value('visiosoft.module.advs::hide_map_filter') == false %}
-                            <!-- Map Filter Start -->
-                            <div class="card mb-3">
-                                <div class="card-header breadcrumb mb-0" id="mapHeading">
-                                    <h5 class="mb-0">
-                                        <button class="btn btn-link text-dark" data-toggle="collapse"
-                                                data-target="#mapContainer"
-                                                aria-expanded="true" aria-controls="mapContainer">
-{#                                            <i class="fa fa-map"></i>#}
-                                            {{ trans("visiosoft.module.advs::field.map.name") }}
-                                        </button>
-                                    </h5>
-                                </div>
-                                <div id="mapContainer" class="collapse show overflow-auto" aria-labelledby="mapHeading"
-                                     style="max-height: 300px;">
-                                    <div class="row p-3 m-0">
-                                        <div class="form-check py-1">
-                                            <input class="form-check-input" type="checkbox"
-                                                    {% if app.request.get('map') == true %}
-                                                        checked
-                                                    {% endif %}
-                                                   value="true" name="map"
-                                                   id="mapFilter">
-                                            <label class="form-check-label" for="mapFilter">
-                                                {{ trans("visiosoft.module.advs::field.yes.name") }}
-                                            </label>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <!-- Map Filter End -->
-                        {% endif %}
+    {% if setting_value('visiosoft.module.advs::hide_date_filter') == false %}
+        <!-- Date Filter Start -->
+        <div id="date" class="border rounded filter-box p-3 mb-3">
+            <div class="d-flex align-items-center justify-content-between px-2 border-bottom mb-3 pb-1">
+                <p>{{ trans("visiosoft.module.advs::field.date.name") }}</p>
+                {{ img('visiosoft.module.advs::images/listing/filter-arrow.svg').data|raw }}
+            </div>
 
-                        <div class="card">
-                            <div class="card-header bg-primary text-center" id="submitHeading">
-                                <h5 class="mb-0">
-                                    <button class="btn btn-link text-white w-100 searchbut">
-                                        <i class="fas fa-search"></i>
-                                        {{ trans("visiosoft.module.advs::field.search") }}
-                                    </button>
-                                </h5>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+            <div class="px-2 mb-2 d-flex align-items-center">
+                <input type="radio" id="dateDay" {{ app.request.get('date') == 'day' ? 'checked' }} value="day"
+                       name="date">
+                <label for="dateDay" class="ml-2 mb-0">
+                    {{ trans("visiosoft.module.advs::field.in_the_last_24_hours.name") }}
+                </label>
+            </div>
+            <div class="px-2 mb-2 d-flex align-items-center">
+                <input type="radio" id="dateWeek" {{ app.request.get('date') == 'week' ? 'checked' }} value="week"
+                       name="date">
+                <label for="dateWeek" class="ml-2 mb-0">
+                    {{ trans("visiosoft.module.advs::field.in_the_last_week.name") }}
+                </label>
+            </div>
+            <div class="px-2 mb-3 d-flex align-items-center">
+                <input type="radio" id="dateMonth" {{ app.request.get('date') == 'month' ? 'checked' }} value="month"
+                       name="date">
+                <label for="dateMonth" class="ml-2 mb-0">
+                    {{ trans("visiosoft.module.advs::field.in_the_last_month.name") }}
+                </label>
             </div>
         </div>
-    </form>
\ No newline at end of file
+        <!-- Date Filter End -->
+    {% endif %}
+
+    {% if setting_value('visiosoft.module.advs::hide_photo_filter') == false %}
+        <!-- Media Filter Start -->
+        <div id="media" class="border rounded filter-box p-3 mb-3">
+            <div class="d-flex align-items-center justify-content-between px-2 border-bottom mb-3 pb-1">
+                <p>{{ trans("visiosoft.module.advs::field.photo.name") ~ ', ' ~ trans("visiosoft.module.advs::field.video.name") }}</p>
+                {{ img('visiosoft.module.advs::images/listing/filter-arrow.svg').data|raw }}
+            </div>
+
+            <div class="px-2 mb-2 d-flex align-items-center">
+                <input type="checkbox" id="photo" {{ app.request.get('photo') == true ? 'checked' }} value="true"
+                       name="photo">
+                <label for="photo" class="ml-2 mb-0">
+                    {{ trans("visiosoft.module.advs::field.ads_with_photo.name") }}
+                </label>
+            </div>
+            <div class="px-2 mb-3 d-flex align-items-center">
+                <input type="checkbox" id="video" {{ app.request.get('video') == true ? 'checked' }} value="true"
+                       name="video">
+                <label for="video" class="ml-2 mb-0">
+                    {{ trans("visiosoft.module.advs::field.ads_with_video.name") }}
+                </label>
+            </div>
+        </div>
+        <!-- Media Filter End -->
+    {% endif %}
+
+    {% if setting_value('visiosoft.module.advs::hide_map_filter') == false %}
+        <!-- Map Filter Start -->
+        <div id="mapFilter" class="border rounded filter-box p-3 mb-3">
+            <div class="d-flex align-items-center justify-content-between px-2 border-bottom mb-3 pb-1">
+                <p>{{ trans("visiosoft.module.advs::field.map.name") }}</p>
+                {{ img('visiosoft.module.advs::images/listing/filter-arrow.svg').data|raw }}
+            </div>
+
+            <div class="px-2 mb-3 d-flex align-items-center">
+                <input type="checkbox" id="mapFilter" {{ app.request.get('map') == true ? 'checked' }} value="true"
+                       name="map">
+                <label for="mapFilter" class="ml-2 mb-0">{{ trans("visiosoft.module.advs::field.ads_with_map") }}</label>
+            </div>
+        </div>
+        <!-- Map Filter End -->
+    {% endif %}
+
+    <div id="filterSubmit" class="px-3 text-right">
+        <button type="submit" class="btn text-white btn-sm px-3">
+            {{ trans("visiosoft.module.advs::field.search") }}
+        </button>
+    </div>
+</form>
diff --git a/addons/default/visiosoft/advs-module/resources/views/list/partials/list-sort-by.twig b/addons/default/visiosoft/advs-module/resources/views/list/partials/list-sort-by.twig
index da17dfce7..2adb018aa 100644
--- a/addons/default/visiosoft/advs-module/resources/views/list/partials/list-sort-by.twig
+++ b/addons/default/visiosoft/advs-module/resources/views/list/partials/list-sort-by.twig
@@ -1,42 +1,27 @@
-<div class="dropdown pull-left sort-by-list">
-    <div class="dropdown d-flex align-items-center justify-content-center justify-content-md-start">
-        <img src="{{ img('visiosoft.module.advs::images/sort-by-icon.svg').url }}" alt="sort bu icon" class="mr-1">
-        <a data-toggle="dropdown" class="sort-by-open-dropdown text-dark" href="#" aria-expanded="false">
-            <span class="sort-by-selected-text">{{ trans("visiosoft.module.advs::field.pick_ordering") }}</span>
-            <i class="fa fa-caret-square-o-down"></i>
-        </a>
-
-        <ul class="dropdown-menu px-2" x-placement="bottom-start">
-            <li>
-                <span data-value="sort_price_up" class="sort-by-item text-dark">
-                    {{ trans("visiosoft.module.advs::field.price_high") }}
-                </span>
-            </li>
-            <li>
-                <span data-value="sort_price_down" class="sort-by-item text-dark">
-                    {{ trans("visiosoft.module.advs::field.price_low") }}
-                </span>
-            </li>
-            <li>
-                <span data-value="sort_time_newest" class="sort-by-item text-dark">
-                    {{ trans("visiosoft.module.advs::field.newest") }}
-                </span>
-            </li>
-            <li>
-                <span data-value="sort_time_oldest" class="sort-by-item text-dark">
-                    {{ trans("visiosoft.module.advs::field.oldest") }}
-                </span>
-            </li>
-            <li>
-                <span data-value="address_a_z" class="sort-by-item text-dark">
-                    {{ trans("visiosoft.module.advs::field.address_a_z") }}
-                </span>
-            </li>
-            <li>
-                <span data-value="address_z_a" class="sort-by-item text-dark">
-                    {{ trans("visiosoft.module.advs::field.address_z_a") }}
-                </span>
-            </li>
-        </ul>
+<div class="dropdown d-flex align-items-center">
+    <button class="border-0 dropdown-toggle d-flex px-2 align-items-center" type="button"
+            id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <p class="text-nowrap">{{ trans("visiosoft.module.advs::field.advanced_sorting") }}</p>
+        {{ img('visiosoft.module.advs::images/listing/sort.svg').data|raw }}
+    </button>
+    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+        <span class="dropdown-item sort-by-item" data-value="sort_price_up">
+            {{ trans("visiosoft.module.advs::field.price_high") }}
+        </span>
+        <span class="dropdown-item sort-by-item" data-value="sort_price_down">
+            {{ trans("visiosoft.module.advs::field.price_low") }}
+        </span>
+        <span class="dropdown-item sort-by-item" data-value="sort_time_newest">
+            {{ trans("visiosoft.module.advs::field.newest") }}
+        </span>
+        <span class="dropdown-item sort-by-item" data-value="sort_time_oldest">
+            {{ trans("visiosoft.module.advs::field.oldest") }}
+        </span>
+        <span class="dropdown-item sort-by-item" data-value="address_a_z">
+            {{ trans("visiosoft.module.advs::field.address_a_z") }}
+        </span>
+        <span class="dropdown-item sort-by-item" data-value="address_z_a">
+            {{ trans("visiosoft.module.advs::field.address_z_a") }}
+        </span>
     </div>
 </div>