From 9910a7c95c840255e965b3991f80cbd2dce87109 Mon Sep 17 00:00:00 2001 From: svinchy Date: Thu, 25 May 2023 11:55:19 +0400 Subject: [PATCH] change menu --- src/components/Banner.js | 11 +-- src/components/Footer.js | 2 +- src/components/Header.js | 4 +- src/components/Menu.js | 2 +- src/components/PopUpRoomTour.js | 8 ++- src/pages/Sololaki.js | 61 ++++++++++------ src/pages/Travel.js | 62 ++++++++++------ src/pages/props.js | 6 +- src/sections/travelSections/banner.js | 1 - .../travelSections/gallery/gridGallery.js | 70 +------------------ 10 files changed, 99 insertions(+), 128 deletions(-) diff --git a/src/components/Banner.js b/src/components/Banner.js index d5f88f1..c97e133 100644 --- a/src/components/Banner.js +++ b/src/components/Banner.js @@ -19,6 +19,12 @@ const props = { boxSizing: 'border-box', padding: '- - D -', align: 'flex-end center', + style: { + backgroundRepeat: 'no-repeat', + animationDuration: '4s', + animatonTimingFunction: 'cubic-bezier(.17,.67,.65,.6)', + + }, ':before': { content: '""', boxSize: '100% 100%', @@ -27,11 +33,6 @@ const props = { bottom: '0', pointerEvents: 'none' }, - style: { - backgroundRepeat: 'no-repeat', - animationDuration: '4s', - animatonTimingFunction: 'cubic-bezier(.17,.67,.65,.6)' - }, '@minTabletL': { style:{ backgroundAttachment: 'fixed !important' }}, heading: { diff --git a/src/components/Footer.js b/src/components/Footer.js index 68d52a8..f3ca556 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -10,7 +10,7 @@ import INSTAGRAM_PNG from '../assets/icons/social-instagram.png' import { BookingLink } from './BookingLink' const props = { - minWidth: '90%', + minWidth: '95%', '@maxMobileM': { minWidth: '95%' }, position: 'fixed', bottom: '0', diff --git a/src/components/Header.js b/src/components/Header.js index 6ae5459..692c6c8 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -43,7 +43,7 @@ const menu = { } const props = { - minWidth: '90%', + minWidth: '95%', // '@maxMobileM': { minWidth: '95%' }, position: 'fixed', top: '0', @@ -54,7 +54,7 @@ const props = { // borderBottom: '1px solid red', // border: 'solid, cream .5', // borderWidth: '0 0 .5px 0', - round: '0 0 A2 A2', + // round: '0 0 A2 A2', overflow: 'hidden', style: { mixBlendMode: 'difference', diff --git a/src/components/Menu.js b/src/components/Menu.js index 34f03f6..e79c1f1 100644 --- a/src/components/Menu.js +++ b/src/components/Menu.js @@ -41,7 +41,7 @@ const props = { fontWeight: '400', textTransform: 'uppercase', whiteSpace: 'nowrap', - letterSpacing: '3px', + letterSpacing: '2.5px', overflow: 'hidden', '@minTabletS': { // opacity: '.7', diff --git a/src/components/PopUpRoomTour.js b/src/components/PopUpRoomTour.js index 6d39465..71fedaf 100644 --- a/src/components/PopUpRoomTour.js +++ b/src/components/PopUpRoomTour.js @@ -275,5 +275,11 @@ export const PopUpRoomTour = { } }, - logo: {} + logo: { + class: { + show: (element, state) => state.activePopUp + ? { opacity: '.8', transform: 'rotate3d(2, 1, 1, -0.1turn)' } + : { opacity: '0', transform: 'rotate3d(0)' } + } + } } \ No newline at end of file diff --git a/src/pages/Sololaki.js b/src/pages/Sololaki.js index e26b4ce..333465c 100644 --- a/src/pages/Sololaki.js +++ b/src/pages/Sololaki.js @@ -102,6 +102,19 @@ const menu = { const header = { extend: Header, + class: { + show: (element, state) => state.activeResidenceMenu + ? { + paddingLeft: `${5 / 16}em`, + paddingRight: `${5 / 16}em`, + transition: 'padding-left 1s ease, padding-right .75s ease' + } + : { + paddingLeft: `0`, + paddingRight: `0`, + transition: 'padding-left 1s ease, padding-right .55s ease' + } + }, ...[ {}, {}, @@ -151,7 +164,9 @@ export const Sololaki = { show: (element, state) => state.activeResidenceMenu ? { height: '90%', - transition: 'height .75s ease' + transition: 'height .75s ease', + backdropFilter: 'blur(30px)', + background: 'rgba(0, 0, 0, .15)' } : { height: '46px', @@ -161,28 +176,28 @@ export const Sololaki = { } }, - menuBackImage: { - props: { - backgroundImage: 'url(' + ORNAMENT_PNG + ')', - backgroundSize: 'cover', - backgroundPosition: 'center', - style: { backgroundAttachment: 'fixed'}, - ':after': { background: 'naviGreen .9' } - }, - class: { - show: (element, state) => state.activeResidenceMenu - ? { - height: '90%', - opacity: '1', - transition: 'height .75s ease, opacity .75s ease', - } - : { - height: '46px', - opacity: '0', - transition: 'height .55s ease, opacity .55s ease', - } - } - }, + // menuBackImage: { + // props: { + // // backgroundImage: 'url(' + ORNAMENT_PNG + ')', + // // backgroundSize: 'cover', + // // backgroundPosition: 'center', + // style: { backgroundAttachment: 'fixed'}, + // ':after': { background: 'naviGreen .9' } + // }, + // class: { + // show: (element, state) => state.activeResidenceMenu + // ? { + // height: '90%', + // opacity: '1', + // transition: 'height .75s ease, opacity .75s ease', + // } + // : { + // height: '46px', + // opacity: '0', + // transition: 'height .55s ease, opacity .55s ease', + // } + // } + // }, header, menu, diff --git a/src/pages/Travel.js b/src/pages/Travel.js index fdde767..162782f 100644 --- a/src/pages/Travel.js +++ b/src/pages/Travel.js @@ -120,6 +120,19 @@ const menu = { const header = { extend: Header, + class: { + show: (element, state) => state.activeTravelMenu + ? { + paddingLeft: `${10 / 16}em`, + paddingRight: `${10 / 16}em`, + transition: 'padding-left 1s ease, padding-right .75s ease' + } + : { + paddingLeft: `0`, + paddingRight: `0`, + transition: 'padding-left 1s ease, padding-right .55s ease' + } + }, ...[ {}, {}, @@ -203,7 +216,9 @@ export const Travel = { show: (element, state) => state.activeTravelMenu ? { height: '90%', - transition: 'height .75s ease' + transition: 'height .75s ease', + backdropFilter: 'blur(30px)', + background: 'rgba(0, 0, 0, .15)' } : { height: '46px', @@ -213,28 +228,29 @@ export const Travel = { } }, - menuBackImage: { - props: { - backgroundImage: 'url(' + ORNAMENT_PNG + ')', - backgroundSize: 'cover', - backgroundPosition: 'center', - style: { backgroundAttachment: 'fixed'}, - ':after': { background: 'naviBlue .9',} - }, - class: { - show: (element, state) => state.activeTravelMenu - ? { - height: '90%', - opacity: '1', - transition: 'height .75s ease, opacity .75s ease', - } - : { - height: '46px', - opacity: '0', - transition: 'height .55s ease, opacity .55s ease', - } - } - }, + // menuBackImage: { + // props: { + // // backgroundImage: 'url(' + ORNAMENT_PNG + ')', + // // backgroundSize: 'cover', + // // backgroundPosition: 'center', + // style: { backgroundAttachment: 'fixed'}, + // ':after': { background: 'naviBlue .9',} + // }, + // class: { + // show: (element, state) => state.activeTravelMenu + // ? { + // height: '90%', + // opacity: '1', + // backdropFilter: 'blur(10px)', + // transition: 'height .75s ease, opacity .75s ease', + // } + // : { + // height: '46px', + // opacity: '0', + // transition: 'height .55s ease, opacity .55s ease', + // } + // } + // }, state, header, diff --git a/src/pages/props.js b/src/pages/props.js index f2c566b..1dc1583 100644 --- a/src/pages/props.js +++ b/src/pages/props.js @@ -35,7 +35,7 @@ export const properties = { menuBackground: { position: 'fixed', - width: '90%', + width: '95%', minHeight: '48px', top: '0', zIndex: '35', @@ -43,7 +43,7 @@ export const properties = { background: 'transparent', round: '0 0 A2 A2', border: 'solid, orange', - borderWidth: '0 0 1px 0', + borderWidth: '0 0 .5px 0', style: { animationName: opacity, animationDuration: '2s', @@ -54,7 +54,7 @@ export const properties = { menuBackImage: { backgroundColor: 'orange', position: 'fixed', - boxSize: '48px 90%', + boxSize: '48px 95%', top: '0', zIndex: '30', alignSelf: 'center', diff --git a/src/sections/travelSections/banner.js b/src/sections/travelSections/banner.js index 6ba8fc8..342a866 100644 --- a/src/sections/travelSections/banner.js +++ b/src/sections/travelSections/banner.js @@ -9,7 +9,6 @@ import { positionOpacity, bannerBackground2 } from '../../animations' const props = { backgroundImage: 'url(' + LAKE_JPG + ')', - background: 'radial-gradient(rgba(0, 47, 57, 1), rgba(0, 47, 57, 1))', style: { animationName: positionOpacity }, '@maxTabletM': { backgroundImage: 'url(' + LAKE_TABLET_JPG + ')', diff --git a/src/sections/travelSections/gallery/gridGallery.js b/src/sections/travelSections/gallery/gridGallery.js index b62065d..850a4b4 100644 --- a/src/sections/travelSections/gallery/gridGallery.js +++ b/src/sections/travelSections/gallery/gridGallery.js @@ -22,27 +22,8 @@ const props = { '@maxMobileL': { height: '60%', width: '100%', - overflow: 'hidden', - // border: '3px solid black', - // minHeight: '100%', - // flex: '1' + overflow: 'hidden' }, - // '@maxTabletS': { - // overflow: 'hidden', - // fontSize: `${15 / 16}em` - // }, - - // ':before': { - // content: '""', - // boxSize: '100% D', - // position: 'absolute', - // top: '0', - // left: '0', - // zIndex: '10', - // background: 'linear-gradient(to right, rgba(255, 249, 237, 1) 30%, rgba(255, 249, 237, 0) 70%)', - // pointerEvents: 'none', - // '@minTabletS': { display: 'none' } - // }, title: { position: 'absolute', @@ -71,22 +52,6 @@ const props = { align: 'center center', style: { boxShadow: 'rgba(0, 0, 0, 0.55) -20px 0px 20px 5px' } }, - // '@maxTabletS': { - // fontSize: 'E', - // color: 'cream .75', - // height: '100%', - // left: 'initial', - // top: '0', - // right: '0', - // padding: 'Z -', - // transform: 'rotate(0)', - // background: 'naviBlue', - // align: 'center center', - // style: { - // boxShadow: 'rgba(0, 0, 0, 0.45) -20px 0px 30px 5px' - // } - // }, - // '@maxMobileM': { padding: 'B1 -' }, ':before': { boxSize: 'C V' }, ':after': { boxSize: 'C V' } }, @@ -99,27 +64,11 @@ const props = { gap: 'Y', '@maxMobileL': { display: 'flex', - // border: '3px solid red', height: '100%', gap: 'A', padding: '- D - -', style: {overflowX: 'auto', '::-webkit-scrollbar': { display: 'none' }} }, - // '@maxTabletS': { - // display: 'flex', - // maxWidth: '100%', - // padding: 'D1 E2 D1 C', - // minHeight: 'E2', - // gap: 'A', - // boxSizing: 'content-box', - // background: 'naviBlue', - // style: { - // overflow: 'auto', - // '::-webkit-scrollbar': { display: 'none' } - // } - // }, - // '@maxMobileM': { padding: 'D E D B' }, - childProps: { position: 'relative', backgroundSize: 'cover', @@ -132,17 +81,7 @@ const props = { minWidth: 'calc(100% - 68px)', round: '0 !important', border: 'none' - // minHeight: 'I', - // style: { borderRadius: '0 !important'} }, - // '@maxMobileM': { minWidth: 'G1'}, - // '@maxMobileS': { minWidth: 'G'}, - // '@maxTabletS': { - // minWidth: `${250 / 16}em`, - // round: 'B !important', - // border: 'solid, naviBlue', - // borderWidth: '1px', - // }, ':before': { content: '""', position: 'absolute', @@ -172,14 +111,12 @@ const props = { scroll: { border: '3px solid red', - // '@minTabletS': { display: 'none' }, position: 'absolute', bottom: '0', left: 'C', zIndex: '10', color: 'cream', opacity: '.75', - // '@maxMobileM': { left: 'A1' }, lefts: { src: LEFT_ARROW }, rights: { src: RIGHT_ARROW } } @@ -333,8 +270,5 @@ export const gridGalleries = { } } ] - }, - // scroll: { - // extend: ScrollTitle - // } + } }