last min change before demo

Jottr42 · Dec 12, 2022 · d29d3e7 · d29d3e7
1 parent 40e3a80
commit d29d3e7
Show file tree

Hide file tree

Showing 13 changed files with 96 additions and 29 deletions.
diff --git a/client/components/App.module.css b/client/components/App.module.css
@@ -1,5 +1,6 @@
 body {
   background: #262626;
-  background-image: url('./worldBackground.png');
-  background-size: contain;
+  /* background-image: url('./worldBackground.png'); */
+  background-size: cover;
+  background-repeat: no-repeat;
 }
diff --git a/client/components/UI/Navbar.js b/client/components/UI/Navbar.js
@@ -24,7 +24,7 @@ const Navbar = (props) => {
         )}
         {props.user.user_id && (
           <Button className={classes.navbarBtn}>
-            <Link to="/login" className={classes.btnText}>
+            <Link to="/" className={classes.btnText}>
               Log out
             </Link>
           </Button>

diff --git a/client/components/UI/Navbar.module.scss b/client/components/UI/Navbar.module.scss
@@ -10,14 +10,15 @@ nav {
 }
 
 .navbarBtn {
-  // height: 50px;
-  // width: 130px;
+  height: 50px;
+  width: 130px;
   // font-size: 20px;
   // border-radius: 3px;
   // box-sizing: border-box;
   // background: rgba(26, 26, 26, 0.65);
   // box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.3);
   // border-radius: 20px;
+  background: rgba(26, 26, 26, 0.65);
   border: 1px solid white;
 }
 
@@ -32,7 +33,7 @@ nav {
 }
 
 .appTitle {
-  font-size: 16px;
+  font-size: 36px;
   position: absolute;
   left: 30;
   color: white;

diff --git a/client/components/landingpage-components/LandingPage.js b/client/components/landingpage-components/LandingPage.js
@@ -14,10 +14,11 @@ import LoginForm from './LoginForm';
 const LandingPage = (props) => {
   return (
     <div id="landingPage">
+      <h1>MAP SCHMAAP</h1>
       <div className="trapdoor">
-        <div className="top door">ENTER THE SCHMAAPMAP</div>
+        <div className="top door"></div>
         {/* <Navbar className="navbar" user={props.user} /> */}
-        <LoginForm onLogin={props.onLogin} />
+        <LoginForm onLogin={props.onLogin} className={'loginFormOnLanding'} />
 
         <div className="bottom door"></div>
       </div>

diff --git a/client/components/landingpage-components/LandingPage.scss b/client/components/landingpage-components/LandingPage.scss
@@ -1,5 +1,6 @@
 #landingPage {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   margin-top: 20px;
@@ -8,11 +9,11 @@
 .trapdoor {
   transform: translateZ(0px);
   -webkit-font-smoothing: antialiased;
-  top: 20%;
-  left: 20%;
-  margin-left: -100px;
-  margin-top: -25px;
-  width: 600px;
+  // top: 20%;
+  // left: 20%;
+  // margin-left: -100px;
+  // margin-top: -25px;
+  width: 800px;
   height: 800px;
 
   box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
@@ -122,3 +123,7 @@
     left: 52%;
   }
 }
+
+.loginFormOnLanding {
+  padding-top: 100px;
+}
diff --git a/client/components/landingpage-components/LoginForm.module.css b/client/components/landingpage-components/LoginForm.module.css
@@ -1,12 +1,13 @@
 .formWrapper {
   /* border: 1px solid black; */
-  width: 80%;
-  height: 450px;
-  margin: auto;
+  width: 100%;
+  height: 800px;
+  margin: 0;
+  /* margin: 50px; */
   position: relative;
 
   background: #262626;
-  border: 1px solid #868686;
+  /* border: 1px solid #868686; */
   /* box-shadow: 0px 4px 70px rgba(0, 0, 0, 0.15); */
   border-radius: 40px;
   display: flex;
@@ -75,7 +76,7 @@ h1 {
 
 .loginButton:hover {
   background: rgba(26, 26, 26, 0.65);
-  border: 1px solid white;
+  /* border: 1px solid white; */
 }
 
 #landingPage {

diff --git a/client/components/landingpage-components/bottomdoor.png b/client/components/landingpage-components/bottomdoor.png
diff --git a/client/components/mainpage-components/MainPage.module.css b/client/components/mainpage-components/MainPage.module.css
@@ -1,7 +1,7 @@
 .mapContentWrapper {
   display: flex;
   background: #262626;
-  border: 1px solid #868686;
+  /* border: 1px solid #868686; */
   box-shadow: 0px 4px 70px rgba(0, 0, 0, 0.15);
   border-radius: 40px;
   /* min-height: 1024px; */

diff --git a/client/components/mainpage-components/Map.js b/client/components/mainpage-components/Map.js
@@ -10,7 +10,7 @@ import classes from './Map.module.css';
 import Card from '../UI/Card';
 
 const containerStyle = {
-  width: '70vw',
+  width: '65vw',
   height: '100%',
 };
 
@@ -35,7 +35,7 @@ function MyComponent(props) {
   const onLoad = useCallback(function callback(map) {
     // This is just an example of getting and using the map instance!!! don't just blindly copy!
     const bounds = new window.google.maps.LatLngBounds(props.center);
-    if (!activeMarker) {
+    if (props.user.pins[0].pin_id) {
       props.user.pins.forEach(({ position }) => bounds.extend(position));
     }
     map.fitBounds(bounds);
@@ -88,6 +88,7 @@ function MyComponent(props) {
     console.log('latitide = ', e.latLng.lat());
     console.log('longitude = ', e.latLng.lng());
   };
+  console.log(props.user);
 
   return isLoaded ? (
     <div className={classes.mapWrapper}>

diff --git a/client/components/mainpage-components/Map.module.css b/client/components/mainpage-components/Map.module.css
@@ -1,18 +1,23 @@
 .mapWrapper {
   /* border: 2px blue solid; */
-  border: 1px solid #4e4d4d;
+  /* border: 1px solid #4e4d4d; */
   min-height: 800px;
   /* min-width: 50%; */
-  /* padding: 10px; */
+  padding: 10px;
   /* margin: 20px; */
 }
 
 .infowindow {
   background-color: blanchedalmond;
   padding: 10px 4px;
-  border: 2px solid black;
+  /* border: 2px solid black; */
   min-width: 100px;
   min-height: 100px;
+  /* color: black; */
+}
+
+.infowindow p {
+  color: black;
 }
 
 /* .gm-style .gm-style-iw-c {

diff --git a/client/components/mainpage-components/PinList.js b/client/components/mainpage-components/PinList.js
@@ -5,15 +5,19 @@ import classes from './PinList.module.css';
 const PinList = (props) => {
   const pinListArr = props.user.pins.map((pin, i) => {
     return (
-      <li>
-        <Button onClick={props.setCurrentMapCenterCoords} key={i * 100}>
+      <li key={i * 100} className={classes.pinListItem}>
+        <p
+          onClick={props.setCurrentMapCenterCoords}
+          className={classes.pinName}
+        >
           {pin.name}
-        </Button>
+        </p>
+        <p className={classes.pinDescription}>{pin.description}</p>
       </li>
     );
   });
 
-  return <ul>{pinListArr}</ul>;
+  return <ul className={classes.pinListContainer}>{pinListArr}</ul>;
 };
 
 export default PinList;
diff --git a/client/components/mainpage-components/PinList.module.css b/client/components/mainpage-components/PinList.module.css
@@ -0,0 +1,47 @@
+p {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  color: white;
+}
+
+.pinListContainer {
+  list-style-type: none;
+  width: 300px;
+  height: '100%';
+  padding-right: 20px;
+  height: 800px;
+  overflow: auto;
+}
+
+.pinListItem {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  /* justify-content: space-between; */
+  /* border: 1px solid white; */
+  margin-bottom: 10px;
+  /* background: rgba(26, 26, 26, 0.65); */
+  background: #6cc3c5;
+  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+  border-radius: 20px;
+}
+
+.pinName {
+  /* padding-right: 10px; */
+  /* margin: ; */
+  font-size: 16px;
+  font-weight: 600;
+  padding: 10px 10px 0px 10px;
+  margin: 0;
+}
+
+.pinDescription {
+  /* text-align: right; */
+  font-size: 14px;
+  font-weight: 300;
+  /* margin: 0; */
+  margin: 0;
+  padding: 10px;
+}
diff --git a/server/controllers/controller.js b/server/controllers/controller.js
@@ -82,7 +82,8 @@ sMController.createUser = (req, res, next) => {
 //--------------------GET---USER and PINS MEGA QUERY---------------------------------------------------------
 sMController.getUser = (req, res, next) => {
   const getUserQuery = {
-    text: 'SELECT * FROM users u LEFT JOIN pins p ON u.user_id = p.user_id WHERE u.user_id = $1',
+    text: 'SELECT u.*, p.longitude,p.latitude, p.description, p.name, p.pin_id FROM users u LEFT JOIN pins p ON u.user_id = p.user_id WHERE u.user_id = $1',
+    // text: 'SELECT u.*, p.longitude,p.latitude, p.description, p.name, p.pin_id',
     values: [req.body.user_id || res.locals.user_id],
   };