Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Avoid double wrapping with anchor tag and tweak unfurl CSS

Browse Source 
to make it smaller on large screens.
This commit is contained in:
JC Brand 2022-09-27 13:51:08 +02:00
parent 5760379e0a
commit 6293efd8ee
2 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/shared/chat/styles/unfurl.scss
View File

@ -5,11 +5,27 @@
.conversejs {
@import "bootstrap/scss/card";
converse-chats {
converse-message-unfurl {
.card--unfurl {
background-color: var(--chat-content-background-color);
.card-body {
padding: 0.75rem;
.vcard-title {
font-size: 90%;
}
}
.card-text {
converse-rich-text {
font-size: 80%;
}
}
.card-img-top {
margin-top: 0.75rem;
}
}
}
converse-chats {
&.converse-embedded,
&.converse-fullscreen {
.message {
@ -22,10 +38,10 @@
max-width: 75%;
}
@include media-breakpoint-up(lg) {
max-width: 66%;
max-width: 60%;
}
@include media-breakpoint-up(xl) {
max-width: 50%;
max-width: 30%;
}
}
}

4
src/shared/chat/templates/unfurl.js
View File

@ -17,14 +17,14 @@ const tpl_url_wrapper = (o, wrapped_template) =>
: wrapped_template(o);
const tpl_image = o =>
html`<converse-image class="card-img-top" href="${o.url}" src="${o.image}" .onImgLoad=${o.onload}></converse-image>`;
html`<converse-image class="card-img-top hor_centered" href="${o.url}" src="${o.image}" .onImgLoad=${o.onload}></converse-image>`;
export default o => {
const show_image = isValidImage(o.image);
const has_body_info = o.title || o.description || o.url;
if (show_image || has_body_info) {
return html`<div class="card card--unfurl">
${show_image ? tpl_url_wrapper(o, tpl_image) : ''}
${show_image ? tpl_image(o) : ''}
${has_body_info
? html` <div class="card-body">
${o.title ? tpl_url_wrapper(o, o => html`<h5 class="card-title">${o.title}</h5>`) : ''}