From 4d26836fb0e33240c561b7ef14898d1dfcc9d4a4 Mon Sep 17 00:00:00 2001
From: Sandesh <sguru003@campus.goldsmiths.ac.uk>
Date: Mon, 10 Apr 2023 21:29:59 +0100
Subject: [PATCH] all listed items in a container
---
public/main.css | 99 ++++++++++++++++++++++++++++++++++++++++++++
views/about.ejs | 1 +
views/correct.ejs | 1 +
views/incorrect.ejs | 1 +
views/index.ejs | 3 +-
views/itemlist.ejs | 1 +
views/itemlisted.ejs | 27 +++++++-----
views/loggedout.ejs | 1 +
views/login.ejs | 1 +
views/register.ejs | 1 +
views/registered.ejs | 1 +
views/search.ejs | 1 +
views/stock.ejs | 1 +
13 files changed, 127 insertions(+), 12 deletions(-)
diff --git a/public/main.css b/public/main.css
index 0e4b42d..7f43f7d 100644
--- a/public/main.css
+++ b/public/main.css
@@ -209,4 +209,103 @@ p{
+/* Listing page css */
+
+#items {
+ text-align: center;
+ padding-top: 20px;
+ padding-left: 20px;
+
+
+}
+
+#items .pro-container{
+ display: flex;
+ justify-content: space-between;
+ padding-top: 20px;
+ flex-wrap: wrap;
+}
+
+#items .pro{
+ width: 13%;
+ min-width: 250px;
+ padding: 0px 12px;
+ border: 1px solid #d4cadf;
+ border-radius: 25px;
+ cursor: pointer;
+ box-shadow: 20px 20px 30px rgb(0, 0,0,0.02 );
+ transition: 0.2s ease;
+ position: relative;
+}
+
+#items .pro:hover{
+ box-shadow: 20px 20px 30px rgb(0, 0,0,0.06 );
+
+}
+
+#items .pro .listing{
+ width: 100%;
+ border-radius: 20px;
+
+}
+
+#items .pro .des{
+ text-align: start;
+ padding: 10px 0;
+}
+
+#items .pro.des.spam{
+ color: #606063;
+ font-size: 12px;
+}
+
+
+#items .pro2{
+ width: 13%;
+ min-width: 250px;
+ padding: 0px 12px;
+ border: 1px solid #d4cadf;
+ border-radius: 25px;
+ cursor: pointer;
+ box-shadow: 20px 20px 30px rgb(0, 0,0,0.02 );
+ transition: 0.2s ease;
+ position: relative;
+}
+
+#items .pro:hover{
+ box-shadow: 20px 20px 30px rgb(0, 0,0,0.06 );
+
+}
+
+#items .pro .listing{
+ width: 100%;
+ border-radius: 20px;
+
+}
+
+#items .pro .des{
+ text-align: start;
+ padding: 10px 0;
+}
+
+#items .pro.des.spam{
+ color: #606063;
+ font-size: 12px;
+}
+
+
+
+
+
+
+
+
+@media (max-width: 799px ){
+
+}
+
+
+
+
+
diff --git a/views/about.ejs b/views/about.ejs
index abd895c..eaa9f60 100644
--- a/views/about.ejs
+++ b/views/about.ejs
@@ -3,6 +3,7 @@
<head>
<title><%=shopName%></title>
<link rel="stylesheet" type="text/css" href="main.css" />
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
</head>
<body>
diff --git a/views/correct.ejs b/views/correct.ejs
index 031fbf9..6cd81cf 100644
--- a/views/correct.ejs
+++ b/views/correct.ejs
@@ -3,6 +3,7 @@
<head>
<title>Correct Password and Username <%=shopName%></title>
<link rel="stylesheet" type="text/css" href="main.css" />
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
</head>
<body>
<h1> <%=shopName%></h1>
diff --git a/views/incorrect.ejs b/views/incorrect.ejs
index 9bcffa9..215d4e9 100644
--- a/views/incorrect.ejs
+++ b/views/incorrect.ejs
@@ -3,6 +3,7 @@
<head>
<title>Incorrect Username or Password <%=shopName%></title>
<link rel="stylesheet" type="text/css" href="main.css" />
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
</head>
<body>
<h1>Error <%=shopName%></h1>
diff --git a/views/index.ejs b/views/index.ejs
index dff6b66..6c901b7 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -3,6 +3,7 @@
<head>
<title><%=shopName%></title>
<link rel="stylesheet" type="text/css" href="main.css" />
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
</head>
<body>
@@ -47,7 +48,7 @@
</div>
<div class = "feature-box">
- <img src = "/public/socialmedia.png" class = "f3_logo" alt="">
+ <a href="/."><img src = "/public/socialmedia.png" class = "f3_logo" alt=""></a>
<h6> Follow us </h6>
</div>
<div class = "feature-box">
diff --git a/views/itemlist.ejs b/views/itemlist.ejs
index 40c9d11..3ecb1c4 100644
--- a/views/itemlist.ejs
+++ b/views/itemlist.ejs
@@ -3,6 +3,7 @@
<head>
<title> List on <%=shopName%></title>
<link rel="stylesheet" type="text/css" href="main.css" />
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
</head>
<body>
<h1>List on <%=shopName%></h1>
diff --git a/views/itemlisted.ejs b/views/itemlisted.ejs
index 8e7e3a2..7334486 100644
--- a/views/itemlisted.ejs
+++ b/views/itemlisted.ejs
@@ -3,6 +3,7 @@
<head>
<title><%=shopName%></title>
<link rel="stylesheet" type="text/css" href="main.css" />
+ <script src="https://kit.fontawesome.com/ad1bd830b9.js" crossorigin="anonymous"></script>
</head>
<body>
@@ -18,17 +19,21 @@
</div>
</section>
- <section id = "items">
- <%listingAdded.forEach(function(list){ %>
- <ul>
- <li><%=list.title%></li>
- <li><%=list.name%></li>
- <li><%=list.price%></li>
- <li><%=list.condi%></li>
- <li><%=list.username%></li>
- <li> <img alt=" Embedded Image" src = "data:image/png;base64,<%=list.img%>"> </li>
- </ul>
- <% }) %>
+ <section id = "items" class="section-p2">
+ <%listingAdded.forEach(function(list){%>
+ <div class = "pro-container">
+ <div class = "pro">
+ <img alt=" Embedded Image" src = "data:image/png;base64,<%=list.img%>" class="listing">
+ <div class = "des">
+ <span><%=list.username%></span>
+ <h5><%=list.title%></h5>
+ <h5><%=list.condi%></h5>
+ <h4><%=list.price%></h4>
+ </div>
+ <a href="#"> <i class="fa-sharp fa-solid fa-cart-shopping fa-beat"></i></i></i></a>
+ </div>
+ </div>
+ <% })%>
</section>
diff --git a/views/loggedout.ejs b/views/loggedout.ejs
index db6ac1b..615e556 100644
--- a/views/loggedout.ejs
+++ b/views/loggedout.ejs
@@ -3,6 +3,7 @@
<head>
<title>Logged out</title>
<link rel="stylesheet" type="text/css" href="main.css" />
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
</head>
<body>
<h1> <%=shopName%> </h1>
diff --git a/views/login.ejs b/views/login.ejs
index d4f43f4..194aa64 100644
--- a/views/login.ejs
+++ b/views/login.ejs
@@ -3,6 +3,7 @@
<head>
<title><%=shopName%></title>
<link rel="stylesheet" type="text/css" href="main.css" />
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
</head>
<body>
diff --git a/views/register.ejs b/views/register.ejs
index 3401827..fabd0ef 100644
--- a/views/register.ejs
+++ b/views/register.ejs
@@ -3,6 +3,7 @@
<head>
<title>Register for <%=shopName%></title>
<link rel="stylesheet" type="text/css" href="main.css" />
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
</head>
<body>
<h1>Register for <%=shopName%></h1>
diff --git a/views/registered.ejs b/views/registered.ejs
index 309930e..c2aea3a 100644
--- a/views/registered.ejs
+++ b/views/registered.ejs
@@ -3,6 +3,7 @@
<head>
<title>Berties Books</title>
<link rel="stylesheet" type="text/css" href="main.css" />
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
</head>
<body>
<p>Hello <%=newUser[1]%> <%=newUser[2]%>, you are now registered! We will send an email
diff --git a/views/search.ejs b/views/search.ejs
index 823097b..1491b32 100644
--- a/views/search.ejs
+++ b/views/search.ejs
@@ -3,6 +3,7 @@
<head>
<title>Search <%=shopName%></title>
<link rel="stylesheet" type="text/css" href="main.css" />
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
</head>
<body>
<h1>Search <%=shopName%></h1>
diff --git a/views/stock.ejs b/views/stock.ejs
index 52c0e6b..790f06f 100644
--- a/views/stock.ejs
+++ b/views/stock.ejs
@@ -3,6 +3,7 @@
<head>
<title><%=shopName%></title>
<link rel="stylesheet" type="text/css" href="main.css" />
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
</head>
<body>
--
GitLab