mirror of
https://github.com/rubjo/victor-mono.git
synced 2024-09-11 14:35:36 +03:00
✨ Add some testimonials
This commit is contained in:
parent
d12982e492
commit
e9c0f11122
17417
package-lock.json
generated
17417
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -49,6 +49,7 @@
|
||||
"vue-faq-accordion": "^1.6.2",
|
||||
"vue-scrollTo": "^2.4.1",
|
||||
"vue-social-sharing": "^2.4.6",
|
||||
"vue-tweet-embed": "^2.4.0",
|
||||
"vue-twentytwenty": "^0.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
@ -667,7 +667,7 @@
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<Testimonials />
|
||||
<Testimonials :theme="theme" />
|
||||
|
||||
<HeroImage
|
||||
image="specimen"
|
||||
@ -717,7 +717,12 @@ export default {
|
||||
maxHeight: 'calc(100vw + 48px)',
|
||||
loading: Loader
|
||||
}),
|
||||
Testimonials,
|
||||
Testimonials: lazyLoadComponent({
|
||||
componentFactory: () => import('@/components/Testimonials'),
|
||||
background: localStorage.getItem('theme') === 'light' ? '#f5f5f5' : '#515151',
|
||||
height: '50px',
|
||||
loading: Loader
|
||||
}),
|
||||
Faq,
|
||||
Credits
|
||||
},
|
||||
|
@ -198,6 +198,21 @@
|
||||
>
|
||||
Markus Oberlehner</a>
|
||||
<br><br>
|
||||
<em>Embed tweets in Vue apps</em>
|
||||
<br>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/tonickkozlov/vue-tweet-embed"
|
||||
>
|
||||
vue-tweet-embed</a>
|
||||
by
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/tonickkozlov"
|
||||
>
|
||||
Anton Kozlov
|
||||
</a>
|
||||
<br><br>
|
||||
<em>The nice JS framework</em>
|
||||
<br>
|
||||
<a
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="content alternate-bg">
|
||||
<div class="content">
|
||||
<div
|
||||
id="faq"
|
||||
class="scroll-head"
|
||||
|
83
src/components/Testimonials.vue
Normal file
83
src/components/Testimonials.vue
Normal file
@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<div
|
||||
id="testimonials"
|
||||
class="scroll-head"
|
||||
/>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<h1 class="centre">
|
||||
<em>What people are saying</em>
|
||||
</h1>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row
|
||||
justify="center"
|
||||
:gutter="20"
|
||||
>
|
||||
<el-col
|
||||
v-for="testimonial in selectedTestimonials"
|
||||
:key="testimonial + theme"
|
||||
:xs="24"
|
||||
:lg="6"
|
||||
>
|
||||
<Tweet
|
||||
:id="testimonial"
|
||||
:options="{ theme, conversation: 'none', align: 'center' }"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Tweet } from 'vue-tweet-embed'
|
||||
|
||||
export default {
|
||||
name: 'Testimonials',
|
||||
components: { Tweet },
|
||||
props: {
|
||||
theme: {
|
||||
type: String,
|
||||
default: localStorage.getItem('theme') || 'dark'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
testimonials: [
|
||||
'1144627524078571521',
|
||||
'1142187688751071233',
|
||||
'1395599234531946496',
|
||||
'1149023631835635713',
|
||||
'1359508666446094336',
|
||||
'1438499728937795593',
|
||||
'1249238897994780672',
|
||||
'1430565916815855624',
|
||||
'1340083805370134531',
|
||||
'1159431742245261313',
|
||||
'1188221984959676416',
|
||||
'1201505985984110592',
|
||||
'1188916442902626304',
|
||||
'1344488694804201472',
|
||||
'1178698424109195265'
|
||||
],
|
||||
selectedTestimonials: []
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// Shuffle array
|
||||
const shuffled = this.testimonials.sort(() => 0.5 - Math.random())
|
||||
// Get sub-array of first n elements after shuffled
|
||||
this.selectedTestimonials = shuffled.slice(0, 4)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .twitter-tweet {
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
::v-deep .twitter-tweet iframe {
|
||||
min-height: 1px !important;
|
||||
}
|
||||
</style>
|
@ -15,7 +15,7 @@ export default function lazyLoadComponent ({
|
||||
resolveComponent = resolve
|
||||
}),
|
||||
loading: {
|
||||
mounted () {
|
||||
async mounted () {
|
||||
this.$el.style.backgroundColor = background || '#595959'
|
||||
this.$el.style.height = height || 0
|
||||
this.$el.style.maxHeight = maxHeight || 'auto'
|
||||
@ -25,7 +25,7 @@ export default function lazyLoadComponent ({
|
||||
componentFactory().then(resolveComponent)
|
||||
return
|
||||
}
|
||||
|
||||
await new Promise((resolve) => { setTimeout(() => { resolve() }, 1) })
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
// Use `intersectionRatio` because of Edge 15's
|
||||
// lack of support for `isIntersecting`.
|
||||
|
Loading…
Reference in New Issue
Block a user