Skip to content

P
PixieDust-LastMinuteSurpluss
Commit 8927c5ba authored by Erick Lopez's avatar Erick Lopez
Browse files
Options

Implemented CSS to product catalog

parent 875b9307
Show whitespace changes
Inline Side-by-side
Showing with 199 additions and 74 deletions
pixie_dust/pixie_dust/static/style.css
View file @ 8927c5ba
...@@ -473,3 +473,122 @@ footer a { ...@@ -473,3 +473,122 @@ footer a {
font-size: 24px; font-size: 24px;
} }
} }
/* Product Details Views */
#productList {
padding: 2vw;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-rows: repeat(0, minmax(0, 1fr));
column-gap: 4vw;
}
#productListTitle {
grid-area: 1/5/2/9;
align-self: center;
font-size: 3.5em;
}
#folderList {
grid-area: 2/1/3/5;
}
#penorganizerList {
grid-area: 2/5/3/9;
}
#plannerList {
grid-area: 2/9/3/13;
}
.collection{
padding: 2vw;
background-color: #d1d7d7;
border-radius: 1vw;
display: flex;
flex-direction: column;
}
.collectionName {
font-size: 2em;
font-weight: 400;
text-decoration: underline;
color: #2aabe4;
margin-bottom: 2vw;
}
.itemListing {
display: flex;
padding-left: 1em;
}
.itemName {
color: #2aabe4;
font-size: 1.7em;
}
.itemPrice {
font-size: 1.7em;
}
#productDetailsArea {
padding: 2.5vw;
padding-top: 3.5vw;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-rows: repeat(0, minmax(0, 1fr));
column-gap: 1vw;
}
#productName {
grid-area: 1/5/2/9;
align-self: center;
font-size: 2.5em;
text-decoration: underline;
}
#productPic {
grid-area: 2/1/5/5
}
#productPic img {
width: 30vw;
height: 30vw;
border-radius: 1vw;
box-shadow: 0.5vw 0.5vw 0.5vw rgb(191, 175, 178);
}
#productPrice {
grid-area: 2/6/3/10;
justify-self: start;
align-self: start;
}
#productPersonalization {
grid-area: 2/10/3/13;
align-self: start;
text-align: left;
}
#productPersonalization div{
padding-left: 1.5vw;
}
#productDetails {
grid-area: 3/6/5/10;
justify-self: start;
align-self: start;
display: column;
text-align: left;
}
#productDetails div{
padding-left: 1.5vw;
}
#productFeatures {
grid-area: 3/10/5/13;
justify-self: start;
align-self: start;
text-align: left;
}
#feature {
text-align: left;
padding-left: 2em;
}
pixie_dust/products/templates/products/products_detail.html
View file @ 8927c5ba
<!DOCTYPE html> {% extends 'base.html' %}
<html lang="en"> {% block content-header %}
<li><a href="/admin-pd/agents">Agents</a></li>
<li><a href="/admin-pd/customers">Customers</a></li>
<header> <li><a href="/admin-pd/products/catalog">Products</a></li>
<h1>{{product.item_name}} Specs</h1> <li><a href="/admin-pd/orders">Orders</a></li>
{% endblock %}
</header> {% block content %}
<main id="productDetailsArea">
<main> <h1 id="productName">{{product.item_name}} Specs</h1>
<div> <a href="https://placeholder.com" id="productPic"><img src="https://via.placeholder.com/150"></a>
<div id="productPrice">
<h2> Price: </h2>
<div>₱ {{product.price}}</div>
</div>
<div id="productPersonalization">
<h2> Personalization Limit:</h2>
<div>Up to {{product.personalization_limit}} letters</div>
</div>
<div id="productDetails">
{% if product.folder.collection == "F" %} {% if product.folder.collection == "F" %}
<div> Lenght: {{product.folder.length}} inches</div> <h2> Dimensions:</h2>
<div> Length: {{product.folder.length}} inches</div>
<div> Width: {{product.folder.width}} inches</div> <div> Width: {{product.folder.width}} inches</div>
<div> Thickness: {{product.folder.thickness}} inches</div> <div> Thickness: {{product.folder.thickness}} inches</div>
{% elif product.penorganizer.collection == "PO" %} {% elif product.penorganizer.collection == "PO" %}
<div> Slots: {{product.penorganizer.slots}}</div> <h2> Slots: </h2>
<div>{{product.penorganizer.slots}}</div>
{% elif product.planner.collection == "P" %} {% elif product.planner.collection == "P" %}
<h2> Dimensions:</h2>
<div> Lenght: {{product.planner.length}} inches</div> <div> Lenght: {{product.planner.length}} inches</div>
<div> Width: {{product.planner.width}} inches</div> <div> Width: {{product.planner.width}} inches</div>
<div> Thickness: {{product.planner.thickness}} inches</div> <div> Thickness: {{product.planner.thickness}} inches</div>
{% endif %} {% endif %}
<div> Personalization: Up to {{product.personalization}} letters</div> </div>
</div><br> <div id="productFeatures">
<div class="collection" id="folder"> <h2> Features: </h2>
<div> Features: </div>
{% for description in description_list %} {% for description in description_list %}
{% if product.item_id == description.item_id.item_id %} {% if product.item_id == description.item_id.item_id %}
<li>{{ description.feature_id.feature }}</li> <li id="feature">{{ description.feature_id.feature }}</li>
{% endif %} {% endif %}
</div>
{% endfor %} {% endfor %}
<footer>
<div class="footer-container">
<a href="/admin-pd">©Last Minute Surplus</a>
</div> </div>
</footer> <br><br><br><br><br><br>
\ No newline at end of file </main>
{% endblock %}
\ No newline at end of file
pixie_dust/products/templates/products/products_list.html
View file @ 8927c5ba
<!DOCTYPE html> {% extends 'base.html' %}
<html lang="en"> {% block content-header %}
<li><a href="/admin-pd/agents">Agents</a></li>
<li><a href="/admin-pd/customers">Customers</a></li>
<li><a href="/admin-pd/products/catalog">Products</a></li>
<li><a href="/admin-pd/orders">Orders</a></li>
{% endblock %}
{% block content %}
<main id="productList">
<h1 id="productListTitle">Product Catalog</h1>
<div class="collection" id="folderList">
<h2 class="collectionName">Folders</h2>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Product Catalog</title>
</head>
<header>
<h1>This is the products html</h1>
</header>
<main>
<div class="collection" id="folder">
<h2>Folders</h2>
{% for folder in folder_list %} {% for folder in folder_list %}
<div class="card-content-main"> <div class="itemListing">
<a href="{% url 'products:products-detail' folder.item_id %}"> <a href="{% url 'products:products-detail' folder.item_id %}">
<div class="item_name">{{ folder.item_name }}</div> <p class="itemName">{{ folder.item_name }}</p>
</a> </a>
<div class="price">₱{{ folder.price }}</div><br> <p class="itemPrice">₱{{ folder.price }}</p>
</div>
{% endfor %} {% endfor %}
</div> </div>
<h2>Pen Organizers</h2> <div class="collection" id="penorganizerList">
<h2 class="collectionName">Pen Organizers</h2>
{% for pen in pen_organizer_list %} {% for pen in pen_organizer_list %}
<div class="card-content-main"> <div class="itemListing">
<a href="{% url 'products:products-detail' pen.item_id %}"> <a href="{% url 'products:products-detail' pen.item_id %}" >
<div class="item_name">{{ pen.item_name }}</div> <p class="itemName">{{ pen.item_name }}</p>
</a> </a>
<div class="price">₱{{ pen.price }}</div><br> <p class="itemPrice">₱{{ pen.price }}</p>
</div>
{% endfor %} {% endfor %}
</div> </div>
<h2>Planners</h2> <div class="collection" id="plannerList">
<h2 class="collectionName">Planners</h2>
{% for planner in planner_list %} {% for planner in planner_list %}
<div class="card-content-main"> <div class="itemListing">
<a href="{% url 'products:products-detail' planner.item_id %}"> <a href="{% url 'products:products-detail' planner.item_id %}" >
<div class="item_name">{{ planner.item_name }}</div> <p class="itemName">{{ planner.item_name }}</p>
</a> </a>
<div class="price">₱{{ planner.price }}</div><br> <p class="itemPrice">₱{{ planner.price }}</p>
</div>
{% endfor %} {% endfor %}
</main>
<footer>
<div class="footer-container">
<a href="/admin-pd">©Last Minute Surplus</a>
</div> </div>
</footer> </main>
</html> {% 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