Fix css issues

aelassas · May 29, 2024 · 1ad39f2 · 1ad39f2
1 parent d1f15d1
commit 1ad39f2
Show file tree

Hide file tree

Showing 40 changed files with 4,313 additions and 1,088 deletions.
diff --git a/api/package-lock.json b/api/package-lock.json
diff --git a/api/package.json b/api/package.json
@@ -16,21 +16,21 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^7.9.0",
-    "@typescript-eslint/parser": "^7.9.0",
+    "@typescript-eslint/eslint-plugin": "^7.11.0",
+    "@typescript-eslint/parser": "^7.11.0",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-import": "^2.29.1",
-    "nodemon": "^3.1.0",
+    "nodemon": "^3.1.1",
     "npm-check-updates": "^16.14.20",
-    "tsx": "^4.10.4"
+    "tsx": "^4.11.0"
   },
   "dependencies": {
-    "@babel/cli": "^7.24.5",
-    "@babel/core": "^7.24.5",
-    "@babel/plugin-transform-modules-commonjs": "^7.24.1",
-    "@babel/preset-env": "^7.24.5",
-    "@babel/preset-typescript": "^7.24.1",
+    "@babel/cli": "^7.24.6",
+    "@babel/core": "^7.24.6",
+    "@babel/plugin-transform-modules-commonjs": "^7.24.6",
+    "@babel/preset-env": "^7.24.6",
+    "@babel/preset-typescript": "^7.24.6",
     "@types/bcrypt": "^5.0.2",
     "@types/compression": "^1.7.5",
     "@types/cookie-parser": "^1.4.7",
@@ -65,7 +65,7 @@
     "nocache": "^4.0.0",
     "nodemailer": "^6.9.13",
     "rimraf": "^5.0.7",
-    "stripe": "^15.7.0",
+    "stripe": "^15.8.0",
     "supertest": "^7.0.0",
     "typescript": "^5.4.5",
     "uuid": "^9.0.1",

diff --git a/backend/.env.example b/backend/.env.example
@@ -16,3 +16,4 @@ VITE_MI_PROPERTY_IMAGE_WIDTH=300
 VITE_MI_PROPERTY_IMAGE_HEIGHT=200
 VITE_MI_MINIMUM_AGE=21
 VITE_MI_PAGINATION_MODE=classic
+VITE_MI_CURRENCY=$
diff --git a/backend/src/assets/css/agency-badge.css b/backend/src/assets/css/agency-badge.css
@@ -1,23 +1,33 @@
 div.agency-badge {
-    display: flex;
-    align-items: center;
-    margin-top: 5px;
-    font-size: 12px;
+  display: flex;
+  align-items: center;
+  margin-top: 5px;
+  color: rgb(0 0 0 / 60%);
+  font-size: 1em;
+  line-height: 1em;
+  max-width: 300px;
 }
 
 div.agency-badge span.agency-badge-logo {
-    border: 1px solid #e6e6e6;
-    border-radius: 3px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 62px;
-    height: 32px;
-    margin-right: 5px;
+  border: 1px solid #e6e6e6;
+  border-radius: 3px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 62px;
+  height: 32px;
+  margin-right: 5px;
 }
 
 div.agency-badge span.agency-badge-logo img {
-    max-width: 100%;
-    max-height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+div.agency-badge span.agency-badge-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 133px;
 }
diff --git a/backend/src/assets/css/property-list.css b/backend/src/assets/css/property-list.css
@@ -75,6 +75,7 @@ section.property-list article div.middle-panel div.name h2 {
   text-size-adjust: none;
   line-height: 1.3em;
   margin: 0;
+  word-break: break-all;
 }
 
 section.property-list article div.middle-panel .property-info div.property-info-description {

diff --git a/backend/src/assets/css/property.css b/backend/src/assets/css/property.css
@@ -104,6 +104,12 @@ div.main div.property div.right-panel div.name h2 {
   text-size-adjust: none;
   line-height: 1.3em;
   margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 div.main div.property div.right-panel div.price {

diff --git a/backend/src/components/AgencyBadge.tsx b/backend/src/components/AgencyBadge.tsx
@@ -18,9 +18,7 @@ const AgencyBadge = ({ agency }: AgencyBadgeProps) => (agency
             alt={agency.fullName}
           />
         </span>
-        <a href={`/agency?c=${agency._id}`} className="agency-badge-info">
-          {agency.fullName}
-        </a>
+        <span className="agency-badge-text">{agency.fullName}</span>
       </div>
     )
     : <></>)

diff --git a/backend/src/components/Error.tsx b/backend/src/components/Error.tsx
@@ -11,7 +11,7 @@ interface ErrorProps {
 }
 
 const Error = ({ message, style, homeLink }: ErrorProps) => (
-    <div style={style}>
+    <div style={style || {}}>
       <div className="error">
         <span className="message">{message}</span>
       </div>

diff --git a/backend/src/components/Layout.tsx b/backend/src/components/Layout.tsx
@@ -120,7 +120,7 @@ const Layout = ({
     <>
       <Header user={user} hidden={hideHeader || loading} />
       {((!user && !loading) || (user && user.verified) || !strict) && !unauthorized ? (
-        <div className="content" style={style}>
+        <div className="content" style={style || {}}>
           {children}
         </div>
       ) : (

diff --git a/backend/src/components/StatusList.tsx b/backend/src/components/StatusList.tsx
@@ -48,7 +48,7 @@ const StatusList = ({
   }
 
   return (
-    <div style={style}>
+    <div style={style || {}}>
       {disabled ? (
         <span className={`bs-s-sv bs-s-${value.toLowerCase()}`} style={{ marginTop: 5 }}>
           {helper.getBookingStatus(value as movininTypes.BookingStatus)}

diff --git a/backend/src/components/Unauthorized.tsx b/backend/src/components/Unauthorized.tsx
@@ -8,7 +8,7 @@ interface UnauthorizedProps {
 }
 
 const Unauthorized = ({ style }: UnauthorizedProps) => (
-    <div className="msg" style={style}>
+    <div className="msg" style={style || {}}>
       <h2>{strings.UNAUTHORIZED}</h2>
       <p>
         <Link href="/">{commonStrings.GO_TO_HOME}</Link>

diff --git a/backend/src/config/env.config.ts b/backend/src/config/env.config.ts
@@ -50,6 +50,7 @@ const env = {
       ? Const.PAGINATION_MODE.INFINITE_SCROLL
       : Const.PAGINATION_MODE.CLASSIC,
   SIZE_UNIT: 'm²',
+  CURRENCY: import.meta.env.VITE_BC_CURRENCY || '$',
 }
 
 export default env
diff --git a/backend/src/lang/common.ts b/backend/src/lang/common.ts
@@ -30,7 +30,7 @@ const strings = new LocalizedStrings({
     SAVE: 'Sauvegarder',
     CANCEL: 'Annuler',
     RESET_PASSWORD: 'Changer le mot de passe',
-    CURRENCY: '$',
+    CURRENCY: env.CURRENCY,
     DELETE_AVATAR_CONFIRM: 'Êtes-vous sûr de vouloir supprimer la photo ?',
     DELETE_IMAGE: "Supprimer l'image",
     UPLOAD_IMAGE: 'Charger une image',
@@ -103,7 +103,7 @@ const strings = new LocalizedStrings({
     SAVE: 'Save',
     CANCEL: 'Cancel',
     RESET_PASSWORD: 'Change Password',
-    CURRENCY: '$',
+    CURRENCY: env.CURRENCY,
     DELETE_AVATAR_CONFIRM: 'Are you sure you want to delete the picture?',
     UPLOAD_IMAGE: 'Upload image',
     DELETE_IMAGE: 'Delete image',

diff --git a/frontend/.env.example b/frontend/.env.example
@@ -15,4 +15,6 @@ VITE_MI_PROPERTY_IMAGE_HEIGHT=200
 VITE_MI_MINIMUM_AGE=21
 VITE_MI_PAGINATION_MODE=classic
 VITE_MI_STRIPE_PUBLISHABLE_KEY=STRIPE_PUBLISHABLE_KEY
-VITE_BC_STRIPE_CURRENCY_CODE=USD
+VITE_MI_STRIPE_CURRENCY_CODE=USD
+VITE_MI_CURRENCY=$
+VITE_MI_SET_LANGUAGE_FROM_IP=false
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -18,17 +18,17 @@
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.15.18",
     "@mui/material": "^5.15.18",
-    "@mui/x-data-grid": "^7.5.0",
-    "@mui/x-date-pickers": "^7.5.0",
+    "@mui/x-data-grid": "^7.5.1",
+    "@mui/x-date-pickers": "^7.5.1",
     "@stripe/react-stripe-js": "^2.7.1",
     "@stripe/stripe-js": "^3.4.1",
     "@types/node": "^20.12.12",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-google-recaptcha": "^2.1.9",
     "@types/validator": "^13.11.10",
-    "@typescript-eslint/eslint-plugin": "^7.10.0",
-    "@typescript-eslint/parser": "^7.10.0",
+    "@typescript-eslint/eslint-plugin": "^7.11.0",
+    "@typescript-eslint/parser": "^7.11.0",
     "@vitejs/plugin-react": "^4.3.0",
     "axios": "^1.7.2",
     "date-fns": "^2.29.3",
@@ -43,12 +43,12 @@
     "react-toastify": "^10.0.5",
     "typescript": "^5.2.2",
     "validator": "^13.12.0",
-    "vite": "^5.2.11"
+    "vite": "^5.2.12"
   },
   "devDependencies": {
     "eslint-config-airbnb": "^19.0.4",
     "npm-check-updates": "^16.14.20",
-    "stylelint": "^16.6.0",
+    "stylelint": "^16.6.1",
     "stylelint-config-standard": "^36.0.0"
   }
 }
diff --git a/frontend/src/assets/css/agency-badge.css b/frontend/src/assets/css/agency-badge.css
@@ -1,26 +1,33 @@
 div.agency-badge {
-    display: flex;
-    align-items: center;
-    margin-top: 5px;
-    color: rgb(0 0 0 / 60%);
-    font-size: 1em;
-    line-height: 1em;
-    max-width: 300px;
+  display: flex;
+  align-items: center;
+  margin-top: 5px;
+  color: rgb(0 0 0 / 60%);
+  font-size: 1em;
+  line-height: 1em;
+  max-width: 300px;
 }
 
 div.agency-badge span.agency-badge-logo {
-    border: 1px solid #e6e6e6;
-    border-radius: 3px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 62px;
-    height: 32px;
-    margin-right: 5px;
+  border: 1px solid #e6e6e6;
+  border-radius: 3px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 62px;
+  height: 32px;
+  margin-right: 5px;
 }
 
 div.agency-badge span.agency-badge-logo img {
-    max-width: 100%;
-    max-height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+div.agency-badge span.agency-badge-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 133px;
 }
diff --git a/frontend/src/assets/css/checkout.css b/frontend/src/assets/css/checkout.css
@@ -98,6 +98,7 @@ div.booking div.booking-details div.booking-detail div.booking-detail-value {
 
 div.booking div.booking-details div.booking-detail div.booking-detail-value {
   color: rgb(0 0 0 / 55%);
+  word-break: break-word;
 }
 
 div.booking div.booking-details div.booking-detail span.booking-detail-title {
@@ -116,6 +117,10 @@ div.booking div.booking-details div.booking-detail div.booking-detail-value span
   line-height: 1em;
   white-space: nowrap;
   margin-left: 5px;
+  word-break: break-all;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 200px;
 }
 
 div.booking div.booking-details div.booking-detail div.booking-price {

diff --git a/frontend/src/assets/css/property-list.css b/frontend/src/assets/css/property-list.css
@@ -71,6 +71,12 @@ section.property-list article div.middle-panel div.name h2 {
   text-size-adjust: none;
   line-height: 1.3em;
   margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 section.property-list article div.middle-panel .property-info div.property-info-description {

diff --git a/frontend/src/assets/css/property.css b/frontend/src/assets/css/property.css
@@ -104,6 +104,12 @@ div.main div.property div.right-panel div.name h2 {
   text-size-adjust: none;
   line-height: 1.3em;
   margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 div.main div.property div.right-panel div.price {