ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web Page: Change photo preview position (#5308)

Browse Source
This commit is contained in:
Alexander Zinchuk 2024-12-11 18:16:19 +01:00
parent 9c635ae7e6
commit dd8bf46e92
3 changed files with 27 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/middle/message/WebPage.scss
View File

@ -72,6 +72,7 @@
.WebPage--content {
position: relative;
margin-inline-start: 0.375rem;
margin-inline-end: 0.25rem;
&.is-story {
display: flex;
@ -108,6 +109,7 @@
.media-inner {
margin: 0 !important;
margin-block: 0.25rem !important;
&,
& img,

22
src/components/middle/message/WebPage.tsx
View File

@ -194,6 +194,17 @@ const WebPage: FC<OwnProps> = ({
{isStory && (
<BaseStory story={story} isProtected={isProtected} isConnected={isConnected} isPreview />
)}
{isArticle && (
<div className="WebPage-text">
<SafeLink className="site-name" url={url} text={siteName || displayUrl} />
{!inPreview && title && (
<p className="site-title">{renderText(title)}</p>
)}
{truncatedDescription && (
<p className="site-description">{renderText(truncatedDescription, ['emoji', 'br'])}</p>
)}
</div>
)}
{photo && !video && !document && (
<Photo
photo={photo}
@ -212,17 +223,6 @@ const WebPage: FC<OwnProps> = ({
onCancelUpload={onCancelMediaTransfer}
/>
)}
{isArticle && (
<div className="WebPage-text">
<SafeLink className="site-name" url={url} text={siteName || displayUrl} />
{!inPreview && title && (
<p className="site-title">{renderText(title)}</p>
)}
{truncatedDescription && (
<p className="site-description">{renderText(truncatedDescription, ['emoji', 'br'])}</p>
)}
</div>
)}
{!inPreview && video && (
<Video
video={video}

26
src/components/middle/message/_message-content.scss
View File

@ -622,6 +622,20 @@
}
}
.message-content:not(.web-page).media {
// Moved below `.has-subheader` to overwrite its styles
&.is-inverted-media.has-fact-check .media-inner:not(.file-preview),
&.is-inverted-media.has-fact-check .Album,
&.text:not(.is-inverted-media) .media-inner:not(.file-preview),
&.text:not(.is-inverted-media) .Album {
margin-bottom: 0.375rem !important;
body.is-ios .Message.own & {
margin-bottom: 0.375rem;
}
}
}
.message-content.media,
.WebPage:not(.with-document) {
.media-inner {
@ -696,18 +710,6 @@
margin-bottom: 0;
}
// Moved below `.has-subheader` to overwrite its styles
&.is-inverted-media.has-fact-check .media-inner:not(.file-preview),
&.is-inverted-media.has-fact-check .Album,
&.text:not(.is-inverted-media) .media-inner:not(.file-preview),
&.text:not(.is-inverted-media) .Album {
margin-bottom: 0.375rem !important;
body.is-ios .Message.own & {
margin-bottom: 0.375rem;
}
}
.media-loading {
display: flex;
align-items: center;