Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add "create listings" for the admin page #9

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Add "create listings" for the admin page #9

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6045eb6
Add frontend for create listings in the admin page
jolynleow2301 Dec 14, 2024
406dad4
Update "create listings" in admin page
jolynleow2301 Dec 14, 2024
d8bfd29
Update "create listings" for admin page
jolynleow2301 Dec 15, 2024
231591f
Update changes to backend
jolynleow2301 Dec 26, 2024
5fddcc6
Merge branch 'main' of https://github.com/NUS-Fintech-Society/SD_ECom…
jolynleow2301 Feb 2, 2025
9537820
Update changes to client
jolynleow2301 Feb 2, 2025
44d6724
Update changes to UI for Create Listings page
jolynleow2301 Feb 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
357 changes: 357 additions & 0 deletions client/src/CreateListing.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,357 @@
.admin-container {
font-family: Arial, sans-serif;
padding: 20px;
}

.top-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

.logo {
font-size: 24px;
font-weight: bold;
}

.searchbar {
flex: 1;
margin: 0 20px;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}

.admin-name {
background-color: #f0f0f0;
padding: 8px 16px;
border-radius: 4px;
font-weight: bold;
}

.listings-container {
background-color: #D5FFFF;
padding: 20px;
border-radius: 8px;
height: 100%;
}

.listings-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
font-size: 20px;
}

.society-name {
background-color: #3b82f6;
color: white;
border: none;
padding: 10px 20px;
font-size: 20px;
}

.add-listing-button {
background-color: #a7f3d0;
color: black;
border: none;
padding: 10px 20px;
border-radius: 4px;
font-size: 18px;
cursor: pointer;
}

.listings-grid {
padding-top: 25px;
display: grid;
grid-template-columns: repeat(3, 1fr); /* Default: 3 per row */
gap: 16px;
width: 100%;
}

@media screen and (max-width: 1024px) {
.listings-grid {
grid-template-columns: repeat(2, 1fr); /* 2 per row on tablets */
}
}

@media screen and (max-width: 600px) {
.listings-grid {
grid-template-columns: 1fr; /* 1 per row on mobile */
}
}

/* Grid Layout for Empty Boxes */
.empty-boxes {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 columns */
gap: 1rem;
}

/* Individual Empty Box Styles */
.empty-box {
background: #e0e0e0;
aspect-ratio: 1 / 0.8; /* Maintains a square shape */
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
color: #777;
font-weight: bold;
text-transform: uppercase;
}

/* Listing Preview Image Styles */
.listing-preview-image {
width: 100%;
height: auto;
max-height: 150px;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.listing-box {
background: white;
border-radius: 8px;
padding: 1rem;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.listing-box:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.input-title,
.textarea-description {
display: block;
width: 100%;
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}

.textarea-description {
height: 400px;
}

.font-bold {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}

.font-semi-bold {
font-size: 20px;
font-weight: bold;
}

.upload-images-wrapper {
display: flex;
gap: 20px;
margin-top: 20px;
}

.preview-panel {
flex: 1;
background-color: #e0e7ff; /* Light blue */
padding: 20px;
border-radius: 10px;
}

.preview-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}

.preview-image {
max-width: 100%;
max-height: 200px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 8px;
}

.upload-panel {
flex: 1;
display: flex;
flex-direction: column;
gap: 20px;
}

.upload-section {
display: flex;
flex-direction: column;
}

.upload-button {
background-color: #f3f4f6;
border: 1px solid #ccc;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
}

.hidden-input {
display: none;
}

.image-preview-wrapper {
position: relative;
display: inline-block;
margin: 10px;
}

.delete-button {
position: absolute;
top: 5px;
right: 5px;
background-color: red;
color: white;
border: none;
padding: 5px 8px;
font-size: 12px;
cursor: pointer;
border-radius: 4px;
}

.delete-button:hover {
background-color: darkred;
}

.specifications-header {
display: flex;
flex-direction: row;
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
justify-content: space-around;
}

.specifications-container {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
}

.specifications-row {
display: flex;
gap: 10px;
align-items: center;
width: 100%;
}

.input-title {
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 4px;
flex: 1;
}

.new-input-row {
display: flex;
gap: 10px;
align-items: center;
margin-top: 16px;
}

.add-more-button {
background-color: #a7f3d0;
color: black;
border: none;
padding: 10px 20px;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}


.add-more-button-container {
display: flex;
justify-content: center;
margin-top: 15px;
}

.delivery-methods label {
display: block;
margin: 10px 0;
font-size: 18px;
}

.collection-info {
margin-top: 20px;
width: 100%;
}

.collection-info-input {
display: block;
width: 100%;
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
height: 100px;
}

.review-container {
display: flex;
flex-direction: column;
gap: 20px;
}

.images-preview {
display: flex;
gap: 20px;
}

.specifications-preview {
display: flex;
flex-direction: column;
gap: 10px;
}

.action-buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
}

.cancel-button {
background-color: #d1d5db;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}

.continue-button {
background-color: #3b82f6;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}

.error-message {
background-color: #f8d7da; /* Light red background */
color: #721c24; /* Dark red text */
border: 1px solid #f5c6cb; /* Light red border */
padding: 10px;
margin: 10px 0;
width: 20vw; /* Align to input and button widths */
border-radius: 5px; /* Rounded corners for error message */
text-align: center;
}
7 changes: 6 additions & 1 deletion client/src/components/Admin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import React from "react";
import CreateListing from "./CreateListing";

const Admin = () => {
return <div>ELEOS Admin Page</div>;
return (
<div>
<CreateListing />
</div>
);
};

export default Admin;
Loading