added fade and some minor bug fixes

ecss-soton · Sep 13, 2024 · ce42e01 · ce42e01
1 parent d3f2b99
commit ce42e01
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 11 deletions.
diff --git a/src/app/_blocks/HomeTop/index.module.scss b/src/app/_blocks/HomeTop/index.module.scss
@@ -12,6 +12,39 @@
     }
 }
 
+@keyframes fadeInLeft {
+    0% {
+      opacity: 0;
+      transform: translateX(-50px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes fadeInRight {
+    0% {
+      opacity: 0;
+      transform: translateX(50px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes fadeInBottom {
+    0% {
+      opacity: 0;
+      transform: translateY(50px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
 .intro{
     display: flex;
     flex-direction: column;
@@ -34,6 +67,8 @@
     font-style: normal;
     font-weight: 400;
     line-height: normal;
+    opacity: 0;
+    animation: fadeInLeft 1s ease-in-out forwards;
 
     @include extra-small-break {
         font-size: 23px;
@@ -44,9 +79,13 @@
     width: 60%;
     height: 100%;
     display: flex;
+    opacity: 0;
+    animation: fadeInRight 1s ease-in-out forwards;
+    animation-delay: 1s;
 
     @include mid-break {
         width: 100%;
+        animation-delay: 2s;
     }
 }
 
@@ -61,6 +100,8 @@
     width: 184px;
     position: relative;
     left: 2%;
+    opacity: 0;
+    animation: fadeInLeft 1s ease-in-out forwards;
 }
 
 .image2 {
@@ -85,10 +126,14 @@
     padding-top: 30%;
     display: flex;
     flex-direction: row;
+    opacity: 0;
+    animation: fadeInBottom 1s ease-in-out forwards;
+    animation-delay: 2s;
 
     @include mid-break {
         width: 100%;
         padding-top: 5%;
+        animation-delay: 1s;
     }
 }
 

diff --git a/src/app/_components/CollectionArchive/index.module.scss b/src/app/_components/CollectionArchive/index.module.scss
@@ -10,6 +10,17 @@
   }
 }
 
+@keyframes fadeInBottom {
+  0% {
+    opacity: 0;
+    transform: translateY(50px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .introContent {
   position: relative;
   margin-bottom: calc(var(--base) * 2);
@@ -19,6 +30,15 @@
   }
 }
 
+.fadeIn {
+  opacity: 0;
+  animation: fadeInBottom 0.7s ease-in-out forwards;
+
+  // @include small-break {
+  //   justify-self: center;
+  // }
+}
+
 .resultCountWrapper {
   display: flex;
   margin-bottom: calc(var(--base) * 2);

diff --git a/src/app/_components/CollectionArchive/index.tsx b/src/app/_components/CollectionArchive/index.tsx
@@ -244,13 +244,14 @@ export const CollectionArchive: React.FC<Props> = props => {
               if (typeof result === 'object' && result !== null) {
                 return (
                   <div
-                    className={
+                    className={[
                       relationTo === 'committee'
                         ? classes.columnCommittee
                         : relationTo === 'events'
                         ? classes.columnEvents
-                        : classes.column
-                    }
+                        : classes.column,
+                      classes.fadeIn,
+                    ].join(' ')}
                     key={index}
                   >
                     {/* {relationTo == ('projects' || 'posts' || 'committee') && (

diff --git a/src/app/_components/EventItem/index.module.scss b/src/app/_components/EventItem/index.module.scss
@@ -12,7 +12,7 @@
 
     @include extra-small-break {
       flex-direction: column;
-      width: 80%;
+      width: 100%;
     }
   }
 

diff --git a/src/app/_components/Header/Nav/index.tsx b/src/app/_components/Header/Nav/index.tsx
@@ -89,11 +89,11 @@ export const HeaderNav: React.FC<HeaderNavComponentProps> = ({
             const label = (
               <div className={classes.fadeIn}>
                 <span style={style} className={classes.redBrackets}>
-                  [&nbsp;
+                  &nbsp;[&nbsp;
                 </span>
                 {link.label}
                 <span style={style} className={classes.redBrackets}>
-                  &nbsp;]
+                  &nbsp;]&nbsp;
                 </span>
               </div>
             )
@@ -105,9 +105,9 @@ export const HeaderNav: React.FC<HeaderNavComponentProps> = ({
               className={[inter.className, classes.account, classes.fadeIn].join(' ')}
             >
               <>
-                <span className={classes.redBrackets}>&#91;&nbsp;</span>
+                <span className={classes.redBrackets}>&nbsp;&#91;&nbsp;</span>
                 Account
-                <span className={classes.redBrackets}>&nbsp;&#93;</span>
+                <span className={classes.redBrackets}>&nbsp;&#93;&nbsp;</span>
               </>
             </Link>
           )}

diff --git a/src/app/_components/Header/index.tsx b/src/app/_components/Header/index.tsx
@@ -68,7 +68,7 @@ const Header: React.FC = () => {
   const [header, setHeader] = useState<HeaderType | null>(null)
   const { user } = useAuth()
   const currentPath = usePathname()
-  const isBreakpoint = useMediaQuery(768)
+  const isBreakpoint = useMediaQuery(900)
 
   useEffect(() => {
     const getHeaderData = async () => {
@@ -119,11 +119,11 @@ const Header: React.FC = () => {
               const label = (
                 <div className={classes.fadeIn}>
                   <span style={style} className={classes.redBrackets}>
-                    [&nbsp;
+                    &nbsp;[&nbsp;
                   </span>
                   {link.label}
                   <span style={style} className={classes.redBrackets}>
-                    &nbsp;]
+                    &nbsp;]&nbsp;
                   </span>
                 </div>
               )