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 { ...@@ -38,8 +38,7 @@ body {
} }
.sideItem { .sideItem {
display: grid; display: grid;
background-color: rgba(104, 104, 104, 1); background-color: rgba(104, 104, 104, 0.7);
opacity: 0.7;
transform: none; transform: none;
} }
.sideText { .sideText {
...@@ -58,19 +57,12 @@ body { ...@@ -58,19 +57,12 @@ body {
grid-column: 1/2; grid-column: 1/2;
margin: 10px; margin: 10px;
} }
#recipesIcon {
background-color: white;
clip-path: circle();
height: 15vh;
grid-row: 4/9;
grid-column: 1/2;
margin: 10px;
}
#statsIcon { #statsIcon {
background-color: white; background-color: white;
clip-path: circle(); clip-path: circle();
height: 15vh; height: 15vh;
grid-row: 7/12; grid-row: 4/9;
grid-column: 1/2; grid-column: 1/2;
margin: 10px; margin: 10px;
} }
...@@ -78,7 +70,7 @@ body { ...@@ -78,7 +70,7 @@ body {
background-color: white; background-color: white;
clip-path: circle(); clip-path: circle();
height: 15vh; height: 15vh;
grid-row: 10/15; grid-row: 7/12;
grid-column: 1/2; grid-column: 1/2;
margin: 10px; margin: 10px;
} }
...@@ -86,16 +78,13 @@ body { ...@@ -86,16 +78,13 @@ body {
grid-row: 3/4; grid-row: 3/4;
grid-column: 1/3; grid-column: 1/3;
} }
.recipes {
grid-row: 6/7;
grid-column: 1/3;
}
.stats { .stats {
grid-row: 9/10; grid-row: 6/7;
grid-column: 1/3; grid-column: 1/3;
} }
.toBuy { .toBuy {
grid-row: 12/13; grid-row: 9/10;
grid-column: 1/3; grid-column: 1/3;
} }
...@@ -105,6 +94,7 @@ body { ...@@ -105,6 +94,7 @@ body {
background-color: white; background-color: white;
display: grid; display: grid;
grid-template-columns: 3vw repeat(6, 15.67vw) 3vw; grid-template-columns: 3vw repeat(6, 15.67vw) 3vw;
grid-template-rows: repeat(3, 6.25vh);
} }
.subheader { .subheader {
font-family: "Roboto Medium"; font-family: "Roboto Medium";
...@@ -114,14 +104,13 @@ body { ...@@ -114,14 +104,13 @@ body {
} }
.addItem { .addItem {
grid-column: 3/4; grid-column: 3/4;
grid-row: 2/3
} }
.addItemButton { .addItemButton {
margin-top: 35px;
margin-left: 20px; margin-left: 20px;
margin-right: 20px; margin-right: 20px;
background-color: rgba(175, 175, 175, 1); background-color: rgba(175, 175, 175, 0.7);
border-radius: 100px; border-radius: 100px;
opacity: 0.7;
transform: none; transform: none;
} }
.addItemText { .addItemText {
...@@ -131,12 +120,17 @@ body { ...@@ -131,12 +120,17 @@ body {
text-align: center; text-align: center;
} }
.changeView { .changeView {
background-color: rgba(228, 228, 228, 1);
font-family: "Roboto Medium";
font-size: 14px;
grid-column: 5/6; 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; text-align: center;
font-family: "Roboto Medium";
font-size: 14px;
} }
.listView { .listView {
...@@ -144,17 +138,16 @@ body { ...@@ -144,17 +138,16 @@ body {
grid-row: 2/3; grid-row: 2/3;
background-color: white; background-color: white;
display: grid; 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-template-rows: repeat(4, 20vh);
grid-column-gap: 3vw; grid-column-gap: 0vw;
grid-row-gap: 3vw; grid-row-gap: 3vw;
} }
.listItem { .listItem {
background-color: rgba(237, 237, 237, 1); background-color: rgba(237, 237, 237, 0.7);
display: grid; display: grid;
grid-template-columns: 10vw 15vw; grid-template-columns: 10vw 15vw;
grid-template-rows: repeat(5, 5vh); grid-template-rows: repeat(5, 5vh);
opacity: 0.7;
transform: none; transform: none;
} }
#listIcon { #listIcon {
...@@ -162,31 +155,36 @@ body { ...@@ -162,31 +155,36 @@ body {
grid-row: 1/5; grid-row: 1/5;
text-align: center; text-align: center;
clip-path: circle(); clip-path: circle();
/* width: 150px;
height: 150px*/
background-color: rgba(196, 196, 196, 1); background-color: rgba(196, 196, 196, 1);
margin: 5px; margin: 5px;
margin-left:110px;
} }
.listText { .listText {
grid-column: 2/3; grid-column: 2/3;
text-align: left; text-align: left;
margin: 10px; margin: 10px;
margin-left:130px;
} }
.daysLeft { .daysLeft {
font-family: "Roboto Black"; font-family: "Roboto Black";
font-size: 24px; font-size: 24px;
} }
.product { .product {
font-family: "Roboto Regular"; font-family: "Roboto";
font-size: 20px; font-size: 20px;
} }
.category { .category {
font-family: "Roboto Regular"; font-family: "Roboto";
font-size: 14px; font-size: 14px;
} }
.one { .one {
grid-column: 2/3; grid-column: 2/5;
grid-row: 1/2; grid-row: 1/2;
} }
.two {
/*.two {
grid-column: 2/3; grid-column: 2/3;
grid-row: 2/3; grid-row: 2/3;
} }
...@@ -229,7 +227,7 @@ body { ...@@ -229,7 +227,7 @@ body {
.twelve { .twelve {
grid-column: 4/5; grid-column: 4/5;
grid-row: 4/5; grid-row: 4/5;
} } */
@font-face { @font-face {
font-family: Roboto Bold; font-family: Roboto Bold;
...@@ -250,16 +248,20 @@ body { ...@@ -250,16 +248,20 @@ body {
.sideItem:hover { .sideItem:hover {
opacity: 1; background-color: rgba(104, 104, 104, 1);
transition: opacity .5s; transition: background-color .5s;
} }
.listItem:hover { .listItem:hover {
opacity: 1; background-color: rgba(237, 237, 237, 1);
transition: opacity .5s; transition: background-color .5s;
} }
.addItemButton:hover { .addItemButton:hover {
opacity: 1; background-color: rgba(175, 175, 175, 1);
transition: opacity .5s; transition: background-color .5s;
}
.changeViewDropdown:hover {
background-color: rgba(240, 240, 240, 1);
transition: background-color .5s;
} }
.main{ .main{
......
templates/placeholder-list.html
View file @ cf3b8de1
...@@ -16,22 +16,17 @@ ...@@ -16,22 +16,17 @@
<div class = "lowerPage"> <div class = "lowerPage">
<div class = "sidebar"> <div class = "sidebar">
<div class = "sideItem fridge"> <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> </div>
<img id= "fridgeIcon" src= "" alt= "a flat icon of a refrigerator";> <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 = "sideItem stats">
<div class = "sideText"> STATS </div> <div class = "sideText"> STATS </div>
</div> </div>
<img id= "statsIcon" src= "" alt= "a flat icon of a graph";> <img id= "statsIcon" src= "" alt= "a flat icon of a graph";>
<div class = "sideItem toBuy"> <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> </div>
<img id= "toBuyIcon" src= "" alt= "a flat icon of a shopping cart";> <img id= "toBuyIcon" src= "" alt= "a flat icon of a shopping cart";>
</div> </div>
...@@ -40,53 +35,27 @@ ...@@ -40,53 +35,27 @@
<div class = "subheader"> Fridge </div> <div class = "subheader"> Fridge </div>
<div class = "addItem"> <div class = "addItem">
<div class = "addItemButton"> <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> </div>
<div class = "changeView"> LIST VIEW </div> <div class = "changeView">
<div class = "changeViewDropdown">
<div class = "changeViewText"> LIST VIEW </div>
</div> </div>
</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 %} {% for product in object_list %}
<tr> <div class = "listView">
<th> <div class = "listItem one">
<img src = "{{product.Icon.url}}" width = "100" height ="100"> <img id= "listIcon" src= "{{product.Icon.url}}" width = "185" height = "185" alt= "a flat icon the product";>
</th> <div class = "listText">
<th> <div class = "daysLeft"><a href='http://127.0.0.1:8000/fridge/{{product.Product_ID}}'> {{product.Product_Name}} </a></div>
<a href='http://127.0.0.1:8000/fridge/{{product.Product_ID}}'> <div class = "product"> {{product.Product_Category}} </div>
{{product.Product_Name}}</a> <div class = "category"> To buy: {{product.To_Buy}} </div>
</th> </div>
<th> </div>
{{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>
{% endfor %} {% endfor %}
</table> </table>
{% endblock %} {% endblock %}
</html> </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