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

feat: CSS improvement on ListHeader
NJUPT-SAST · Nov 20, 2023 · 734c28d · 734c28d
2 parents d60c3cd + 640c288
commit 734c28d
Show file tree

Hide file tree

Showing 13 changed files with 33 additions and 55 deletions.
diff --git a/src/components/AllEvents.tsx b/src/components/AllEvents.tsx
@@ -111,13 +111,7 @@ const AllEvent: React.FC = () => {
 
   return (
     <div>
-      <IonItem lines="full">
-        <IonLabel className='eventsTitleWarpper'>
-          <IonIcon icon={archiveOutline}></IonIcon>
-          所有活动
-        </IonLabel>
-      </IonItem>
-      <EventCardList events={events} lines="none"></EventCardList>
+      <EventCardList eventsTitle="所有活动" events={events} lines="none"></EventCardList>
       {fakeInfiniteScroll()}
     </div>
   )

diff --git a/src/components/ConductingEvents.tsx b/src/components/ConductingEvents.tsx
@@ -26,13 +26,7 @@ const ConductingEvents: React.FC = () => {
 
   return (
     <div className="conductingEvents">
-      <IonItem lines="full">
-        <IonLabel className='eventsTitleWarpper'>
-          <IonIcon icon={paperPlaneOutline}></IonIcon>
-          进行中的活动
-        </IonLabel>
-      </IonItem>
-      <EventCardList events={conductingEvent} lines="none"></EventCardList>
+      <EventCardList eventsTitle="进行中的活动" events={conductingEvent} lines="none"></EventCardList>
     </div>
   );
 };

diff --git a/src/components/DepartmentIcon.scss b/src/components/DepartmentIcon.scss
@@ -1,4 +1,10 @@
-.departmentIcon {
+.departmentIconsWarpper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  .departmentIcon {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -8,4 +14,5 @@
     margin: 5px;
     font-size: 35px;
     font-weight: 700;
-  }
+  }
+}
diff --git a/src/components/DepartmentIcon.tsx b/src/components/DepartmentIcon.tsx
@@ -29,7 +29,7 @@ const DepartmentIcon = ({ department }: any) => {
   }
 
   return (
-    <div className='departmentsWarpper' onClick={() => handleDepartmentClick(department.id)}>
+    <div className='departmentIconsWarpper' onClick={() => handleDepartmentClick(department.id)}>
       <div className='departmentIcon' style={{ backgroundColor: getRandomColor(department.departmentName) }}>{department.departmentName[0]}</div>
       <IonLabel>{department.departmentName}</IonLabel>
     </div>

diff --git a/src/components/EventCard.scss b/src/components/EventCard.scss
@@ -1,12 +1,10 @@
 .eventCard {
   max-width: 500px;
-  width: 85vw;
   height: 148px;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   margin-top: 5px;
-  margin-bottom: 5px;
   padding-bottom: 3px;
 
   ion-card-header {

diff --git a/src/components/EventCardList.scss b/src/components/EventCardList.scss
@@ -1,7 +1,5 @@
 .eventContainer {
-  display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 100vw;
 }
diff --git a/src/components/EventCardList.tsx b/src/components/EventCardList.tsx
@@ -1,14 +1,15 @@
-import { IonCard, IonItem, IonList, IonNote } from "@ionic/react";
+import { IonCard, IonItem, IonLabel, IonList, IonListHeader, IonNote } from "@ionic/react";
 import { Event } from "../context";
 import EventCard from "./EventCard";
 
 interface Props {
   events: Event[] | null;
+  eventsTitle?: string | undefined;
   lines?: "full" | "inset" | "none";
   isShadow?: true | false | undefined;
 }
 
-const EventCardList = ({ events, lines, isShadow }: Props) => {
+const EventCardList = ({ events, eventsTitle, lines, isShadow }: Props) => {
   if (events == null) {
     return (
       <IonList class='eventContainer'>
@@ -32,10 +33,11 @@ const EventCardList = ({ events, lines, isShadow }: Props) => {
   return (
     <>
       <IonList class='eventContainer'>
+        <IonListHeader>
+          <IonLabel>{eventsTitle !== undefined ? eventsTitle : ""}</IonLabel>
+        </IonListHeader>
         {events.map((item, index) => (
-          <IonItem key={item.id} lines={lines}>
-            <EventCard event={item} isShadow={isShadow}></EventCard>
-          </IonItem>
+          <EventCard key={index} event={item} isShadow={isShadow}></EventCard>
         ))}
       </IonList>
     </>

diff --git a/src/components/Subcribe.scss b/src/components/Subcribe.scss
@@ -4,16 +4,13 @@
     flex-direction: column;
     width: 100vw;
     max-width: 500px;
-    ion-card {
-      margin-bottom: 0;
-    }
     .mySubscribeDepartmentsTitleWarpper {
       margin: 0;
     }
 
     .mySubscribeDepartmentsContentWarpper {
       overflow-x: auto;
-      margin: 15px 0 15px 0;
+      margin: 15px 0;
     }
   }
   .mySubscribeEventsWarpper {

diff --git a/src/components/Subscribe.tsx b/src/components/Subscribe.tsx
@@ -1,35 +1,25 @@
-import { IonCard, IonItem, IonLabel } from "@ionic/react";
+import { IonCard, IonItem, IonLabel, IonList, IonListHeader } from "@ionic/react";
 import SubscribeDepartments from "./SubscribeDepartments"
 import "./Subcribe.scss"
 import SubscribedEvents from "./SubscribedEvents";
 const subcribePage = () => {
   return (
     <div className="subscribePageWarpper">
+      <div style={{ height: "5px" }}></div>
       <div className="mySubscribeDepartmentsWarpper">
-        <IonCard>
-          <IonItem lines="full">
-            <div className="mySubscribeDepartmentsTitleWarpper">
-              我订阅的部门
-            </div>
-          </IonItem>
-          <IonItem>
+        <IonList>
+          <IonListHeader>
+            我订阅的部门
+          </IonListHeader>
+          <IonCard>
             <div id="mySubscribeDepartmentsContentWarpper" className="mySubscribeDepartmentsContentWarpper">
               <SubscribeDepartments></SubscribeDepartments>
             </div>
-          </IonItem>
-        </IonCard>
+          </IonCard>
+        </IonList>
       </div>
-      <div className="mySubscribeEventsWarpper">
-        <IonCard>
-          <IonItem lines="full">
-            <div className="mySubscribeEventsTitleWarpper">
-              我订阅的活动
-            </div>
-          </IonItem>
-          <div className="mySubscribeEventsContentWarpper">
-            <SubscribedEvents></SubscribedEvents>
-          </div>
-        </IonCard>
+      <div className="mySubscribeEventsContentWarpper">
+        <SubscribedEvents></SubscribedEvents>
       </div>
     </div>
   )

diff --git a/src/components/SubscribedEvents.tsx b/src/components/SubscribedEvents.tsx
@@ -16,7 +16,7 @@ const SubscribedEvents = () => {
   }, [])
   return (
     <div className="subscribedEventsWarpper">
-      <EventCardList events={subcribeEvents} lines="full" isShadow={true}></EventCardList>
+      <EventCardList eventsTitle="我订阅的活动" events={subcribeEvents} lines="none" isShadow={false}></EventCardList>
     </div>
   )
 }

diff --git a/src/components/SubsrcibedEvents.scss b/src/components/SubsrcibedEvents.scss
@@ -1,3 +1,3 @@
 .subscribedEventsWarpper {
-  box-shadow: none;
+  // box-shadow: none;
 }
diff --git a/src/pages/Department.scss b/src/pages/Department.scss
@@ -1,5 +1,4 @@
 .eventContainer {
-  display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;

diff --git a/src/pages/Event.scss b/src/pages/Event.scss
@@ -36,7 +36,6 @@
       .departments {
         display: flex;
         flex-direction: row;
-        font-weight: 700;
       }
       ion-icon {
         color: #99a2aa;