From 839daa0eac6fdbe84f45e8572e5ab07126b7d67c Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 30 Jun 2021 18:36:47 +0800
Subject: ...

---
 .../src/views/common/dailog/FullPageDialog.css     | 26 ++++++++++++
 .../src/views/common/dailog/FullPageDialog.tsx     |  9 ++++-
 FrontEnd/src/views/common/index.css                | 47 ++++++++--------------
 3 files changed, 49 insertions(+), 33 deletions(-)
 create mode 100644 FrontEnd/src/views/common/dailog/FullPageDialog.css

(limited to 'FrontEnd/src/views/common')

diff --git a/FrontEnd/src/views/common/dailog/FullPageDialog.css b/FrontEnd/src/views/common/dailog/FullPageDialog.css
new file mode 100644
index 00000000..65f16041
--- /dev/null
+++ b/FrontEnd/src/views/common/dailog/FullPageDialog.css
@@ -0,0 +1,26 @@
+.cru-full-page {
+  position: fixed;
+  z-index: 1030;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: white;
+  padding-top: 56px;
+}
+
+.cru-full-page-top-bar {
+  height: 56px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  background-color: var(--cru-primary-color);
+  display: flex;
+  align-items: center;
+}
+
+.cru-full-page-content-container {
+  overflow: scroll;
+}
diff --git a/FrontEnd/src/views/common/dailog/FullPageDialog.tsx b/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
index 88c90bbc..72c9b269 100644
--- a/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
+++ b/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
@@ -1,6 +1,9 @@
 import React from "react";
+import { createPortal } from "react-dom";
 import classnames from "classnames";
 
+import "./FullPageDialog.css";
+
 export interface FullPageDialogProps {
   show: boolean;
   onBack: () => void;
@@ -13,7 +16,7 @@ const FullPageDialog: React.FC<FullPageDialogProps> = ({
   children,
   contentContainerClassName,
 }) => {
-  return (
+  return createPortal(
     <div
       className="cru-full-page"
       style={{ display: show ? undefined : "none" }}
@@ -32,7 +35,9 @@ const FullPageDialog: React.FC<FullPageDialogProps> = ({
       >
         {children}
       </div>
-    </div>
+    </div>,
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    document.getElementById("portal")!
   );
 };
 
diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css
index cb1cccd4..d7501f98 100644
--- a/FrontEnd/src/views/common/index.css
+++ b/FrontEnd/src/views/common/index.css
@@ -120,22 +120,34 @@
   --cru-success-r3-color: rgb(0, 243, 0);
 }
 
-.tl-color-primary {
+.cru-color-primary {
   color: var(--cru-primary-color);
 }
 
-.tl-color-secondary {
+.cru-color-secondary {
   color: var(--cru-secondary-color);
 }
 
-.tl-color-success {
+.cru-color-success {
   color: var(--cru-success-color);
 }
 
-.tl-color-danger {
+.cru-color-danger {
   color: var(--cru-danger-color);
 }
 
+.cru-text-end {
+  text-align: end;
+}
+
+.cru-float-right {
+  float: right;
+}
+
+.cru-clearfix::after {
+  clear: both;
+}
+
 .icon-button {
   font-size: 1.4rem;
   cursor: pointer;
@@ -182,33 +194,6 @@
   width: 50%;
 }
 
-.cru-full-page {
-  position: fixed;
-  z-index: 1031;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background-color: white;
-  padding-top: 56px;
-}
-
-.cru-full-page-top-bar {
-  height: 56px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1;
-  background-color: var(--cru-primary-color);
-  display: flex;
-  align-items: center;
-}
-
-.cru-full-page-content-container {
-  overflow: scroll;
-}
-
 .cru-tab-pages-action-area {
   display: flex;
   align-items: center;
-- 
cgit v1.2.3