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

fix ReviewCard css,

Browse Source 
fixes article tag overflow issue,
should resolve #85

Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2022-11-26 18:00:09 -08:00
parent ae2e14172d
commit a63552f32b
1 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
source/assets/scripts/ReviewCard.js
View File

@ -31,18 +31,15 @@ class ReviewCard extends HTMLElement {
align-items: center; align-items: center;
border: 2px solid rgb(31, 41, 32); border: 2px solid rgb(31, 41, 32);
border-radius: 8px; border-radius: 8px;
display: grid;
grid-template-rows: 118px 56px 14px 18px 15px 36px;
height: auto; height: auto;
row-gap: 5px; row-gap: 5px;
padding: 0 16px 16px 16px; padding: 0 16px 16px 16px;
width: 178px; width: 200px;
margin: 8px 8px 8px 8px; margin: 8px 8px 8px 8px;
} }
div.rating { div.rating {
align-items: center; align-items: center;
column-gap: 5px;
display: flex; display: flex;
} }
@ -50,30 +47,30 @@ class ReviewCard extends HTMLElement {
height: auto; height: auto;
display: inline-block; display: inline-block;
object-fit: scale-down; object-fit: scale-down;
width: 78px;
} }
article>img { article>img {
border-top-left-radius: 6px; border-top-left-radius: 6px;
border-top-right-radius: 6px; border-top-right-radius: 6px;
height: 119px; height: 120px;
object-fit: cover; object-fit: cover;
margin-left: -16px; margin-left: -16px;
margin-right: -16px;
width: calc(100% + 32px); width: calc(100% + 32px);
} }
.meal-name-div {
height: 54px;
overflow: hidden;
}
label.restaurant-name { label.restaurant-name {
color: black !important; color: black !important;
} }
label.meal-name { label.meal-name {
display: -webkit-box; font-size: 24px;
font-size: 16px;
height: 36px; height: 36px;
line-height: 18px;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} }
label:not(.meal-name), label:not(.meal-name),
@ -87,15 +84,16 @@ class ReviewCard extends HTMLElement {
margin-top: 20px; margin-top: 20px;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
height: 100px;
overflow: hidden;
} }
.a-tag { .a-tag {
background-color:#94da97; background-color:#94da97;
border-radius: 7px; border-radius: 6px;
color: #94da97; color: #94da97;
padding-right: 7px; padding: 0px 6px 2px 6px;
padding-left: 7px; margin: 2px 2px 2px 2px;
margin: 3px;
font-weight: bold; font-weight: bold;
} }
`; `;
@ -162,10 +160,13 @@ class ReviewCard extends HTMLElement {
}); });
//meal name setup //meal name setup
let meallabelDiv = document.createElement("div");
meallabelDiv.setAttribute("class", "meal-name-div");
let mealLabel = document.createElement("label"); let mealLabel = document.createElement("label");
mealLabel.setAttribute("id", "a-mealName"); mealLabel.setAttribute("id", "a-mealName");
mealLabel.setAttribute("class","meal-name"); mealLabel.setAttribute("class","meal-name");
mealLabel.innerHTML = data["mealName"]; mealLabel.innerHTML = data["mealName"];
meallabelDiv.append(mealLabel);
//restaurant name setup //restaurant name setup
let restaurantLabel = document.createElement("label"); let restaurantLabel = document.createElement("label");
@ -206,7 +207,7 @@ class ReviewCard extends HTMLElement {
//adding final ID to data! //adding final ID to data!
articleEl.append(mealImg); articleEl.append(mealImg);
articleEl.append(mealLabel); articleEl.append(meallabelDiv);
articleEl.append(restaurantLabel); articleEl.append(restaurantLabel);
articleEl.append(ratingDiv); articleEl.append(ratingDiv);
articleEl.append(tagContainer); articleEl.append(tagContainer);