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

#1143 [Post ad] Selecting cats design and imp.

Browse Source
This commit is contained in:
Diatrex 2020-04-29 19:02:47 +03:00
parent 4a679c8406
commit 9a8b342c98
10 changed files with 213 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
addons/default/visiosoft/advs-module/resources/css/post-category.css
View File

@ -1,4 +1,22 @@
#ad-cat-section .step-icon {
height: 1rem;
vertical-align: baseline;
}
.category-tab {
overflow-x: auto;
}
.cat-item:not(.focus-select) div, .cat-item:not(.focus-select) select {
background-color: #f8f9fa;
}
.focus-select .cat-option {
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
}
.cat-select {
height: 0;
width: 100%;
border: none;
overflow-y: auto
@ -8,12 +26,16 @@
outline: none;
}
.cat-item {
flex: none;
width: 13rem;
}
.cat-select option {
border-top: 1px solid #f2f2f2;
padding: 15px 0 20px;
cursor: pointer;
border-radius: 2px;
position: relative;
padding-left: 10px;
font-size: 16px;
font-size: 13px;
color: #505050;
}
@ -21,14 +43,32 @@
display: none;
}
.cat-item-3 {
.cat-item:last-child {
display: none;
}
.next-stap img {
width: 60px;
}
.next-stap p {
font-size: 13px;
font-weight: 500;
}
.btn-1 {
background-color: #00a651;
padding: 5px 50px 7px;
padding: 5px 30px 7px;
color: #fff;
border: 1px solid #dadada;
margin-right: 5px;
}
.cat-select::-webkit-scrollbar {
width: 4px;
}
.cat-select::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,0.5);
}

40
addons/default/visiosoft/advs-module/resources/images/ascend.svg Normal file
View File

@ -0,0 +1,40 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path style="fill:#92ECF6;" d="M497,0H376.5c-8.284,0-15,6.716-15,15v105.5H256c-8.284,0-15,6.716-15,15V241H135.5
c-8.284,0-15,6.716-15,15v105.5H15c-8.284,0-15,6.716-15,15V497c0,8.284,6.716,15,15,15h482c8.284,0,15-6.716,15-15V15
C512,6.716,505.284,0,497,0z"/>
<path style="fill:#2FD6F0;" d="M497,0H376.5c-8.284,0-15,6.716-15,15v105.5H256c-8.284,0-15,6.716-15,15V241v271h256
c8.284,0,15-6.716,15-15V15C512,6.716,505.284,0,497,0z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 927 B

2
addons/default/visiosoft/advs-module/resources/images/check.svg Normal file
View File

@ -0,0 +1,2 @@
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px" class=""><g><ellipse style="fill:#26A67C" cx="256" cy="256" rx="256" ry="255.832" data-original="#32BEA6" class="" data-old_color="#32BEA6"/><polygon style="fill:#FFFFFF" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504 391.88,166.392 " data-original="#FFFFFF" class="active-path" data-old_color="#FFFFFF"/></g> </svg>
Side by Side

After

Width:  |  Height:  |  Size: 621 B

48
addons/default/visiosoft/advs-module/resources/js/cats.js
View File

