Issue #453 Fix - Broken Media Modal Layout (#513)

* Display none to avoid broken component breaking layout * Added placeholder images to Storybook * Replaced remote placeholder images for local
future-standard · Nov 29, 2024 · 7372b65 · 7372b65
1 parent 2b77ccf
commit 7372b65
Show file tree

Hide file tree

Showing 10 changed files with 14 additions and 9 deletions.
diff --git a/packages/example/public/images/cityscape.jpg b/packages/example/public/images/cityscape.jpg
diff --git a/packages/example/public/images/line-ui-railyard.jpg b/packages/example/public/images/line-ui-railyard.jpg
diff --git a/packages/example/src/pages/LinePage.tsx b/packages/example/src/pages/LinePage.tsx
@@ -254,7 +254,7 @@ const Line: React.FC<{}> = () => {
       <Content padBottom={false}>
         {error && <div>{error}</div>}
         <LineSetContext.Provider value={{ state, dispatch }}>
-          <LineUI options={options} onLineClick={selectLine} src="https://picsum.photos/id/1026/4621/3070.jpg?hmac=OJ880cIneqAKIwHbYgkRZxQcuMgFZ4IZKJasZ5c5Wcw" />
+          <LineUI options={options} onLineClick={selectLine} src="/scorer-ui-kit/images/line-ui-railyard.jpg" />
         </LineSetContext.Provider>
       </Content>
     </Layout>

diff --git a/packages/example/src/pages/TablePage.tsx b/packages/example/src/pages/TablePage.tsx
@@ -102,8 +102,8 @@ const TablePage: React.FC = () => {
       _checked: true,
       id: 'device-id-2',
       header: {
-        image: "https://picsum.photos/id/12/367/267",
-        mediaUrl: "https://picsum.photos/id/12/367/267",
+        image: "/scorer-ui-kit/images/cityscape.jpg",
+        mediaUrl: "/scorer-ui-kit/images/cityscape.jpg",
         mediaType: 'img',
         onClickThumbnail: () => openCustomModal('device-id-2'),
       },
@@ -129,8 +129,8 @@ const TablePage: React.FC = () => {
     {
       id: 'device-id-3',
       header: {
-        image: "https://picsum.photos/id/12/367/267",
-        mediaUrl: "https://picsum.photos/id/12/367/267",
+        image: "/scorer-ui-kit/images/cityscape.jpg",
+        mediaUrl: "/scorer-ui-kit/images/cityscape.jpg",
         mediaType: 'img'
       },
       columns:
@@ -146,8 +146,8 @@ const TablePage: React.FC = () => {
     {
       id: 'device-id-4',
       header: {
-        image: "https://picsum.photos/id/12/367/267",
-        mediaUrl: "http://wrong-url-placekitten.com/2934/3102",
+        image: "/scorer-ui-kit/images/cityscape.jpg",
+        mediaUrl: "/scorer-ui-kit/images/cityscape.jpg",
         mediaType: 'img'
       },
       columns:

diff --git a/packages/storybook/.storybook/main.js b/packages/storybook/.storybook/main.js
@@ -19,5 +19,6 @@ module.exports = {
   // https://github.com/styleguidist/react-docgen-typescript/issues/356#issuecomment-857887751
   typescript: {
     reactDocgen: 'react-docgen',
-  }
+  },
+  staticDirs: ['../static']
 };
diff --git a/packages/storybook/src/stories/Alerts/Modals/MediaModal.stories.tsx b/packages/storybook/src/stories/Alerts/Modals/MediaModal.stories.tsx
@@ -47,7 +47,7 @@ const MediaImageModal : React.FC<IExampleModal> = ({hasModalLimitsValue, imageSr
 export const _MediaModal = () => {
 
   const hasModalLimits = boolean('Has Modal Limits', true);
-  const imageSrc = text('Image Src', 'https://i.picsum.photos/id/1026/4621/3070.jpg?hmac=OJ880cIneqAKIwHbYgkRZxQcuMgFZ4IZKJasZ5c5Wcw');
+  const imageSrc = text('Image Src', '/images/placeholders/640x480.png');
   const retryLoading = boolean('Retry Loading', false);
 
   return (

diff --git a/packages/storybook/static/images/placeholders/1920x1080.png b/packages/storybook/static/images/placeholders/1920x1080.png
diff --git a/packages/storybook/static/images/placeholders/640x480.png b/packages/storybook/static/images/placeholders/640x480.png
diff --git a/packages/ui-lib/README.md b/packages/ui-lib/README.md
@@ -78,6 +78,9 @@ Some stock photos were used as placeholders in this UI Kit. These were sourced t
 Photo by [Van Thanh](https://unsplash.com/@vanthanh2608?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/cafe?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)
 
 
+Photo by <a href="https://unsplash.com/@thomashabr?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Thomas Habr</a> on <a href="https://unsplash.com/photos/aerial-photography-of-empire-state-building-6NmnrAJPq7M?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>
+
+
 ## License
 
 The Scorer UI Kit is released under the [MIT license](../../LICENSE.md).

diff --git a/packages/ui-lib/src/Misc/atoms/MediaBox.tsx b/packages/ui-lib/src/Misc/atoms/MediaBox.tsx
@@ -50,6 +50,7 @@ const StyledImage = styled.img<{ isLoaded?: boolean, hasModalLimits?: boolean }>
 
   ${({ theme, isLoaded, hasModalLimits }) => css`
     transition: opacity ${theme.animation.speed.slow} ${theme.animation.easing.primary.easeOut};
+    display: ${isLoaded ? `block` : `none`};
     opacity: ${isLoaded ? `1` : `0`};
 
     ${hasModalLimits && css`