From: Dessalines <tyhou13@gmx.com>
Date: Tue, 1 Dec 2020 15:02:01 +0000 (-0600)
Subject: Some icon / banner fixes.
X-Git-Url: http://these/git/ui/assets/%24%7Bargs.pageFn.prev%7D?a=commitdiff_plain;h=f6ad4c33b57904624f95b07eb60ccdcaccebf392;p=lemmy-ui.git

Some icon / banner fixes.

- Adding a max icon / banner size. Fixes #88
- Using rem image height and width. Fixes #87
---

diff --git a/src/shared/components/banner-icon-header.tsx b/src/shared/components/banner-icon-header.tsx
index 8ec98b0..cb84eb2 100644
--- a/src/shared/components/banner-icon-header.tsx
+++ b/src/shared/components/banner-icon-header.tsx
@@ -19,7 +19,6 @@ export class BannerIconHeader extends Component<BannerIconHeaderProps, any> {
           <PictrsImage
             src={this.props.icon}
             iconOverlay
-            noFluid
             pushup={!!this.props.banner}
           />
         )}
diff --git a/src/shared/components/pictrs-image.tsx b/src/shared/components/pictrs-image.tsx
index d065699..87283b5 100644
--- a/src/shared/components/pictrs-image.tsx
+++ b/src/shared/components/pictrs-image.tsx
@@ -2,6 +2,7 @@ import { Component } from 'inferno';
 
 const iconThumbnailSize = 96;
 const thumbnailSize = 256;
+const maxImageSize = 1000;
 
 interface PictrsImageProps {
   src: string;
@@ -10,7 +11,6 @@ interface PictrsImageProps {
   nsfw?: boolean;
   iconOverlay?: boolean;
   pushup?: boolean;
-  noFluid?: boolean;
 }
 
 export class PictrsImage extends Component<PictrsImageProps, any> {
@@ -26,8 +26,12 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
         <img
           src={this.src('jpg')}
           className={`
-        ${!this.props.noFluid && 'img-fluid '}
-        ${this.props.thumbnail ? 'thumbnail rounded ' : 'img-expanded '} 
+        ${!this.props.icon && !this.props.iconOverlay && 'img-fluid '}
+        ${
+          this.props.thumbnail && !this.props.icon
+            ? 'thumbnail rounded '
+            : 'img-expanded '
+        } 
         ${this.props.thumbnail && this.props.nsfw && 'img-blur '}
         ${this.props.icon && 'rounded-circle img-icon mr-2 '}
         ${this.props.iconOverlay && 'ml-2 mb-0 rounded-circle avatar-overlay '}
@@ -58,6 +62,8 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
       params['thumbnail'] = thumbnailSize;
     } else if (this.props.icon) {
       params['thumbnail'] = iconThumbnailSize;
+    } else {
+      params['thumbnail'] = maxImageSize;
     }
 
     let paramsStr = `?${new URLSearchParams(params).toString()}`;