Fix Safari issues

aelassas · May 10, 2024 · 981dba5 · 981dba5
1 parent f923929
commit 981dba5
Show file tree

Hide file tree

Showing 99 changed files with 691 additions and 605 deletions.
diff --git a/backend/src/App.tsx b/backend/src/App.tsx
@@ -37,7 +37,7 @@ const NoMatch = lazy(() => import('./pages/NoMatch'))
 const App = () => (
   <GlobalProvider>
     <Router>
-      <main className="app">
+      <div className="app">
         <Suspense fallback={<></>}>
           <Routes>
             <Route path="/sign-in" element={<SignIn />} />
@@ -74,7 +74,7 @@ const App = () => (
             <Route path="*" element={<NoMatch />} />
           </Routes>
         </Suspense>
-      </main>
+      </div>
     </Router>
   </GlobalProvider>
 )

diff --git a/backend/src/assets/css/activate.css b/backend/src/assets/css/activate.css
@@ -1,10 +1,11 @@
 /* Activate */
-
 div.activate {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-bottom: 40px;
+  flex-direction: row;
+  flex: 1 0 auto;
+  justify-content: center;
+  margin: 45px 0;
+  transform: translate3d(0, 0, 0);
 }
 
 div.activate h1.activate-form-title {
@@ -16,6 +17,9 @@ div.resend {
   display: flex;
   flex-direction: column;
   align-items: center;
+  margin: 45px 0;
+  transform: translate3d(0, 0, 0);
+  flex: 1 0 auto;
   padding-bottom: 40px;
 }
 
@@ -25,10 +29,10 @@ div.resend {
 }
 
 .resend-form div.resend-form-content {
-  display: inline-block;
-  width: 350px;
-  position: relative;
-  left: calc(50% - 150px);
+  display: flex;
+  flex: 1 0 auto;
+  flex-direction: column;
+  align-items: center;
 }
 
 .resend-form div.resend-form-content span {
@@ -39,20 +43,19 @@ div.resend {
   float: left;
   clear: left;
   width: 90px;
-  margin-left: calc(50% - 65px) !important;
-  margin-top: 20px !important;
+  margin-top: 15px !important;
 }
 
 .resend-form div.resend-form-content p.go-to-home {
-  float: left;
-  clear: left;
-  width: 200px;
-  margin-left: calc(50% - 100px);
+  display: flex;
+  flex: 1 0 auto;
+  flex-direction: column;
+  align-items: center;
 }
 
 /* Device width is less than or equal to 960px */
 
-@media only screen and (width <= 960px) {
+@media only screen and (width <=960px) {
   .activate-form {
     margin-top: 40px;
     width: 330px;
@@ -70,7 +73,7 @@ div.resend {
 
 /* Device width is greater than or equal to 960px */
 
-@media only screen and (width >= 960px) {
+@media only screen and (width >=960px) {
   .activate-form {
     margin-top: 40px;
     width: 450px;

diff --git a/backend/src/assets/css/agencies.css b/backend/src/assets/css/agencies.css
@@ -1,5 +1,7 @@
 div.agencies {
   display: flex;
+  flex: 1 0 auto;
+  transform: translate3d(0, 0, 0);
 }
 
 div.agencies .search {
@@ -14,7 +16,7 @@ div.agencies .info-box {
 
 /* Device width is less than or equal to 960px */
 
-@media only screen and (width <= 960px) {
+@media only screen and (width <=960px) {
   div.agencies {
     flex-direction: column;
   }
@@ -54,7 +56,7 @@ div.agencies .info-box {
 
 /* Device width is greater than or equal to 960px */
 
-@media only screen and (width >= 960px) {
+@media only screen and (width >=960px) {
   div.agencies {
     flex-direction: row;
   }

diff --git a/backend/src/assets/css/agency-list.css b/backend/src/assets/css/agency-list.css
@@ -1,15 +1,16 @@
+section.agency-list {
+  padding-top: 10px;
+  margin: 0 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1 0 auto;
+}
+
 section.agency-list .empty-list {
   margin-top: 15px;
   text-align: center;
   width: 250px;
-  margin-left: calc(50% - 125px);
-}
-
-section.agency-list {
-  padding-top: 10px;
-  margin: 0 10px;
-  width: 100%;
-  max-width: 480px;
 }
 
 section.agency-list article {
@@ -70,7 +71,6 @@ section.agency-list article .agency-actions button {
 
 @media only screen and (width >= 960px) {
   section.agency-list article {
-    margin-left: calc(50% - 300px);
     width: 600px;
   }
 

diff --git a/backend/src/assets/css/booking-list.css b/backend/src/assets/css/booking-list.css
@@ -1,11 +1,17 @@
+div.bs-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1 0 auto;
+}
+
 div.bs-list .empty-list {
   margin-top: 15px;
   text-align: center;
   width: 250px;
-  margin-left: calc(50% - 125px);
 }
 
-div.bs-list {
+div.bs-list .booking-grid {
   width: 100%;
 }
 

diff --git a/backend/src/assets/css/booking.css b/backend/src/assets/css/booking.css
@@ -1,6 +1,8 @@
 div.booking {
   display: flex;
   flex-direction: row;
+  flex: 1 0 auto;
+  transform: translate3d(0, 0, 0);
 }
 
 div.booking div.col-2 div.col-2-header {
@@ -31,7 +33,7 @@ div.booking div.col-2 div.col-2-header span.price-day {
 
 /* Device width is less than or equal to 960px */
 
-@media only screen and (width <= 960px) {
+@media only screen and (width <=960px) {
   div.booking div.col-1 {
     padding: 20px;
     background: #fefefe;
@@ -43,15 +45,15 @@ div.booking div.col-2 div.col-2-header span.price-day {
   }
 }
 
-@media only screen and (width <= 1270px) {
+@media only screen and (width <=1270px) {
   div.booking div.col-2 .property {
     display: none;
   }
 }
 
 /* Device width is greater than or equal to 960px */
 
-@media only screen and (width >= 960px) {
+@media only screen and (width >=960px) {
   div.booking div.col-1 {
     background: #fefefe;
     border-right: #eee solid 1px;

diff --git a/backend/src/assets/css/change-password.css b/backend/src/assets/css/change-password.css
@@ -5,6 +5,8 @@
   flex-direction: column;
   align-items: center;
   padding-bottom: 40px;
+  flex: 1 0 auto;
+  transform: translate3d(0, 0, 0);
 }
 
 .password-reset-form-title {
@@ -14,7 +16,7 @@
 
 /* Device width is less than or equal to 960px */
 
-@media only screen and (width <= 960px) {
+@media only screen and (width <=960px) {
   .password-reset-form {
     margin-top: 40px;
     width: 330px;
@@ -25,7 +27,7 @@
 
 /* Device width is greater than or equal to 960px */
 
-@media only screen and (width >= 960px) {
+@media only screen and (width >=960px) {
   .password-reset-form {
     margin-top: 40px;
     width: 450px;

diff --git a/backend/src/assets/css/common.css b/backend/src/assets/css/common.css
@@ -213,12 +213,15 @@
   height: 20px !important;
 }
 
-@media only screen and (width <= 960px) {
-  div.content {
-    margin: 0;
-    padding: 0;
-  }
+div.content {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+  margin: 0;
+  padding: 0;
+}
 
+@media only screen and (width <=960px) {
   .buttons {
     margin-top: 15px;
     margin-bottom: 5px;
@@ -239,12 +242,7 @@
   }
 }
 
-@media only screen and (width >= 960px) {
-  div.content {
-    margin: 0;
-    padding: 0;
-  }
-
+@media only screen and (width >=960px) {
   .buttons {
     margin-top: 15px;
     margin-bottom: 5px;

diff --git a/backend/src/assets/css/create-agency.css b/backend/src/assets/css/create-agency.css
@@ -1,4 +1,11 @@
 /* Create Agency */
+div.create-agency {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+  align-items: center;
+  transform: translate3d(0, 0, 0);
+}
 
 .agency-form-wrapper {
   margin: 32px 0;
@@ -12,10 +19,8 @@
 
 /* Device width is less than or equal to 960px */
 
-@media only screen and (width <= 960px) {
+@media only screen and (width <=960px) {
   .agency-form {
-    margin-top: 45px !important;
-    margin-left: calc(50% - 180px) !important;
     width: 360px;
     height: 900px;
     padding: 30px;
@@ -24,10 +29,8 @@
 
 /* Device width is greater than or equal to 960px */
 
-@media only screen and (width >= 960px) {
+@media only screen and (width >=960px) {
   .agency-form {
-    margin-top: 45px !important;
-    margin-left: calc(50% - 300px) !important;
     width: 600px;
     height: 900px;
     padding: 30px;

diff --git a/backend/src/assets/css/create-booking.css b/backend/src/assets/css/create-booking.css
@@ -1,4 +1,12 @@
-/* Create Location */
+/* Create Booking */
+div.create-booking {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+  align-items: center;
+  transform: translate3d(0, 0, 0);
+  margin: 45px 0;
+}
 
 .booking-form-wrapper {
   margin: 32px 0;
@@ -22,10 +30,8 @@
 
 /* Device width is less than or equal to 960px */
 
-@media only screen and (width <= 960px) {
+@media only screen and (width <=960px) {
   .booking-form {
-    margin-top: 45px !important;
-    margin-left: calc(50% - 180px) !important;
     width: 360px;
     padding: 30px;
     display: inline-block;
@@ -34,10 +40,8 @@
 
 /* Device width is greater than or equal to 960px */
 
-@media only screen and (width >= 960px) {
+@media only screen and (width >=960px) {
   .booking-form {
-    margin-top: 45px !important;
-    margin-left: calc(50% - 300px) !important;
     width: 600px;
     padding: 30px;
     display: inline-block;

diff --git a/backend/src/assets/css/create-location.css b/backend/src/assets/css/create-location.css
@@ -1,4 +1,13 @@
 /* Create Location */
+div.create-location {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+  align-items: center;
+  transform: translate3d(0, 0, 0);
+  margin: 45px 0;
+}
+
 
 .location-form-wrapper {
   margin: 32px 0;
@@ -12,10 +21,8 @@
 
 /* Device width is less than or equal to 960px */
 
-@media only screen and (width <= 960px) {
+@media only screen and (width <=960px) {
   .location-form {
-    margin-top: 45px !important;
-    margin-left: calc(50% - 180px) !important;
     width: 360px;
     height: 400px;
     padding: 30px;
@@ -24,10 +31,8 @@
 
 /* Device width is greater than or equal to 960px */
 
-@media only screen and (width >= 960px) {
+@media only screen and (width >=960px) {
   .location-form {
-    margin-top: 45px !important;
-    margin-left: calc(50% - 300px) !important;
     width: 600px;
     height: 340px;
     padding: 30px;