From e8d9a4e6e82b4a8827d621b4124bd4a064409eca Mon Sep 17 00:00:00 2001
From: newbscantdev <potatoloadzch@gmail.com>
Date: Sat, 14 Sep 2024 19:02:21 +0700
Subject: [PATCH] backup commit

---
 src/main.css                     |  2 +-
 src/routes/App.css               |  4 ++--
 src/routes/MainPage/MainPage.css | 26 +++++++++++---------------
 src/routes/MainPage/MainPage.jsx |  9 +++++----
 4 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/src/main.css b/src/main.css
index f3c173e..16f5655 100644
--- a/src/main.css
+++ b/src/main.css
@@ -4,6 +4,6 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
-  height: 100vh;
+  height: 100dvh;
   margin: 0;
 }
\ No newline at end of file
diff --git a/src/routes/App.css b/src/routes/App.css
index 92a7681..5c520df 100644
--- a/src/routes/App.css
+++ b/src/routes/App.css
@@ -25,7 +25,7 @@ body {
 
     /* stylize main content */
     .appContent {
-        width: 100%;
-        max-width: 480px;
+        width: 100dvw;
+        height: 100dvh;
     }
 }
\ No newline at end of file
diff --git a/src/routes/MainPage/MainPage.css b/src/routes/MainPage/MainPage.css
index 2e181a4..ccafd9a 100644
--- a/src/routes/MainPage/MainPage.css
+++ b/src/routes/MainPage/MainPage.css
@@ -3,12 +3,11 @@
     src: url(../../../..//public/fonts/Inter-Variable.ttf);
 }
 
-.error-content-wrap {
+/* .error-content-wrap {
     display: flex;
     flex-direction: column;
     justify-content: center;
 
-    /* ## Sub system ## */
     .loading-state {
         color: #1cb553;
         font-size: 3rem;
@@ -17,7 +16,6 @@
         animation: spin 1.5s linear infinite;
     }
 
-    /* ## Error System ## */
     .error-state {
         font-family: InterV;
         background-color: #797979;
@@ -29,7 +27,6 @@
         justify-content: center;
         text-align: center;
 
-        /* gap: 0.75rem; */
         width: 100%;
 
         .error-head {
@@ -62,12 +59,11 @@
     }
 }
 
-/* ## Main System ## */
 .content-wrap {
     display: flex;
     flex-direction: column;
 
-    height: 75dvh;
+    max-height: 75dvh;
 
     .card-swipable {
         
@@ -116,27 +112,27 @@
 }
 
 .card-swipable {
-    position: relative; /* Ensure that the child elements are positioned relative to this container */
-    width: 100%; /* Adjust this as needed */
-    height: 100%; /* Adjust this as needed */
+    position: relative;
+    width: 100%;
+    height: 100%;
 }
 
 .card-generate {
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%; /* Adjust to control card size */
-    height: 100%; /* Adjust to control card size */
-    z-index: 1; /* Default stacking order */
+    width: 100%;
+    height: 100%;
+    z-index: 1;
 }
 
 .card-generate:nth-child(1) {
-    z-index: 2; /* First card on top */
+    z-index: 2;
 }
 
 .card-generate:nth-child(2) {
-    z-index: 1; /* Second card below */
-}
+    z-index: 1;
+} */
 
 /* ## for smaller devices ## */
 @media only screen and (max-width: 480px) {
diff --git a/src/routes/MainPage/MainPage.jsx b/src/routes/MainPage/MainPage.jsx
index a6736d3..7f36034 100644
--- a/src/routes/MainPage/MainPage.jsx
+++ b/src/routes/MainPage/MainPage.jsx
@@ -112,15 +112,16 @@ function MainPage() {
     }
 
     return (
-        <div className='content-wrap'>
-            <div className="card-swipable">
+        <div className='content-display'>
+            {/* <div className="card-swipable">
                 {track.map((myTracks) => (
                     <div className="card-generate" key={myTracks.trackId}>
                         <TinderCard 
                         preventSwipe={['up','down']}
                         onSwipe={onSwipe} 
                         onCardLeftScreen={() => {onCardLeftScreen('test')}}
-                        swipeThreshold={1500}
+                        swipeThreshold={100}
+                        flickOnSwipe={true}
                     >
                             <Card trackInfo={myTracks} />
                         </TinderCard>
@@ -140,7 +141,7 @@ function MainPage() {
                 <button className="listen" onClick={warningToast}>
                     <FontAwesomeIcon icon={faHeadphonesSimple} />
                 </button>
-            </div>
+            </div> */}
         </div>
     );
 }