@ozdao/martyrs 0.2.584 → 0.2.586

package/src/modules/core/views/components/layouts/Client.vue

@@ -1,418 +1,370 @@
 <template>
-	<div 
-		id="app-wrapper"
-		class="flex flex-column h-100 w-100 pos-relative o-hidden"
-		:class="{
-			[(route.name 
-      ? route.name.replace(/\s+/g, '_') 
-      : route.path.replace(/\W+/g, '_')
-    ).toLowerCase()]: true,
-  		'pd-t-big': MOBILE_APP === 'ios',  
-			'bg-white': headerTheme === 'light',
-			'bg-black': headerTheme === 'dark',
-  	}"
-	>
-		<transition name="moveFromTop" appear>
-			<Loader v-if="!page || store.core.state.loading" :centered="true" class="pos-fixed"/>
-		</transition>
-
-	  <transition 
-	    name="moveFromTop" 
-	    mode="out-in"
-	  >
-	    <section 
-	      v-if="FirstUse && route.meta.walkthrough"
-	      class="w-100 h-100" 
-	     >
-	      <component 
-	        :is="route.meta.walkthrough"
-	        name="Walkthrough"
-	        @updateFirstUse="updateFirstUse" 
-	        :slides="[1,2,3]" 
-	        class="tab"
-	      >
-	      </component>
-	    </section>
-	  </transition>
+  <div
+    class="flex flex-column h-100 w-100 pos-relative o-hidden"
+    id="app-wrapper"
+    :class="{
+      [(route.name ? route.name.replace(/\s+/g, '_') : route.path.replace(/\W+/g, '_')).toLowerCase()]: true,
+      'pd-t-big': MOBILE_APP === 'ios',
+      'bg-white': headerTheme === 'light',
+      'bg-black': headerTheme === 'dark',
+    }"
+  >
+    <transition name="moveFromTop" appear>
+      <Loader class="pos-fixed z-index-10" v-if="!page || store.core.state.loading" :centered="true" />
+    </transition>
+
+    <transition name="moveFromTop" mode="out-in">
+      <section class="w-100 h-100" v-if="FirstUse && route.meta.walkthrough">
+        <component class="tab" :is="route.meta.walkthrough" name="Walkthrough" @updateFirstUse="updateFirstUse" :slides="[1, 2, 3]"> </component>
+      </section>
+    </transition>
+    <transition name="moveFromTop" mode="out-in">
+      <Status class="z-index-10" v-if="store.core.state.error.show" :data="store.core.state.error" @close="store.core.state.error.show = false" />
+    </transition>
+
+    <transition name="moveFromTop" mode="out-in">
+      <Snack
+        class="z-index-10"
+        v-if="store.core.state.snack.show"
+        :type="store.core.state.snack.type"
+        :message="store.core.state.snack.message"
+        :show="store.core.state.snack.show"
+        @close="store.core.state.snack.show = false"
+      />
+    </transition>
 
     <component
-			v-if="!MOBILE_APP && route.meta.header"
-      ref="header" 
+      v-if="!MOBILE_APP && route.meta.header"
+      ref="header"
       :is="route.meta.header"
       :theme="headerTheme"
       :logotype="route.meta.logotype"
       :location="route.meta.location"
       :class="{
-      	'header-scrolled': scrollOffset > 50 
+        'header-scrolled': scrollOffset > 50,
       }"
     >
-    	<component
-		    v-if="route.meta?.header_navigation"
-		    :is="route.meta.header_navigation"
-		    :horizontal="true"
-				:navigationItems="route.meta.header_navigation_items"
-				:stateSidebar="store.core.state.isOpenSidebar"
-				:theme="headerTheme"
-		  />
-  	</component>
-
-		<transition name="moveFromTop" mode="out-in" appear>
-			<component
-       	v-if="MOBILE_APP && !route.meta.hideNavigationBar"
+      <component
+        v-if="route.meta?.header_navigation"
+        :is="route.meta.header_navigation"
+        :horizontal="true"
+        :navigationItems="route.meta.header_navigation_items"
+        :stateSidebar="store.core.state.isOpenSidebar"
+        :theme="headerTheme"
+      />
+    </component>
+
+    <transition name="moveFromTop" mode="out-in" appear>
+      <component
+        v-if="MOBILE_APP && !route.meta.hideNavigationBar"
         :is="route.meta.navigationbar"
         :logotype="route.meta.logotype"
         :navigationItems="route.meta.sidebar_navigation_items"
