huanld/ghost-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(swiper): now has buttons

Browse Source
This commit is contained in:
Dimitrie Stefanescu
2021-06-29 17:27:56 +01:00
parent 2e72a3d9d7
commit 7308abb550
2 changed files with 103 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
partials/interop/connectorTagCards.hbs
+3 -3
View File
@@ -6,7 +6,7 @@
us:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
<option value="Select a connector">From</option>
{{#get "tags" limit="all" include='count.posts' order='count.posts desc'
filter="slug:-[features,developers,careers,blog,tutorials]"}}
filter="slug:[rhino,grasshopper,revit,dynamo,excel,blender,autocad,civil3d,unity,unreal]"}}
{{#foreach tags }}
<option value="{{name}}">{{name}}</option>
{{/foreach}}
@@ -17,7 +17,7 @@
class="block inline-block sm:w-auto mt-1 pl-3 mx-3 pr-10 py-2 text-base font-extrabold shadow-lg text-white bg-blue-500 dark:bg-blue-900 border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
<option value="Select a connector">To </option>
{{#get "tags" limit="all" include='count.posts' order='count.posts desc'
filter="slug:-[features,developers,careers,blog,tutorials]"}}
filter="slug:[rhino,grasshopper,revit,dynamo,excel,blender,autocad,civil3d,unity,unreal]"}}
{{#foreach tags }}
<option value="{{name}}">{{name}}</option>
{{/foreach}}
@@ -34,7 +34,7 @@
<div class="relative flex items-center w-default mt-4 text-white"></div>
<div class="w-default pt-10 grid grid-cols-1 md:grid-cols-2 gap-0 gap-y-2 md:gap-6">
{{#get "tags" limit="all" include='count.posts' order='count.posts desc'
filter="slug:-[features,developers,careers,blog,tutorials]"}}
filter="slug:[rhino,grasshopper,revit,dynamo,excel,blender,autocad,civil3d,unity,unreal]"}}
{{#foreach tags }}
<a href="{{url}}" class="group p-2 py-5 flex flex-row
shadow-sm hover:shadow-xl transition-shadow hover:ring dark:bg-gray-900 bg-white rounded-xl col-span-1 connector-card connector-{{name}}
partials/landing/connectorsPreview.hbs
+100 -163
View File
@@ -10,179 +10,116 @@
{{/foreach}}
{{/get}}
</a>
{{!-- <h1>Why <span class='text-blue-500'>Speckle?</span></h1> --}}
{{!-- <p>Speckle goes beyond point-to-point interoperability: it's data infrastructure for the built environment.
</p> --}}
</div>
</div>
{{!-- <div class="bg-gradient-to-t from-transparent dark:to-gray-900 to-gray-200 pt-20"> --}}
<div class="relative transform perspective-700 dark:bg-gray-900 bg-gray-200 pt-10 z-0">
<div class="swiper-container connector-swiper mx-auto">
<div class="swiper-wrapper mb-10">
<div
class="swiper-slide group dark:text-gray-200 text-gray-600 p-2 text-center content-center flex flex-wrap justify-center">
<img class="mx-auto w-32 transition-transform transform group-hover:scale-110"
src="{{asset 'images/rhino.png'}}">
<p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
Rhino
</p>
</div>
<div
class="swiper-slide group dark:text-gray-200 text-gray-600 p-2 text-center content-center flex flex-wrap justify-center">
<img class="mx-auto w-32 transition-transform transform group-hover:scale-110 object-contain"
src="{{asset 'images/gh.png'}}">
<p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
Grasshopper
</p>
</div>
{{!-- unccomment in stage 2 --}}
{{!-- <div
class="swiper-slide group p-2 rounded-xl text-center content-center flex flex-wrap justify-center h-auto transform opacity-90 hover:opacity-100 scale-75 hover:scale-90 transition bg-blue-500 text-white">
<a href="/features/connectors" class="flex flex-col text-center w-full text-xl items-center justify-center">
All <span class="hidden md:inline-block">Connectors</span>
</a>
</div> --}}
<div
class="swiper-slide group dark:text-gray-200 text-gray-600 p-2 text-center content-center flex flex-wrap justify-center"
style="">
<img class="mx-auto w-32 transition-transform transform group-hover:scale-110"
src="{{asset 'images/revit.png'}}">
<p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
Revit
</p>
</div>
<div
class="swiper-slide group dark:text-gray-200 text-gray-600 p-2 text-center content-center flex flex-wrap justify-center">
<img class="mx-auto w-32 transition-transform transform group-hover:scale-110"
src="{{asset 'images/dyn.png'}}">
<p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
Dynamo
</p>
</div>
<div
class="swiper-slide group dark:text-gray-200 text-gray-600 p-2 text-center content-center flex flex-wrap justify-center">
<img class="mx-auto w-32 transition-transform transform group-hover:scale-110"
src="{{asset 'images/unity.png'}}">
<p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
Unity
</p>
</div>
<div
class="swiper-slide group dark:text-gray-200 text-gray-600 p-2 text-center content-center flex flex-wrap justify-center">
<img class="mx-auto w-32 transition-transform transform group-hover:scale-110"
src="{{asset 'images/blender.png'}}">
<p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
Blender
</p>
</div>
<div
class="swiper-slide group dark:text-gray-200 text-gray-600 p-2 text-center content-center flex flex-wrap justify-center">
<img class="mx-auto w-32 transition-transform transform group-hover:scale-110"
src="{{asset 'images/acad.png'}}">
<p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
Autocad & Civil3D
</p>
</div>
<div
class="swiper-slide group dark:text-gray-200 text-gray-600 p-2 text-center content-center flex flex-wrap justify-center">
<img class="mx-auto w-32 transition-transform transform group-hover:scale-110"
src="{{asset 'images/unreal.png'}}">
<p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
Unreal
</p>
</div>
<div
class="swiper-slide group dark:text-gray-200 text-gray-600 p-2 text-center content-center flex flex-wrap justify-center">
<img class="mx-auto w-32 transition-transform transform group-hover:scale-110"
src="{{asset 'images/excel.png'}}">
<p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
Excel
</p>
</div>
</div>
<div class="swiper-pagination mt-10"></div>
</div>
</div>
</div>
<div
class="group w-full mx-auto prose lg:prose-lg dark:prose-dark max-w-none text-center p-10 bg-gradient-to-b from-gray-200 dark:from-gray-900">
<div class="w-default px-4">
Go beyond interoperability and leverage all the potential behind a fully fledged BIM data platform
</div>
<div class="flex flex-wrap content-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24"
<div class="relative transform perspective-700 dark:bg-gray-900 bg-gray-200 pt-10 z-0 flex">
<div id="prev"
class="xxx-swiper-button-next flex-shrink transition text-blue-500 flex bg-none dark:hover:bg-gray-800 hover:bg-gray-100 opacity-10 hover:opacity-100 rounded-full -mt-5 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 self-center" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</div>
<div class="swiper-container connector-swiper mx-auto max-w-7xl flex-grow">
<div class="swiper-wrapper mb-10">
{{#get "tags" limit="all" include='count.posts' order='count.posts desc'
filter="slug:[rhino,grasshopper,revit,dynamo,excel,blender,autocad,civil3d,unity,unreal]"}}
{{#foreach tags }}
<a href="{{url}}"
class="swiper-slide group dark:text-gray-200 text-gray-600 p-2 text-center content-center flex flex-wrap justify-center">
<img class="mx-auto w-32 transition-transform transform group-hover:scale-110" src="{{feature_image}}">
<p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
{{name}}
</p>
</a>
{{/foreach}}
{{/get}}
</div>
{{!-- <div class="swiper-pagination mt-10"></div> --}}
</div>
<div id="next"
class="xxx-swiper-button-next flex-shrink transition text-blue-500 flex bg-none dark:hover:bg-gray-800 hover:bg-gray-100 opacity-10 hover:opacity-100 rounded-full -mt-5 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 self-center" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</div>
</div>
</div>
<div class="relative">
<div class="w-default mx-auto pb-10 space space-y-4 mt-20">
{{#get "posts" filter="primary_tag:features+featured:true+title:-'Speckle Connectors'" limit="5"}}
{{#foreach posts}}
<div class="px-4 flex flex-col md:flex-row group">
<a href="{{url}}"
class="w-full md:w-1/2 p-4 self-center text-center md:text-left transition group-hover:shadow-xl rounded-xl dark:group-hover:bg-gray-900 group-hover:bg-gray-50">
<div class="prose dark:prose-dark prose-blue lg:prose-lg group">
<h2>
{{title}}
</h2>
<p>{{excerpt}}</p>
<p><button href="{{url}}" class="font-bold group-hover:text-blue-500">Read More</button></p>
</div>
</a>
<div
class="w-full md:w-1/2 {{#if @even}} md:order-first {{else}}{{/if}} transform group-hover:scale-125 transition-transform pointer-events-none ">
<img class="object-contain h-60 w-full" srcset="{{img_url feature_image size=" s"}} 300w, {{img_url
feature_image size="m" }} 600w, {{img_url feature_image size="l" }} 1000w, {{img_url feature_image size="xl"
}} 2000w" sizes="(max-width: 1000px) 400px, 700px" src="{{img_url feature_image size=" m"}}"
alt="{{title}}">
</div>
</div>
{{/foreach}}
{{/get}}
</div>
<div
class="group w-full mx-auto prose lg:prose-lg dark:prose-dark max-w-none text-center p-10 bg-gradient-to-b from-gray-200 dark:from-gray-900">
<div class="w-default px-4">
Go beyond interoperability and leverage all the potential behind a fully fledged BIM data platform
</div>
<div class="flex flex-wrap content-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</div>
</div>
<script>
window.addEventListener('load', (event) => {
let swiper = new Swiper(".connector-swiper", {
slidesPerView: 3,
spaceBetween: 20,
loop: true,
grabCursor: true,
pagination: {
el: ".swiper-pagination",
clickable: true
<div class="relative">
<div class="w-default mx-auto pb-10 space space-y-4 mt-20">
{{#get "posts" filter="primary_tag:features+featured:true+title:-'Speckle Connectors'" limit="5"}}
{{#foreach posts}}
<div class="px-4 flex flex-col md:flex-row group">
<a href="{{url}}"
class="w-full md:w-1/2 p-4 self-center text-center md:text-left transition group-hover:shadow-xl rounded-xl dark:group-hover:bg-gray-900 group-hover:bg-gray-50">
<div class="prose dark:prose-dark prose-blue lg:prose-lg group">
<h2>
{{title}}
</h2>
<p>{{excerpt}}</p>
<p><button href="{{url}}" class="font-bold group-hover:text-blue-500">Read More</button></p>
</div>
</a>
<div
class="w-full md:w-1/2 {{#if @even}} md:order-first {{else}}{{/if}} transform group-hover:scale-125 transition-transform pointer-events-none ">
<img class="object-contain h-60 w-full" srcset="{{img_url feature_image size=" s"}} 300w, {{img_url
feature_image size="m" }} 600w, {{img_url feature_image size="l" }} 1000w, {{img_url feature_image size="xl"
}} 2000w" sizes="(max-width: 1000px) 400px, 700px" src="{{img_url feature_image size=" m"}}" alt="{{title}}">
</div>
</div>
{{/foreach}}
{{/get}}
</div>
</div>
<script>
window.addEventListener('load', (event) => {
let swiper = new Swiper(".connector-swiper", {
slidesPerView: 3,
spaceBetween: 20,
loop: true,
grabCursor: true,
autoplay: {
delay: 2000,
disableOnInteraction: false,
pauseOnMouseEnter: true
},
breakpoints: {
768: {
slidesPerView: 5,
spaceBetween: 50,
},
autoplay: {
delay: 4000,
disableOnInteraction: false,
pauseOnMouseEnter: true
},
breakpoints: {
768: {
slidesPerView: 5,
spaceBetween: 50,
},
1280: {
slidesPerView: 7,
spaceBetween: 50,
}
1280: {
slidesPerView: 7,
spaceBetween: 50,
}
})
if (window.innerWidth >= 1280)
swiper.slideTo(6, false, false)
}
})
</script>
swiper.slideTo(6, 1000)
document.getElementById('prev').onclick = function () {
swiper.slidePrev(200)
}
document.getElementById('next').onclick = function () {
swiper.slideNext(200)
}
})
</script>