Feliday/Feliday-UI
5
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add fixed width/height to PostListing thumbnail parent (#1660)

Browse source 
* add static width/height for post listing thumbnails

* Update src/shared/components/post/post-listing.tsx

Co-authored-by: Jay Sitter <jsit@users.noreply.github.com>

* make hopefully final tweaks

* remove .overflow-hidden

---------

Co-authored-by: Jay Sitter <jsit@users.noreply.github.com>
Co-authored-by: SleeplessOne1917 <abias1122@gmail.com>
This commit is contained in:
Alec Armbruster 2023-06-28 22:44:10 -04:00 committed by GitHub
parent a30c112048
commit 38a109ba92
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/assets/css/main.css
View file

@ -198,9 +198,9 @@ blockquote {
.thumbnail {
object-fit: cover;
aspect-ratio: 4/3;
width: 100%;
max-height: 6rem;
aspect-ratio: 1/1;
width: 5rem;
height: 5rem;
}
.thumbnail svg {

8
src/shared/components/post/post-listing.tsx
View file

@ -333,7 +333,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
return (
<button
type="button"
className="d-inline-block position-relative mb-2 p-0 border-0"
className="thumbnail rounded overflow-hidden d-inline-block position-relative mb-2 p-0 border-0"
data-tippy-content={I18NextService.i18n.t("expand_here")}
onClick={linkEvent(this, this.handleImageExpandClick)}
aria-label={I18NextService.i18n.t("expand_here")}
@ -348,7 +348,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
} else if (!this.props.hideImage && url && thumbnail && this.imageSrc) {
return (
<a
className="text-body d-inline-block position-relative mb-2"
className="thumbnail rounded bg-light d-flex justify-content-center"
href={url}
rel={relTags}
title={url}
@ -1402,10 +1402,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
)}
<div className="col flex-grow-1">
<div className="row">
<div className="col-sm-3 col-lg-2 pe-0 post-media">
<div className="col flex-grow-0 px-0">
<div className="">{this.thumbnail()}</div>
</div>
<div className="col-12 col-sm-9 col-lg-10">
<div className="col flex-grow-1">
{this.postTitleLine()}
{this.createdLine()}
{this.commentsLine()}