jbilcke-hf HF staff commited on
Commit
a40bf40
β€’
1 Parent(s): aa15a35

print test

Browse files
src/app/globals.css CHANGED
@@ -25,3 +25,9 @@ body {
25
  )
26
  rgb(var(--background-start-rgb));
27
  }
 
 
 
 
 
 
 
25
  )
26
  rgb(var(--background-start-rgb));
27
  }
28
+
29
+
30
+ /* this is the trick to bypass the style={{}} attribute when printing */
31
+ @media print {
32
+ .comic-page[style] { width: 100vw !important; }
33
+ }
src/app/interface/bottom-bar/index.tsx CHANGED
@@ -3,26 +3,32 @@ import { Button } from "@/components/ui/button"
3
  import { cn } from "@/lib/utils"
4
 
5
  export function BottomBar() {
6
- const download = useStore(state => state.download)
7
  const isGeneratingStory = useStore(state => state.isGeneratingStory)
8
  const prompt = useStore(state => state.prompt)
9
  const panelGenerationStatus = useStore(state => state.panelGenerationStatus)
10
 
11
- const remainingImages = Object.values(panelGenerationStatus).reduce((acc, s) => (acc + (s ? 1 : 0)), 0)
 
12
 
 
 
 
 
13
  return (
14
  <div className={cn(
15
- `fixed bottom-8 right-8`,
 
16
  `flex flex-row`,
17
  `animation-all duration-300 ease-in-out`,
18
  isGeneratingStory ? `scale-0 opacity-0` : ``,
19
  )}>
20
  <div>
21
- <Button onClick={download}
22
- //disabled={!prompt?.length}
23
- disabled
24
  >{
25
- remainingImages ? `${remainingImages} remaining..` : `Download`
26
  }</Button>
27
  </div>
28
  </div>
 
3
  import { cn } from "@/lib/utils"
4
 
5
  export function BottomBar() {
6
+ // const download = useStore(state => state.download)
7
  const isGeneratingStory = useStore(state => state.isGeneratingStory)
8
  const prompt = useStore(state => state.prompt)
9
  const panelGenerationStatus = useStore(state => state.panelGenerationStatus)
10
 
11
+ const allStatus = Object.values(panelGenerationStatus)
12
+ const remainingImages = allStatus.reduce((acc, s) => (acc + (s ? 1 : 0)), 0)
13
 
14
+
15
+ const handlePrint = () => {
16
+ window.print()
17
+ }
18
  return (
19
  <div className={cn(
20
+ `print:hidden`,
21
+ `fixed bottom-6 right-6`,
22
  `flex flex-row`,
23
  `animation-all duration-300 ease-in-out`,
24
  isGeneratingStory ? `scale-0 opacity-0` : ``,
25
  )}>
26
  <div>
27
+ <Button
28
+ onClick={handlePrint}
29
+ disabled={!prompt?.length}
30
  >{
31
+ remainingImages ? `Print (${allStatus.length - remainingImages}/4 in HD βŒ›)` : `Print (in HD)`
32
  }</Button>
33
  </div>
34
  </div>
src/app/interface/panel/index.tsx CHANGED
@@ -170,6 +170,7 @@ export function Panel({
170
  `shadow-sm`,
171
  `rounded-sm`,
172
  `overflow-hidden`,
 
173
  )
174
 
175
  if (prompt && !rendered.assetUrl) {
 
170
  `shadow-sm`,
171
  `rounded-sm`,
172
  `overflow-hidden`,
173
+ `print:shadow-none`,
174
  )
175
 
176
  if (prompt && !rendered.assetUrl) {
src/app/interface/top-menu/index.tsx CHANGED
@@ -34,6 +34,7 @@ export function TopMenu() {
34
  const [draft, setDraft] = useState("")
35
  return (
36
  <div className={cn(
 
37
  `z-10 fixed top-0 left-0 right-0`,
38
  `flex flex-col md:flex-row w-full justify-between items-center`,
39
  `backdrop-blur-xl`,
 
34
  const [draft, setDraft] = useState("")
35
  return (
36
  <div className={cn(
37
+ `print:hidden`,
38
  `z-10 fixed top-0 left-0 right-0`,
39
  `flex flex-col md:flex-row w-full justify-between items-center`,
40
  `backdrop-blur-xl`,
src/app/interface/zoom/index.tsx CHANGED
@@ -9,6 +9,7 @@ export function Zoom() {
9
 
10
  return (
11
  <div className={cn(
 
12
  // `fixed flex items-center justify-center bottom-8 top-32 right-8 z-10 h-screen`,
13
  `fixed flex flex-col items-center bottom-8 top-32 md:top-20 right-6 z-10`,
14
  `animation-all duration-300 ease-in-out`,
 
9
 
10
  return (
11
  <div className={cn(
12
+ `print:hidden`,
13
  // `fixed flex items-center justify-center bottom-8 top-32 right-8 z-10 h-screen`,
14
  `fixed flex flex-col items-center bottom-8 top-32 md:top-20 right-6 z-10`,
15
  `animation-all duration-300 ease-in-out`,
src/app/main.tsx CHANGED
@@ -108,6 +108,7 @@ export default function Main() {
108
  <div className={cn(
109
  `flex items-start w-screen h-screen pt-[120px] px-16 md:pt-[72px] overflow-y-scroll`,
110
  `transition-all duration-200 ease-in-out`,
 
111
 
112
  fonts.actionman.className
113
  )}>
@@ -115,6 +116,7 @@ export default function Main() {
115
  <div
116
  ref={pageRef}
117
  className={cn(
 
118
  `flex flex-col items-center justify-start`,
119
 
120
  // we are trying to reach a "book" look
@@ -124,7 +126,9 @@ export default function Main() {
124
 
125
  `transition-all duration-100 ease-in-out`,
126
  `border border-stone-200`,
127
- `shadow-2xl`
 
 
128
  )}
129
  style={{
130
  width: `${zoomLevel}%`,
@@ -138,6 +142,7 @@ export default function Main() {
138
  <Zoom />
139
  <BottomBar />
140
  <div className={cn(
 
141
  `z-20 fixed inset-0`,
142
  `flex flex-row items-center justify-center`,
143
  `transition-all duration-300 ease-in-out`,
 
108
  <div className={cn(
109
  `flex items-start w-screen h-screen pt-[120px] px-16 md:pt-[72px] overflow-y-scroll`,
110
  `transition-all duration-200 ease-in-out`,
111
+ `print:pt-2 print:px-2`,
112
 
113
  fonts.actionman.className
114
  )}>
 
116
  <div
117
  ref={pageRef}
118
  className={cn(
119
+ `comic-page`,
120
  `flex flex-col items-center justify-start`,
121
 
122
  // we are trying to reach a "book" look
 
126
 
127
  `transition-all duration-100 ease-in-out`,
128
  `border border-stone-200`,
129
+ `shadow-2xl`,
130
+ `print:shadow-none`,
131
+ `print:width-screen`
132
  )}
133
  style={{
134
  width: `${zoomLevel}%`,
 
142
  <Zoom />
143
  <BottomBar />
144
  <div className={cn(
145
+ `print:hidden`,
146
  `z-20 fixed inset-0`,
147
  `flex flex-row items-center justify-center`,
148
  `transition-all duration-300 ease-in-out`,
tailwind.config.js CHANGED
@@ -47,6 +47,9 @@ module.exports = {
47
  "accordion-down": "accordion-down 0.2s ease-out",
48
  "accordion-up": "accordion-up 0.2s ease-out",
49
  },
 
 
 
50
  },
51
  },
52
  plugins: [require("tailwindcss-animate")],
 
47
  "accordion-down": "accordion-down 0.2s ease-out",
48
  "accordion-up": "accordion-up 0.2s ease-out",
49
  },
50
+ screens: {
51
+ 'print': { 'raw': 'print' },
52
+ }
53
  },
54
  },
55
  plugins: [require("tailwindcss-animate")],