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 8ec98b0d6af1b58a5e71a45668e3ae2508191884..cb84eb2f968350517404e4e3eccebfd1484ac695 100644 (file)
--- 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 d065699f6f2bafba4e040058a7361427313810c3..87283b5ecdcd492d862dc5755751fb8742270ce9 100644 (file)
--- 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()}`;