Skip to content
This repository was archived by the owner on Jan 27, 2025. It is now read-only.

Commit 3bb45ed

Browse files
author
John Richard Chipps-Harding
authored
Positioning Refactor (#5)
* Bottom Blocker * Refactor and tidy up * Disable title by default
1 parent 61f7abc commit 3bb45ed

File tree

6 files changed

+70
-14
lines changed

6 files changed

+70
-14
lines changed

‎README.md‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,17 @@ You can configure a few things by editing the file `src/config/index.tsx`.
2121
- `POLL_INTERVAL` - How often should the frontend look for updates. Default 5 seconds.
2222
- `FILE_EXTENSION` - The filetypes supported. Default `png`.
2323
- `FILE_MIME` - The file mime type. Default `image/png`.
24-
- `SHOW_TITLE` - If the title should be overlaid. Default `true`.
25-
- `MAX_WIDTH` - The maximum width of the image column. Default `320`.
24+
- `SHOW_TITLE` - If the title should be overlaid. Default `false`.
25+
- `STACK_TRANSFORM` - How the stack should be positioned on the page. Default shown below.
26+
27+
```ts
28+
export const STACK_TRANSFORM = {
29+
x: "100%",
30+
y: 0,
31+
width: 256,
32+
height: 1265,
33+
rotation: 90,
34+
};
35+
```
2636

2737
You can also adjust the title field formatter here: `src/utils/images.ts`.

‎src/components/ImageStack/index.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable @next/next/no-img-element */
22
import { getTitle } from "@/utils/images";
3-
import { MAX_WIDTH, SHOW_TITLE } from "@/config";
3+
import { SHOW_TITLE } from "@/config";
44

55
import styles from "./ImageStack.module.css";
66

@@ -9,12 +9,7 @@ interface Props {
99
}
1010

1111
export const ImageStack = ({ images = [] }: Props) => (
12-
<ul
13-
className={styles.list}
14-
style={{
15-
maxWidth: MAX_WIDTH,
16-
}}
17-
>
12+
<ul className={styles.list}>
1813
{images.map((image) => (
1914
<li key={image}>
2015
{SHOW_TITLE && <h2>{getTitle(image)}</h2>}

‎src/components/Positioner/Positioner.module.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.main {
2+
display: block;
3+
position: absolute;
4+
z-index: 100px;
5+
overflow: hidden;
6+
transform-origin:top left;
7+
width: 100%;
8+
}

‎src/components/Positioner/index.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { ReactNode } from "react";
2+
3+
import styles from "./Positioner.module.css";
4+
5+
interface Position {
6+
x?: string | number;
7+
y?: string | number;
8+
width?: string | number;
9+
height?: string | number;
10+
rotation?: number;
11+
}
12+
13+
interface Props extends Position {
14+
children?: ReactNode;
15+
}
16+
17+
export const Positioner = ({ children, ...position }: Props) => (
18+
<div
19+
className={styles.main}
20+
style={{
21+
left: position.x,
22+
top: position.y,
23+
width: position.width,
24+
height: position.height,
25+
transform: `rotate(${position.rotation}deg)`,
26+
}}
27+
>
28+
{children}
29+
</div>
30+
);

‎src/config/index.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,12 @@ export const MAX_IMAGES = 10;
33
export const POLL_INTERVAL = 5 * 1000;
44
export const FILE_EXTENSION = "png";
55
export const FILE_MIME = "image/png";
6-
export const SHOW_TITLE = true;
7-
export const MAX_WIDTH = 320;
6+
export const SHOW_TITLE = false;
7+
8+
export const STACK_TRANSFORM = {
9+
x: "100%",
10+
y: 0,
11+
width: 256,
12+
height: 1265,
13+
rotation: 90,
14+
};

‎src/pages/index.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import Head from "next/head";
55
import type { NextPage } from "next";
66

77
import useImages from "@/hooks/useImages";
8+
import { STACK_TRANSFORM } from "@/config";
9+
import { Positioner } from "@/components/Positioner";
810
import { ImageStack } from "@/components/ImageStack";
911

1012
const Home: NextPage = () => {
@@ -14,12 +16,16 @@ const Home: NextPage = () => {
1416
target: fullscreenContainerRef,
1517
});
1618
return (
17-
<div ref={fullscreenContainerRef} onClick={toggleFullscreen}>
19+
<>
1820
<Head>
1921
<title>Phantom Diffusion</title>
2022
</Head>
21-
<ImageStack images={images} />
22-
</div>
23+
<div ref={fullscreenContainerRef} onClick={toggleFullscreen}>
24+
<Positioner {...STACK_TRANSFORM}>
25+
<ImageStack images={images} />
26+
</Positioner>
27+
</div>
28+
</>
2329
);
2430
};
2531

0 commit comments

Comments
 (0)