Flex display

TPH777 · Jun 28, 2024 · e26803d · e26803d
1 parent ad87138
commit e26803d
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 115 deletions.
diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache
@@ -1,5 +1,7 @@
-404.html,1717207731528,762bf484ba67404bd1a3b181546ea28d60dfddf18e9dd4795d8d25bcf3c1a890
 vite.svg,1716914780618,699a02e0e68a579f687d364bbbe7633161244f35af068220aee37b1b33dfb3c7
-index.html,1717210277198,eca7038cb7303940de5f3973246db1b049974db2b27b8ea8677741ee4f9c76f1
-assets/index-4JzX1r6f.css,1717210277198,677896472ab21ce41ac0d3d94196590e4628c8cb55dae9d9dee107dc0a631749
-assets/index-0TWs2CsQ.js,1717210277199,10b7ac07729dbe1ef12e7ece17e7304bfc82bf655eac22c0ab2c2f5094a30716
+index.html,1719471505176,fdc0ad84ad5930c77fc6b52f4ec8829bb1159473d56c0d64ebf32320017c20e7
+404.html,1717207731528,762bf484ba67404bd1a3b181546ea28d60dfddf18e9dd4795d8d25bcf3c1a890
+assets\index-DQWl0DrG.js,1719467668471,ba00c8ebbd7dc75e89bba9f740385d5d5a51abaaff5e599637431290b48aeabd
+assets\index-Ckv_zx5_.css,1719467668470,82ec390f2b57074207b39c864d260f2c8eaf87af296702a05d597c05dd4f7a0d
+assets\food-saviour-logo-4TGuSXni.png,1719467668470,3c9dafa629342a0dc4938289f8d747e4da560ce3caf7e580553faea1f13e4fc4
+assets\background-EuKRPZyz.jpg,1719467668471,1ac42b76fb6eb1964103673e256f552c3b2be6c126db00b76bcd1e0223614573
diff --git a/.firebase/hosting.cHVibGlj.cache b/.firebase/hosting.cHVibGlj.cache
diff --git a/.github/workflows/firebase-hosting-merge.yml b/.github/workflows/firebase-hosting-merge.yml
@@ -11,6 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - run: npm ci && npm run build
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: ${{ secrets.GITHUB_TOKEN }}

diff --git a/.github/workflows/firebase-hosting-pull-request.yml b/.github/workflows/firebase-hosting-pull-request.yml
@@ -13,6 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - run: npm ci && npm run build
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: ${{ secrets.GITHUB_TOKEN }}

