added grid gallery to theme part

master
A1Gard 2 months ago
parent 46c98f8178
commit f73fa0921f

@ -38,7 +38,7 @@ class AreaSeeder extends Seeder
'valid_segments' => json_encode(
["top", "slider", "header", "footer", "menu",
"parallax", "other", "posts", "products", "attachments"
, "groups", "categories", "category", "group", "index", "ads"]
, "groups", "categories", "category", "group", "index", "ads", "galleries"]
),
'max' => 10,
'preview' => 'client.welcome',

@ -9,4 +9,8 @@ import "./client-custom/confirm.js";
import "./client-custom/safeForm.js";
import "./client-custom/windowLoader.js";
import "../views/segments/preloader/PreloaderCircle/PreloaderCircle.js";
import "../views/segments/posts_page/SimplePostListSideBar/SimplePostListSideBar.js";
import "../views/segments/header/ParallaxHeaderPin/ParallaxHeaderPin.js";
import "../views/segments/group/SubGroupsGrid/SubGroupsGrid.js";
import "../views/segments/posts_page/SimplePostList/SimplePostList.js";
import "../views/segments/gallery/GallaryGrid/GallaryGrid.js";
import "../views/segments/galleries/GridGallery/GridGallery.js";

@ -21,4 +21,8 @@ $xshop-shadow:2px 2px 4px #777777;
@import "client-custom/general";
@import "client-custom/zfix";
@import "../views/segments/preloader/PreloaderCircle/PreloaderCircle";
@import "../views/segments/posts_page/SimplePostListSideBar/SimplePostListSideBar";
@import "../views/segments/header/ParallaxHeaderPin/ParallaxHeaderPin";
@import "../views/segments/group/SubGroupsGrid/SubGroupsGrid";
@import "../views/segments/posts_page/SimplePostList/SimplePostList";
@import "../views/segments/gallery/GallaryGrid/GallaryGrid";
@import "../views/segments/galleries/GridGallery/GridGallery";

@ -1,3 +1,4 @@
@extends('website.inc.website-layout')
@section('title')

@ -1,7 +1,7 @@
@extends('website.inc.website-layout')
@section('title')
welcome
{{config('app.name')}} - {{getSetting('subtitle')}}
@endsection
@section('content')
<main>

@ -0,0 +1,22 @@
<section class='GridGallery'>
<div class="{{gfx()['container']}}">
<h1>
{{ getSetting($data->area->name.'_'.$data->part.'_title')}}
</h1>
<div class="row">
@foreach(\App\Models\Gallery::where('status',1)->orderBy('id')->limit( getSetting($data->area->name.'_'.$data->part.'_limit'))->get() as $gallery)
<div class="col-md p-1">
<a class="gallery-grid" href="{{$gallery->webUrl()}}">
<img src="{{$gallery->imgUrl()}}" alt="{{$gallery->title}}">
<h4>
<span>
{{$gallery->title}}
</span>
</h4>
</a>
</div>
@endforeach
</div>
</div>
</section>

@ -0,0 +1,10 @@
{
"name": "GridGallery",
"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,39 @@
<?php
namespace Resources\Views\Segments;
use App\Models\Part;
use App\Models\Setting;
class GridGallery
{
public static function onAdd(Part $part = null)
{
$setting = new Setting();
$setting->section = 'theme';
$setting->key = $part->area->name . '_' . $part->part.'_title';
$setting->value = __('Galleries');
$setting->type = 'TEXT';
$setting->size = 6;
$setting->title = $part->area->name . ' ' . $part->part.' title';
$setting->save();
$setting = new Setting();
$setting->section = 'theme';
$setting->key = $part->area->name . '_' . $part->part.'_limit';
$setting->value = 3;
$setting->size = 6;
$setting->type = 'NUMBER';
$setting->data = json_encode(['xmin' => 2, 'xmax' => 6]);
$setting->title = $part->area->name . ' ' . $part->part. ' limit';
$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.'_limit')->first()?->delete();
}
public static function onMount(Part $part = null)
{
return $part;
}
}

@ -0,0 +1,46 @@
.GridGallery {
margin-top: 3rem;
// scss
.gallery-grid{
display: block;
position: relative;
overflow: hidden;
height: 25vh;
width: 100%;
border-radius: var(--xshop-border-radius);
img{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--xshop-border-radius);
}
h4{
transition: 400ms;
position: absolute;
left: 10%;
right: 10%;
top: 10%;
bottom: 10%;
background: #ffffff77;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(5px);
opacity: 0;
color: var(--xshop-text);
border-radius: var(--xshop-border-radius);
}
&:hover{
h4{
opacity: 1;
}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 209 KiB

@ -1,4 +1,7 @@
.GallaryGrid {
// scss
img{
border-radius: var(--xshop-border-radius);
}
}

Loading…
Cancel
Save