styled card

SCCapstone · Apr 1, 2023 · c8d53de · c8d53de
1 parent 4561e4c
commit c8d53de
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 20 deletions.
diff --git a/delta_web/delta/db.sqlite3 b/delta_web/delta/db.sqlite3
diff --git a/delta_web/delta/frontend/src/components/home/NotificationData.js b/delta_web/delta/frontend/src/components/home/NotificationData.js
@@ -21,15 +21,24 @@ const NotificationData = (props) => {
   return (
     <div className="container">
       <div
-        className="row align-items-center border rounded mx-5 my-2 bg-white"
+        className="position-relative border rounded mx-5 my-2 bg-white p-3"
         style={{ height: "37vh" }}
       >
-        <div className="col-10 mr-3 px-5 pt-2">
-          <div className="text-truncate">{props.notif.title}</div>
-          <div className="small">{props.notif.text}</div>
-        </div>
-        <div className="col text-right text-center text-muted pt-1 pr-5">
-          {props.notif.formatted_date}
+        <div>
+          <div className="justify-content-between">
+            <h4>
+              {props.notif.title}
+            </h4>
+            <p>
+              {props.notif.formatted_date}
+            </p>
+          </div>
+          <p className="small">
+            {props.notif.text}
+          </p>
+          <button className="btn btn-outline-success position-absolute bottom-0 mb-3"
+            onClick={props.parentOnClick}>Got it!
+          </button>
         </div>
       </div>
     </div>

diff --git a/delta_web/delta/frontend/src/components/home/NotificationNews.js b/delta_web/delta/frontend/src/components/home/NotificationNews.js
@@ -31,10 +31,10 @@ const NotificationNews = (props) => {
 
   return (
     <div>
-      <NotificationData notif={props.notif} />
-      <div>
-        <button onClick={performRead}>Got it!</button>
-      </div>
+      <NotificationData 
+      notif={props.notif} 
+      parentOnClick={performRead}
+      />
     </div>
   );
 };

diff --git a/delta_web/delta/frontend/src/components/home/NotificationWhatsHot.js b/delta_web/delta/frontend/src/components/home/NotificationWhatsHot.js
@@ -30,12 +30,10 @@ const NotificationNews = (props) => {
   };
 
   return (
-    <div>
-      <NotificationData notif={props.notif} />
-      <div>
-        <button onClick={performRead}>Got it!</button>
-      </div>
-    </div>
+      <NotificationData 
+        notif={props.notif} 
+        parentOnClick = {performRead}
+      />
   );
 };
 

diff --git a/delta_web/delta/frontend/static/frontend/main.js b/delta_web/delta/frontend/static/frontend/main.js
diff --git a/...b/delta/static/users/lex/csvs/example.csv → ...2ug9t51mongst4vrlv5ub5gyxrxcbwhcckgpm.csv b/...b/delta/static/users/lex/csvs/example.csv → ...2ug9t51mongst4vrlv5ub5gyxrxcbwhcckgpm.csv