Merge pull request #24 from NJUPT-SAST/dev-love98

feat: Add styling to HistoryEvents and ScanningPage
NJUPT-SAST · Dec 1, 2023 · 05f188e · 05f188e
2 parents f423bb5 + fbe8ceb
commit 05f188e
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 11 deletions.
diff --git a/src/pages/HistoryEvents.scss b/src/pages/HistoryEvents.scss
@@ -0,0 +1,3 @@
+.HistoryEventsContainer {
+  --ion-item-background: 0;
+}
diff --git a/src/pages/HistoryEvents.tsx b/src/pages/HistoryEvents.tsx
@@ -3,6 +3,8 @@ import { Event } from "../context";
 import { getHistoryEvents } from "../apis/user";
 import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from "@ionic/react";
 import EventCardList from "../components/EventCardList";
+import "./HistoryEvents.scss";
+
 const HistoryEvents = () => {
   const [historyEvents, setHistoryEvents] = useState<Event[] | null>(null);
   useEffect(() => {
@@ -23,7 +25,7 @@ const HistoryEvents = () => {
           <IonTitle>历史活动</IonTitle>
         </IonToolbar>
       </IonHeader>
-      <IonContent>
+      <IonContent className="HistoryEventsContainer">
         <IonHeader translucent={false} collapse="condense">
           <IonToolbar>
             <IonTitle size="large">历史活动</IonTitle>

diff --git a/src/pages/ScanningPage.scss b/src/pages/ScanningPage.scss
@@ -2,14 +2,14 @@
   .goBackButton {
     width: 30px;
     height: 30px;
-    border-radius: 50%;
-    background-color: white;
+    // border-radius: 50%;
+    // background-color: #fff, 0.8;
     position: fixed;
-    top: 8%;
-    left: 15px;
+    top: 2%;
+    left: 5%;
     z-index: 10;
     .goBackButtonTop {
-      background-color: grey;
+      background-color: rgb(83, 83, 83);
       height: 3px;
       width: 20px;
       position: relative;
@@ -19,7 +19,7 @@
       transform: rotate(-0.1turn);
     }
     .goBackButtonBottom {
-      background-color: grey;
+      background-color: rgb(83, 83, 83);
       height: 3px;
       width: 20px;
       position: relative;
@@ -33,11 +33,31 @@
 .scannerContainer {
   display: flex;
   align-items: center;
+  .scanningAnimaionContainer {
+    .scanningAnimation {
+      position: fixed;
+      width: 100%;
+      height: 70px;
+      z-index: 12;
+      // top: -70px;
+      animation: scanningAnimation 5s linear infinite normal;
+      background: linear-gradient(#3ee49100, 60%, #3ee491);
+    }
+  }
   video {
     width: 100%;
     height: calc(100vh);
     // z-index: 1001;
     // height: calc(100vh - 50px);
     object-fit: cover;
   }
+}
+
+@keyframes scanningAnimation {
+  0% {
+    top: -70px;
+  }
+  100% {
+    top: calc(100% + 100px);
+  }
 }
diff --git a/src/pages/ScanningPage.tsx b/src/pages/ScanningPage.tsx
@@ -5,13 +5,20 @@ import { useEffect, useState } from "react"
 import { eventCheckIn } from "../apis/user";
 import { useZxing } from "react-zxing";
 import { Toast } from "@capacitor/toast";
+import { StatusBar } from "@capacitor/status-bar";
 
 const ScanningPage = () => {
 	const [result, setResult] = useState("");
 	const router = useIonRouter();
+
+	// Hide status bar and tab bar to fit full screen
 	useEffect(() => {
+		StatusBar.hide();
 		document.getElementById("app-tab-bar")?.style.setProperty("opacity", "0");
-		return () => {document.getElementById("app-tab-bar")?.style.removeProperty("opacity")};
+		return () => {
+			document.getElementById("app-tab-bar")?.style.removeProperty("opacity");
+			StatusBar.show();
+		};
 	}, [])
 	const { ref } = useZxing({
 		onDecodeResult(result) {
@@ -46,9 +53,12 @@ const ScanningPage = () => {
 						<div className="goBackButtonTop"></div>
 						<div className="goBackButtonBottom"></div>
 					</div>
-					<div className="scannerContainer">
-						<video ref={ref} />
-					</div>
+				</div>
+				<div className="scanningAnimaionContainer">
+					<div className="scanningAnimation" />
+				</div>
+				<div className="scannerContainer">
+					<video ref={ref} />
 				</div>
 			</IonContent>
 		</IonPage>