mirror of
https://github.com/openclassify/openclassify.git
synced 2026-01-11 18:01:10 -06:00
#1143 [Post ad] Selecting cats design and imp.
This commit is contained in:
Diatrex
parent
4a679c8406
commit
9a8b342c98
@ -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);
|
||||
}
|
||||
@ -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>
|
||||
|
After Width: | Height: | Size: 927 B |
@ -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>
|
||||
|
After Width: | Height: | Size: 621 B |
@ -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);
|
||||
});
|
||||
})();
|
||||
}
|
||||
|
||||
@ -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.',
|
||||
|
||||
@ -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>
|
||||
@ -1,121 +1,95 @@
|
||||
{% extends layout('post-cat') %}
|
||||
|
||||
{% block styles %}
|
||||
{{ asset_style("visiosoft.module.advs::css/post-category.css") }}
|
||||
{% endblock %}
|
||||
|
||||
{% 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">
|
||||
|
||||
<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>
|
||||
{% for cat in main_cats %}
|
||||
<option value="{{ cat.id }}">
|
||||
{{ cat.name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<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 class="text-truncate pl-1 my-1" value="{{ cat.id }}">
|
||||
{{ cat.name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</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="cat2" id="cat2" multiple>
|
||||
|
||||
</select>
|
||||
</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="cat2" id="cat2" multiple></select>
|
||||
</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>
|
||||
</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 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>
|
||||
</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 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>
|
||||
</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 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>
|
||||
</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>
|
||||
</select>
|
||||
</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="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 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="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 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="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 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>
|
||||
</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="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 class="row">
|
||||
<div class="col-sm-8 col-sm-offset-2 text-center">
|
||||
{{ blocks('center-add-ad-banner-area') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-8 col-sm-offset-2 text-center">
|
||||
{{ blocks('center-add-ad-banner-area') }}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</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 %}
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
|
||||
<head>
|
||||
{% include "theme::partials/metadata" %}
|
||||
{% block styles %}{% endblock %}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user