ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix videos on mobile screens

Browse Source
This commit is contained in:
samaradel
2021-04-15 15:42:16 +02:00
parent 74341c2afc
commit 2430ceb0a4
7 changed files with 360 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/custom/Modal.vue
View File

@@ -1,35 +1,21 @@
<template>
<div>
<div @click="handleClose">
<div
v-if="showModal"
class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex"
class="fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex"
>
<div class="relative w-auto my-6 mx-auto max-w-6xl">
<button
class="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
@click="handleClose"
>
<span
class="bg-transparent text-white opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none"
>
×
</span>
</button>
<div
class="border-0 rounded-lg relative flex flex-col w-full outline-none focus:outline-none"
>
<div class="relative flex-auto">
<iframe
width="800"
height="450"
:src="link"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope;
picture-in-picture"
allowfullscreen
/>
</div>
</div>
<div
class="iframe-container relative h-0 w-1/2"
style="padding-bottom: 56.25%"
>
<iframe
:src="link"
frameborder="0"
width="640"
height="360"
allowfullscreen
class="absolute top-0 left-0 w-full h-full"
></iframe>
</div>
</div>
<div v-if="showModal" class="opacity-75 fixed inset-0 z-40 bg-black"></div>
@@ -46,4 +32,11 @@ export default {
},
},
};
</script>
</script>
<style scoped>
@media (max-width: 768px) {
.iframe-container {
width: 100%;
}
}
</style>

15
src/components/custom/sections/CallToAction.vue
View File

@@ -12,10 +12,7 @@
>
{{ cta.slogan }}
</span>
<div
v-html="cta.content"
class="mt-6 mb-8 text-gray-600"
></div>
<div v-html="cta.content" class="mt-6 mb-8 text-gray-600"></div>
<div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
<a
@click="toggleModal"
@@ -37,7 +34,8 @@
>{{ cta.button2 }}</g-link
>
<g-link
class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full" v-if="cta.button3"
class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
v-if="cta.button3"
:to="cta.link3"
>{{ cta.button3 }}</g-link
>
@@ -50,14 +48,11 @@
>
{{ cta.title }}
</h2>
<div
v-html="cta.content"
class="mt-6 mb-8 text-gray-600"
></div>
<div v-html="cta.content" class="mt-6 mb-8 text-gray-600"></div>
<div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
<a
@click="toggleModal"
class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
class="inline-block cursor-pointer bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
>{{ cta.video_button }}</a
>
</div>

3
src/components/marketing/sections/cta-sections/ShowcaseProductsHome.vue
View File

@@ -38,7 +38,7 @@
:href="product.url"
class="bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 shadow rounded-full"
>{{ product.button }}</a
>
>
</div>
</div>
</a>
@@ -66,5 +66,6 @@ export default {
.take_apart {
background-color: #f5f5f5;
max-height: 570px;
}
</style>