valere/docker-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FIX: design for mobile

Browse Source
This commit is contained in:
prosety
2022-11-27 10:06:20 +01:00
parent e0152c81e4
commit 2736f2ff7c
4 changed files with 33 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/demo.vue
View File

@@ -12,13 +12,14 @@
nextcloudClass: [],
jellyfinClass: [],
backbuttonClass: [],
subdomainClass: [],
isDemonstrationEnded: false,
}),
methods: {
demonstration() {
const upClass = ['w-20', 'p-4', 'opacity-100', 'animate-upApp', 'rounded-xl']
const downClass = ['opacity-0', 'w-0', 'p-0']
const openClass = ['w-full', 'h-full', 'p-20', 'rounded-t-none', 'bg-gradient-to-r', 'from-violet-100', 'to-indigo-100']
const openClass = ['w-full', 'h-full', 'p-20', 'rounded-b-xl', 'bg-gradient-to-r', 'from-violet-100', 'to-indigo-100']
const closeClass = ['w-20', 'p-4', 'opacity-100', 'animate-upApp', 'rounded-xl', 'm-2']
function delay(time) {
@@ -48,6 +49,8 @@
if (i == 5) this.nextcloudClass.push('animate-openApp')
if (i == 6) this.nextcloudClass = openClass
if (i == 6) this.subDomain = 'nextcloud.'
if (i == 6) this.subdomainClass = ['']
if (i == 6) this.subdomainClass = ['animate-click']
//close
if (i == 7) this.terminalContent = ''
if (i == 9) this.backbuttonClass = ['animate-click']
@@ -71,6 +74,8 @@
if (i == 16) this.nextcloudClass = downClass
if (i == 17) this.jellyfinClass = openClass
if (i == 17) this.subDomain = 'jellyfin.'
if (i == 6) this.subdomainClass = ['']
if (i == 6) this.subdomainClass = ['animate-click']
//close
if (i == 20) this.backbuttonClass = ['animate-click']
if (i == 21) this.jellyfinClass = this.nextcloudClass = closeClass
@@ -115,31 +120,40 @@
<div class="bg-red-600 h-4 w-4 r-1 rounded-full"></div>
</div>
<div class="flex h-4/5">
<code class="w-full text-white font-mono p-4 pt-0 mr-0 overflow-scroll whitespace-pre">
<code class="w-full text-white font-mono text-xs md:text-base p-4 pt-0 mr-0 overflow-scroll whitespace-pre">
{{ terminalContent }}<span class="w-2 h-4 bg-white inline-block animate-blink relative" style="margin-bottom: -2px;" ref="terminal" />
</code>
</div>
</div>
<div class="bg-slate-400 flex flex-col items-center rounded-2xl w-full md:w-2/4 md:min-w-fit h-80 md:-ml-8 md:z-0" :class="{'blur-sm': isDemonstrationEnded}">
<div class="bg-white flex items-center rounded-2xl px-4 py-1 m-4 w-4/6">
<Backbutton :class="backbuttonClass" />
<div class="bg-white flex items-center rounded-2xl pr-4 pl-2 py-1 m-4 w-4/5">
<Backbutton class="mr-3 p-1 bg-slate-300 rounded-full" :class="backbuttonClass" />
<span class="text-gray-400">
https://
</span>
<span class="text-indigo-700 font-semibold">
<span class="text-indigo-700 font-bold" :class="subdomainClass">
{{ subDomain }}
</span>domain.com
</div>
<div class="bg-white w-full h-full flex justify-center items-center">
<div class="bg-white w-full h-full flex rounded-b-xl justify-center items-center">
<Nextcloud class="bg-black bg-opacity-10 inline-block cursor-pointer transition-all" :class="nextcloudClass" title="nextcloud.domain.com" />
<Jellyfin class="bg-black bg-opacity-10 inline-block cursor-pointer transition-all" :class="jellyfinClass" title="jellyfin.domain.com" />
</div>
</div>
<div
@click="demonstration"
v-if="isDemonstrationEnded"
class="bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:ring-4 hover:ring-indigo-200 focus:ring-indigo-300 focus:ring-opacity-100 transition-all rounded-full p-8 lg:p-20 md:p-12 absolute cursor-pointer focus:p-18 shadow-2xl z-50">
<Rewind class="text-white" />
</div>
<transition
enter-active-class="duration-300 ease-out"
enter-from-class="transform opacity-0"
enter-to-class="opacity-100"
leave-active-class="duration-200 ease-in"
leave-from-class="opacity-100"
leave-to-class="transform opacity-0"
>
<div
@click="demonstration"
v-if="isDemonstrationEnded"
class="bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:ring-4 hover:ring-indigo-200 focus:ring-indigo-300 focus:ring-opacity-100 transition-all rounded-full p-8 lg:p-20 md:p-12 absolute cursor-pointer focus:p-18 shadow-2xl z-50">
<Rewind class="text-white" />
</div>
</transition>
</section>
</template>

4
src/components/hero-buttons.vue
View File

@@ -26,11 +26,11 @@
class="py-4 px-6 h-14 leading-6 flex justify-center bg-indigo-600 text-white text-lg capitalize font-semibold mb-4 sm:mb-0 rounded-xl shadow-md hover:bg-indigo-500 focus:outline-none focus:ring-4 hover:ring-indigo-200 focus:ring-indigo-300 focus:ring-opacity-100 transition-all">
get started
</a>
<div class="font-mono bg-neutral-900 text-neutral-50 rounded-md flex justify-between pl-3 pr-4 py-3 sm:ml-4 border border-transparent text-base shadow-primary-700 relative">
<div class="font-mono bg-neutral-900 text-neutral-50 text-base rounded-xl flex justify-between items-center pl-3 pr-4 py-4 sm:ml-4 border border-transparent text-base shadow-primary-700 relative">
<span class="select-all">
curl -sL get.pegaz.io | sudo bash
</span>
<ClipBoard class="inline ml-3 cursor-pointer" :class="{ 'animate-ping': isClicked }" @click="copyToClipBoard" />
<ClipBoard class="ml-3 cursor-pointer" :class="{ 'animate-ping': isClicked }" @click="copyToClipBoard" />
</div>
</section>
</template>

2
src/components/svg/backbutton.vue
View File

@@ -1,5 +1,5 @@
<template>
<svg height="16" width="28">
<svg height="26" width="26">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="m7.25 3.75l-4.5 4.5l4.5 4.5m6-4.5H2.75" />
</svg>

4
tailwind.config.js
View File

@@ -12,6 +12,10 @@ module.exports = {
'0%': { transform: 'translateX(-40px)' },
'100%': { transform: 'translateX(0px)' },
},
fadin: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
fadeout: {
'0%': { opacity: '1' },
'100%': { opacity: '0' },