Skip to content

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

Create website skeleton for Store/Inventory management

parent 6a38e17e
Hide whitespace changes
Inline Side-by-side
Showing with 359 additions and 116 deletions
boodlesite/static/css/styles.css
View file @ 19433c19
......@@ -5,11 +5,6 @@ body {
height: 100%;
font-size: 11pt;
color: #3d3838;
<<<<<<< HEAD
background-color: black;
=======
/* background-color: black; */
>>>>>>> 8f1f8c3028c012cf2653c3f58224f0a116945f2c
}
.carousel-item img {
......@@ -19,66 +14,66 @@ body {
/* nav bar */
nav {
background: black;
top: 0;
width: 100%;
transition: all 0.5s;
position: relative;
z-index: 1;
}
background: black;
top: 0;
width: 100%;
transition: all 0.5s;
position: relative;
z-index: 1;
}
.fixed-nav nav {
position: fixed;
box-shadow 0 5px black;
}
nav ul {
margin: 0;
padding:0;
list-style: none;
display: flex;
}
nav li {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
li.logo {
max-width: 0;
overflow: hidden;
background: white;
transition: all .5s;
font-weight: 600;
font-size: 30px;
}
li.logo a {
color: black;
}
nav a {
text-decoration: none;
padding: 20px;
display: inline-block;
color: white;
transition: all 0.2s;
}
.fixed-nav nav {
position: fixed;
box-shadow 0 5px black;
}
/* nav bar end */
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.footer-basic{
background-color: black;
color: #f8edeb;
display: flex;
justify-content: center;
nav li {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
li.logo {
max-width: 0;
overflow: hidden;
background: white;
transition: all .5s;
font-weight: 600;
font-size: 30px;
}
li.logo a {
color: black;
}
nav a {
text-decoration: none;
padding: 20px;
display: inline-block;
color: white;
transition: all 0.2s;
}
/* nav bar end */
.footer-basic {
background-color: black;
color: #f8edeb;
display: flex;
justify-content: center;
}
.copyright {
flex: 0 1 800px;
.copyright {
flex: 0 1 800px;
padding: 8px 24px;
}
......@@ -101,6 +96,7 @@ nav {
text-align: right;
font-size: 20px;
}
/* homepage happening now */
.title-container {
......@@ -108,16 +104,19 @@ nav {
padding: 8px 32px;
justify-content: center;
}
@media(max-width:480px){
.event-container{
display: flex;
flex-direction: column;
@media(max-width:480px) {
.event-container {
display: flex;
flex-direction: column;
}
.event{ flex: 1 1 auto; }
.event {
flex: 1 1 auto;
}
}
.event-container{
.event-container {
margin: 50px;
display: flex;
justify-content: center;
......@@ -135,67 +134,194 @@ nav {
.event img {
max-width: 100%;
object-fit:cover;
object-fit: cover;
}
.event-text {
padding: 16px;
text-align: center;
}
.event-text{ padding: 16px; text-align: center; }
.slick-prev:before {
color: black !important;
}
.slick-next:before {
color: black !important;
}
/* cards */
.cards {
list-style-type: none;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.cards img {
float: left;
display: block;
margin: 10px 15px 10px 0;
object-fit: cover;
width:80px;
height:80px;
border-radius: 100%;
border: 2px dotted black;
shape-outside: circle(50%);
}
.cards li {
background-color: #f0f0f0;
border: 1px dotted #c3a9ff;
margin: 0 10px 20px 10px;
padding: 8px 16px;
border-radius: 5px;
flex: 1 1 480px;
display:flex;
align-items: center;
}
list-style-type: none;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.cards img {
float: left;
display: block;
margin: 10px 15px 10px 0;
object-fit: cover;
width: 80px;
height: 80px;
border-radius: 100%;
border: 2px dotted black;
shape-outside: circle(50%);
}
.cards p {
.cards li {
background-color: #f0f0f0;
border: 1px dotted #c3a9ff;
margin: 0 10px 20px 10px;
padding: 8px 16px;
border-radius: 5px;
flex: 1 1 480px;
display: flex;
align-items: center;
}
}
.cards p {}
/* cards end */
/* cards end */
/* auction view */
/* auction view */
.product-info{
padding: 8px 16px;
}
/* auction view end */
.slick-prev:before {
color: black !important;
.product-info {
padding: 8px 16px;
}
/* auction view end */
/* inventory/store */
.store-container {
display: flex;
flex-direction: column;
}
.store-banner {
height: 180px;
position: relative;
text-align: center;
display: inline-block;
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.65)), color-stop(100%, rgba(0, 0, 0, 0)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000', GradientType=0);
/* IE6-9 */
}
.store-banner img {
width: 100%;
object-fit: cover;
max-height: 100%;
position: relative;
z-index: -1;
display: block;
}
.store-info {
position: absolute;
color: white;
border: 2px solid black;
bottom: 8px;
left: 4rem;
text-align: left !important;
min-width: 50%;
max-width: 100%;
z-index: +1;
}
.store-info img {
float: left;
display: block;
margin: 10px 15px 10px 0px;
object-fit: cover;
width: 100px;
height: 100px;
border-radius: 100%;
border: 2px dotted black;
}
.sort-by {
display: flex;
justify-content: flex-end;
padding: 2rem 4rem 0 4rem;
;
border: 1px solid black;
}
.store-item-container {
display: grid;
justify-content: center;
grid-gap: 1rem;
grid-template-columns: repeat(5, 1fr);
padding: 4rem;
}
@media(max-width:600px) {
.store-item-container {
grid-template-columns: repeat(2, 1fr);
}
}
.slick-next:before {
color: black !important;
@media(max-width:480px) {
.store-item-container {
grid-template-columns: 1fr;
}
}
.store-item {
background-color: skyblue;
border: 2px dotted black;
}
.store-item img {
max-width: 100%;
object-fit: cover;
}
.item-info {
padding: 1rem 1rem 0 1rem;
}
.item-btns {
display: flex;
justify-content: flex-end;
margin: 0 4px 4px 0;
}
.store-btns-container {
display: flex;
justify-content: center;
align-items: center;
}
/* item detail view / add, edit item */
.item-image-container,
.item-form-container {
border: 2px solid black;
padding: 1rem;
}
\ No newline at end of file
boodlesite/templates/additem.html
View file @ 19433c19
......@@ -9,6 +9,21 @@
{% block content %}
<div class="container">
<h1>Add/Edit Item</h1>
<div class="row">
<div class="col-lg-7 col-md-6">ITEM IMAGE CONTAINER
<div class="item-image-container"></div>
</div>
<div class=" col-lg-5 col-md-6">ITEM FORM CONTAINER
<div class="item-form-container"></div>
<button type="button">Add Item</button>
</div>
</div>
</div>
<!-- Form with fields:
[Item name]
[Item Description]
......@@ -16,7 +31,6 @@
<!-- Image, if no image add image -->
<button type="button">Add Item</button>
{% endblock %}
\ No newline at end of file
boodlesite/templates/startauction.html
View file @ 19433c19
......@@ -2,13 +2,16 @@
{% load static %}
{% block title %}My Store{% endblock %}
{% block title %}Schedule Auction{% endblock %}
{% block styles %}
{% endblock %}
{% block content %}
<div class="container"><button type="button">Save Auction</button>
</div>
<!-- Form fields:
[Auction Title]
Drop down: [Select time for Auction]
......@@ -19,7 +22,6 @@ End:
Drop down: [Month] [Day] [Year] Time: [Hour] : [Minute]
-->
<button type="button">Save Auction</button>
{% endblock %}
\ No newline at end of file
boodlesite/templates/store.html
View file @ 19433c19
......@@ -9,10 +9,111 @@
{% block content %}
<button type="button"><a href="startauction">Start Auction</a></button>
<div class="store-container">
<div class="store-banner"><img src="https://www.w3schools.com/howto/img_snow_wide.jpg">
<div class="store-info">
<img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png">
<h1>STORE NAME HERE</h1>
<p>@username</p>
<button class="edit-shop-btn" type="button">Edit Shop Info</button>
</div>
</div>
<div class="sort-by">
<label for="items">Sort items by: </label>
<select id="items" name="items">
<option value="">A-Z</option>
<option value="">Oldest</option>
<option value="">Newest</option>
<option value="">Price (Low-High)</option>
<option value="">Price (High-Low) </option>
</select>
</div>
<div class="store-item-container">
<div class="store-item">
<img src="https://www.kurin.com/wp-content/uploads/placeholder-square.jpg">
<div class="item-info">
<h4>Itemname</h4>
<p>Itemdescription <span class="item-price">PHP 500</span></p>
</div>
<div class="item-btns"> <button>Auction</button> <button>Edit</button> <button>Delete</button>
</div>
</div>
<div class="store-item">
<img src="https://www.kurin.com/wp-content/uploads/placeholder-square.jpg">
<div class="item-info">
<h4>Itemname</h4>
<p>Itemdescription <span class="item-price">PHP 500</span></p>
</div>
<div class="item-btns"> <button>Auction</button> <button>Edit</button> <button>Delete</button>
</div>
</div>
<div class="store-item">
<img src="https://www.kurin.com/wp-content/uploads/placeholder-square.jpg">
<div class="item-info">
<h4>Itemname</h4>
<p>Itemdescription <span class="item-price">PHP 500</span></p>
</div>
<div class="item-btns"> <button>Auction</button> <button>Edit</button> <button>Delete</button>
</div>
</div>
<div class="store-item">
<img src="https://www.kurin.com/wp-content/uploads/placeholder-square.jpg">
<div class="item-info">
<h4>Itemname</h4>
<p>Itemdescription <span class="item-price">PHP 500</span></p>
</div>
<div class="item-btns"> <button>Auction</button> <button>Edit</button> <button>Delete</button>
</div>
</div>
<div class="store-item">
<img src="https://www.kurin.com/wp-content/uploads/placeholder-square.jpg">
<div class="item-info">
<h4>Itemname</h4>
<p>Itemdescription <span class="item-price">PHP 500</span></p>
</div>
<div class="item-btns"> <button>Auction</button> <button>Edit</button> <button>Delete</button>
</div>
</div>
<div class="store-item">
<img src="https://www.kurin.com/wp-content/uploads/placeholder-square.jpg">
<div class="item-info">
<h4>Itemname</h4>
<p>Itemdescription <span class="item-price">PHP 500</span></p>
</div>
<div class="item-btns"> <button>Auction</button> <button>Edit</button> <button>Delete</button>
</div>
</div>
<div class="store-item">
<img src="https://www.kurin.com/wp-content/uploads/placeholder-square.jpg">
<div class="item-info">
<h4>Itemname</h4>
<p>Itemdescription <span class="item-price">PHP 500</span></p>
</div>
<div class="item-btns"> <button>Auction</button> <button>Edit</button> <button>Delete</button>
</div>
</div>
</div>
</div>
<div class="store-btns-container">
<button type="button"><a href="startauction">Start Auction</a></button>
<button type="button"><a href="additem">Add Item</a></button>
</div>
]
</div>
<button type="button">Edit Shop</button>
<button type="button"><a href="additem">Add Item</a></button>
{% endblock %}
\ No newline at end of file
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