Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Fixed twitter preview shrinking bug and responsive issues for social preview

Browse source
This commit is contained in:
Sanne de Vries 2021-02-12 16:13:42 +01:00
parent 4839da5047
commit a792d152da
2 changed files with 42 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ghost/admin/app/components/modal-post-preview/social.hbs
View file

@ -1,7 +1,7 @@
<div class="gh-post-preview-social-container">
<div class="flex flex-column">
<div class="flex mb6">
<div class="flex gh-social-container-responsive">
<div class="gh-social-og-container">
<div class="flex ma3 mb2">
<span>{{svg-jar "social-facebook" class="social-icon"}}</span>
@ -36,7 +36,7 @@
</div>
<div class="gh-social-twitter-container">
<div class="flex ma3 mb2 mr4">
<div class="flex ma4">
<span>{{svg-jar "social-twitter" class="social-icon"}}</span>
<div>
<span class="gh-social-og-title">{{or this.settings.metaTitle this.settings.title}}</span>
@ -49,7 +49,7 @@
{{#if this.twitterImage}}
<div class="gh-social-twitter-preview-image" style={{background-image-style this.twitterImage}}></div>
{{/if}}
<div class="gh-twitter-preview-content">
<div class="gh-social-twitter-preview-content">
<div class="gh-social-twitter-preview-title">{{this.twitterTitle}}</div>
<div class="gh-social-twitter-preview-desc">{{truncate this.twitterDescription}}</div>
<div class="gh-social-twitter-preview-meta">

44
ghost/admin/app/styles/layouts/post-preview.css
View file

@ -186,7 +186,9 @@
.gh-post-preview-social-container {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
height: 100%;
overflow-y: scroll;
padding: 3.2rem;
@ -196,6 +198,20 @@
border-bottom-right-radius: 3px;
}
.gh-post-preview-social-container:after {
content: "";
display: block;
height: 2.4rem;
width: 100%;
}
@media (max-width: 1120px) {
.gh-social-container-responsive {
flex-direction: column;
align-items: center;
}
}
.social-icon {
width: 40px;
height: 40px;
@ -204,12 +220,18 @@
.gh-social-og-container {
width: 476px;
margin-right: 1.2rem;
margin-bottom: 2.4rem;
border: 1px solid #e5e5e5;
background: #fff;
border-radius: 3px;
}
@media (min-width: 1120px) {
.gh-social-og-container {
margin-right: 1.2rem;
}
}
.gh-social-og-title {
color: #385898;
font-size: 14;
@ -313,12 +335,18 @@
}
.gh-social-twitter-container {
width: 600px;
margin-left: 1.2rem;
width: 591px;
margin-bottom: 2.4rem;
border: 1px solid #ebeef0;
background: #fff;
}
@media (min-width: 1120px) {
.gh-social-twitter-container {
margin-left: 1.2rem;
}
}
.gh-social-twitter-post-preview {
overflow: hidden;
color: #292f33;
@ -338,8 +366,12 @@
background-position: center center;
}
.gh-social-twitter-preview-content {
padding: 10px;
}
.gh-social-twitter-preview-title {
max-width: 487px;
width: 487px;
max-height: 1.3em;
overflow: hidden;
overflow-wrap: break-word;
@ -353,6 +385,7 @@
}
.gh-social-twitter-preview-desc {
width: 487px;
max-height: 40px;
overflow: hidden;
overflow-wrap: break-word;
@ -369,6 +402,7 @@
display: flex;
overflow: hidden;
overflow-wrap: break-word;
width: 487px;
margin-top: 2px;
color: #5b7083;
font-size: 15px;
@ -406,7 +440,7 @@
.gh-seo-preview-container {
display: flex;
width: 100%;
max-width: 1108px;
max-width: 1091px;
padding: 20px 30px;
border: 1px solid var(--whitegrey);
font-family: Arial, sans-serif;