arthur/website-old
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/website-old.git synced 2026-01-24 08:50:33 +01:00
Code Issues 31 Packages Projects Releases Wiki Activity

Fix scale bug

Browse Source
This commit is contained in:
Arthur Danjou
2021-08-18 19:25:02 +02:00
parent b303eb9a09
commit 7fa7cc8cae
2 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/MobileNavbar.vue
View File

@@ -1,7 +1,7 @@
<template>
<div
class="xl:hidden fixed z-50 top-auto bottom-0 w-full md:w-2/3 md:left-1/2 p-4 transition-all duration-500 transform md:-translate-x-1/2"
:class="{'-translate-y-8 translate-x-9/12 sm:translate-x-1/2 xl:translate-x-0': opened}"
:class="{'-translate-y-8 translate-x-10/12 sm:translate-x-1/2 xl:translate-x-0': opened}"
>
<nav class="flex justify-evenly py-4 bg-gray-200 dark:bg-gray-700 rounded-3xl dark:text-white text-sm overflow-hidden">
<nuxt-link to="/" class="relative font-medium">
@@ -16,7 +16,7 @@
<nuxt-link to="/projects" class="relative font-medium">
<LightbulbIcon :active="isWindow('/projects')"/>
</nuxt-link>
<button @click.prevent='toggleMenu' class="font-medium cursor-pointer">
<button @click='toggleMenu' class="font-medium cursor-pointer">
<CrossIcon v-if="opened" />
<MenuIcon v-else :type="getMenuIconType"/>
</button>

14
src/layouts/default.vue
View File

@@ -1,16 +1,16 @@
<template>
<div class="relative">
<div>
<SideMenu />
<div class="relative w-full overflow-hidden xl:overflow-visible">
<div class="w-full overflow-hidden xl:overflow-visible">
<div
id="slider"
class="relative xl:static shadow-2xl transform transition-all duration-500 overflow-hidden xl:overflow-visible"
:class="{'rounded-lg xl:rounded-none scale-95 md:scale-70 lg:scale-60 xl:scale-100 translate-x-9/12 sm:translate-x-4/12 lg:translate-x-3/12 xl:translate-x-0': opened}"
:style="opened ? `max-height: ${height}px` : 'max-height: none'"
class="xl:static shadow-2xl transition-all duration-500 overflow-hidden xl:overflow-visible"
:class="{'transform scale-90 md:scale-70 lg:scale-60 xl:scale-100 rounded-lg xl:rounded-none translate-x-10/12 sm:translate-x-4/12 lg:translate-x-3/12 xl:translate-x-0': opened}"
:style="`max-height: ${height}px`"
:tabindex="opened ? -1 : 0"
>
<div
@click.prevent="closeMenu"
@click="closeMenu"
class="min-h-screen relative z-50 bg-white dark:bg-black w-full min-w-screen pb-20 xl:pb-0 duration-300"
:class="{'cursor-pointer': opened}"
>
@@ -45,7 +45,7 @@ export default {
const height = ref(0)
onMounted(() => {
height.value = window.innerHeight
height.value = window.screen.height
})
return {