alu/cse110-fa22-group29
1
0
Fork 0
mirror of https://github.com/cse110-fa22-group29/cse110-fa22-group29.git synced 2024-12-27 09:29:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

first style integration

Browse Source 
Co-authored-by: d7hernan <d7hernan@users.noreply.github.com>
Co-authored-by: look-its-ashton <look-its-ashton@users.noreply.github.com>
This commit is contained in:
Gavyn Ezell 2022-11-19 12:29:50 -08:00
parent 23ae101f56
commit 5668e68594
8 changed files with 143 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
source/CreatePage.html
View File

@ -15,12 +15,13 @@
<!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config--> <!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config-->
<!-- <link rel="stylesheet" href="/static/reset.css" /> --> <!-- <link rel="stylesheet" href="/static/reset.css" /> -->
<link rel="stylesheet" href="./static/CreatePage.css" /> <link rel="stylesheet" href="./static/CreatePage.css" />
<link rel="icon" href="./assets/images/icons/favicon.ico">
<script src="./assets/scripts/CreatePage.js" type="module"></script> <script src="./assets/scripts/CreatePage.js" type="module"></script>
</head> </head>
<body> <body>
<!-- <input type="button" value="Home" id="home-btn" onclick="window.location.assign('./index.html')">--> <input type="button" value="Home" id="home-btn" onclick="window.location.assign('./index.html')">
<div class ="Top-Bar"> <div class ="Top-Bar">
<img src ="./assets/images/icons/Logo.png" alt="logo" /> <img src ="./assets/images/icons/Logo.png" alt="logo" />
<h1> Food Journal </h1> <h1> Food Journal </h1>

BIN
source/assets/images/icons/Grouppink.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
source/assets/images/icons/Logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 13 KiB

BIN
source/assets/images/icons/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 16 KiB

4
source/assets/scripts/main.js
View File

@ -18,12 +18,12 @@ function init() {
* @param {Array<Object>} reviews An array of reviews * @param {Array<Object>} reviews An array of reviews
*/ */
function addReviewsToDocument(reviews) { function addReviewsToDocument(reviews) {
let mainEl = document.querySelector("main"); let box = document.getElementById("review-container");
reviews.forEach(review => { reviews.forEach(review => {
let newReview = document.createElement("review-card"); let newReview = document.createElement("review-card");
newReview.data = review; newReview.data = review;
//TODO: want to append it to whatever the box is in layout //TODO: want to append it to whatever the box is in layout
mainEl.append(newReview); box.append(newReview);
}); });
} }

29
source/index.html
View File

@ -14,14 +14,39 @@
<!-- Main Stylesheets & Scripts --> <!-- Main Stylesheets & Scripts -->
<!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config--> <!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config-->
<!-- <link rel="stylesheet" href="/static/reset.css" /> --> <!-- <link rel="stylesheet" href="/static/reset.css" /> -->
<link rel="stylesheet" href="./static/ReviewCard.css" /> <link rel="stylesheet" href="./static/homepage.css" />
<script src="assets/scripts/main.js" type="module"></script> <script src="assets/scripts/main.js" type="module"></script>
</head> </head>
<body> <body>
<div class ="Top-Bar">
<img src ="./assets/images/icons/Logo.png" alt="logo" />
<h1 style="font-family:'Lucida Sans'"> Food Journal </h1>
<form id="form">
<input type='search' id="seaching" name="searchBar" placeholder="Search journal...">
<button class="click" type="search">
Search
</button>
</form>
<!--
<form id="form">
<input type='search' id="seaching" name="searchBar" placeholder="Search journal...">
<button class="click" type="search">
Search
</button>
</form>
--->
<main> <main>
<!-- Add Food Entries Here --> <!-- Add Food Entries Here -->
<div class="Review-boxes">
<h2> Recent Reviews </h2>
<a href='./CreatePage.html'><img src ="./assets/images/icons/Grouppink.png" alt="CREATE" /></a>
</div>
<div class="Filter-box">
</div>
<div class="review-container" id="review-container"></div>
</main> </main>
<button type="button" id="create-btn"><a href='./CreatePage.html'></a>CREATE</button> <!--<button type="button" id="create-btn"><a href='./CreatePage.html'></a>CREATE</button>-->
</body> </body>
</html> </html>

47
source/static/CreatePage.css
View File

@ -35,3 +35,50 @@ h1 {
border: 3px solid rgb(7, 0, 0); border: 3px solid rgb(7, 0, 0);
background-color: #b52754; background-color: #b52754;
} }
.hidden,
.rating:not(:checked) > input { /* Hide radio circles while star rating */
display: none;
}
/* Unchecked stars */
.rating:not(:checked) > label {
/* Make stars line up sideways and not vertically */
float: right;
/* Hide label text */
width: 1em;
overflow: hidden;
white-space: nowrap;
/* Star default color and size */
font-size: 200%;
line-height: 1.2;
color: #b3b3cc;
}
.rating > label:active {
position: relative;
}
.rating:not(:checked) > label::before {
content: "★";
}
/* Checked star color */
.rating > input:checked ~ label {
color: #ffbf00;
}
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
color: orangered;
}
.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
color: orangered;
}

65
source/static/homepage.css Normal file
View File

@ -0,0 +1,65 @@
/* homepage.css */
/* Color*/
body{
background-color: #13323b;
}
.Top-Bar{
margin-top: -8cm;
}
.Top-Bar > img{
position: relative;
top: 7.5cm;
}
.Top-Bar > h1{
position: relative;
left: 10.5cm;
top: 2.2cm;
font-size: 3cm;
color: #EAA9BC;
}
.Top-Bar > form{
position: relative;
left: 32cm;
}
.Review-boxes {
position: relative;
}
.Review-boxes > h2 {
position: relative;
left: 10cm;
font-size: 1.5cm;
color: #EAA9BC;
}
.Review-boxes > input {
position: relative;
left: 20.34cm;
top: -3.5cm;
}
.Filter-box{
width:300px;
height:700px;
background: #8D4E62;
position: relative;
left: 29.5cm;
top: -5.5cm;
}
.review-container{
display: flex;
position: relative;
top: -22cm;
left: 5cm;
max-width: 900px;
flex-wrap: wrap;
}
.review-container > div {
background-color: #f1f1f1;
width: 200px;
height: 200px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}