-	      :stateSidebar="store.core.state.isOpenSidebar"
+        :stateSidebar="store.core.state.isOpenSidebar"
       />
-		</transition>
-
-	  <Popup
-	  	@close-popup="closeLocationPopup"
-	  	:isPopupOpen="store.core.state.isOpenLocationPopup"
-	  	class="bg-white pd-semi w-m-33r radius-big"
-	  >
-	  	<LocationSelection />
-	  </Popup>
-
-	  <!-- class="flex flex-nowrap ease-in-out o-hidden pos-relative" -->
-		<section 
-			id="screen" 
-			ref="screen"
-			class="flex flex-nowrap h-100 pos-relative o-hidden  ease-in-out"
-			:class="{
-				'': MOBILE_APP === 'ios',
+    </transition>
+
+    <Popup class="bg-white pd-semi w-m-33r radius-big" @close-popup="closeLocationPopup" :isPopupOpen="store.core.state.isOpenLocationPopup">
+      <LocationSelection />
+    </Popup>
+
+    <!-- class="flex flex-nowrap ease-in-out o-hidden pos-relative" -->
+    <section
+      class="flex flex-nowrap h-100 pos-relative o-hidden ease-in-out"
+      id="screen"
+      ref="screen"
+      :class="{
+        '': MOBILE_APP === 'ios',
       }"
