From 63b74f5de7dcd162f50e2f5c55d5b8f30302be19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niklas=20Schr=C3=B6tler?= <niklas@allround.digital>
Date: Sun, 26 Nov 2023 20:57:17 +0100
Subject: [PATCH] ScreenWrapper: Added option to add backgroundImage
---
src/meta/ScreenWrapper.tsx | 23 ++++++++++++++++++-----
1 file changed, 18 insertions(+), 5 deletions(-)
diff --git a/src/meta/ScreenWrapper.tsx b/src/meta/ScreenWrapper.tsx
index 78040b2..f1353c3 100644
--- a/src/meta/ScreenWrapper.tsx
+++ b/src/meta/ScreenWrapper.tsx
@@ -1,12 +1,25 @@
import React from 'react';
import ScreenBar from "./ScreenBar";
-const ScreenWrapper = (props: {children: any}) => {
+const ScreenWrapper = (props: {children: any, backgroundImage?: string}) => {
return (
- <div className={"h-full w-full flex flex-col"} style={{backgroundImage: "/logo512.png"}}>
- <ScreenBar />
- <div className={"layout-grid flex-1 px-8 pb-10"}>
- {props.children}
+ <div className={"relative"}>
+ <div
+ className={"absolute inset-0 h-screen w-screen bg-cover blur-lg backdrop-brightness-75"}
+ style={{backgroundImage: `url('${props.backgroundImage}')`}}
+ >
+ </div>
+
+ <div className={"absolute inset-0 h-screen w-screen flex flex-col"}>
+ <ScreenBar />
+ <div
+ className={"grid layout-grid flex-1 px-8 pb-8 pt-4 bg-contain bg-no-repeat bg-center"}
+ style={{
+ backgroundImage: `url('${props.backgroundImage}')`
+ }}
+ >
+ {props.children}
+ </div>
</div>
</div>
);
--
GitLab