Merge pull request #171 from HiEventsDev/widget-updates

Widget design fixes
HiEventsDev · Aug 29, 2024 · 6f5459b · 6f5459b
2 parents e7f6a88 + d6480d5
commit 6f5459b
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 29 deletions.
diff --git a/frontend/public/widget-test.html b/frontend/public/widget-test.html
@@ -3,27 +3,37 @@
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
-    <script async src="http://localhost:5173/widget.js"></script>
-
+    <script async src="https://localhost:8443/widget.js"></script>
 </head>
-<body>
+<body style="background-color: #000000; padding: 0px; color: #ffffff;">
 
 <p>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, alias asperiores atque autem cumque
 </p>
-<div data-hievents-id="57"
-     data-hievents-primary-color="#FF0000"
-     data-hievents-secondary-color="#000000"
-     data-hievents-widget-type="widget"
-     data-hievents-widget-version="1.0"
-     data-hievents-locale="en"
-     class="hievents-widget">
-</div>
-<p>
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, alias asperiores atque autem cumque
-</p><p>
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, alias asperiores atque autem cumque
-</p>
+
+<div style="width: 500px;">
+    <div data-hievents-id="7"
+         data-hievents-primary-color="#c3b8d9"
+         data-hievents-primary-text-color="#ffffff"
+         data-hievents-secondary-color="#525252"
+         data-hievents-secondary-text-color="#ffffff"
+         data-hievents-background-color="#000000"
+         data-hievents-widget-type="widget"
+         data-hievents-widget-version="1.0"
+         data-hievents-locale="en"
+         data-hievents-padding="20px"
+         data-hievents-autoresize="true"
+         data-hievents-continue-button-text="Lets's go"
+         class="hievents-widget">
+
+    </div>
+
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, alias asperiores atque autem cumque
+    </p>
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, alias asperiores atque autem cumque
+    </p>
 
 </body>
-</html>
+</html>
diff --git a/frontend/src/components/common/LoadingMask/index.tsx b/frontend/src/components/common/LoadingMask/index.tsx
@@ -16,4 +16,4 @@ export const LoadingMask = ({margin = '5px'}: LoadingMaskProps) => {
             }} visible={isFetching > 0}/>
         </div>
     )
-}
+}
diff --git a/frontend/src/components/layouts/TicketWidget/index.tsx b/frontend/src/components/layouts/TicketWidget/index.tsx
@@ -1,12 +1,12 @@
-import { useParams, useLocation } from "react-router-dom";
-import { LoadingMask } from "../../common/LoadingMask";
+import {useLocation, useParams} from "react-router-dom";
 import '../../../styles/widget/default.scss';
-import { useGetEventPublic } from "../../../queries/useGetEventPublic.ts";
+import {useGetEventPublic} from "../../../queries/useGetEventPublic.ts";
 import SelectTickets from "../../routes/ticket-widget/SelectTickets";
-import { useMemo } from "react";
+import {useMemo} from "react";
+import {Loader} from "@mantine/core";
 
 const TicketWidget = () => {
-    const { eventId } = useParams();
+    const {eventId} = useParams();
     const location = useLocation();
     const eventQuery = useGetEventPublic(eventId);
 
@@ -27,11 +27,21 @@ const TicketWidget = () => {
     }, [location.search]);
 
     if (!eventQuery.isFetched || !eventQuery.data) {
-        return <LoadingMask />;
+        return (
+            <div style={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: '100vh',
+                backgroundColor: settings.colors.background
+            }}>
+                <Loader color={settings.colors.primaryText} size="md" type="dots"/>
+            </div>
+        )
     }
 
     return (
-        <div className={'hi-ticket-widget-container full-height'}>
+        <div className={'full-height'}>
             <SelectTickets
                 widgetMode={'embedded'}
                 event={eventQuery.data}

diff --git a/frontend/src/styles/widget/default.scss b/frontend/src/styles/widget/default.scss
@@ -1,12 +1,13 @@
+
+.full-height {
+  height: 100vh;
+}
+
 .hi-ticket-widget-container {
   background-color: var(--widget-background-color, var(--tk-color-white));
   color: var(--widget-primary-text-color);
   padding: var(--widget-padding, var(--tk-spacing-md));
 
-  &.full-height {
-    height: 100vh;
-  }
-
   a, button {
     color: var(--widget-primary-text-color, var(--tk-primary));
   }
-Original file line number
+Diff line change
@@ Expand Up @@
                 }} visible={isFetching > 0}/>
             </div>
         )
-    }
+    }