added long height posts

added sample images
master
A1Gard 2 months ago
parent 69d58ac6ef
commit 6841e087ba

@ -18,6 +18,10 @@
background: var(--xshop-secondary);
}
*{
font-family: 'Vazirmatn' , Sans-Serif;
}
body{
background: var(--xshop-background);
color: var(--xshop-text);

Binary file not shown.

After

Width:  |  Height:  |  Size: 350 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 783 KiB

@ -0,0 +1 @@
Source of these images is unsplash.com

@ -20,7 +20,7 @@ class ParallaxShort
$setting->title = $part->area->name . ' ' . $part->part.' Image';
$setting->save();
File::copy(__DIR__.'/assets/bg.jpg',public_path('upload/images/').$part->area->name . '.' . $part->part.'.jpg');
File::copy(__DIR__.'/../../default-assets/bg.jpg',public_path('upload/images/').$part->area->name . '.' . $part->part.'.jpg');
$setting = new Setting();
$setting->section = 'theme';

@ -0,0 +1,38 @@
<section class='LongHeightPosts'
style="background-image: url('{{asset('upload/images/'.$data->area->name.'.'.$data->part.'.jpg')}}')">
<div class="{{gfx()['container']}}">
<h1>
<a href="{{getGroupBySetting($data->area->name.'_'.$data->part.'_group')->webUrl()}}">
{{getGroupBySetting($data->area->name.'_'.$data->part.'_group')->name}}
</a>
</h1>
<div class="row">
@foreach( getGroupPostsBySetting($data->area->name.'_'.$data->part.'_group',4) as $post )
<div class="col-lg-3 col-md-6">
<div class="post-height-img-item" style="background-image: url('{{$post->imgUrl()}}')">
<a class="post-height-img-detail" href="{{$post->webUrl()}}">
<h4>
{{$post->title}}
</h4>
<p>
{{$post->subtitle}}
</p>
</a>
</div>
</div>
@endforeach
</div>
<h3>
<a href="" class="btn btn-outline-primary float-end">
{{getSetting($data->area->name.'_'.$data->part.'_btn')}}
</a>
{{getGroupBySetting($data->area->name.'_'.$data->part.'_group')->subtitle}}
</h3>
</div>
</section>

@ -0,0 +1,10 @@
{
"name": "LongHeightPosts",
"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,56 @@
<?php
namespace Resources\Views\Segments;
use App\Models\Group;
use App\Models\Part;
use App\Models\Setting;
use Illuminate\Support\Facades\File;
class LongHeightPosts
{
public static function onAdd(Part $part = null)
{
$setting = new Setting();
$setting->section = 'theme';
$setting->key = $part->area->name . '_' . $part->part.'_group';
$setting->value = Group::first()->id;
$setting->size = 6;
$setting->type = 'GROUP';
// $setting->data = json_encode(['xmin' => 2, 'xmax' => 90]);
$setting->title = $part->area->name . ' ' . $part->part. ' group';
$setting->save();
$setting = new Setting();
$setting->section = 'theme';
$setting->key = $part->area->name . '_' . $part->part.'_btn';
$setting->value = __("Find more");
$setting->size = 6;
$setting->type = 'TEXT';
// $setting->data = json_encode(['xmin' => 2, 'xmax' => 90]);
$setting->title = $part->area->name . ' ' . $part->part. ' button text';
$setting->save();
$setting = new Setting();
$setting->section = 'theme';
$setting->key = $part->area->name . '_' . $part->part.'_jpg';
$setting->value = null;
$setting->type = 'FILE';
$setting->size = 12;
$setting->title = $part->area->name . ' ' . $part->part.' Image';
$setting->save();
File::copy(__DIR__.'/../../default-assets/bg-girl.jpg',public_path('upload/images/').$part->area->name . '.' . $part->part.'.jpg');
}
public static function onRemove(Part $part = null)
{
Setting::where('key',$part->area->name . '_' . $part->part.'_group')->first()?->delete();
Setting::where('key',$part->area->name . '_' . $part->part.'_btn')->first()?->delete();
Setting::where('key',$part->area->name . '_' . $part->part.'_jpg')->first()?->delete();
}
public static function onMount(Part $part = null)
{
return $part;
}
}

@ -0,0 +1,94 @@
.LongHeightPosts {
// scss
background-size: cover;
background-position: center;
h1 {
padding: 3rem 0;
color: var(--xshop-primary);
position: relative;
&:before {
content: ' ';
position: absolute;
inset-inline-end: 0;
height: 2px;
width: 15%;
top: 50%;
background: var(--xshop-primary);
}
}
h3 {
padding: 3rem 0;
color: var(--xshop-primary);
position: relative;
text-align: center;
font-weight: 200;
font-size: 17px;
.btn {
margin-top: -9px;
}
&:before {
content: ' ';
position: absolute;
inset-inline-start: 0;
height: 2px;
width: 15%;
top: 50%;
background: var(--xshop-primary);
}
}
.post-height-img-item {
margin-bottom: 1rem;
background-size: cover;
background-position: center;
height: 450px;
position: relative;
border-radius: var(--xshop-border-radius);
overflow: hidden;
.post-height-img-detail {
display: block;
transition: 500ms;
position: absolute;
padding: 1rem;
left: 0;
right: 0;
bottom: 0;
h4, p {
color: var(--xshop-diff);
}
p {
transition: 500ms;
max-height: 2.6em;
overflow: hidden;
}
h4 {
opacity: .5;
transition: 500ms;
}
}
&:hover {
.post-height-img-detail {
background: var(--xshop-primary);
h4 {
opacity: 1;
}
p{
max-height: 5.7em;
}
}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 565 KiB

@ -1,4 +1,5 @@
.PostIndexImage {
padding: 3rem 0;
// scss
h1{
font-size: 30px;

@ -10,7 +10,6 @@
<p class="text-center">
{{$slider->dataz['index_ParallaxSlider_subtitle']}}
<br>
<a class="btn btn-outline-dark mt-5"
href="{{$slider->dataz['index_ParallaxSlider_link']}}">
{{$slider->dataz['index_ParallaxSlider_btn']}}

Loading…
Cancel
Save