-		>
-			<ShopCart 
-				:class="{
-					'mobile:pd-t-extra': MOBILE_APP === 'ios',  
-				}"
-			/>
-	    <component
-	      v-if="route.meta?.sidebar"
-	      :is="route.meta.sidebar"
-	      :stateSidebar="store.core.state.isOpenSidebar"
-	      :widthHidden='route.meta?.sidebar_width_hidden'
-	      :width="route.meta?.sidebar_width"
-	      :theme="headerTheme"
-	      @closeSidebar="() => store.core.state.isOpenSidebar = false"
-	    >
-	    	<!-- Header slot -->
-	    	<template #header>
-	    		<component
-	    			v-if="route.meta?.sidebar_header_component"
-	    			:is="route.meta.sidebar_header_component"
-	    			:theme="headerTheme"
-	    		/>
-	    	</template>
-
-	    	<!-- Navigation (default slot) -->
-	    	<transition name="moveFromTop"  mode="out-in">
-		      <component
-		        v-if="route.meta?.sidebar_navigation"
-		        :is="route.meta.sidebar_navigation"
-		        :key="route.meta.sidebar_navigation"
-		        :navigationItems="route.meta.sidebar_navigation_items"
-			      :stateSidebar="store.core.state.isOpenSidebar"
-						:theme="headerTheme"
-		      />
-	      </transition>
-
-	      <!-- Footer slot -->
-	    	<template #footer>
-	    		<component
-	    			v-if="route.meta?.sidebar_footer_component"
-	    			:is="route.meta.sidebar_footer_component"
-	    			:theme="headerTheme"
-	    		/>
-	    	</template>
-	    </component>
-		  <!-- rows-[minmax(0,1fr)] z-index-1 pos-relative w-100 h-100 -->
-		  <div class="rows-[minmax(0,1fr)] z-index-1 pos-relative w-100 h-100">
-		  	<div id="scrollview" ref="scrollview" @scroll="handleScroll" class="o-y-scroll o-x-hidden h-100">
-	  			<Status
-	  				v-if="store.core.state.error.show"
-						:data="store.core.state.error"
-						@close="store.core.state.error.show = false"
-						class="z-index-7"
-					/>
-					<Snack
-	  				v-if="store.core.state.snack.show"
-						:type="store.core.state.snack.type"
-						:message="store.core.state.snack.message"
-						:show="store.core.state.snack.show"
-						@close="store.core.state.snack.show = false"
-						class="z-index-7"
-					/>
-					<div class="h-min-100 pos-relative w-100">
-						<!-- <section v-if="!route.meta?.breadcrumbs?.hide" class="pd-thin pd-b-zero">
-							<Breadcrumbs 
-								v-if="!MOBILE_APP"
-								class="bg-light pd-small radius-small"
-							/>
-						</section> -->
-
-				 		<Suspense @resolve="onSuspenseResolved">
-							<router-view  
-								id="view"
-								v-slot="{ Component, route }" 
-								:class="{
-									'scroll-hide': MOBILE_APP,
-								}"
-								class="h-min-100 pos-relative w-100"
-							>
-								<transition @before-enter="scrollTop" name="scaleTransition" mode="out-in" appear>
-					      	<component 
-					      		ref="page"  
-					      		:is="Component" 
-					      		class="w-100 h-min-100"
-				      		 	@page-loading="handlePageLoading"
-			              @page-loaded="handlePageLoaded"
-			              :key="componentKey"
-					      	/>
-					      	<!-- Key пока выключил непонятно какие проблемы это вызовет -->
-					      	<!-- :key="route.path"  -->
-					      </transition>
-						  </router-view>
-						</Suspense>
-				  </div>
-			    
-			  	<transition @before-enter="scrollTop" name="scaleTransition" mode="out-in" appear>
-		        <component
-							v-if="!MOBILE_APP && route.meta.footer && !route.meta.hideFooter && page && !store.core.state.loading"
-				      ref="footer"
-				      :is="route.meta.footer"
-				      :theme="route.meta.footer_theme || 'light'"
-				      :logotype="route.meta.logotype"
-				      :location="route.meta.location"
-				    />
-			   	</transition>
-
-					<component
-			      v-if="route.meta.player"
-			      id="player-wrapper"
-			      class="z-index-2 "
-			    	:is="route.meta.player"
-			    />
-				</div>
-			</div>
-		</section>
-
-
-		<router-view  
-			name="defaultBottom"
-			v-slot="{ Component, route }" 
-		>
-			<component 
-    		:is="Component" 
-    	/>
-		</router-view>
-
-    <component 
-      v-if="MOBILE_APP && route.meta.title_hide"
-      class="z-index-2"
-    	:is="route.meta.bottombar"
-    />
-
-
-	</div>
+    >
+      <ShopCart
+        :class="{
+          'mobile:pd-t-extra': MOBILE_APP === 'ios',
+        }"
+      />
+      <component
+        v-if="route.meta?.sidebar"
+        :is="route.meta.sidebar"
+        :stateSidebar="store.core.state.isOpenSidebar"
+        :widthHidden="route.meta?.sidebar_width_hidden"
+        :width="route.meta?.sidebar_width"
+        :theme="headerTheme"
+        @closeSidebar="() => (store.core.state.isOpenSidebar = false)"
+      >
+        <!-- Header slot -->
+        <template #header>
+          <component v-if="route.meta?.sidebar_header_component" :is="route.meta.sidebar_header_component" :theme="headerTheme" />
+        </template>
+
+        <!-- Navigation (default slot) -->
+        <transition name="moveFromTop" mode="out-in">
+          <component
+            v-if="route.meta?.sidebar_navigation"
+            :is="route.meta.sidebar_navigation"
+            :key="route.meta.sidebar_navigation"
+            :navigationItems="route.meta.sidebar_navigation_items"
+            :stateSidebar="store.core.state.isOpenSidebar"
+            :theme="headerTheme"
+          />
+        </transition>
+
+        <!-- Footer slot -->
+        <template #footer>
+          <component v-if="route.meta?.sidebar_footer_component" :is="route.meta.sidebar_footer_component" :theme="headerTheme" />
+        </template>
+      </component>
+	  
+      <div class="rows-[minmax(0,1fr)] z-index-1 pos-relative w-100 h-100">
+        <div class="o-y-scroll o-x-hidden h-100" id="scrollview" ref="scrollview" @scroll="handleScroll">
+          <div class="h-min-100 pos-relative w-100">
+            <!-- <section v-if="!route.meta?.breadcrumbs?.hide" class="pd-thin pd-b-zero">
+				<Breadcrumbs 
+					v-if="!MOBILE_APP"
+					class="bg-light pd-small radius-small"
+				/>
+			</section> -->
+
+            <Suspense @resolve="onSuspenseResolved">
+              <router-view
+                class="h-min-100 pos-relative w-100"
+                id="view"
+                v-slot="{ Component, route }"
+                :class="{
+                  'scroll-hide': MOBILE_APP,
+                }"
+              >
+                <transition @before-enter="scrollTop" name="scaleTransition" mode="out-in" appear>
+                  <div class="w-100 h-min-100" :key="componentKey">
+                    <component class="w-100 h-min-100" ref="page" :is="Component" @page-loading="handlePageLoading" @page-loaded="handlePageLoaded" />
+                    <component
+                      v-if="!MOBILE_APP && route.meta.footer && !route.meta.hideFooter"
+                      ref="footer"
+                      :is="route.meta.footer"
+                      :theme="route.meta.footer_theme || 'light'"
+                      :logotype="route.meta.logotype"
+                      :location="route.meta.location"
+                    />
+                  </div>
+                </transition>
+              </router-view>
+            </Suspense>
+          </div>
+
+          <component class="z-index-2" id="player-wrapper" v-if="route.meta.player" :is="route.meta.player" />
+        </div>
+      </div>
+    </section>
+
+    <router-view v-slot="{ Component, route }" name="defaultBottom">
+      <component :is="Component" />
+    </router-view>
+
+    <component class="z-index-2" v-if="MOBILE_APP && route.meta.title_hide" :is="route.meta.bottombar" />
+  </div>
 </template>
 
