From f7e474fa58b0d56726bfd2e312b0c60d5737b1d8 Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Thu, 24 Nov 2022 17:45:03 +0000
Subject: [PATCH] make bottom bar relative

---
 .../components/Layout/bottomBar/index.less    |  3 +-
 packages/app/src/layouts/mobile/index.jsx     |  4 +-
 packages/app/src/theme/mobile.less            | 52 ++++++++++++++++++-
 3 files changed, 55 insertions(+), 4 deletions(-)

diff --git a/packages/app/src/components/Layout/bottomBar/index.less b/packages/app/src/components/Layout/bottomBar/index.less
index 5a5da703..a0e53753 100755
--- a/packages/app/src/components/Layout/bottomBar/index.less
+++ b/packages/app/src/components/Layout/bottomBar/index.less
@@ -8,8 +8,7 @@
 	align-items: center;
 	justify-content: center;
 
-	position: fixed;
-	z-index: 9999;
+	position: relative;
 
 	left: 0;
 	bottom: 0;
diff --git a/packages/app/src/layouts/mobile/index.jsx b/packages/app/src/layouts/mobile/index.jsx
index 0131f103..747521be 100755
--- a/packages/app/src/layouts/mobile/index.jsx
+++ b/packages/app/src/layouts/mobile/index.jsx
@@ -9,9 +9,11 @@ export default (props) => {
         <Modal />
 
         <antd.Layout.Content className={classnames("content_layout", ...props.layoutPageModesClassnames ?? [])}>
-            <div id="transitionLayer" className="fade-transverse-active">
+            <div className={classnames("frameDecorator", "top")} />
+            <div id="transitionLayer" className={classnames("content_wrapper", "fade-transverse-active")}>
                 {React.cloneElement(props.children, props)}
             </div>
+            <div className={classnames("frameDecorator", "bottom")} />
         </antd.Layout.Content>
 
         <BottomBar />
diff --git a/packages/app/src/theme/mobile.less b/packages/app/src/theme/mobile.less
index 02b482cc..4b10aa93 100644
--- a/packages/app/src/theme/mobile.less
+++ b/packages/app/src/theme/mobile.less
@@ -1,7 +1,57 @@
+@frameDecorator_height: 20px;
+
 .app_layout {
 	&.mobile {
-		padding: 10px;
+		display: flex;
+		flex-direction: column;
 
+		padding: 0;
+
+		.content_wrapper {
+			height: 100%;
+			width: 100%;
+			overflow-y: scroll;
+			padding-top: 20px;
+		}
+
+		.content_layout {
+			display: flex;
+			flex-direction: column;
+
+			overflow: hidden;
+			align-items: center;
+			justify-content: center;
+
+			width: 100vw;
+			padding: 0 10px;
+		}
+
+		.frameDecorator {
+			position: absolute;
+			left: 0;
+
+			z-index: 8000;
+
+			width: 100vw;
+			height: @frameDecorator_height;
+
+			background-color: rgba(var(--layoutBackgroundColor), 0.8);
+
+			filter: blur(4px);
+			backdrop-filter: blur(10px);
+
+			&.top {
+				top: 0;
+				transform: translate(0, -6px);
+			}
+
+			&.bottom {
+				bottom: 0;
+				transform: translate(0, 6px);
+			}
+		}
+
+		// FIXMETS FOR MOBILE LAYOUT
 		.loginPage {
 			flex-direction: column;