alu/cse110-fa22-group29
1
0
Fork 0
mirror of https://github.com/cse110-fa22-group29/cse110-fa22-group29.git synced 2024-11-10 05:34:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix ReviewDetails CreatePage large tag display issue

Browse Source 
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2022-11-21 17:20:12 -08:00
parent 0912ea7956
commit 9f9ac19b71
3 changed files with 91 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,92 +12,93 @@ class ReviewCard extends HTMLElement {
let styleEl = document.createElement("style"); let styleEl = document.createElement("style");
styleEl.textContent = ` styleEl.textContent = `
* { * {
font-family: Century Gothic; font-family: Century Gothic;
margin: 0; margin: 0;
padding: 0; padding: 0;
} overflow-wrap: anywhere;
}
a {
text-decoration: none; a {
} text-decoration: none;
}
a:hover {
text-decoration: underline; a:hover {
} text-decoration: underline;
}
article {
align-items: center; article {
border: 2px solid rgb(31, 41, 32); align-items: center;
border-radius: 8px; border: 2px solid rgb(31, 41, 32);
display: grid; border-radius: 8px;
grid-template-rows: 118px 56px 14px 18px 15px 36px; display: grid;
height: auto; grid-template-rows: 118px 56px 14px 18px 15px 36px;
row-gap: 5px; height: auto;
padding: 0 16px 16px 16px; row-gap: 5px;
width: 178px; padding: 0 16px 16px 16px;
margin: 8px 8px 8px 8px; width: 178px;
} margin: 8px 8px 8px 8px;
}
div.rating {
align-items: center; div.rating {
column-gap: 5px; align-items: center;
display: flex; column-gap: 5px;
} display: flex;
}
div.rating>img {
height: auto; div.rating>img {
display: inline-block; height: auto;
object-fit: scale-down; display: inline-block;
width: 78px; object-fit: scale-down;
} width: 78px;
}
article>img {
border-top-left-radius: 6px; article>img {
border-top-right-radius: 6px; border-top-left-radius: 6px;
height: 119px; border-top-right-radius: 6px;
object-fit: cover; height: 119px;
margin-left: -16px; object-fit: cover;
width: calc(100% + 32px); margin-left: -16px;
} width: calc(100% + 32px);
}
label.restaurant-name {
color: black !important; label.restaurant-name {
} color: black !important;
}
label.meal-name {
display: -webkit-box; label.meal-name {
font-size: 16px; display: -webkit-box;
height: 36px; font-size: 16px;
line-height: 18px; height: 36px;
overflow: hidden; line-height: 18px;
-webkit-line-clamp: 2; overflow: hidden;
-webkit-box-orient: vertical; -webkit-line-clamp: 2;
} -webkit-box-orient: vertical;
}
label:not(.meal-name),
span, label:not(.meal-name),
time { span,
color: #70757A; time {
font-size: 12px; color: #70757A;
} font-size: 12px;
}
.tag-container { .tag-container {
margin-top: 20px; margin-top: 20px;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
} }
.a-tag { .a-tag {
background-color:#94da97; background-color:#94da97;
border-radius: 7px; border-radius: 7px;
color: #94da97; color: #94da97;
padding-right: 7px; padding-right: 7px;
padding-left: 7px; padding-left: 7px;
margin: 3px; margin: 3px;
font-weight: bold; font-weight: bold;
} }
`; `;
articleEl.append(styleEl); articleEl.append(styleEl);
shadowEl.append(articleEl); shadowEl.append(articleEl);
this.shadowEl = shadowEl; this.shadowEl = shadowEl;

5
source/static/Form.css
View File

@ -139,4 +139,9 @@ input[type=text]:focus {
.hidden { .hidden {
display: none; display: none;
}
.tag-container * {
max-width: 100%;
overflow-wrap: anywhere;
} }

5
source/static/ReviewDetails.css
View File

@ -41,9 +41,4 @@ h1 {
padding-right: 7px; padding-right: 7px;
padding-left: 7px; padding-left: 7px;
margin: 10px 10px 10px 10px; margin: 10px 10px 10px 10px;
}
.tag-container > .d-tag {
max-width: 100%;
overflow-wrap: anywhere;
} }