mirror of
https://github.com/cse110-fa22-group29/cse110-fa22-group29.git
synced 2024-12-26 00:49:10 +00:00
fix ReviewDetails CreatePage large tag display issue
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
parent
0912ea7956
commit
9f9ac19b71
@ -12,92 +12,93 @@ class ReviewCard extends HTMLElement {
|
||||
|
||||
let styleEl = document.createElement("style");
|
||||
styleEl.textContent = `
|
||||
* {
|
||||
font-family: Century Gothic;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
article {
|
||||
align-items: center;
|
||||
border: 2px solid rgb(31, 41, 32);
|
||||
border-radius: 8px;
|
||||
display: grid;
|
||||
grid-template-rows: 118px 56px 14px 18px 15px 36px;
|
||||
height: auto;
|
||||
row-gap: 5px;
|
||||
padding: 0 16px 16px 16px;
|
||||
width: 178px;
|
||||
margin: 8px 8px 8px 8px;
|
||||
}
|
||||
|
||||
div.rating {
|
||||
align-items: center;
|
||||
column-gap: 5px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
div.rating>img {
|
||||
height: auto;
|
||||
display: inline-block;
|
||||
object-fit: scale-down;
|
||||
width: 78px;
|
||||
}
|
||||
|
||||
article>img {
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
height: 119px;
|
||||
object-fit: cover;
|
||||
margin-left: -16px;
|
||||
width: calc(100% + 32px);
|
||||
}
|
||||
|
||||
label.restaurant-name {
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
label.meal-name {
|
||||
display: -webkit-box;
|
||||
font-size: 16px;
|
||||
height: 36px;
|
||||
line-height: 18px;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
label:not(.meal-name),
|
||||
span,
|
||||
time {
|
||||
color: #70757A;
|
||||
font-size: 12px;
|
||||
}
|
||||
* {
|
||||
font-family: Century Gothic;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
article {
|
||||
align-items: center;
|
||||
border: 2px solid rgb(31, 41, 32);
|
||||
border-radius: 8px;
|
||||
display: grid;
|
||||
grid-template-rows: 118px 56px 14px 18px 15px 36px;
|
||||
height: auto;
|
||||
row-gap: 5px;
|
||||
padding: 0 16px 16px 16px;
|
||||
width: 178px;
|
||||
margin: 8px 8px 8px 8px;
|
||||
}
|
||||
|
||||
div.rating {
|
||||
align-items: center;
|
||||
column-gap: 5px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
div.rating>img {
|
||||
height: auto;
|
||||
display: inline-block;
|
||||
object-fit: scale-down;
|
||||
width: 78px;
|
||||
}
|
||||
|
||||
article>img {
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
height: 119px;
|
||||
object-fit: cover;
|
||||
margin-left: -16px;
|
||||
width: calc(100% + 32px);
|
||||
}
|
||||
|
||||
label.restaurant-name {
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
label.meal-name {
|
||||
display: -webkit-box;
|
||||
font-size: 16px;
|
||||
height: 36px;
|
||||
line-height: 18px;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
label:not(.meal-name),
|
||||
span,
|
||||
time {
|
||||
color: #70757A;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tag-container {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.a-tag {
|
||||
background-color:#94da97;
|
||||
border-radius: 7px;
|
||||
color: #94da97;
|
||||
padding-right: 7px;
|
||||
padding-left: 7px;
|
||||
margin: 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
`;
|
||||
.tag-container {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.a-tag {
|
||||
background-color:#94da97;
|
||||
border-radius: 7px;
|
||||
color: #94da97;
|
||||
padding-right: 7px;
|
||||
padding-left: 7px;
|
||||
margin: 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
`;
|
||||
articleEl.append(styleEl);
|
||||
shadowEl.append(articleEl);
|
||||
this.shadowEl = shadowEl;
|
||||
|
@ -139,4 +139,9 @@ input[type=text]:focus {
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tag-container * {
|
||||
max-width: 100%;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
@ -41,9 +41,4 @@ h1 {
|
||||
padding-right: 7px;
|
||||
padding-left: 7px;
|
||||
margin: 10px 10px 10px 10px;
|
||||
}
|
||||
|
||||
.tag-container > .d-tag {
|
||||
max-width: 100%;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
Loading…
Reference in New Issue
Block a user