mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-12 23:36:00 +00:00
loading animation
This commit is contained in:
parent
fc4fbfa191
commit
86891765c5
11
index.html
11
index.html
@ -1,16 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-visual" />
|
||||
<meta name="description" content="collaborative and interactive Maps for Utopians">
|
||||
<link rel="icon" type="image/png" href="/3markers-globe.svg" />
|
||||
<link rel="stylesheet" type="text/css" href="/style.css" />
|
||||
<title>Utopia Map</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<div id="root">
|
||||
<div class="outer fade-in">
|
||||
<img height="100" class="pulse-loader opacity" src="/3markers-globe.svg"/>
|
||||
<br>
|
||||
<span class="loader"></span>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
|
||||
|
||||
1635
package-lock.json
generated
1635
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -18,7 +18,8 @@
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-rnd": "^10.4.1",
|
||||
"react-router-dom": "^6.23.0"
|
||||
"react-router-dom": "^6.23.0",
|
||||
"utopia-ui": "^3.0.35"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.79",
|
||||
@ -27,7 +28,7 @@
|
||||
"@typescript-eslint/parser": "^5.57.1",
|
||||
"@vitejs/plugin-react": "^4.0.0",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"daisyui": "^4.6.1",
|
||||
"daisyui": "^4.12.23",
|
||||
"eslint": "^8.38.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.3.4",
|
||||
|
||||
111
public/style.css
Normal file
111
public/style.css
Normal file
@ -0,0 +1,111 @@
|
||||
body {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pulse-loader {
|
||||
animation: pulse 2.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
30% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.loader {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: 15px auto;
|
||||
position: relative;
|
||||
color: #FFF;
|
||||
left: -120px;
|
||||
box-sizing: border-box;
|
||||
animation: shadowRolling 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes shadowRolling {
|
||||
0% {
|
||||
box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
12% {
|
||||
box-shadow: 100px 0 lightgray, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
25% {
|
||||
box-shadow: 110px 0 lightgray, 100px 0 lightgray, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
36% {
|
||||
box-shadow: 120px 0 lightgray, 110px 0 lightgray, 100px 0 lightgray, 0px 0 rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: 130px 0 lightgray, 120px 0 lightgray, 110px 0 lightgray, 100px 0 lightgray;
|
||||
}
|
||||
|
||||
62% {
|
||||
box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 lightgray, 120px 0 lightgray, 110px 0 lightgray;
|
||||
}
|
||||
|
||||
75% {
|
||||
box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 lightgray, 120px 0 lightgray;
|
||||
}
|
||||
|
||||
87% {
|
||||
box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 lightgray;
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.opacity {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.outer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center; /* Zentriert die Items horizontal */
|
||||
justify-content: center; /* Zentriert die Items vertikal */}
|
||||
|
||||
.inner {
|
||||
height: 96px;
|
||||
color: lightgray;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fade-in 1.5s ease-in;
|
||||
}
|
||||
14
src/App.tsx
14
src/App.tsx
@ -105,13 +105,13 @@ function App() {
|
||||
<Route path='reset-password' element={<RequestPasswordPage resetUrl={map.url + "/set-new-password/"} />} />
|
||||
<Route path='set-new-password' element={<SetNewPasswordPage />} />
|
||||
<Route path="item/*" element={<ProfileView attestationApi={attestationApi} />} />
|
||||
<Route path="edit-item/*" element={<ProfileForm/>} />
|
||||
<Route path="edit-item/*" element={<ProfileForm />} />
|
||||
<Route path="user-settings" element={<UserSettings />} />
|
||||
<Route path="moon-calendar" element={<MoonCalendar />} />
|
||||
<Route path="landingpage" element={<Landingpage />} />
|
||||
<Route path="market" element={<MarketView />} />
|
||||
<Route path="select-user" element={<SelectUser/>} />
|
||||
<Route path="attestation-form" element={<AttestationForm api={attestationApi}/>} />
|
||||
<Route path="select-user" element={<SelectUser />} />
|
||||
<Route path="attestation-form" element={<AttestationForm api={attestationApi} />} />
|
||||
{
|
||||
layers.map((l: any) =>
|
||||
<Route key={l.id} path={l.name} element={<OverlayItemsIndexPage plusButton={l.index_plus_button} layerName={l.name} url={'/item/'} parameterField={'id'} />} />
|
||||
@ -134,9 +134,11 @@ function App() {
|
||||
)
|
||||
|
||||
else return (
|
||||
<div className="flex items-center justify-center h-screen">
|
||||
<span className="loading loading-spinner loading-lg"></span>
|
||||
</div>
|
||||
<div className="outer">
|
||||
<img className="pulse-loader opacity h-[96px]" src="/3markers-globe.svg" />
|
||||
<br/>
|
||||
<span className="loader"></span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -100,7 +100,8 @@ export function Welcome4({ clickAction1 }: ChapterProps) {
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
window.my_modal_3.close();
|
||||
const myModal = document.getElementById('my_modal_3') as HTMLDialogElement;
|
||||
myModal.close();
|
||||
}
|
||||
|
||||
export const ModalContent = ({map}:{map: any}) => {
|
||||
|
||||
@ -30,7 +30,7 @@ export class itemsApi<T> implements ItemsApi<T>{
|
||||
|
||||
async getItems() {
|
||||
try {
|
||||
return await directusClient.request(readItems(this.collectionName as never, { fields: ['*', 'to.*', "relations.*", "user_created.*", {offers: ['*'], needs: ['*']} as any] , filter: this.filter, limit: -1 }));
|
||||
return await directusClient.request(readItems(this.collectionName as never, { fields: ['*', 'to.*', "relations.*", "user_created.*", {offers: ['*'], needs: ['*'], gallery: ['*.*']} as any] , filter: this.filter, limit: -1 }));
|
||||
} catch (error: any) {
|
||||
console.log(error);
|
||||
if (error.errors[0]?.message)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user