a

OpenTUT · Sep 19, 2024 · 2548b34 · 2548b34
1 parent d82988f
commit 2548b34
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 47 deletions.
diff --git a/src/App.module.css b/src/App.module.css
@@ -14,5 +14,17 @@
 }
 
 .currentLocation:active {
-  background-color: #eeeeee;
+  background-color: #606060;
+}
+
+.slide {
+  position: fixed;
+  bottom: -45%;
+  width: 100%;
+  height: 45%;
+  transition: bottom 0.25s;
+}
+
+.slideAnim {
+  bottom: 0;
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -63,62 +63,54 @@ function App() {
       >
         <IconCurrentLocation size={32} />
       </button>
-      {building && (
+
+      <div className={`${classes.slide} ${building ? classes.slideAnim : ''}`}>
         <div
           style={{
-            position: 'fixed',
-            bottom: 0,
+            maxWidth: '800px',
+            height: '100%',
             width: '100%',
-            height: '45%',
+            backgroundColor: '#ffffff',
+            borderRadius: '1rem 1rem 0 0',
+            padding: '1rem',
+            margin: '0 auto',
+            border: 'solid 1px #aaa',
           }}
         >
-          <div
+          <h2
             style={{
-              maxWidth: '800px',
-              height: '100%',
-              width: '100%',
-              backgroundColor: '#ffffff',
-              borderRadius: '1rem',
-              padding: '1rem',
-              margin: '0 auto',
-              border: 'solid 1px #aaa',
+              fontSize: '1.25rem', // text-xl
+              fontWeight: 'bold', // font-bold
+              marginTop: 0,
+              marginBottom: '1rem', // mb-4
             }}
           >
-            <h2
-              style={{
-                fontSize: '1.25rem', // text-xl
-                fontWeight: 'bold', // font-bold
-                marginTop: 0,
-                marginBottom: '1rem', // mb-4
-              }}
-            >
-              {building?.name}
-            </h2>
-            {building?.children.map((child) => (
-              <div
-                key={child.name}
-                style={{ borderRadius: '0.8rem', border: 'solid 1px #aaa' }}
-              >
-                <p>{child.name}</p>
-                {/* <p>{child.description}</p> */}
-              </div>
-            ))}
-            <button
-              type="button"
-              onClick={() => setBuilding(undefined)}
-              style={{
-                marginTop: '1rem', // mt-4
-                padding: '0.5rem', // p-2
-                backgroundColor: '#ef4444', // bg-red-500
-                color: '#ffffff', // text-white
-                borderRadius: '0.25rem', // rounded
-              }}
+            {building?.name}
+          </h2>
+          {building?.children.map((child) => (
+            <div
+              key={child.name}
+              style={{ borderRadius: '0.8rem', border: 'solid 1px #aaa' }}
             >
-              Close
-            </button>
-          </div>
+              <p>{child.name}</p>
+              {/* <p>{child.description}</p> */}
+            </div>
+          ))}
+          <button
+            type="button"
+            onClick={() => setBuilding(undefined)}
+            style={{
+              marginTop: '1rem', // mt-4
+              padding: '0.5rem', // p-2
+              backgroundColor: '#ef4444', // bg-red-500
+              color: '#ffffff', // text-white
+              borderRadius: '0.25rem', // rounded
+            }}
+          >
+            Close
+          </button>
         </div>
-      )}
+      </div>
     </>
   );
 }