Skip to content

H
Hunger Buster - Breadcrumbs
Commit cf3b8de1 authored by Julia Santos's avatar Julia Santos
Browse files
Options

adapting the html and css files to the django templates

parent b7eb640e
Show whitespace changes
Inline Side-by-side
Showing with 61 additions and 160 deletions
Breadcrumbs/static/mainFridgeList.css deleted 100644 → 0
View file @ b7eb640e
body {
width: 100%;
height: 100%;
margin: 0px;
}
.listViewHeader {
background-color: rgba(40, 40, 40, 1);
width: 100vw;
color: white;
text-align: left;
}
.breadcrumbsHead {
font-family: "Roboto Bold";
font-size: 46px;
margin-left: 50px;
}
.lowerPage {
width: 100vw;
display: grid;
grid-template-columns: repeat(6, 16.67vw);
text-align: left;
}
.sidebar {
background-color: rgba(196, 196, 196, 1);
display: grid;
grid-template-rows: repeat(16, 6.25vh);
grid-column: 1/2;
}
.sideItem {
grid-template-columns: repeat(2, 12.5vw);
text-align: center;
background-color: rgba(104, 104, 104, 1);
}
.text {
font-family: "Roboto";
font-size: 24px;
color: white;
grid-column: 2/3;
}
.icon {
grid-column: 1/2;
}
.circle {
margin: 5px;
clip-path: circle();
background-color: white;
}
.fridge {
grid-row: 3/4;
}
.recipes {
grid-row: 6/7;
}
.stats {
grid-row: 9/10;
}
.toBuy {
grid-row: 12/13;
}
@font-face {
font-family: Roboto Bold;
src: url(Roboto-Bold.ttf);
}
@font-face {
font-family: Roboto;
src: url(Roboto-Regular.ttf);
}
\ No newline at end of file
Breadcrumbs/static/sidebar.css
View file @ cf3b8de1
......@@ -38,8 +38,7 @@ body {
}
.sideItem {
display: grid;
background-color: rgba(104, 104, 104, 1);
opacity: 0.7;
background-color: rgba(104, 104, 104, 0.7);
transform: none;
}
.sideText {
......@@ -58,19 +57,12 @@ body {
grid-column: 1/2;
margin: 10px;
}
#recipesIcon {
background-color: white;
clip-path: circle();
height: 15vh;
grid-row: 4/9;
grid-column: 1/2;
margin: 10px;
}
#statsIcon {
background-color: white;
clip-path: circle();
height: 15vh;
grid-row: 7/12;
grid-row: 4/9;
grid-column: 1/2;
margin: 10px;
}
......@@ -78,7 +70,7 @@ body {
background-color: white;
clip-path: circle();
height: 15vh;
grid-row: 10/15;
grid-row: 7/12;
grid-column: 1/2;
margin: 10px;
}
......@@ -86,16 +78,13 @@ body {
grid-row: 3/4;
grid-column: 1/3;
}
.recipes {
grid-row: 6/7;
grid-column: 1/3;
}
.stats {
grid-row: 9/10;
grid-row: 6/7;
grid-column: 1/3;
}
.toBuy {
grid-row: 12/13;
grid-row: 9/10;
grid-column: 1/3;
}
......@@ -105,6 +94,7 @@ body {
background-color: white;
display: grid;
grid-template-columns: 3vw repeat(6, 15.67vw) 3vw;
grid-template-rows: repeat(3, 6.25vh);
}
.subheader {
font-family: "Roboto Medium";
......@@ -114,14 +104,13 @@ body {
}
.addItem {
grid-column: 3/4;
grid-row: 2/3
}
.addItemButton {
margin-top: 35px;
margin-left: 20px;
margin-right: 20px;
background-color: rgba(175, 175, 175, 1);
background-color: rgba(175, 175, 175, 0.7);
border-radius: 100px;
opacity: 0.7;
transform: none;
}
.addItemText {
......@@ -131,12 +120,17 @@ body {
text-align: center;
}
.changeView {
background-color: rgba(228, 228, 228, 1);
font-family: "Roboto Medium";
font-size: 14px;
grid-column: 5/6;
margin-top: 35px;
grid-row: 2/3;
}
.changeViewDropdown {
background-color: rgba(228, 228, 228, 0.7);
transform: none;
}
.changeViewText {
text-align: center;
font-family: "Roboto Medium";
font-size: 14px;
}
.listView {
......@@ -144,17 +138,16 @@ body {
grid-row: 2/3;
background-color: white;
display: grid;
grid-template-columns: 3vw repeat(3, 23vw) 3vw;
grid-template-columns: 0vw repeat(3, 25vw) 0vw;
grid-template-rows: repeat(4, 20vh);
grid-column-gap: 3vw;
grid-column-gap: 0vw;
grid-row-gap: 3vw;
}
.listItem {
background-color: rgba(237, 237, 237, 1);
background-color: rgba(237, 237, 237, 0.7);
display: grid;
grid-template-columns: 10vw 15vw;
grid-template-rows: repeat(5, 5vh);
opacity: 0.7;
transform: none;
}
#listIcon {
......@@ -162,31 +155,36 @@ body {
grid-row: 1/5;
text-align: center;
clip-path: circle();
/* width: 150px;
height: 150px*/
background-color: rgba(196, 196, 196, 1);
margin: 5px;
margin-left:110px;
}
.listText {
grid-column: 2/3;
text-align: left;
margin: 10px;
margin-left:130px;
}
.daysLeft {
font-family: "Roboto Black";
font-size: 24px;
}
.product {
font-family: "Roboto Regular";
font-family: "Roboto";
font-size: 20px;
}
.category {
font-family: "Roboto Regular";
font-family: "Roboto";
font-size: 14px;
}
.one {
grid-column: 2/3;
grid-column: 2/5;
grid-row: 1/2;
}
.two {
/*.two {
grid-column: 2/3;
grid-row: 2/3;
}
......@@ -229,7 +227,7 @@ body {
.twelve {
grid-column: 4/5;
grid-row: 4/5;
}
} */
@font-face {
font-family: Roboto Bold;
......@@ -250,16 +248,20 @@ body {
.sideItem:hover {
opacity: 1;
transition: opacity .5s;
background-color: rgba(104, 104, 104, 1);
transition: background-color .5s;
}
.listItem:hover {
opacity: 1;
transition: opacity .5s;
background-color: rgba(237, 237, 237, 1);
transition: background-color .5s;
}
.addItemButton:hover {
opacity: 1;
transition: opacity .5s;
background-color: rgba(175, 175, 175, 1);
transition: background-color .5s;
}
.changeViewDropdown:hover {
background-color: rgba(240, 240, 240, 1);
transition: background-color .5s;
}
.main{
......
templates/placeholder-list.html
View file @ cf3b8de1
......@@ -16,22 +16,17 @@
<div class = "lowerPage">
<div class = "sidebar">
<div class = "sideItem fridge">
<div class = " sideText"> FRIDGE </div>
<div class = " sideText"><a href="http://127.0.0.1:8000/fridge/list/"> FRIDGE</a> </div>
</div>
<img id= "fridgeIcon" src= "" alt= "a flat icon of a refrigerator";>
<div class = "sideItem recipes">
<div class = "sideText"> RECIPES </div>
</div>
<img id= "recipesIcon" src= "" alt= "a flat icon of a cook book";>
<div class = "sideItem stats">
<div class = "sideText"> STATS </div>
</div>
<img id= "statsIcon" src= "" alt= "a flat icon of a graph";>
<div class = "sideItem toBuy">
<div class = "sideText"> TO BUY </div>
<div class = "sideText"> <a href = "http://127.0.0.1:8000/to-buy/">TO BUY</a> </div>
</div>
<img id= "toBuyIcon" src= "" alt= "a flat icon of a shopping cart";>
</div>
......@@ -40,53 +35,27 @@
<div class = "subheader"> Fridge </div>
<div class = "addItem">
<div class = "addItemButton">
<div class = "addItemText"><a href="http://127.0.0.1:8000/fridge/add/"> ADD ITEM + </a></div>
<div class = "addItemText"><a href="http://127.0.0.1:8000/fridge/add/"> ADD ITEM +</a> </div>
</div>
</div>
<div class = "changeView"> LIST VIEW </div>
<div class = "changeView">
<div class = "changeViewDropdown">
<div class = "changeViewText"> LIST VIEW </div>
</div>
</div>
</div>
<h2>Fridge</h2>
<table style="width:70%" div class="main">
<tr><th></th>
<th><a href="http://127.0.0.1:8000/fridge/list/">name</a></th>
<th><a href="http://127.0.0.1:8000/fridge/list-category">category</a></th>
<th>description</th>
<th>to buy?</th>
<th>user</th>
</tr>
{% for product in object_list %}
<tr>
<th>
<img src = "{{product.Icon.url}}" width = "100" height ="100">
</th>
<th>
<a href='http://127.0.0.1:8000/fridge/{{product.Product_ID}}'>
{{product.Product_Name}}</a>
</th>
<th>
{{product.Product_Category}}
</th>
<th>
{{product.Product_Description}}
</th>
<th>
{{product.To_Buy}}
</th>
<th>
<a href='http://127.0.0.1:8000/fridge/{{product.Product_ID}}/delete'>Delete?</a>
</th>
</tr>
<div class = "listView">
<div class = "listItem one">
<img id= "listIcon" src= "{{product.Icon.url}}" width = "185" height = "185" alt= "a flat icon the product";>
<div class = "listText">
<div class = "daysLeft"><a href='http://127.0.0.1:8000/fridge/{{product.Product_ID}}'> {{product.Product_Name}} </a></div>
<div class = "product"> {{product.Product_Category}} </div>
<div class = "category"> To buy: {{product.To_Buy}} </div>
</div>
</div>
{% endfor %}
</table>
{% endblock %}
</html>
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