@ -22,26 +22,25 @@ $(document).ready(function () {
success: function (response) {
hideLoader();
if(response['title'] != undefined){
var btn = '<button type="submit" class="btn-1">'+response['nextBtn']+'</button>'
if(response['link'] != "") {
btn = "<a class='btn btn-primary' href='/profile' role='button'>"+response['nextBtn']+"</a>";
}
$('.cat-item-3').html(
'<div class="section next-stap post-option p-2">' +
'<h5>'+response['title']+'</h5>' +
'<p class="p-2">'+response['msg']+'</p>' +
'<div class="btn-section btn-next">' +
btn +
'<a href="/">'+response['cancelBtn']+'</a></div></div>'
var btn = '<button type="submit" class="btn-1">'+response['continueBtn']+'</button>';
$('.cat-item-3 .next-content').html(
'<p class="mb-3 mt-2">'+response['title']+'</p>' +
'<div class="btn-section btn-next">' + btn + '</div>'
);
$('.cat-item-3').show();
$('.cat-item-3').parent().css('display', 'flex');
stop();
}
else {
} else {
response.forEach(function(options){
$(catId).append("<option value="+options.id+">"+options.name+"</option>").closest('.cat-item-2').show();
$(catId).append("<option class='text-truncate pl-1 my-1' value="+options.id+">"+options.name+"</option>");
});
$('.focus-select').removeClass('focus-select');
$(catId).animate({height: '14rem'}, 200);
$(catId).closest('.cat-item-2').show().addClass('focus-select')
}
// Auto scroll right
let categoryTab = $('.category-tab');
let pos = categoryTab.scrollLeft() + categoryTab.width();
categoryTab.animate( {scrollLeft: pos}, 1000);
},
beforeSend: function () {
showLoader()
@ -54,8 +53,10 @@ $(document).ready(function () {
var endNo = 9;
while (startNo <= endNo) {
$('#cat'+ startNo).html("").closest('.cat-item-2').hide();
$('.cat-item-3').hide();
$('#cat'+ startNo).animate({height: 0}, 200, 'linear', function () {
$(this).html("").closest('.cat-item-2').hide();
});
$('.cat-item-3').parent().hide();
startNo++;
}
};
@ -63,13 +64,16 @@ $(document).ready(function () {
for (var i = 1; i <= 10; i++) {
(function(){
var ii = i;
$('#cat'+i).on('change', function (i,e) {
divId = $(this).find('option:selected').val();
$('#cat' + i).on('change', function (i, e) {
$(this).find('option.selected').removeClass('selected');
let selectedOption = $(this).find('option:selected');
selectedOption.addClass('selected');
let divId = selectedOption.val();
if (divId == 0) {
filter.hideCats(ii+1);
filter.hideCats(ii + 1);
}
filter.hideCats(ii+1);
filter.getCats("#cat"+(ii+1), divId);
filter.hideCats(ii + 1);
filter.getCats("#cat" + (ii + 1), divId);
});
})();
}

11
addons/default/visiosoft/advs-module/resources/lang/en/message.php
View File

@ -10,16 +10,11 @@ return [
'updated_category_msg' => 'Category successfully edited.',
'max_ad_limit' => [
'title' => "Your Free Ad Limit is Out.",
'msg' => "You have reached your free ad limit.",
'nextBtn' => "Show Ads",
'cancelBtn' => "or Cancel",
'continueBtn' => "Show Ads",
],
'create_ad_with_post_cat' => [
'title' => "Post an Ad in just 30 seconds",
'msg' => "Please DO NOT post multiple ads for the same items or service. All duplicate, spam and wrongly categorized ads will be deleted.",
'nextBtn' => "Next",
'cancelBtn' => "or Cancel",
'link' => "",
'title' => "Category selection has been completed.",
'continueBtn' => "Continue",
],
'update_category_info' => 'Please update category.',
'filter_by_search_msg' => 'Filter By Search.',

1
addons/default/visiosoft/advs-module/resources/views/new-ad/partials/breadcrumb.twig
View File

@ -3,5 +3,4 @@
<li class="breadcrumb-item"><a href="{{ url("/") }}">{{ trans('visiosoft.module.advs::field.home') }}</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ trans('visiosoft.module.advs::field.ad_post') }}</li>
</ol>
<h2 class="title">{{ trans('visiosoft.module.advs::field.post_free_ad') }}</h2>
</nav>

142
addons/default/visiosoft/advs-module/resources/views/new-ad/post-cat.twig
View File

@ -1,19 +1,24 @@
{% extends layout('post-cat') %}
{% block content %}
<section id="main" class="clearfix ad-post-page">
<div class="container">
{% include "visiosoft.module.advs::new-ad/partials/breadcrumb" %}
<div id="ad-cat-section">
<form action="{{ url_route('visiosoft.module.advs::post_cat') }}" method="post">
<div class="row category-tab">
{% block styles %}
{{ asset_style("visiosoft.module.advs::css/post-category.css") }}
{% endblock %}
<div class="col-lg-3 col-md-4 col-sm-6 cat-item mb-2">
<div class="section cat-option select-category post-option card p-2">
<h5>{{ trans('visiosoft.module.advs::field.select_a_category') }}</h5>
<select class="cat-select" name="cat1" id="cat1" multiple>
{% block content %}
<section class="clearfix ad-post-page">
{% include "visiosoft.module.advs::new-ad/partials/breadcrumb" %}
<div id="ad-cat-section" class="border rounded shadow-sm bg-light py-4 px-3">
<h5 class="mb-3">
<img src="{{ img('visiosoft.module.advs::images/ascend.svg').url }}" class="step-icon mr-1">
Select Category Step by Step
</h5>
<form action="{{ url_route('visiosoft.module.advs::post_cat') }}" method="post">
<div class="d-flex category-tab pb-3">
<div class="pr-2 cat-item mb-2 focus-select">
<div class="section cat-option select-category post-option card px-1">
<select class="cat-select mt-2 pr-1" name="cat1" id="cat1" style="height: 14rem" multiple>
{% for cat in main_cats %}
<option value="{{ cat.id }}">
<option class="text-truncate pl-1 my-1" value="{{ cat.id }}">
{{ cat.name }}
</option>
{% endfor %}
@ -21,82 +26,60 @@
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 cat-item mb-2 cat-item-2">
<div class="section cat-option select-category post-option card p-2">
<h5>{{ trans('visiosoft.module.advs::field.select_a_sub_category') }}</h5>
<select class="cat-select" name="cat2" id="cat2" multiple>
<div class="pr-2 cat-item mb-2 cat-item-2">
<div class="section cat-option select-category post-option card px-1">
<select class="cat-select mt-2 pr-1" name="cat2" id="cat2" multiple></select>
</div>
</div>
<div class="pr-2 cat-item mb-2 cat-item-2">
<div class="section cat-option select-category post-option card px-1">
<select class="cat-select mt-2 pr-1" name="cat3" id="cat3" multiple></select>
</div>
</div>
<div class="pr-2 cat-item mb-2 cat-item-2">
<div class="section cat-option select-category post-option card px-1">
<select class="cat-select mt-2 pr-1" name="cat4" id="cat4" multiple></select>
</div>
</div>
<div class="pr-2 cat-item mb-2 cat-item-2">
<div class="section cat-option select-category post-option card px-1">
<select class="cat-select mt-2 pr-1" name="cat5" id="cat5" multiple></select>
</div>
</div>
<div class="pr-2 cat-item mb-2 cat-item-2">
<div class="section cat-option select-category post-option card px-1">
<select class="cat-select mt-2 pr-1" name="cat6" id="cat6" multiple>
</select>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 cat-item mb-2 cat-item-2">
<div class="section cat-option select-category post-option card p-2">
<h5>{{ trans('visiosoft.module.advs::field.select_a_sub_category') }}</h5>
<select class="cat-select" name="cat3" id="cat3" multiple>
</select>
<div class="pr-2 cat-item mb-2 cat-item-2">
<div class="section cat-option select-category post-option card px-1">
<select class="cat-select mt-2 pr-1" name="cat7" id="cat7" multiple></select>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 cat-item mb-2 cat-item-2">
<div class="section cat-option select-category post-option card p-2">
<h5>{{ trans('visiosoft.module.advs::field.select_a_sub_category') }}</h5>
<select class="cat-select" name="cat4" id="cat4" multiple>
</select>
<div class="pr-2 cat-item mb-2 cat-item-2">
<div class="section cat-option select-category post-option card px-1">
<select class="cat-select mt-2 pr-1" name="cat8" id="cat8" multiple></select>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 cat-item mb-2 cat-item-2">
<div class="section cat-option select-category post-option card p-2">
<h5>{{ trans('visiosoft.module.advs::field.select_a_sub_category') }}</h5>
<select class="cat-select" name="cat5" id="cat5" multiple>
</select>
<div class="pr-2 cat-item mb-2 cat-item-2">
<div class="section cat-option select-category post-option card px-1">
<select class="cat-select mt-2 pr-1" name="cat9" id="cat9" multiple></select>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 cat-item mb-2 cat-item-2">
<div class="section cat-option select-category post-option card p-2">
<h5>{{ trans('visiosoft.module.advs::field.select_a_sub_category') }}</h5>
<select class="cat-select" name="cat6" id="cat6" multiple>
</select>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 cat-item mb-2 cat-item-2">
<div class="section cat-option select-category post-option card p-2">
<h5>{{ trans('visiosoft.module.advs::field.select_a_sub_category') }}</h5>
<select class="cat-select" name="cat7" id="cat7" multiple>
</select>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 cat-item mb-2 cat-item-2">
<div class="section cat-option select-category post-option card p-2">
<h5>{{ trans('visiosoft.module.advs::field.select_a_sub_category') }}</h5>
<select class="cat-select" name="cat8" id="cat8" multiple>
</select>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 cat-item mb-2 cat-item-2">
<div class="section cat-option select-category post-option card p-2">
<h5>{{ trans('visiosoft.module.advs::field.select_a_sub_category') }}</h5>
<select class="cat-select" name="cat9" id="cat9" multiple>
</select>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 cat-item mb-2 cat-item-2">
<div class="section cat-option select-category post-option card p-2">
<h5>{{ trans('visiosoft.module.advs::field.select_a_sub_category') }}</h5>
<select class="cat-select" name="cat10" id="cat10" multiple>
</select>
<div class="pr-2 cat-item mb-2 cat-item-2">
<div class="section cat-option select-category post-option card px-1">
<select class="cat-select mt-2 pr-1" name="cat10" id="cat10" multiple></select>
</div>
</div>
<div class="col-lg-4 col-md-12 cat-item mb-2">
<div class="card cat-item-3 p-2">
<div class="cat-item mb-2 shadow-sm border rounded align-items-center">
<div class="cat-item-3">
<div class="section next-stap post-option px-4 text-center">
<img src="{{ img('visiosoft.module.advs::images/check.svg').url }}" alt="check icon">
<div class="next-content"></div>
</div>
</div>
</div>
</div>
@ -107,15 +90,6 @@
</div>
</form>
</div>
</div>
</section>
<style>
#main {
background-image: {{ img('visiosoft.module.advs::images/main.png').url }} !important;
}
</style>
{{ asset_add("scripts.js", "visiosoft.module.advs::js/cats.js") }}
{{ asset_add("styles.css", "visiosoft.module.advs::css/post-category.css") }}
{% endblock %}

1
addons/default/visiosoft/base-theme/resources/views/layouts/default.twig
View File

@ -13,6 +13,7 @@
<head>
{% include "theme::partials/metadata" %}
{% block styles %}{% endblock %}
</head>
<body>

15
addons/default/visiosoft/cats-module/src/Category/CategoryModel.php
View File

@ -58,6 +58,21 @@ class CategoryModel extends CatsCategoryEntryModel implements CategoryInterface
return count($this->getParentCats($id)) + 1;
}
public function getParentsCount($id)
{
$parentCats = array();
$currentId = $id;
do {
$cat = $this->getCat($currentId);
$catParent = $cat->parent_category_id;
if ($catParent) {
$currentId = $catParent;
$parentCats[] = $catParent;
}
} while ($catParent);
return count($parentCats);
}
public function getSubCategories($id, $get = null)
{
$sub_categories = $this->where('parent_category_id', $id)->get();

10
addons/default/visiosoft/cats-module/src/Category/CategoryRepository.php
View File

@ -50,7 +50,15 @@ class CategoryRepository extends EntryRepository implements CategoryRepositoryIn
public function getSubCatById($id)
{
return $this->model->where('parent_category_id', $id)->where('deleted_at', null)->orderBy('sort_order')->get();
$orderBy = $this->model->getParentsCount($id) >= 1 ? 'name' : 'sort_order';
return $this->model->newQuery()
->join('cats_category_translations', 'cats_category.id', '=', 'cats_category_translations.entry_id')
->where('cats_category_translations.locale', config('app.locale'))
->where('parent_category_id', $id)
->where('deleted_at', null)
->select('cats_category.*')
->orderBy($orderBy)
->get();
}
public function getSingleCat($id)