+<script setup>
+import { computed, ref, onMounted } from 'vue';
+// Router
+import { useRoute } from 'vue-router';
+// Store
+import { useStore } from '@martyrs/src/modules/core/views/store/core.store.js';
+import { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js';
+// Partials
+import Status from '@martyrs/src/components/Status/Status.vue';
+import Snack from '@martyrs/src/components/Status/Snack.vue';
+import Popup from '@martyrs/src/components/Popup/Popup.vue';
+import Breadcrumbs from '@martyrs/src/components/Breadcrumbs/Breadcrumbs.vue';
+import Loader from '@martyrs/src/components/Loader/Loader.vue';
+
+import NavigationBar from '@martyrs/src/modules/core/views/components/partials/NavigationBar.vue';
+import LocationSelection from '@martyrs/src/modules/core/views/components/partials/LocationSelection.vue';
+
+import ShopCart from '@martyrs/src/modules/orders/components/partials/ShopCart.vue';
+// PROPS
+const props = defineProps({
+  env: {
+    type: Object,
+    required: true,
+  },
+  app: {
+    type: Object,
+    required: true,
+  },
+  modules: {
+    type: Object,
+    required: true,
+  },
+});
+
+const store = useStore();
 
+/////////////////////////////
+// LOADING
+/////////////////////////////
+// State
+let show = ref(false);
+// Preloader
+const page = ref(null);
+const scrollview = ref(null);
 
-<script setup>
-	import { computed, ref, onMounted  } from 'vue';
-	// Router
-	import { useRoute } from 'vue-router';
-	// Store
-	import { useStore } from '@martyrs/src/modules/core/views/store/core.store.js';
-	import { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js';
-	// Partials
-	import Status from '@martyrs/src/components/Status/Status.vue';
-	import Snack from '@martyrs/src/components/Status/Snack.vue';
-	import Popup from '@martyrs/src/components/Popup/Popup.vue';
-	import Breadcrumbs from '@martyrs/src/components/Breadcrumbs/Breadcrumbs.vue'
-	import Loader from '@martyrs/src/components/Loader/Loader.vue';
-
-	import NavigationBar from '@martyrs/src/modules/core/views/components/partials/NavigationBar.vue';
-	import LocationSelection from '@martyrs/src/modules/core/views/components/partials/LocationSelection.vue';
-
-	import ShopCart from '@martyrs/src/modules/orders/components/partials/ShopCart.vue';
-	// PROPS
-	const props = defineProps({
-    env: {
-      type: Object,
-      required: true
-    },
-    app: {
-      type: Object,
-      required: true
-    },
-    modules: {
-      type: Object,
-      required: true
-    }
-  })
-
-	const store = useStore()
-
-	/////////////////////////////
-  // LOADING
-  /////////////////////////////
-    // State
-  let show = ref(false)
-  // Preloader
-  const page = ref(null)
-   const scrollview = ref(null)
-
-  // isPageLoading убран - используем core.state.loading
-  
-  // Обработчики событий загрузки
-  function handlePageLoading() {
-    store.core.state.loading = true;
-  }
+// isPageLoading убран - используем core.state.loading
 
-  function handlePageLoaded() {
-    store.core.state.loading = false;
-  }
+// Обработчики событий загрузки
+function handlePageLoading() {
+  store.core.state.loading = true;
+}
+
+function handlePageLoaded() {
+  store.core.state.loading = false;
+}
+
+// Обработка события разрешения Suspense (когда async setup компонента завершается)
+function onSuspenseResolved() {
+  // Если страница не отправляет событие page-loaded, этот обработчик
+  // может служить запасным вариантом для отключения лоадера
+  // Можно оставить закомментированным, если все страницы будут явно вызывать handlePageLoaded
+  store.core.state.loading = false;
+}
+/////////////////////////////
+// CREATED
+/////////////////////////////
+const route = useRoute();
+// const router = useRouter()
 
-  // Обработка события разрешения Suspense (когда async setup компонента завершается)
-  function onSuspenseResolved() {
-    // Если страница не отправляет событие page-loaded, этот обработчик
-    // может служить запасным вариантом для отключения лоадера
-    // Можно оставить закомментированным, если все страницы будут явно вызывать handlePageLoaded
-    store.core.state.loading = false;
+// Инициализация sidebar для SSR + первая загрузка
+if (route.meta?.sidebarOpenOnEnter === true) {
+  store.core.state.isOpenSidebar = true;
+}
+
+// Ref Code
+const referalCode = ref(route.query.referalCode);
+/////////////////////////////
+// Methods
+/////////////////////////////
+function closeLocationPopup() {
+  store.core.state.isOpenLocationPopup = false;
+}
+function scrollTop() {
+  if (scrollview.value) scrollview.value.scrollTop = 0;
+}
+// Scrolling header
+const scrollOffset = ref(0);
+let isScrolled = false;
+const header = ref(null);
+
+const headerTheme = computed(() => {
+  if (scrollOffset.value > 50) {
+    return route.meta.header_theme || 'light';
+  } else {
+    return route.meta.header_theme || 'light';
   }
-	/////////////////////////////
-	// CREATED
-	/////////////////////////////
-	const route = useRoute()
-	// const router = useRouter()
-
-	// Инициализация sidebar для SSR + первая загрузка
-	if (route.meta?.sidebarOpenOnEnter === true) {
-		store.core.state.isOpenSidebar = true
-	}
-
-	// Ref Code
-	const referalCode = ref(route.query.referalCode);
-	/////////////////////////////
-	// Methods
-	/////////////////////////////
-	function closeLocationPopup() {
-	  store.core.state.isOpenLocationPopup = false;
-	}
-	function scrollTop(){
-		if (scrollview.value) scrollview.value.scrollTop = 0;
-	}
-	// Scrolling header
-	const scrollOffset = ref(0)
-	let isScrolled = false
-	const header = ref(null)
-
-	const headerTheme = computed(() => {
-		if (scrollOffset.value > 50) {
-			return route.meta.header_theme  || 'light'
-		} else {
-			return route.meta.header_theme || 'light'
-		}
-	})
-
-	const handleScroll = () => {
-	  scrollOffset.value = event.target.scrollTop
-	};
+});
+
+const handleScroll = () => {
+  scrollOffset.value = event.target.scrollTop;
+};
+/////////////////////////////
+// FIRST USE
 /////////////////////////////
-  // FIRST USE
-  /////////////////////////////
-  const FirstUse = ref(false);
+const FirstUse = ref(false);
+
+import { Preferences } from '@capacitor/preferences';
+
+async function getFirstUse() {
+  const ret = await Preferences.get({ key: 'first-use' });
+  FirstUse.value = ret.value ? JSON.parse(ret.value) : true;
+}
+
+const updateFirstUse = value => {
+  FirstUse.value = value;
+};
+
+const { isPhone, isTablet } = useGlobalMixins();
+
+onMounted(async () => {
+  await getFirstUse();
+
+  // Закрываем sidebar на mobile (CSS уже скрыл визуально)
+  if ((isPhone() || isTablet()) && store.core.state.isOpenSidebar) {
+    store.core.state.isOpenSidebar = false;
+  }
 
-  import { Preferences } from '@capacitor/preferences';
+  // Регистрация единого Service Worker (PWA + push notifications)
+  if ('serviceWorker' in navigator && !window.__MOBILE_APP__) {
+    window.addEventListener('load', () => {
+      navigator.serviceWorker
+        .register('/sw.js')
+        .then(registration => {
+          console.log('Unified SW registered: ', registration);
+        })
+        .catch(registrationError => {
+          console.log('SW registration failed: ', registrationError);
+        });
+    });
+  }
 
-  async function getFirstUse() {
-    const ret = await Preferences.get({ key: 'first-use' });
-    FirstUse.value = ret.value ? JSON.parse(ret.value) : true;
+  if (!store.core.state.position && route.meta.location) {
+    store.core.state.isOpenLocationPopup = true;
+  } else {
+    store.core.state.isOpenLocationPopup = false;
   }
 
-  const updateFirstUse = (value) => {
-    FirstUse.value = value;
+  if (referalCode.value) {
+    localStorage.setItem('referalCode', referalCode.value);
   }
 
-	const { isPhone, isTablet } = useGlobalMixins();
-
-	onMounted(async () => {
-	  await getFirstUse()
-
-		// Закрываем sidebar на mobile (CSS уже скрыл визуально)
-		if ((isPhone() || isTablet()) && store.core.state.isOpenSidebar) {
-			store.core.state.isOpenSidebar = false
-		}
-
-		// Регистрация единого Service Worker (PWA + push notifications)
-		if ('serviceWorker' in navigator && !window.__MOBILE_APP__) {
-	   	window.addEventListener('load', () => {
-	     	navigator.serviceWorker.register('/sw.js').then(registration => {
-	       	console.log('Unified SW registered: ', registration);
-	     	}).catch(registrationError => {
-	       	console.log('SW registration failed: ', registrationError);
-	     	});
-	   });
-	 	}
-
-		if (!store.core.state.position && route.meta.location) {
-      store.core.state.isOpenLocationPopup = true;
-    } else {
-      store.core.state.isOpenLocationPopup = false;
-    }
-
-		if (referalCode.value) {
-		  localStorage.setItem('referalCode', referalCode.value);
-		}
-
-		if (page.value) show.value = true
-	});
-
-	const componentKey = computed(() => {
-	  // Собираем только значимые параметры (ID сущностей)
-	  const significantParams = ['_id', 'product', 'organization', 'categoryPath', 'country', 'state', 'city']
-	    .map(param => route.params[param])
-	    .filter(Boolean)
-	    .join('-');
-
-	  return significantParams || route.name;
-	});
+  if (page.value) show.value = true;
+});
+
+const componentKey = computed(() => {
+  // Собираем только значимые параметры (ID сущностей)
+  const significantParams = ['_id', 'product', 'organization', 'categoryPath', 'country', 'state', 'city']
+    .map(param => route.params[param])
+    .filter(Boolean)
+    .join('-');
+
+  return significantParams || route.meta.layoutKey || route.name;
+});
 </script>
 
 <style lang="scss">
-	.fade-enter-active, .fade-leave-active {
-	  transition: opacity .5s;
-	}
-	.fade-enter, .fade-leave-to /* .fade-leave-active в версии 2.1.8+ */ {
-	  opacity: 0;
-	}
-
-	
-  .fade-move,
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
-  }
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
 
-  /* 2. declare enter from and leave to state */
-  .fade-enter-from,
-  .fade-leave-to {
-    opacity: 0;
-    transform: translate(30px, 0);
-  }
+.fade-enter,
+.fade-leave-to
+
+/* .fade-leave-active в версии 2.1.8+ */ {
+  opacity: 0;
+}
+
+.fade-move,
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
+}
 
-  /* 3. ensure leaving items are taken out of layout flow so that moving
+/* 2. declare enter from and leave to state */
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translate(30px, 0);
+}
+
+/* 3. ensure leaving items are taken out of layout flow so that moving
         animations can be calculated correctly. */
-  .fade-leave-active {
-    position: absolute;
-  }
+.fade-leave-active {
+  position: absolute;
+}
 
 .moveFromTop-enter-active,
 .moveFromTop-leave-active {
-  transition: all 0.3s ease, max-height 0.2s ease;
+  transition:
+    all 0.3s ease,
+    max-height 0.2s ease;
   overflow: hidden;
 }
 
@@ -425,115 +377,128 @@
 
 .moveFromTop-enter-to,
 .moveFromTop-leave-from {
-  // max-height: 100vh; 
+  // max-height: 100vh;
 }
 
-	.moveFromTopAbsolute-enter-active,
-	.moveFromTopAbsolute-leave-active {
-		transform: translateY(0);
-		opacity: 1;
-		transition: all 0.5s ease; 
-		
-	}
-	.moveFromTopAbsolute-enter-from,
-	.moveFromTopAbsolute-leave-to {
-		position: absolute;
-		transform: translateY(-1rem);
-		opacity: 0;
-		transition: all 0.5s ease;
-	}
-	.ScaleOut-enter-active,
-	.ScaleOut-leave-active {
-		opacity: 1;
-		transform: scale(1);
-		transition: all 0.3s ease; 
-		
-	}
-	.ScaleOut-enter-from,
-	.ScaleOut-leave-to {
-		opacity: 0;
-		transform: scale(0.9);
-		transition: all 0.3s ease;
-	}
-	.slide-fade-enter-active {
-		// min-height: 100vh;
-	  transition: all  0.3s cubic-bezier(0.4, 0, 0.2, 1);
-	}
-
-	.slide-fade-leave-active {
-		// min-height: 100vh;
-	  transition: all  0.3s cubic-bezier(0.4, 0, 0.2, 1);
-	}
-
-	.slide-fade-enter-from,
-	.slide-fade-leave-to {
-		min-height: 0;
-	  transform: translateX(20px);
-	  opacity: 0;
-	  left: 0;
-	  top: 0;
-	}
-
-	.scaleTransition-5px-enter-active,
-  .scaleTransition-5px-leave-active {
-    transform: translateY(0px);  
-    opacity: 1;
-    z-index: 1;
-    transition: all 0.2s ease;
-  }
+.moveFromTopAbsolute-enter-active,
+.moveFromTopAbsolute-leave-active {
+  transform: translateY(0);
+  opacity: 1;
+  transition: all 0.5s ease;
+}
 
-  .scaleTransition-5px-enter-from,
-  .scaleTransition-5px-leave-to {
-    opacity: 0;
-    z-index: 0;
-    position: absolute;
-    transform: translateY(-30px); 
-    transition: all 0.2s ease;
-  }
+.moveFromTopAbsolute-enter-from,
+.moveFromTopAbsolute-leave-to {
+  position: absolute;
+  transform: translateY(-1rem);
+  opacity: 0;
+  transition: all 0.5s ease;
+}
 
-  .scaleTransition-enter-from,
-  .scaleTransition-leave-to {
-    opacity: 0;
-    z-index: 0;
-    position: absolute;
-    width: inherit;
-    height: inherit;
-    display: block;
-    transform: translateY(30px); 
-    transition: all 0.5s ease;
-  }
+.ScaleOut-enter-active,
+.ScaleOut-leave-active {
+  opacity: 1;
+  transform: scale(1);
+  transition: all 0.3s ease;
+}
 
-  .scaleTransition-enter-active,
-  .scaleTransition-leave-active {
-    transform: translateY(0px);  
-    opacity: 1;
-    z-index: 1;
-    transition: all 0.5s ease;
-  }
-  .scaleTransition-enter-from,
-  .scaleTransition-leave-to {
-    opacity: 0;
-    z-index: 0;
-    position: absolute;
-    width: inherit;
-    height: inherit;
-    display: block;
-    transform: translateY(30px); 
-    transition: all 0.5s ease;
-  }
+.ScaleOut-enter-from,
+.ScaleOut-leave-to {
+  opacity: 0;
+  transform: scale(0.9);
+  transition: all 0.3s ease;
+}
+
+.slide-fade-enter-active {
+  // min-height: 100vh;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.slide-fade-leave-active {
+  // min-height: 100vh;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
 
-  .scaleIn-enter-active,
-  .scaleIn-leave-active {
-    // background: red;
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  min-height: 0;
+  transform: translateX(20px);
+  opacity: 0;
+  left: 0;
+  top: 0;
+}
+
+.scaleTransition-5px-enter-active,
+.scaleTransition-5px-leave-active {
+  transform: translateY(0px);
+  opacity: 1;
+  z-index: 1;
+  transition: all 0.2s ease;
+}
+
+.scaleTransition-5px-enter-from,
+.scaleTransition-5px-leave-to {
+  opacity: 0;
+  z-index: 0;
+  position: absolute;
+  transform: translateY(-30px);
+  transition: all 0.2s ease;
+}
+
+.scaleTransition-enter-from,
+.scaleTransition-leave-to {
+  opacity: 0;
+  z-index: 0;
+  position: absolute;
+  width: inherit;
+  height: inherit;
+  display: block;
+  transform: translateY(30px);
+  transition: all 0.5s ease;
+}
+
+.scaleTransition-enter-active,
+.scaleTransition-leave-active {
+  transform: translateY(0px);
+  opacity: 1;
+  z-index: 1;
+  transition: all 0.5s ease;
+}
+
+.scaleTransition-enter-from,
+.scaleTransition-leave-to {
+  opacity: 0;
+  z-index: 0;
+  position: absolute;
+  width: inherit;
+  height: inherit;
+  display: block;
+  transform: translateY(30px);
+  transition: all 0.5s ease;
+}
+
+.scaleIn-enter-active,
+.scaleIn-leave-active {
+  // background: red;
+  transition: all 0.5s ease;
+
+  > section,
+  div {
+    transform-origin: 0 0;
+    transform: translateZ(0px);
     transition: all 0.5s ease;
-    > section,div { transform-origin: 0 0; transform: translateZ(0px);  transition: all 0.5s ease; }
-  }
-  .scaleIn-enter-from,
-  .scaleIn-leave-to {
-    opacity: 0;
-    transform: scale(0.95);
-    > section,div { transform: translateZ(-30px);  transition: all 0.5s ease; }
   }
+}
 
+.scaleIn-enter-from,
+.scaleIn-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
 
-</style>
+  > section,
+  div {
+    transform: translateZ(-30px);
+    transition: all 0.5s ease;
+  }
+}
+</style>