Make admin event mobile responsive, remove unused CSS in CheckInModal (…

…#153)
acmucsd · Feb 21, 2024 · f4deac9 · f4deac9
1 parent 18be91c
commit f4deac9
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 23 deletions.
diff --git a/src/components/admin/event/EventDetailsForm/index.tsx b/src/components/admin/event/EventDetailsForm/index.tsx
@@ -288,9 +288,6 @@ const EventDetailsForm = (props: IProps) => {
 
         <label htmlFor="cover">Cover Image</label>
         <DetailsFormItem>
-          {eventCover ? (
-            <Image src={eventCover} alt="Selected cover image" width={480} height={270} />
-          ) : null}
           <input
             type="file"
             id="cover"
@@ -303,6 +300,16 @@ const EventDetailsForm = (props: IProps) => {
               }
             }}
           />
+          {eventCover ? (
+            <div className={style.eventCover}>
+              <Image
+                src={eventCover}
+                alt="Selected cover image"
+                style={{ objectFit: 'cover' }}
+                fill
+              />
+            </div>
+          ) : null}
         </DetailsFormItem>
         <Cropper
           file={selectedCover}

diff --git a/src/components/admin/event/EventDetailsForm/style.module.scss b/src/components/admin/event/EventDetailsForm/style.module.scss
@@ -17,10 +17,20 @@
     display: grid;
     grid-template-columns: 1fr 3fr;
     row-gap: 1rem;
+
+    .eventCover {
+      aspect-ratio: 1920 / 1080;
+      position: relative;
+      width: 100%;
+    }
+    @media screen and (width <= vars.$breakpoint-md) {
+      grid-template-columns: unset;
+    }
   }
 
   .submitButtons {
     display: flex;
+    flex-wrap: wrap;
     gap: 1rem;
   }
 }
diff --git a/src/components/admin/event/EventDetailsForm/style.module.scss.d.ts b/src/components/admin/event/EventDetailsForm/style.module.scss.d.ts
@@ -1,6 +1,7 @@
 export type Styles = {
   back: string;
   container: string;
+  eventCover: string;
   form: string;
   submitButtons: string;
 };

diff --git a/src/components/admin/event/NotionAutofill/style.module.scss b/src/components/admin/event/NotionAutofill/style.module.scss
@@ -10,6 +10,7 @@
 
   .row {
     display: flex;
+    flex-wrap: wrap;
     gap: 1rem;
     width: 100%;
 

diff --git a/src/components/events/CheckInModal/style.module.scss b/src/components/events/CheckInModal/style.module.scss
@@ -44,24 +44,6 @@
         }
       }
     }
-
-    .close {
-      align-items: center;
-      background: none;
-      display: flex;
-      height: 3.75rem;
-      margin-left: 1rem;
-      padding: 0;
-    }
-  }
-
-  .image {
-    aspect-ratio: 1920 / 1080;
-    border-radius: 10px;
-    flex-shrink: 0;
-    overflow: hidden;
-    position: relative;
-    width: 100%;
   }
 
   .done {

diff --git a/src/components/events/CheckInModal/style.module.scss.d.ts b/src/components/events/CheckInModal/style.module.scss.d.ts
@@ -1,11 +1,9 @@
 export type Styles = {
-  close: string;
   container: string;
   done: string;
   graphic: string;
   header: string;
   headerText: string;
-  image: string;
   subheader: string;
   subheaderText: string;
 };