Skip to content

Boodle
Boodle
Commit a0a5b25b authored by Felizia Tiburcio's avatar Felizia Tiburcio
Browse files
Options

cleaner frontend skeleton

parent 707af165
Hide whitespace changes
Inline Side-by-side
Showing with 334 additions and 253 deletions
boodlesite/static/css/styles.css
View file @ a0a5b25b
html {
scroll-behavior: smooth;
}
body { body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0 auto; margin: 0 auto;
height: 100%; height: 100%;
font-family: Archivo;
font-size: 11pt; font-size: 11pt;
color: #3d3838; color: #3d3838;
} }
...@@ -19,12 +24,9 @@ nav { ...@@ -19,12 +24,9 @@ nav {
width: 100%; width: 100%;
transition: all 0.5s; transition: all 0.5s;
position: relative; position: relative;
z-index: 1; display: flex;
} justify-content: flex-end;
padding: 8px 16px;
.fixed-nav nav {
position: fixed;
box-shadow 0 5px black;
} }
nav ul { nav ul {
...@@ -32,6 +34,8 @@ nav ul { ...@@ -32,6 +34,8 @@ nav ul {
padding: 0; padding: 0;
list-style: none; list-style: none;
display: flex; display: flex;
flex: 0 1 650px;
justify-content: space-evenly;
} }
nav li { nav li {
...@@ -65,43 +69,69 @@ nav a { ...@@ -65,43 +69,69 @@ nav a {
/* nav bar end */ /* nav bar end */
.footer-basic { .footer {
background-color: black; background-color: black;
color: #f8edeb; color: #f8edeb;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 0rem 1rem;
} }
.copyright { .footer .copyright {
flex: 0 1 800px; flex: 0 1 800px;
padding: 8px 24px; padding: 1rem;
}
/* carousel */
.carousel-item {
position: relative !important;
}
.carousel-content {
position: absolute;
top: 40%;
left: 60%;
transform: translate(0%, -20%);
z-index: 20;
color: black;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
#btn-shop-now{
border-radius: 5%;
background-color:white;
padding: 0.5rem 1rem;
} }
/* homepage about section */ /* homepage about section */
.about-image {
display: flex; @media(max-width:768px) {
height: 300px;
width: 200px; .about-right {padding: 2rem 4rem; text-align:center;}
padding: 40px 1px 40px 40px;
/*top right bottom left*/
} }
.about-text { .container-about {padding:2rem;}
display: flex; .about-left {
padding: 40px 0px 40px 100px; display:flex; justify-content: center;
}
.about-left img {width:420px; height:420px; object-fit: cover; border-radius: 50%;}
.about-right {display:flex; align-items: center; padding: 2rem 4rem;
} }
.text {
justify-content: flex-end; .about-text {background-color: #f0f0f0; box-shadow:1rem 1rem #333fcd; padding:1rem 2rem;}
text-align: right; .about-text p { font-size: 18px; }
font-size: 20px;
#btn-read-more {
border-radius: 5%;
background-color:rgb(255, 255, 255);
padding:1rem;
} }
/* homepage happening now */ /* homepage happening now */
.title-container { .header-container {
display: flex; display: flex;
padding: 8px 32px; padding: 1rem;
justify-content: center; justify-content: center;
} }
...@@ -117,13 +147,9 @@ nav a { ...@@ -117,13 +147,9 @@ nav a {
} }
.event-container { .event-container {
margin: 50px; margin: 0rem 2.5rem 2.5rem 2.5rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
background-color: #ffc2c2;
padding: 8px;
border: 2px dotted black;
margin: 32px;
} }
.event { .event {
...@@ -134,14 +160,20 @@ nav a { ...@@ -134,14 +160,20 @@ nav a {
.event img { .event img {
max-width: 100%; max-width: 100%;
height: 240px;
object-fit: cover; object-fit: cover;
} }
.event-text { .event-text {
padding: 16px; padding: 16px;
text-align: center; text-align: center;
display:flex;
flex-direction:column;
justify-content: space-evenly;
} }
.event-text h4 { color:black; font-size: 20px;}
.slick-prev:before { .slick-prev:before {
color: black !important; color: black !important;
} }
...@@ -189,8 +221,26 @@ nav a { ...@@ -189,8 +221,26 @@ nav a {
/* auction view */ /* auction view */
.auction-left, .auction-right{
padding: 2rem 1rem;
}
.bid-header {
display: flex;
justify-content: space-between;
padding: 16px 0px;
}
#bid-amount {display:inline-block; }
.product-info { .product-info {
padding: 8px 16px; padding: 8px 16px 8px 0;
border: 2px dotted black;
}
.form-group.placebid {
text-align:center;
} }
/* auction view end */ /* auction view end */
...@@ -277,7 +327,7 @@ nav a { ...@@ -277,7 +327,7 @@ nav a {
} }
@media(max-width:600px) { @media(max-width:768px) {
.store-item-container { .store-item-container {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
...@@ -294,6 +344,7 @@ nav a { ...@@ -294,6 +344,7 @@ nav a {
background-color: skyblue; background-color: skyblue;
border: 2px dotted black; border: 2px dotted black;
} }
.store-item img { .store-item img {
...@@ -303,9 +354,13 @@ nav a { ...@@ -303,9 +354,13 @@ nav a {
.item-info { .item-info {
padding: 1rem 1rem 0 1rem; padding: 1rem 1rem 0 1rem;
text-align: center;
} }
#item-name { color: black; font-size: 12pt; }
#item-price {color:black;}
.item-btns { .item-btns {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
......
boodlesite/templates/additem.html
View file @ a0a5b25b
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
{% block content %} {% block content %}
<div class="container"> <div class="container">
<h1>Add/Edit Item</h1> <h1>{{ title }}</h1>
<div class="row"> <div class="row">
<div class="col-lg-7 col-md-6">ITEM IMAGE CONTAINER <div class="col-lg-7 col-md-6">ITEM IMAGE CONTAINER
<div class="item-image-container"></div> <div class="item-image-container"></div>
......
boodlesite/templates/auction.html
View file @ a0a5b25b
...@@ -11,12 +11,13 @@ ...@@ -11,12 +11,13 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-7 col-md-6"> <div class="col-lg-7 col-md-6 auction-left">
<!-- Countdown display--> <!-- Countdown display-->
<div class="test"> <div class="test">
<!-- Format: <!-- Format:
Auction ends at: <Date> Auction ends at: <Date>
Time: <Days>, <Hours>, <Mins>, <Seconds> --> Time: <Days>, <Hours>, <Mins>, <Seconds> -->
<h2>{{auction_title}}</h2>
<h4> Auction ends at: {{ auction_end }} </h4> <h4> Auction ends at: {{ auction_end }} </h4>
</div> </div>
...@@ -53,67 +54,36 @@ ...@@ -53,67 +54,36 @@
<!-- <img src="https://thumbs.dreamstime.com/b/toy-teddy-bear-isolated-white-background-40677685.jpg"> --> <!-- <img src="https://thumbs.dreamstime.com/b/toy-teddy-bear-isolated-white-background-40677685.jpg"> -->
</div> </div>
<div class="col-lg-5 col-md-6"> <div class="col-lg-5 col-md-6 auction-right">
<div class="product-info" style="border: 2px dotted black;"> <div class="product-info" >
<h2>{{ item_name }} </h2> <h2>{{ item_name }} </h2>
<h4>Product Specifications</h4>
<p>{{ item_specs }}</p> <p>{{ item_specs }}</p>
<p>Starting at: {{item_floor_price}}</p> <h4>Starting at: ₱ {{item_floor_price}}</h4>
</div> </div>
<!-- latest bids / history -->
<div class="bid-header">
<h1>Latest Bids </h1>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#placeBidModal" <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#placeBidModal"
data-whatever="@mdo">Place Bid</button> data-whatever="@mdo">Place Bid</button>
<div class="modal fade" id="placeBidModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Enter Bid</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form action="" method="POST">
<div class="form-group">
<h3>Current Highest Bid: PHP {{highest_bid}}</h3>
{% csrf_token %}
{{ form }}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-secondary" name="Submit"> Submit </button>
</div>
</form>
</div>
</div>
</div> </div>
<!-- latest bids / history -->
<h1>Latest Bids</h1>
<ul class="cards"> <ul class="cards">
{% if auction_bids %} {% if auction_bids %}
{% for bid in auction_bids %} {% for bid in auction_bids %}
<li><img src="" alt=""> <li><img src="" alt="">
<p>User offered {{ bid.amount }}</p> <p>User offered <span id="bid-amount">₱{{ bid.amount }}</span></p>
<p> &nbsp | &nbsp </p> <p> &nbsp | &nbsp </p>
<p>{{bid.bidtime | timesince}} ago </p> <p>{{bid.bidtime | timesince}} ago </p>
</li> </li>
{% endfor %} {% endfor %}
{% else %} {% else %}
<h3> No bids have been placed for this item yet.</h3> <p> No bids have been placed for this item yet. Be the first!</p>
{% endif %} {% endif %}
</ul> </ul>
...@@ -123,4 +93,37 @@ ...@@ -123,4 +93,37 @@
</div> </div>
<!-- modal -->
<div class="modal fade" id="placeBidModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Enter Bid Amount</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form action="" method="POST">
<div class="form-group placebid">
<h5>Current Highest Bid: </h5>
<h3>PHP {{highest_bid}}</h3>
{% csrf_token %}
{{ form }}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-secondary" name="Submit"> Submit </button>
</div>
</form>
</div>
</div>
</div>
{% endblock %} {% endblock %}
\ No newline at end of file
boodlesite/templates/base.html
View file @ a0a5b25b
...@@ -2,96 +2,76 @@ ...@@ -2,96 +2,76 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" dir="ltr"> <html lang="en" dir="ltr">
<head>
<meta charset="utf-8"> <head>
<meta name='viewport' content='width=device-width'> <meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <meta name='viewport' content='width=device-width'>
<link rel="stylesheet"
<link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}"> href="https://fonts.googleapis.com/css?family=Archivo">
<link rel="stylesheet" type="text/css" href="{% static 'slick/slick.css' %}"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
<link rel="stylesheet" type="text/css" href="{% static 'slick/slick-theme.css' %}"> integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="{% static 'slick/slick.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'slick/slick-theme.css' %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>{% block title %}{% endblock %}</title> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<style>
[class*="col"] { <title>{% block title %}{% endblock %}</title>
background-color: pink;
border: 2px dotted black; <style>
} [class*="col"] {
/* background-color: pink; */
</style> /* border: 2px dotted skyblue; */
</head> }
<body> </style>
</head>
<nav id="main"> <body>
<ul>
<li class="logo"><a href="#">LOST.</a></li>
<li><a href="/">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">My Profile</a></li>
<li><a href="/store">My Store</a></li>
</ul>
</nav>
<!-- page content begins here -->
{% block content %}{% endblock %}
{% block scripts %}{% endblock %}
<div class="footer-basic">
<footer>
<div class="social"><a href="#"><i class="icon ion-social-instagram"></i></a><a href="#"><i class="icon ion-social-snapchat"></i></a><a href="#"><i class="icon ion-social-twitter"></i></a><a href="#"><i class="icon ion-social-facebook"></i></a></div>
<ul class="list-inline">
<li class="list-inline-item"><a href="/">Home</a></li>
<li class="list-inline-item"><a href="#">Services</a></li>
<li class="list-inline-item"><a href="#">About</a></li>
<li class="list-inline-item"><a href="#">Terms</a></li>
<li class="list-inline-item"><a href="#">Privacy Policy</a></li>
</ul>
<p class="copyright">Omengineers © 2022</p>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="{% static 'slick/slick.min.js' %}"></script>
<!-- <script>
// nav bar <nav id="main">
const nav = document.querySelector('#main'); <ul>
const topOfNav = nav.offsetTop; <li><a href="/">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">My Profile</a></li>
<li><a href="/store">My Store</a></li>
</ul>
</nav>
<!-- page content begins here -->
{% block content %}{% endblock %}
{% block scripts %}{% endblock %}
function fixNav() { <div class="footer">
console.log(topOfNav, window.scrollY); <p class="copyright">Omengineers © 2022</p>
if (window.scrollY >= topOfNav){ </div>
document.body.style.paddingTop = 0;
document.body.classList.add('fixed-nav');
} else {
document.body.classList.remove('fixed-nav');
}
}
window.addEventListener('scroll',fixNav); <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="{% static 'slick/slick.min.js' %}"></script>
</body>
</script> --> </html>
</body> \ No newline at end of file
</html>
boodlesite/templates/index.html
View file @ a0a5b25b
...@@ -10,17 +10,38 @@ ...@@ -10,17 +10,38 @@
{% block content %} {% block content %}
<!-- banner --> <!-- banner -->
<div id="container-fluid"> <div id="container-fluid banner">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner"> <div class="carousel-inner">
<div class="carousel-item active"> <div class="carousel-item active">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80" alt="First slide"> <img class="d-block w-100"
src="https://media.istockphoto.com/photos/face-cream-serum-lotion-moisturizer-and-sea-salt-among-bamboo-leaves-picture-id1136422297?k=20&m=1136422297&s=612x612&w=0&h=fk-Du8-BxBYn4rtint_HULFN5FpUWNeaBQye9DoSzpc="
alt="First slide">
<div class="carousel-content">
<h1>Welcome to Boodle.</h1>
<p>Your ultimate online auctioning platform.</p>
<button id="btn-shop-now" onclick="scrollDown()">Shop now</button>
</div>
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80" alt="Second slide"> <img class="d-block w-100"
src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80"
alt="Second slide">
<div class="carousel-content">
<h1>Slide 2.</h1>
<p>Lorem ipsum</p>
<button onclick="scrollDown()">Shop now</button>
</div>
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80" alt="Third slide"> <img class="d-block w-100"
src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80"
alt="Third slide">
<div class="carousel-content">
<h1>Slide 3.</h1>
<p>Lorem ipsum</p>
<button onclick="scrollDown()">Shop now</button>
</div>
</div> </div>
</div> </div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
...@@ -34,21 +55,28 @@ ...@@ -34,21 +55,28 @@
</div> </div>
</div> </div>
<div class="title-container"><h1> About Us </h1></div>
<div class="container-fluid"> <div class="container-fluid about">
<div class="row"> <div class="row container-about">
<div class="col-8"> <div class="col-lg-5 col-md-6 about-left">
<img src="https://media.istockphoto.com/vectors/mobile-shopping-vector-id1152401093?b=1&k=20&m=1152401093&s=612x612&w=0&h=rE_UnLvBcOmq32s4mX0mZSaidfeGkgLOe5EiI7DbJ4Q=">
</div>
<div class="col-lg-7 col-md-6 about-right">
<div class="about-text"> <div class="about-text">
<p class="text">Boodle was founded by 4 amaing talented software engineers, who are college studyents based in Metro Manila who go to Ateneo de Manila University. They believe they can change status quo of the ecommerce world. And they did. </p> <h1> About Us </h1>
<p>Boodle was founded by a group of four talented software engineers, who are currently Computer Science students
in Ateneo de Manila University. They believed they could change the status quo
of the e-commerce world—and with Boodle, they did. </p>
<button id="btn-read-more">Read more</button>
</div> </div>
</div> </div>
<div class="col about-image">
<img src="../static/media/dancinginthekitchen.jpg">
</div>
</div> </div>
</div> </div>
<div class="title-container"><h1> Happening Now </h1></div> <div class="header-container">
<h1> Happening Right Now </h1>
</div>
<div class="event-container"> <div class="event-container">
{% if auctions_now %} {% if auctions_now %}
...@@ -59,20 +87,23 @@ ...@@ -59,20 +87,23 @@
<div class="event-text"> <div class="event-text">
<a href="{% url 'auctionid' auction.auctionid %}"> <a href="{% url 'auctionid' auction.auctionid %}">
<h3>{{ auction.title }}</h3> <h4>{{ auction.title }}</h4>
</a> </a>
<p>{{ auction.info }}</p> <p>{{ auction.info }}</p>
<p><i>Ends on {{auction.auctionend}}</i></p>
</div> </div>
</div> </div>
{% endfor %} {% endfor %}
{% else %} {% else %}
<h3> no auctions happening yet.</h3> <p> No auctions currently happening.</p>
{% endif %} {% endif %}
</div> </div>
</div> </div>
<div class="title-container"><h1> Upcoming Events </h1></div> <div class="header-container">
<h1> Upcoming Events </h1>
</div>
<div class="event-container"> <div class="event-container">
{% if auctions_soon %} {% if auctions_soon %}
...@@ -90,54 +121,61 @@ ...@@ -90,54 +121,61 @@
</div> </div>
{% endfor %} {% endfor %}
{% else %} {% else %}
<h3> no auctions happening soon.</h3> <p> No auctions happening soon.</p>
{% endif %} {% endif %}
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function(){ $(document).ready(function () {
$('.event-container').slick({ $('.event-container').slick({
dots: true, dots: true,
infinite: false, infinite: false,
speed: 300, speed: 300,
slidesToShow: 4, slidesToShow: 4,
slidesToScroll: 4, slidesToScroll: 4,
responsive: [ responsive: [
{ {
breakpoint: 1024, breakpoint: 1024,
settings: { settings: {
arrows: true, arrows: true,
slidesToShow: 3, slidesToShow: 3,
slidesToScroll: 3, slidesToScroll: 3,
infinite: true, infinite: true,
dots: true dots: true
} }
}, },
{ {
breakpoint: 600, breakpoint: 600,
settings: { settings: {
arrows: true, arrows: true,
slidesToShow: 2, slidesToShow: 2,
slidesToScroll: 2 slidesToScroll: 2
} }
}, },
{ {
breakpoint: 480, breakpoint: 480,
settings: { settings: {
arrows: true, arrows: true,
slidesToShow: 1, slidesToShow: 1,
slidesToScroll: 1 slidesToScroll: 1
} }
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
});
function scrollDown() {
const element = document.getElementsByClassName("header-container");
element[0].scrollIntoView();
console.log('scroll')
} }
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
});
</script> </script>
{% endblock %} {% endblock %}
\ No newline at end of file
boodlesite/templates/store.html
View file @ a0a5b25b
...@@ -35,50 +35,51 @@ ...@@ -35,50 +35,51 @@
<div class="store-item-container"> <div class="store-item-container">
{% if store_items %} {% if store_items %}
{% for item in store_items %} {% for item in store_items %}
<div class="store-item"> <div class="store-item">
<img src="https://www.kurin.com/wp-content/uploads/placeholder-square.jpg"> <img src="https://www.kurin.com/wp-content/uploads/placeholder-square.jpg">
<div class="item-info"> <div class="item-info">
<h4>{{ item.itemname }}</h4> <h4 id="item-name">{{ item.itemname }}</h4>
<p>{{item.itemspecs}} <span class="item-price">PHP {{item.floorprice}}</span></p> <p id="item-price">₱ {{item.floorprice}} </p>
</div> </div>
<div class="item-btns"> <button>Auction</button> <button><a href="{% url 'edititemid' item.itemid %}">Edit</a></button> <div class="item-btns"> <button>Auction</button> <button><a
href="{% url 'edititemid' item.itemid %}">Edit</a></button>
<!-- <button>Delete</button> --> <!-- <button>Delete</button> -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#delete_{{ item.itemid }}" <button type="button" class="btn btn-primary" data-toggle="modal"
data-whatever="@mdo">Delete</button> data-target="#delete_{{ item.itemid }}" data-whatever="@mdo">Delete</button>
<div class="modal fade" id="delete_{{ item.itemid }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" <div class="modal fade" id="delete_{{ item.itemid }}" tabindex="-1" role="dialog"
aria-hidden="true"> aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Delete Item</h5> <h5 class="modal-title" id="exampleModalLabel">Delete Item</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div>
<div class="modal-body">
<form action="" method="POST">
<div class="form-group">
<h3>Are you sure you want to delete {{item.itemname}}?</h3>
{% csrf_token %}
<!-- input is to get the itemid to POST for deletion -->
<!-- {{form.itemid.value|default_if_none:item.itemid }} -->
<input name="itemid" type="hidden" value="{{item.itemid}}">
</div> </div>
<div class="modal-body">
<form action="" method="POST">
<div class="form-group">
<h3>Are you sure you want to delete {{item.itemname}}?</h3>
{% csrf_token %}
<!-- input is to get the itemid to POST for deletion -->
<!-- {{form.itemid.value|default_if_none:item.itemid }} -->
<input name="itemid" type="hidden" value="{{item.itemid}}">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-secondary" name="Submit"> Confirm </button>
</div>
</form>
</div> </div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-secondary" name="Submit"> Confirm </button>
</div>
</form>
</div>
</div> </div>
</div> </div>
......
main/views.py
View file @ a0a5b25b
...@@ -54,8 +54,8 @@ def auction(request, pk): ...@@ -54,8 +54,8 @@ def auction(request, pk):
new_bid = AuctionBid(amount=amount,bidtime=datetime.now(),auctionid=auction) new_bid = AuctionBid(amount=amount,bidtime=datetime.now(),auctionid=auction)
new_bid.save() new_bid.save()
return redirect(f"/auction/{pk}") return redirect(f"/auction/{pk}")
except: except Exception as e:
pass print("Error:", e)
context = { context = {
...@@ -64,6 +64,7 @@ def auction(request, pk): ...@@ -64,6 +64,7 @@ def auction(request, pk):
'auction_bids' : auction_bids, 'auction_bids' : auction_bids,
'item_floor_price': auction_item.floorprice, 'item_floor_price': auction_item.floorprice,
'highest_bid': highest_bid, 'highest_bid': highest_bid,
'auction_title': auction.title,
'auction_end': auction.auctionend, 'auction_end': auction.auctionend,
'form' : form, 'form' : form,
} }
...@@ -139,6 +140,7 @@ def addItem(request, pk): ...@@ -139,6 +140,7 @@ def addItem(request, pk):
context = { context = {
'form':form, 'form':form,
'title': 'List new item',
'current_store': current_store # access to store 1 'current_store': current_store # access to store 1
} }
...@@ -158,6 +160,7 @@ def editItem(request, pk): ...@@ -158,6 +160,7 @@ def editItem(request, pk):
context = { context = {
'form':form, 'form':form,
'title': 'Edit item information'
} }
return render(request, "boodlesite/templates/additem.html", context) return render(request, "boodlesite/templates/additem.html", context)
......
requirements.txt
View file @ a0a5b25b
...@@ -3,5 +3,6 @@ Django==4.0.3 ...@@ -3,5 +3,6 @@ Django==4.0.3
Pillow==9.0.1 Pillow==9.0.1
psycopg2==2.9.3 psycopg2==2.9.3
python-dotenv==0.19.2 python-dotenv==0.19.2
pytz==2022.1
sqlparse==0.4.2 sqlparse==0.4.2
tzdata==2021.5 tzdata==2021.5
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment