Skip to content

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

Integrated sidebar html with django, added css

parent d09485d4
Hide whitespace changes
Inline Side-by-side
Showing with 206 additions and 8 deletions
Breadcrumbs/static/mainFridgeList.css 0 → 100644
View file @ 4af4656a
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 0 → 100644
View file @ 4af4656a
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 {
height: 100%;
position:fixed;
width:265px;
background-color: rgba(196, 196, 196, 1);
display: grid;
grid-template-rows: repeat(16, 6.25vh);
grid-column: 1/2;
z-index:1;
left:0;
}
.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);
}
.main{
margin-left:23%;
}
\ No newline at end of file
Breadcrumbs/templates/placeholder-list.html
View file @ 4af4656a
<html> <html>
<title>Fridge</title> <title>Fridge</title>
{% load static %} {% load static %}
<link rel="stylesheet" href="{%static "sidebar.css" %}">
{% block content %} {% block content %}
<style> <style>
table, th, td { table, th, td {
border: 1px solid black; border: 1px solid black;
} }
</style> </style>
<div class = "listViewHeader">
<div class = "breadcrumbsHead">
BREADCRUMBS
</div>
</div>
<div class = "lowerPage">
<div class = "sidebar">
<div class = "sideItem text fridge">
FRIDGE
</div>
<div class = "sideItem icon fridge">
<div class = "circle"> :3 </div>
</div>
<div class = "sideItem text recipes">
RECIPES
</div>
<div class = "sideItem icon recipes">
<div class = "circle"> :3 </div>
</div>
<div class = "sideItem text stats">
STATS
</div>
<div class = "sideItem icon stats">
<div class = "circle"> :3 </div>
</div>
<div class = "sideItem text toBuy">
TO BUY
</div>
<div class = "sideItem icon toBuy">
<div class = "circle"> :3 </div>
</div>
</div>
</div>
<h2>Fridge</h2> <h2>Fridge</h2>
<table style="width:100%"> <table style="width:70%" div class="main">
<tr><th></th><th>name</th><th>category</th><th>description</th><th>to buy?</th><th>user</th></tr> <tr><th></th><th>name</th><th>category</th><th>description</th><th>to buy?</th><th>user</th></tr>
{% for product in object_list %} {% for product in object_list %}
<tr> <tr>
......
HTML and CSS Files/mainFridgeList.css
View file @ 4af4656a
body { body {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0px; margin: 0px;
} }
.listViewHeader { .listViewHeader {
...@@ -23,10 +23,16 @@ body { ...@@ -23,10 +23,16 @@ body {
text-align: left; text-align: left;
} }
.sidebar { .sidebar {
height: 100%;
position:fixed;
width:265px;
background-color: rgba(196, 196, 196, 1); background-color: rgba(196, 196, 196, 1);
display: grid; display: grid;
grid-template-rows: repeat(16, 6.25vh); grid-template-rows: repeat(16, 6.25vh);
grid-column: 1/2; grid-column: 1/2;
z-index:1;
left:0;
} }
.sideItem { .sideItem {
grid-template-columns: repeat(2, 12.5vw); grid-template-columns: repeat(2, 12.5vw);
...@@ -61,10 +67,14 @@ body { ...@@ -61,10 +67,14 @@ body {
} }
@font-face { @font-face {
font-family: Roboto Bold; font-family: Roboto Bold;
src: url(Roboto-Bold.ttf); src: url(Roboto-Bold.ttf);
} }
@font-face { @font-face {
font-family: Roboto; font-family: Roboto;
src: url(Roboto-Regular.ttf); src: url(Roboto-Regular.ttf);
}
.main{
margin-left:23%;
} }
\ 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