FE: fix pension top cards

add xxl to botstrap4
andreipradan · Feb 19, 2025 · 6430369 · 6430369
1 parent 54ea1d5
commit 6430369
Show file tree

Hide file tree

Showing 12 changed files with 661 additions and 627 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -11,7 +11,7 @@
     "@fullcalendar/react": "^6.1.8",
     "@mdi/font": "^7.4.47",
     "@reduxjs/toolkit": "^1.9.7",
-    "ace-builds": "^1.37.5",
+    "ace-builds": "^1.38.0",
     "axios": "^1.6.8",
     "bootstrap": "^4.6.2",
     "bs-custom-file-input": "^1.3.4",
@@ -40,7 +40,7 @@
     "react-slick": "^0.29.0",
     "react-toastify": "^9.1.3",
     "react-tooltip": "^5.26.3",
-    "sass": "^1.84.0",
+    "sass": "^1.85.0",
     "slick-carousel": "^1.8.1"
   },
   "scripts": {

diff --git a/frontend/src/app/App.scss b/frontend/src/app/App.scss
@@ -2,6 +2,36 @@
 
 /* === Plugin styles === */
 
+// Define the new xxl breakpoint for Bootstrap 4 (larger screens)
+// before we import bootstrap
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px // Add the new breakpoint for xxl
+);
+// Update container max-widths for the new breakpoint
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1320px // Add the container max-width for xxl
+);
+// Define a col-xxl grid class
+.col-xxl {
+  flex: 0 0 auto;
+  width: 100%;
+}
+@for $i from 1 through 12 {
+  .col-xxl-#{$i} {
+    flex: 0 0 auto;
+    width: (100 / 12) * $i + "%";
+  }
+}
+
 
 @import "~slick-carousel/slick/slick.css";
 @import "~slick-carousel/slick/slick-theme.css";

diff --git a/frontend/src/app/AppRoutes.js b/frontend/src/app/AppRoutes.js
@@ -7,10 +7,9 @@ import { useSelector } from "react-redux";
 const Dashboard = lazy(() => import('./dashboard/Dashboard'));
 const Bots = lazy(() => import('./bots/Bots'));
 const Commands = lazy(() => import('./commands/Commands'));
-const Crons = lazy(() => import('./commands/crons/Crons'));
+const Crons = lazy(() => import('./commands/Crons'));
 const Devices = lazy(() => import('./devices/Devices'));
 const Earthquakes = lazy(() => import('./earthquakes/Earthquakes'));
-const ExchangeRates = lazy(() => import ("./exchange-rates/ExchangeRates"));
 const ExpensesCar = lazy(() => import('./expenses/Car'));
 const ExpensesTravel = lazy(() => import('./expenses/Travel'));
 const ExpenseTravelGroups = lazy(() => import("./expenses/ExpenseGroups"));
@@ -20,6 +19,7 @@ const FinancesCreditDetails = lazy(() => import ("./finances/Credit/Details"));
 const FinancesCalculator = lazy(() => import ("./finances/Credit/Calculator"));
 const FinancesPayments = lazy(() => import ("./finances/Credit/Payments/Payments"));
 const FinancesTimetables = lazy(() => import ("./finances/Credit/Timetables/Timetables"));
+const FXRates = lazy(() => import ("./exchange-rates/ExchangeRates"));
 const InvestmentsBonds = lazy(() => import ("./finances/Investments/Bonds"));
 const InvestmentsCrypto = lazy(() => import('./finances/Investments/Crypto'));
 const InvestmentsDeposits = lazy(() => import ("./finances/Investments/Deposits"));
@@ -64,7 +64,6 @@ const AppRoutes = () => {
     <Suspense fallback={<Spinner/>}>
       <Switch>
         <Route exact path="/documentation/terms-and-conditions" component={ TermsAndConditions } />
-        <Route exact path="/exchange-rates" component={ ExchangeRates } />
         <Route exact path="/expenses/travel/groups" component={ ExpenseTravelGroups } />
         <Route exact path="/expenses/travel/my" component={ ExpensesTravel } />
         <Route exact path="/earthquakes" component={ Earthquakes } />
@@ -90,6 +89,7 @@ const AppRoutes = () => {
         {user?.is_staff && <Route exact path="/expenses/car" component={ ExpensesCar } />}
         {user?.is_staff && <Route exact path="/finances/accounts/transactions/:id?" component={ FinancesAccountsTransactions } />}
         {user?.is_staff && <Route exact path="/finances/accounts/categorize" component={ FinancesCategorize } />}
+        {user?.is_staff && <Route exact path="/fx-rates" component={ FXRates } />}
         {user?.is_staff && <Route exact path="/investments/bonds" component={ InvestmentsBonds } />}
         {user?.is_staff && <Route exact path="/investments/crypto" component={ InvestmentsCrypto } />}
         {user?.is_staff && <Route exact path="/investments/deposits" component={ InvestmentsDeposits } />}