Skip to content
This repository has been archived by the owner on Dec 2, 2024. It is now read-only.

feat: floating menu adjustments #523

Merged
merged 3 commits into from
Oct 31, 2024
Merged

feat: floating menu adjustments #523

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
328c00f
Mobile adjustments
dzbo Oct 31, 2024
7c20850
Update snapshots
dzbo Oct 31, 2024
394c317
Update snapshots
dzbo Oct 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/AppPageLoader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const isLoaded = computed(() => !isLoading.value)
<template>
<div class="relative">
<div
class="relative px-4 py-6 sm:py-20"
class="relative px-4 pb-20 pt-6 sm:pt-20"
:class="{
'opacity-0': !isLoaded,
'animate-fade-in opacity-100 transition-opacity delay-200 duration-300':
Expand Down
25 changes: 10 additions & 15 deletions domains/grid/components/GridFloatingMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const handleAddGrid = () => {
const handleStyle = computed(() => {
return {
bottom: `${bottom.value}px`,
transition: 'bottom 0.3s ease-in-out',
transition: 'all 0.3s ease-in-out',
}
})

Expand Down Expand Up @@ -103,11 +103,9 @@ const styles = computed(() => {
})

const handleScroll = () => {
if (isMobile.value) {
bottom.value = BOTTOM_MARGIN_MOBILE_PX
return
}

const bottomMargin = isMobile.value
? BOTTOM_MARGIN_MOBILE_PX
: BOTTOM_MARGIN_DESKTOP_PX
const bottomOffset =
(document.querySelector('lukso-footer')?.clientHeight || 0) +
BOTTOM_MARGIN_DESKTOP_PX
Expand All @@ -117,13 +115,9 @@ const handleScroll = () => {

if (scrollTop + windowHeight + bottomOffset >= documentHeight) {
bottom.value =
scrollTop +
windowHeight +
bottomOffset +
BOTTOM_MARGIN_DESKTOP_PX -
documentHeight
scrollTop + windowHeight + bottomOffset + bottomMargin - documentHeight
} else {
bottom.value = BOTTOM_MARGIN_DESKTOP_PX
bottom.value = bottomMargin
}
}

Expand All @@ -139,10 +133,11 @@ onUnmounted(() => {
<template>
<div
v-if="isConnected && isViewingOwnProfile"
class="fixed right-4 z-50 flex animate-fade-in gap-6 overflow-hidden rounded-full bg-neutral-100 p-3 shadow-neutral-drop-shadow duration-300 ease-in-out sm:bottom-10 sm:right-10 sm:flex-col sm:transition-height lg:right-[calc(50%-540px)]"
class="fixed z-50 flex animate-fade-in gap-6 overflow-hidden rounded-full bg-neutral-100 p-3 shadow-neutral-drop-shadow duration-300 ease-in-out sm:bottom-10 sm:right-10 sm:flex-col sm:transition lg:right-[calc(50%-540px)]"
:class="{
'h-[64px] w-[320px] sm:h-[320px] sm:w-[64px]': isEditingGrid,
'size-[64px]': !isEditingGrid,
'right-[calc(50%-160px)] h-[64px] w-[320px] sm:h-[320px] sm:w-[64px]':
isEditingGrid,
'right-4 size-[64px]': !isEditingGrid,
}"
:style="handleStyle"
>
Expand Down
6 changes: 3 additions & 3 deletions domains/grid/components/__tests__/__snapshots__/GridFloatingMenu.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`GridFloatingMenu > should render when edit mode is enabled 1`] = `
"<div id="test-wrapper">
<div class="fixed right-4 z-50 flex animate-fade-in gap-6 overflow-hidden rounded-full bg-neutral-100 p-3 shadow-neutral-drop-shadow duration-300 ease-in-out sm:bottom-10 sm:right-10 sm:flex-col sm:transition-height lg:right-[calc(50%-540px)] h-[64px] w-[320px] sm:h-[320px] sm:w-[64px]" style="bottom: 40px; transition: bottom 0.3s ease-in-out;">
<div class="fixed z-50 flex animate-fade-in gap-6 overflow-hidden rounded-full bg-neutral-100 p-3 shadow-neutral-drop-shadow duration-300 ease-in-out sm:bottom-10 sm:right-10 sm:flex-col sm:transition lg:right-[calc(50%-540px)] right-[calc(50%-160px)] h-[64px] w-[320px] sm:h-[320px] sm:w-[64px]" style="bottom: 40px; transition: all 0.3s ease-in-out;">
<div class="flex animate-fade-in gap-6 sm:flex-col">
<!-- Add widget -->
<lukso-tooltip class="flex size-10 items-center justify-center rounded-full transition-all duration-300 bg-neutral-97 cursor-pointer hover:scale-105 hover:bg-neutral-95" text="Add widget" placement="left" offset="15" show-delay="1000">
Expand All @@ -27,7 +27,7 @@ exports[`GridFloatingMenu > should render when edit mode is enabled 1`] = `

exports[`GridFloatingMenu > should render when has unsaved changes 1`] = `
"<div id="test-wrapper">
<div class="fixed right-4 z-50 flex animate-fade-in gap-6 overflow-hidden rounded-full bg-neutral-100 p-3 shadow-neutral-drop-shadow duration-300 ease-in-out sm:bottom-10 sm:right-10 sm:flex-col sm:transition-height lg:right-[calc(50%-540px)] h-[64px] w-[320px] sm:h-[320px] sm:w-[64px]" style="bottom: 40px; transition: bottom 0.3s ease-in-out;">
<div class="fixed z-50 flex animate-fade-in gap-6 overflow-hidden rounded-full bg-neutral-100 p-3 shadow-neutral-drop-shadow duration-300 ease-in-out sm:bottom-10 sm:right-10 sm:flex-col sm:transition lg:right-[calc(50%-540px)] right-[calc(50%-160px)] h-[64px] w-[320px] sm:h-[320px] sm:w-[64px]" style="bottom: 40px; transition: all 0.3s ease-in-out;">
<div class="flex animate-fade-in gap-6 sm:flex-col">
<!-- Add widget -->
<lukso-tooltip class="flex size-10 items-center justify-center rounded-full transition-all duration-300 bg-neutral-97 cursor-pointer hover:scale-105 hover:bg-neutral-95" text="Add widget" placement="left" offset="15" show-delay="1000">
Expand All @@ -52,7 +52,7 @@ exports[`GridFloatingMenu > should render when has unsaved changes 1`] = `

exports[`GridFloatingMenu > should render when user is connected 1`] = `
"<div id="test-wrapper">
<div class="fixed right-4 z-50 flex animate-fade-in gap-6 overflow-hidden rounded-full bg-neutral-100 p-3 shadow-neutral-drop-shadow duration-300 ease-in-out sm:bottom-10 sm:right-10 sm:flex-col sm:transition-height lg:right-[calc(50%-540px)] size-[64px]" style="bottom: 40px; transition: bottom 0.3s ease-in-out;">
<div class="fixed z-50 flex animate-fade-in gap-6 overflow-hidden rounded-full bg-neutral-100 p-3 shadow-neutral-drop-shadow duration-300 ease-in-out sm:bottom-10 sm:right-10 sm:flex-col sm:transition lg:right-[calc(50%-540px)] right-4 size-[64px]" style="bottom: 40px; transition: all 0.3s ease-in-out;">
<!--v-if-->
<!-- Edit mode toggle -->
<lukso-tooltip class="flex size-10 items-center justify-center rounded-full transition-all duration-300 bg-neutral-97 cursor-pointer hover:scale-105 hover:bg-neutral-95" text="Enable edit mode" placement="left" offset="15" show-delay="1000">
Expand Down
2 changes: 1 addition & 1 deletion pages/settings/__tests__/__snapshots__/index.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`Settings index page > should render the settings index page 1`] = `
"<div id="test-wrapper">
<div class="relative">
<div class="relative px-4 py-6 sm:py-20 animate-fade-in opacity-100 transition-opacity delay-200 duration-300">
<div class="relative px-4 pb-20 pt-6 sm:pt-20 animate-fade-in opacity-100 transition-opacity delay-200 duration-300">
<div class="mx-auto w-full sm:w-[440px]">
<h1 class="heading-inter-21-semi-bold pb-4">Settings</h1><!-- Add Missing Assets -->
<!--v-if-->
Expand Down
8 changes: 4 additions & 4 deletions pages/settings/data-provider/__tests__/__snapshots__/index.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`Settings data-provider page > can change setting 1`] = `
"<div id="test-wrapper">
<div class="relative">
<div class="relative px-4 py-6 sm:py-20 animate-fade-in opacity-100 transition-opacity delay-200 duration-300">
<div class="relative px-4 pb-20 pt-6 sm:pt-20 animate-fade-in opacity-100 transition-opacity delay-200 duration-300">
<div class="mx-auto w-full sm:w-[440px]">
<h1 class="heading-inter-17-semi-bold group mb-8 flex cursor-pointer items-center gap-1 border-b border-b-neutral-90 pb-6">
<lukso-icon name="arrow-left-lg" class="transition group-hover:-translate-x-1"></lukso-icon> Data loading mode
Expand Down Expand Up @@ -45,7 +45,7 @@ exports[`Settings data-provider page > can change setting 1`] = `
exports[`Settings data-provider page > can change setting 2`] = `
"<div id="test-wrapper">
<div class="relative">
<div class="relative px-4 py-6 sm:py-20 animate-fade-in opacity-100 transition-opacity delay-200 duration-300">
<div class="relative px-4 pb-20 pt-6 sm:pt-20 animate-fade-in opacity-100 transition-opacity delay-200 duration-300">
<div class="mx-auto w-full sm:w-[440px]">
<h1 class="heading-inter-17-semi-bold group mb-8 flex cursor-pointer items-center gap-1 border-b border-b-neutral-90 pb-6">
<lukso-icon name="arrow-left-lg" class="transition group-hover:-translate-x-1"></lukso-icon> Data loading mode
Expand Down Expand Up @@ -87,7 +87,7 @@ exports[`Settings data-provider page > can change setting 2`] = `
exports[`Settings data-provider page > should render with centralized setting 1`] = `
"<div id="test-wrapper">
<div class="relative">
<div class="relative px-4 py-6 sm:py-20 animate-fade-in opacity-100 transition-opacity delay-200 duration-300">
<div class="relative px-4 pb-20 pt-6 sm:pt-20 animate-fade-in opacity-100 transition-opacity delay-200 duration-300">
<div class="mx-auto w-full sm:w-[440px]">
<h1 class="heading-inter-17-semi-bold group mb-8 flex cursor-pointer items-center gap-1 border-b border-b-neutral-90 pb-6">
<lukso-icon name="arrow-left-lg" class="transition group-hover:-translate-x-1"></lukso-icon> Data loading mode
Expand Down Expand Up @@ -129,7 +129,7 @@ exports[`Settings data-provider page > should render with centralized setting 1`
exports[`Settings data-provider page > should render with decentralized setting 1`] = `
"<div id="test-wrapper">
<div class="relative">
<div class="relative px-4 py-6 sm:py-20 animate-fade-in opacity-100 transition-opacity delay-200 duration-300">
<div class="relative px-4 pb-20 pt-6 sm:pt-20 animate-fade-in opacity-100 transition-opacity delay-200 duration-300">
<div class="mx-auto w-full sm:w-[440px]">
<h1 class="heading-inter-17-semi-bold group mb-8 flex cursor-pointer items-center gap-1 border-b border-b-neutral-90 pb-6">
<lukso-icon name="arrow-left-lg" class="transition group-hover:-translate-x-1"></lukso-icon> Data loading mode
Expand Down
Loading