diff --git a/public/index.html b/public/index.html
@@ -1,89 +1,14 @@
-<!DOCTYPE html>
-<html>
+<!doctype html>
+<html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Welcome to Firebase Hosting</title>
-
-    <!-- update the version number as needed -->
-    <script defer src="/__/firebase/10.12.2/firebase-app-compat.js"></script>
-    <!-- include only the Firebase features as you need -->
-    <script defer src="/__/firebase/10.12.2/firebase-auth-compat.js"></script>
-    <script defer src="/__/firebase/10.12.2/firebase-database-compat.js"></script>
-    <script defer src="/__/firebase/10.12.2/firebase-firestore-compat.js"></script>
-    <script defer src="/__/firebase/10.12.2/firebase-functions-compat.js"></script>
-    <script defer src="/__/firebase/10.12.2/firebase-messaging-compat.js"></script>
-    <script defer src="/__/firebase/10.12.2/firebase-storage-compat.js"></script>
-    <script defer src="/__/firebase/10.12.2/firebase-analytics-compat.js"></script>
-    <script defer src="/__/firebase/10.12.2/firebase-remote-config-compat.js"></script>
-    <script defer src="/__/firebase/10.12.2/firebase-performance-compat.js"></script>
-    <!-- 
-      initialize the SDK after all desired features are loaded, set useEmulator to false
-      to avoid connecting the SDK to running emulators.
-    -->
-    <script defer src="/__/firebase/init.js?useEmulator=true"></script>
-
-    <style media="screen">
-      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
-      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
-      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
-      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
-      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
-      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
-      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
-      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
-      @media (max-width: 600px) {
-        body, #message { margin-top: 0; background: white; box-shadow: none; }
-        body { border-top: 16px solid #ffa100; }
-      }
-    </style>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image" href=/assets/food-saviour-logo-4TGuSXni.png />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Food Saviour</title>
+    <script type="module" crossorigin src="/assets/index-BfGF3NRp.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-Ckv_zx5_.css">
   </head>
   <body>
-    <div id="message">
-      <h2>Welcome</h2>
-      <h1>Firebase Hosting Setup Complete</h1>
-      <p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
-      <a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a>
-    </div>
-    <p id="load">Firebase SDK Loading&hellip;</p>
-
-    <script>
-      document.addEventListener('DOMContentLoaded', function() {
-        const loadEl = document.querySelector('#load');
-        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
-        // // The Firebase SDK is initialized and available here!
-        //
-        // firebase.auth().onAuthStateChanged(user => { });
-        // firebase.database().ref('/path/to/ref').on('value', snapshot => { });
-        // firebase.firestore().doc('/foo/bar').get().then(() => { });
-        // firebase.functions().httpsCallable('yourFunction')().then(() => { });
-        // firebase.messaging().requestPermission().then(() => { });
-        // firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
-        // firebase.analytics(); // call to activate
-        // firebase.analytics().logEvent('tutorial_completed');
-        // firebase.performance(); // call to activate
-        //
-        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
-
-        try {
-          let app = firebase.app();
-          let features = [
-            'auth', 
-            'database', 
-            'firestore',
-            'functions',
-            'messaging', 
-            'storage', 
-            'analytics', 
-            'remoteConfig',
-            'performance',
-          ].filter(feature => typeof app[feature] === 'function');
-          loadEl.textContent = `Firebase SDK loaded with ${features.join(', ')}`;
-        } catch (e) {
-          console.error(e);
-          loadEl.textContent = 'Error loading the Firebase SDK, check the console.';
-        }
-      });
-    </script>
+    <div id="root"></div>
   </body>
 </html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,7 +5,6 @@ import { LoginPage } from "./pages/Login";
 import { Layout } from "./Layout";
 import { RegisterPage } from "./pages/Register";
 import { Dashboard } from "./pages/Dashboard";
-import { TestPage } from "./pages/test";
 
 function App() {
   return (
@@ -16,7 +15,6 @@ function App() {
           <Route path="/login" element={<LoginPage />} />
           <Route path="/dashboard" element={<Dashboard />} />
           <Route path="/register" element={<RegisterPage />} />
-          <Route path="/test" element={<TestPage />} />
         </Route>
       </Routes>
     </Router>

diff --git a/src/components/Cards.tsx b/src/components/Cards.tsx
@@ -22,7 +22,7 @@ export const Cards = ({
               food.userId == user.uid && (
                 <Col key={index}>
                   <Card
-                    style={{ width: "19rem" }}
+                    className="flex"
                     key={food.id}
                     bg={food.post ? "success" : "secondary"}
                   >

diff --git a/src/components/Search.tsx b/src/components/Search.tsx
@@ -26,7 +26,7 @@ export const Search = ({
     <>
       <Form className="mb-4">
         <Row>
-          <Col xs={8}>
+          <Col className="flex">
             <Form.Control
               type="text"
               className="searchTerm"

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -83,7 +83,7 @@ export function Home() {
         <Row md={4} className="g-4">
           {searchFoodList.map((food, index) => (
             <Col key={index}>
-              <Card style={{ width: "18rem" }} key={food.id}>
+              <Card className="flex" key={food.id}>
                 <Card.Img variant="top" src={food.imageURL} />
                 <Card.Body>
                   <Card.Title>{food.name}</Card.Title>

diff --git a/src/pages/test.tsx b/src/pages/test.tsx