mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-10-01 17:31:13 +00:00
Set embedded media border radius to 16px
This commit is contained in:
parent
fb9e2838a1
commit
4828073e55
@ -34,7 +34,7 @@ const EmbeddedNote: Component<{ note: PrimalNote, mentionedUsers?: Record<string
|
||||
if (props.includeEmbeds) {
|
||||
return (
|
||||
<div
|
||||
class={styles.mentionedNote}
|
||||
class={`${styles.mentionedNote} embeddedContent`}
|
||||
data-event={props.note.post.id}
|
||||
data-event-bech32={noteId()}
|
||||
>
|
||||
@ -46,7 +46,7 @@ const EmbeddedNote: Component<{ note: PrimalNote, mentionedUsers?: Record<string
|
||||
return (
|
||||
<A
|
||||
href={`/e/${noteId()}`}
|
||||
class={styles.mentionedNote}
|
||||
class={`${styles.mentionedNote} embeddedContent`}
|
||||
onClick={() => navToThread()}
|
||||
data-event={props.note.post.id}
|
||||
data-event-bech32={noteId()}
|
||||
|
@ -42,6 +42,8 @@ const LinkPreview: Component<{ preview: any, id?: string, bordered?: boolean }>
|
||||
k += ` ${styles.bordered}`;
|
||||
}
|
||||
|
||||
k += " embeddedContent";
|
||||
|
||||
return k;
|
||||
};
|
||||
|
||||
|
@ -473,6 +473,8 @@ const ParsedNote: Component<{
|
||||
klass += ' redBorder';
|
||||
}
|
||||
|
||||
klass += ' embeddedContent';
|
||||
|
||||
setWordsDisplayed(w => w + shortMentionInWords);
|
||||
|
||||
const video = <video
|
||||
@ -504,7 +506,7 @@ const ParsedNote: Component<{
|
||||
const youtubeId = isYouTube(token) && RegExp.$1;
|
||||
|
||||
return <iframe
|
||||
class="w-max"
|
||||
class="w-max embeddedContent"
|
||||
src={`https://www.youtube.com/embed/${youtubeId}`}
|
||||
title="YouTube video player"
|
||||
// @ts-ignore no property
|
||||
@ -527,6 +529,7 @@ const ParsedNote: Component<{
|
||||
const convertedUrl = token.replace(/\/(track|album|playlist|episode)\/([a-zA-Z0-9]+)/, "/embed/$1/$2");
|
||||
|
||||
return <iframe
|
||||
class="embeddedContent"
|
||||
style="borderRadius: 12"
|
||||
src={convertedUrl}
|
||||
width="100%"
|
||||
@ -552,6 +555,7 @@ const ParsedNote: Component<{
|
||||
const args = `?channel=${channel}&parent=${window.location.hostname}&muted=true`;
|
||||
|
||||
return <iframe
|
||||
class="embeddedContent"
|
||||
src={`https://player.twitch.tv/${args}`}
|
||||
// @ts-ignore no property
|
||||
className="w-max"
|
||||
@ -570,7 +574,7 @@ const ParsedNote: Component<{
|
||||
|
||||
const feedPath = (isMixCloud(token) && RegExp.$1) + "%2F" + (isMixCloud(token) && RegExp.$2);
|
||||
|
||||
return <div>
|
||||
return <div class="embeddedContent">
|
||||
<iframe
|
||||
title="SoundCloud player"
|
||||
width="100%"
|
||||
@ -592,6 +596,7 @@ const ParsedNote: Component<{
|
||||
setWordsDisplayed(w => w + shortMentionInWords);
|
||||
|
||||
return <iframe
|
||||
class="embeddedContent"
|
||||
width="100%"
|
||||
height="166"
|
||||
// @ts-ignore no property
|
||||
@ -614,6 +619,7 @@ const ParsedNote: Component<{
|
||||
const isSongLink = /\?i=\d+$/.test(convertedUrl);
|
||||
|
||||
return <iframe
|
||||
class="embeddedContent"
|
||||
allow="autoplay *; encrypted-media *; fullscreen *; clipboard-write"
|
||||
// @ts-ignore no property
|
||||
frameBorder="0"
|
||||
@ -636,6 +642,7 @@ const ParsedNote: Component<{
|
||||
const convertedUrl = token.replace(/(?:player\.|www\.)?wavlake\.com/, "embed.wavlake.com");
|
||||
|
||||
return <iframe
|
||||
class="embeddedContent"
|
||||
style="borderRadius: 12"
|
||||
src={convertedUrl}
|
||||
width="100%"
|
||||
|
@ -46,6 +46,7 @@
|
||||
|
||||
--border-radius-small: 8px;
|
||||
--border-radius-big: 12px;
|
||||
--border-radius-large: 16px;
|
||||
|
||||
--central-content-width: 600px;
|
||||
|
||||
@ -183,13 +184,21 @@ a {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.embeddedContent {
|
||||
margin-block: 12px !important;
|
||||
display: block !important;
|
||||
border-radius: var(--border-radius-large) !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.imageGrid {
|
||||
margin-block: 12px !important;
|
||||
display: grid;
|
||||
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-auto-rows: 125px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border-radius: var(--border-radius-large) !important;
|
||||
overflow: hidden !important;
|
||||
grid-gap: 2px;
|
||||
|
||||
img {
|
||||
@ -284,7 +293,7 @@ a {
|
||||
|
||||
.roundedImage {
|
||||
img {
|
||||
border-radius: var(--border-radius-small);
|
||||
border-radius: var(--border-radius-large);
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user