Spacebar/client
1
0
Fork 0
mirror of https://github.com/spacebarchat/client.git synced 2024-11-22 10:22:30 +01:00
Code Issues Releases Activity

fix embed gap

Browse Source
This commit is contained in:
Puyodead1 2023-09-22 10:53:03 -04:00
parent 87b9f18787
commit 981f73bb6c
No known key found for this signature in database
GPG Key ID: BA5F91AAEF68E5CE
2 changed files with 161 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

316
src/components/messaging/Embed.module.css
View File

@ -1,161 +1,161 @@
.embed {
margin: 0.2em 0;
iframe {
border: none;
border-radius: 4px;
width: 100%;
}
&.image {
cursor: pointer;
}
&.website {
display: flex;
gap: 10px;
flex-direction: row;
> div:nth-child(1) {
gap: 10px;
display: flex;
flex-direction: column;
}
border-inline-start-width: 4px;
border-inline-start-style: solid;
padding: 12px;
width: fit-content;
background: var(--background-secondary);
border-radius: 4px;
.embedProvider {
font-size: 12px;
color: var(--text-secondary);
font-weight: var(--font-weight-regular);
width: fit-content;
}
.embedAuthor {
display: flex;
align-items: center;
width: fit-content;
}
.embedAuthorIcon {
width: 24px;
height: 24px;
border-radius: 50%;
margin-right: 10px;
object-fit: contain;
}
.embedAuthorName {
font-size: 14px;
font-weight: var(--font-weight-medium);
color: var(--text);
display: inline-block;
width: fit-content;
}
.embedAuthorNameLink {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.embedTitle {
display: inline-block;
font-size: 16px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-weight: var(--font-weight-medium);
color: var(--text);
width: fit-content;
text-decoration: none;
}
.embedTitleLink {
color: var(--text-link);
&:hover {
text-decoration: underline;
}
}
.embedDescription {
font-size: 14px;
overflow: hidden;
display: -webkit-box;
white-space: pre-wrap;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
width: fit-content;
}
.embedFooter {
display: flex;
align-items: center;
width: fit-content;
}
.embedFooterIcon {
width: 24px;
height: 24px;
border-radius: 50%;
margin-right: 10px;
object-fit: contain;
}
.embedFooterText {
font-size: 12px;
font-weight: var(--font-weight-medium);
color: var(--text);
display: inline-block;
width: fit-content;
}
.embedFooterSeperator {
font-weight: var(--font-weight-medium);
display: inline-block;
margin: 0 5px;
}
.embedFields {
/* grid */
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-gap: 10px;
}
.embedField {
font-size: 14px;
}
.embedFieldName {
font-weight: var(--font-weight-medium);
margin-bottom: 2px;
}
.embedFieldValue {
font-weight: var(--font-weight-regular);
color: var(--text-secondary);
}
img.image {
cursor: pointer;
object-fit: fill;
border-radius: 4px;
}
a {
cursor: pointer;
}
}
}
iframe {
border: none;
border-radius: 4px;
width: 100%;
}
.image {
cursor: pointer;
}
.website {
display: flex;
gap: 10px;
flex-direction: row;
border-inline-start-width: 4px;
border-inline-start-style: solid;
padding: 12px;
width: fit-content;
background: var(--background-secondary);
border-radius: 4px;
}
.website::div:nth-child(1) {
gap: 10px;
display: flex;
flex-direction: column;
}
.embedProvider {
font-size: 12px;
color: var(--text-secondary);
font-weight: var(--font-weight-regular);
width: fit-content;
}
.embedAuthor {
display: flex;
align-items: center;
width: fit-content;
}
.embedAuthorIcon {
width: 24px;
height: 24px;
border-radius: 50%;
margin-right: 10px;
object-fit: contain;
}
.embedAuthorName {
font-size: 14px;
font-weight: var(--font-weight-medium);
color: var(--text);
display: inline-block;
width: fit-content;
}
.embedAuthorNameLink {
text-decoration: none;
}
.embedAuthorName:hover {
text-decoration: underline;
}
.embedTitle {
display: inline-block;
font-size: 16px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-weight: var(--font-weight-medium);
color: var(--text);
width: fit-content;
text-decoration: none;
}
.embedTitleLink {
color: var(--text-link);
}
.embedTitleLink:hover {
text-decoration: underline;
}
.embedDescription {
font-size: 14px;
overflow: hidden;
display: -webkit-box;
white-space: pre-wrap;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
width: fit-content;
}
.embedFooter {
display: flex;
align-items: center;
width: fit-content;
}
.embedFooterIcon {
width: 24px;
height: 24px;
border-radius: 50%;
margin-right: 10px;
object-fit: contain;
}
.embedFooterText {
font-size: 12px;
font-weight: var(--font-weight-medium);
color: var(--text);
display: inline-block;
width: fit-content;
}
.embedFooterSeperator {
font-weight: var(--font-weight-medium);
display: inline-block;
margin: 0 5px;
}
.embedFields {
/* grid */
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-gap: 10px;
}
.embedField {
font-size: 14px;
}
.embedFieldName {
font-weight: var(--font-weight-medium);
margin-bottom: 2px;
}
.embedFieldValue {
font-weight: var(--font-weight-regular);
color: var(--text-secondary);
}
img.image {
cursor: pointer;
object-fit: fill;
border-radius: 4px;
}
a {
cursor: pointer;
}

6
src/components/messaging/MessageEmbed.tsx
View File

@ -92,9 +92,9 @@ function MessageEmbed({ embed }: Props) {
maxWidth: width + CONTAINER_PADDING,
}}
>
<div>
<div style={{ display: "flex" }}>
<div style={{ flex: 1, display: "flex", gap: 10, flexDirection: "column" }}>
<div style={{ flex: 1, display: "flex", gap: 10, flexDirection: "column" }}>
<div>
<div>
{embed.type !== EmbedType.Rich && embed.provider && (
<span className={styles.embedProvider}>{embed.provider.name}</span>
)}