Merge pull request shoel-uddin#61 from shoel-uddin/josh_branch

grid nav text resposive
Stormy110 · Jan 15, 2021 · 6d035d6 · 6d035d6
2 parents 3a6e807 + 8a6774e
commit 6d035d6
Show file tree

Hide file tree

Showing 9 changed files with 122 additions and 29 deletions.
diff --git a/public/images/mariobackground.jpg b/public/images/mariobackground.jpg
diff --git a/public/images/mariohd.jpg b/public/images/mariohd.jpg
diff --git a/public/scripts/main.js b/public/scripts/main.js
@@ -7,3 +7,6 @@ fetch("/signup", {
     console.log("You have an error");
     console.log(err);
   });
+
+
+
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
@@ -42,15 +42,9 @@ li {
 
 /* this is to make the image div not looked stretched 
 *************************************************/
-/* .img-holder {
-  height: 300px;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
 
-.postDiv {
+
+/* .postDiv {
   display: grid;
   height: auto;
   width: 100%;
@@ -61,7 +55,66 @@ li {
 /* ********************************** */
 
 
-/* TESTING BOOTSTRAP HERE */
 
 
+ul {
+  list-style-type: none;
+}
+
+body {
+  background-color: #f5f5f5;
+}
+
+  .grid-container {
+  display: grid;
+  grid-template-columns: 45% 45%;
+  grid-row:  1fr 1fr 1fr ;
+}
+
+  .grid-item-3{
+  background-color: #362b2b74;
+
+  padding: 5%;
+}
+
+  .grid-item-3 img{
+  justify-items: center;
+  max-height: 250px;
+
+}
+  .img-holder {
+  height: 250px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+}
+
+
+  /* .grid-item-3 img{
+  justify-items: center;
+  max-height: 250px;
+}
+  .img-holder {
+  height: 250px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+ */
+
+
+
+
+/*TING BOOTSTRAP HERE */
+@media all and (max-width: 1080px){
+
+.grid-container {
+  display: grid;
+  grid-template-columns: 1fr;
+
+}
 
+}
diff --git a/templates/loginPage.html b/templates/loginPage.html
@@ -1,4 +1,4 @@
-<!-- ${header}
+<!-- 
 <ul class="topnav">
   <li><a href="/">Home</a></li>
   <li><a href="/about">About</a></li>
@@ -22,7 +22,7 @@ <h1 align="center">Welcome Please Sign In To Your Gamer's Account</h1>
 <div align="center">
   <p>If you need to Sign Up Please Click <a href="/signup">HERE</a></p>
 </div>
-${footer} -->
+-->
 <!-- TRYING BOOT STRAP HERE -->
 
 <!doctype html>

diff --git a/templates/members.html b/templates/members.html
@@ -1,20 +1,34 @@
 ${header}
-<ul class="topnav">
+
+<!-- <ul class="topnav">
   <li><a href="/members">Home</a></li>
   <li><a href="/members/about">About</a></li>
   <li><a href="/members/contact">Contact</a></li>
   <li><a href="/members/logout">Logout</a></li>
-</ul>
-<h1>Welcome to the members page ${displayname}</h1>
-
-<a href="/members/create"><button>ADD POST</button></a>
-<a href="/members/profile/${id}"><button>VIEW PROFILE</button></a>
-<a href="/members/search"><button>SEARCH</button></a>
+</ul> -->
+<!-- delete this -->
+<div class="container px-4">
+  <h1>Welcome to the members page ${displayname}</h1>
+  <a href="/members/create"><button>ADD POST</button></a>
+  <a href="/members/profile/${id}"><button>VIEW PROFILE</button></a>
+  <a href="/members/search"><button>SEARCH</button></a>
+    <div class="row gx-5">
+      <div class="col">
+        <div class="p-3 border"></div>
+       </div>
+
+       <div class="col">
+         <div class="p-3 border"></div>
+       </div>
+
+    </div>
+</div>
+<!--  delete this -->
 <br />
 <br />
-<ul>
+<ul class="grid-container">
   ${posts.map(p => { return `
-  <li>
+  <li class="grid-item-3 content">
     <div class="postDiv">
       <h2>${p.title}</h2>
       <a href="/members/profile/${p.userid}">
@@ -25,9 +39,11 @@ <h3>${p.User.displayname}</h3>
         <h3>${p.Game == null ? "" : p.Game.title}</h3>
       </a>
       <br>
-      <div class="img-holder">
-        ${p.media.includes("/uploads/media/") ? `<img src="${p.media}" alt="${p.User.displayname}'s image" />`:'' }
-      </div>
+
+
+        ${p.media.includes("/uploads/media/") ? `<div class="img-holder"><img src="${p.media}" class="image fit" alt="${p.User.displayname}'s image" />`:'' }
+
+     </div>
       <p>${p.content}</p>
       <a href="/members/post/${p.id}/comment"><button>ADD COMMENT</button></a>
 

diff --git a/templates/partials/footer.html b/templates/partials/footer.html
@@ -1,2 +1,10 @@
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
+
+
+   document.addEventListener('DOMContentLoaded', () => {
+      const slide = document.querySelectorAll('.sidenav');
+      M.Sidenav.init(slide, {});
+</script>
 </body>
 </html>
diff --git a/templates/partials/header.html b/templates/partials/header.html
@@ -2,13 +2,26 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <meta http-equiv="Content-Security-Policy" content="default-src *;
    img-src * 'self' data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
    style-src  'self' 'unsafe-inline' *">
-    <link rel="stylesheet" href="/stylesheets/style.css">
     <link rel="icon" href="/images/mushroom.png" type="image/png">
+    <link rel="stylesheet" href="/stylesheets/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
     <title> Gamer's Paradise </title>
 </head>
+<nav>
+    <div class="nav-wrapper indigo lighten-1">
+      <a href="/members" class="brand-logo">Gamers Paradise</a>
+      <ul id="nav-mobile" class="right hide-on-med-and-down">
+        <li><a href="/members">Home</a></li>
+        <li><a href="/members/about">About Us!</a></li>
+        <li><a href="/members/contact">Content</a></li>
+        <li><a href="/members/logout">Logout</a></li>
+      </ul>
+    </div>
+  </nav>
+
 <body>
 
diff --git a/templates/signUpPage.html b/templates/signUpPage.html
@@ -1,4 +1,4 @@
-<!-- ${header}
+<!-- 
 <ul class="topnav">
   <li><a href="/">Home</a></li>
   <li><a href="/about">About</a></li>
@@ -27,7 +27,7 @@ <h1 align="center">Welcome Please Sign Up for Your Gamer's Account</h1>
 </div>
 
 <!-- <script src="/scripts/main.js"></script> -->
-${footer} -->
+
 
 <!-- testing here boot strap -->
 
@@ -88,8 +88,8 @@ <h1 class="h3 mb-3 fw-normal">Sign Up Here</h1>
     <label for="inputEmail" class="visually-hidden">Email address</label>
     <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required>
 
-    <label for="inputEmail" class="visually-hidden">Email address</label>
-    <input type="email" name="name" id="inputEmail" class="form-control" placeholder="Your name" required>
+    <label for="inputEmail" class="visually-hidden">name</label>
+    <input type="name" name="name" id="inputEmail" class="form-control" placeholder="Your name" required>
 
     <button class="w-100 btn btn-lg btn-primary" type="submit" value="Login">Sign Up</button>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,3 +7,6 @@ fetch("/signup", {
		console.log("You have an error");
		console.log(err);
		});