added theme part Maryam

fixed ui responsive bug natalia
pull/49/head
A1Gard 1 month ago
parent cb1254951f
commit 7e4a857654

@ -0,0 +1,15 @@
<section class='MaryamCategoryProducts'>
<div class="{{gfx()['container']}}">
<h1>
{{getSetting($data->area_name.'_'.$data->part.'_title')}}
</h1>
<div class="maryam-row">
@foreach(getCategoryProductBySetting($part->area_name . '_' . $part->part.'_category',12) as $product)
<a class="maryam-item" href="{{$product->webUrl()}}">
<img src="{{$product->imgUrl()}}" alt="{{$product->name}}" class="img-fluid" loading="lazy">
</a>
@endforeach
</div>
</div>
</section>

@ -0,0 +1,10 @@
{
"name": "MaryamCategoryProducts",
"version": "1.0",
"author": "xStack",
"email": "xshop@xstack.ir",
"license": "GPL-3.0-or-later",
"url": "https:\/\/xstack.ir",
"author_url": "https:\/\/4xmen.ir",
"packages": []
}

@ -0,0 +1,65 @@
<?php
namespace Resources\Views\Segments;
use App\Models\Category;
use App\Models\Part;
use App\Models\Setting;
class MaryamCategoryProducts
{
public static function onAdd(Part $part = null)
{
$setting = new Setting();
$setting->section = 'theme';
$setting->key = $part->area_name . '_' . $part->part.'_title';
$setting->value = 'Another products';
$setting->type = 'TEXT';
$setting->size = 12;
$setting->title = $part->area_name . ' ' . $part->part .' title';
$setting->save();
$setting = new Setting();
$setting->section = 'theme';
$setting->key = $part->area_name . '_' . $part->part.'_color_bg';
$setting->value = '#1c213a';
$setting->data = json_encode(['name' => 'maryam-bg-color']);
$setting->type = 'COLOR';
$setting->size = 4;
$setting->title = $part->area_name . ' ' . $part->part .' background color';
$setting->save();
$setting = new Setting();
$setting->section = 'theme';
$setting->key = $part->area_name . '_' . $part->part.'_color_text';
$setting->value = '#ffae00';
$setting->data = json_encode(['name' => 'maryam-text-color']);
$setting->type = 'COLOR';
$setting->size = 4;
$setting->title = $part->area_name . ' ' . $part->part .' text color';
$setting->save();
$setting = new Setting();
$setting->section = 'theme';
$setting->key = $part->area_name . '_' . $part->part.'_category';
$setting->value = Category::first()->id;
$setting->type = 'CATEGORY';
$setting->size = 4;
$setting->title = $part->area_name . ' ' . $part->part .' category';
$setting->save();
}
public static function onRemove(Part $part = null)
{
Setting::where('key',$part->area_name . '_' . $part->part.'_title')->first()?->delete();
Setting::where('key',$part->area_name . '_' . $part->part.'_color_bg')->first()?->delete();
Setting::where('key',$part->area_name . '_' . $part->part.'_color_text')->first()?->delete();
Setting::where('key',$part->area_name . '_' . $part->part.'_category')->first()?->delete();
}
public static function onMount(Part $part = null)
{
return $part;
}
}

@ -0,0 +1,79 @@
.MaryamCategoryProducts {
// scss
position: relative;
background: var(--maryam-bg-color);
color: var(--maryam-text-color);
padding: 3rem 0;
h1{
font-size: 27px;
text-align: center;
font-weight: 200;
position: relative;
padding: 1rem;
&:after,&:before{
content: ' ';
border-bottom: 1px solid var(--maryam-text-color);
position: absolute;
top: 47% ;
z-index: 2;
width: 15%;
opacity: .5;
}
&:before{
left: 0;
}
&:after{
right: 0;
}
}
&:after{
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(0deg, var(--maryam-bg-color) 35%, transparent 100%);
height: 50%;
content: ' ';
pointer-events: none;
}
.maryam-row{
column-count: 4;
.maryam-item{
display: block;
margin-bottom: 1rem;
}
}
/*-1000px width*/
@media (max-width: 1000px) {
.maryam-row {
column-count: 3 ;
}
}
/*-768px width*/
@media (max-width: 768px) {
.maryam-row {
column-count: 2 ;
}
&:after{
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(0deg, var(--maryam-bg-color) 35%, transparent 100%);
height: 25%;
content: ' ';
pointer-events: none;
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 838 KiB

@ -21,6 +21,7 @@
</div>
<div class="col-md-6 nata-bg"
style="background-image: url('{{$bg??asset('upload/images/'.$part->area_name . '.' . $part->part.'.webp')}}')">
<img src="{{asset('upload/images/'.$part->area_name . '.' . $part->part.'.webp')}}" alt="">
</div>
</div>
</div>

@ -9,8 +9,9 @@
top: -3rem;
padding-bottom: 5rem;
margin-bottom: -3rem;
*{
opacity: 0;
img{
width: 75%;
display: none;
}
}
@ -41,4 +42,17 @@
}
}
}
/*-768px width*/
@media (max-width: 768px) {
.nata-bg{
background-image: none !important;
padding-bottom: 0;
img{
display: block;
margin: auto;
}
}
}
}

@ -3,6 +3,7 @@
namespace Resources\Views\Segments;
use App\Models\Part;
use App\Models\Setting;
use App\Models\Slider;
class ParallaxSlider
@ -12,12 +13,22 @@ class ParallaxSlider
Slider::addData($part->area_name . '_' . $part->part . '_btn','View offer');
Slider::addData($part->area_name . '_' . $part->part . '_link','/');
Slider::addData($part->area_name . '_' . $part->part . '_subtitle','Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquid aspernatur, commodi corporis cupiditate');
$setting = new Setting();
$setting->section = 'theme';
$setting->key = $part->area_name . '_' . $part->part.'_color';
$setting->value = '#000000';
$setting->data = json_encode(['name' => 'parallax-color']);
$setting->type = 'COLOR';
$setting->size = 12;
$setting->title = $part->area_name . ' ' . $part->part .' text color';
$setting->save();
}
public static function onRemove(Part $part = null)
{
Slider::remData($part->area_name . '_' . $part->part . '_btn');
Slider::remData($part->area_name . '_' . $part->part . '_link');
Slider::remData($part->area_name . '_' . $part->part . '_subtitle');
Setting::where('key',$part->area_name . '_' . $part->part.'_color')->first()?->delete();
}
public static function onMount(Part $part = null)
{

@ -17,6 +17,7 @@
justify-content: start;
width: 100%;
height: 750px;
color: var(--parallax-color);
}
// scss
.parallax-slider {

Loading…
Cancel
Save