diff --git a/resources/views/segments/categories/CurveCategories/CurveCategories.scss b/resources/views/segments/categories/CurveCategories/CurveCategories.scss index 180f17e..e5cfdf1 100644 --- a/resources/views/segments/categories/CurveCategories/CurveCategories.scss +++ b/resources/views/segments/categories/CurveCategories/CurveCategories.scss @@ -100,11 +100,11 @@ } #crc-nxt{ - right:calc(50% - 100px); + right:calc(50% - 120px); transform: translateX(-50%); } #crc-prv{ - left:calc(50% - 100px); + left:calc(50% - 120px); transform: translateX(50%); } diff --git a/resources/views/segments/index/CurvePosts/CurvePosts.blade.php b/resources/views/segments/index/CurvePosts/CurvePosts.blade.php new file mode 100644 index 0000000..37cb553 --- /dev/null +++ b/resources/views/segments/index/CurvePosts/CurvePosts.blade.php @@ -0,0 +1,47 @@ +
+ + +
+ +
+
+ +

+ {{getSetting($part->area_name . '_' . $part->part.'_title')}} +

+
+ + + + + +
+ +
+
+ +
+ +
+ @foreach(getGroupPostsBySetting($part->area_name . '_' . $part->part.'_group',12) as $post) + + @endforeach +
+
+
+ +
+ +
+
diff --git a/resources/views/segments/index/CurvePosts/CurvePosts.js b/resources/views/segments/index/CurvePosts/CurvePosts.js new file mode 100644 index 0000000..b0e67a4 --- /dev/null +++ b/resources/views/segments/index/CurvePosts/CurvePosts.js @@ -0,0 +1,52 @@ +import {tns} from "tiny-slider/src/tiny-slider"; + +var curvePostSlider ; + +document.addEventListener('DOMContentLoaded', () => { + document.querySelectorAll('#curve-slider-post')?.forEach(function (el) { + if (el.classList.contains('.tns-slider')){ + console.log('ignore'); + return 'ignore'; + } + curvePostSlider = tns({ + container: el, + responsive:{ + 560:{ + items: 1.5, + }, + 1000:{ + items: 3.5, + }, + 1400:{ + items: 5.5, + }, + + }, + // edgePadding: 50, + autoplay: true, + autoplayButton: false, + mouseDrag: true, + prevButton: false, + nextButton: false, + autoplayTimeout: 8000, + center: true, + nav: true, + loop:true, + }); + }); + // + document.querySelector('#crp-nxt')?.addEventListener('click',function () { + if (document.documentElement.getAttribute('dir') === 'rtl'){ + curvePostSlider.goTo('prev'); + }else{ + curvePostSlider.goTo('next'); + } + }); + document.querySelector('#crp-prv')?.addEventListener('click',function () { + if (document.documentElement.getAttribute('dir') !== 'rtl'){ + curvePostSlider.goTo('prev'); + }else{ + curvePostSlider.goTo('next'); + } + }); +}); diff --git a/resources/views/segments/index/CurvePosts/CurvePosts.json b/resources/views/segments/index/CurvePosts/CurvePosts.json new file mode 100644 index 0000000..afe2b5d --- /dev/null +++ b/resources/views/segments/index/CurvePosts/CurvePosts.json @@ -0,0 +1,10 @@ +{ + "name": "CurvePosts", + "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": [] +} \ No newline at end of file diff --git a/resources/views/segments/index/CurvePosts/CurvePosts.php b/resources/views/segments/index/CurvePosts/CurvePosts.php new file mode 100644 index 0000000..d93d372 --- /dev/null +++ b/resources/views/segments/index/CurvePosts/CurvePosts.php @@ -0,0 +1,55 @@ +section = 'theme'; + $setting->key = $part->area_name . '_' . $part->part.'_title'; + $setting->value = 'Lorem ipsum dolor sit amet'; + $setting->type = 'TEXT'; + $setting->size = 4; + $setting->title = $part->area_name . ' ' . $part->part .' titles'; + $setting->save(); + + + $setting = new Setting(); + $setting->section = 'theme'; + $setting->key = $part->area_name . '_' . $part->part.'_group'; + $setting->value = Group::first()->id; + $setting->type = 'GROUP'; + $setting->size = 4; + $setting->title = $part->area_name . ' ' . $part->part .' group'; + $setting->save(); + + + $setting = new Setting(); + $setting->section = 'theme'; + $setting->key = $part->area_name . '_' . $part->part.'_bg'; + $setting->value = gfx()['secondary']; + $setting->type = 'COLOR'; + $setting->data = json_encode(['name' => 'curve-posts-slider-bg']); + $setting->size = 4; + $setting->title = $part->area_name . ' ' . $part->part .' background color'; + $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.'_group')->first()?->delete(); + Setting::where('key',$part->area_name . '_' . $part->part.'bg')->first()?->delete(); + } + public static function onMount(Part $part = null) + { + return $part; + } +} diff --git a/resources/views/segments/index/CurvePosts/CurvePosts.scss b/resources/views/segments/index/CurvePosts/CurvePosts.scss new file mode 100644 index 0000000..ec71ffb --- /dev/null +++ b/resources/views/segments/index/CurvePosts/CurvePosts.scss @@ -0,0 +1,193 @@ +#CurvePosts { + position: relative; + background: var(--curve-posts-slider-bg); + + + h1{ + position: relative; + z-index: 33; + margin-bottom: 1rem; + font-size: 30px; + font-weight: 300; + } + #curve-post-top, #curve-post-bottom { + height: 10rem; + position: relative; + background: transparent; + overflow: hidden; + + } + + #curve-post-top { + + margin-bottom: -4.5rem; + + z-index: 15; + + &:before { + content: " "; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 700%; + background: var(--xshop-background); + border-radius: 50%; + transform: scaleX(1.75); + } + + } + + #curve-post-bottom { + margin-top: -2.5rem; + z-index: 10; + + &:before { + content: " "; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 700%; + background: var(--xshop-background); + border-radius: 50%; + transform: scaleX(1.75); + } + } + + #curve-slider-post-container { + height: 35vh; + + #curve-slider-post{ + //width: 100vw; + //left: 0; + //right: 0; + } + + .slider-content { + transform: translateX(25%); + } + + &:before, &:after { + content: ' '; + position: absolute; + top: 0; + bottom: 0; + width: 45%; + z-index: 9; + pointer-events: none; + } + + &:before { + background: linear-gradient(90deg, var(--curve-posts-slider-bg) 20%, rgba(0, 0, 0, 0) 100%); + left: 0; + } + + &:after { + background: linear-gradient(-90deg, var(--curve-posts-slider-bg) 20%, rgba(0, 0, 0, 0) 100%); + right: 0; + } + + + .sld-btn,.tns-nav{ + z-index: 90; + position: absolute; + top: 75%; + cursor: pointer; + i{ + font-size: 35px; + } + } + + #crp-nxt{ + right:calc(50% - 120px); + transform: translateX(-50%); + } + #crp-prv{ + left:calc(50% - 120px); + transform: translateX(50%); + } + + .tns-nav{ + display: flex !important; + width: 150px; + left:calc(50% - 75px); + height: 50px; + + align-items: center; + justify-content: space-evenly; + button{ + display: inline-block; + margin: 3px; + width: 10px; + height: 10px; + border-radius: var(--xshop-border-radius); + background: #00000044; + border: 0; + } + + .tns-nav-active{ + + background: var(--xshop-primary); + } + } + } + + .curve-post-item { + height: 35vh; + position: relative; + img { + height: 100%; + width: 100%; + object-fit: cover; + } + + h4{ + position: absolute; + bottom: 45%; + left: 0; + right: 0; + width: 100%; + text-align: center; + z-index: 33; + background: var(--xshop-background); + padding: .5rem; + transition: 300ms; + font-weight: 400; + opacity: 0; + } + + &:hover{ + h4{ + opacity: 1; + } + } + + + + } + + #curve-all-posts{ + background: #ffffff; + color: black; + position: absolute; + right: 30%; + top: 175px; + z-index: 98; + width: 45px; + height: 45px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + opacity: .35; + + &:hover{ + opacity: 1; + } + i{ + font-size: 30px; + } + } + +} diff --git a/resources/views/segments/index/CurvePosts/screenshot.png b/resources/views/segments/index/CurvePosts/screenshot.png new file mode 100644 index 0000000..bec6590 Binary files /dev/null and b/resources/views/segments/index/CurvePosts/screenshot.png differ