mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-16 16:14:43 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Feature/hedgedoc logo (#606)

Browse source
This commit is contained in:
mrdrogdrog 2020-11-15 21:37:39 +01:00 • committed by GitHub
parent 62d95a5704
commit 42cbb51bfa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
27 changed files with 142 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

97
src/components/application-loader/application-loader.scss
View file

@ -1,11 +1,51 @@
.loader {
@keyframes animation-roll {
0% { transform: translateX(calc(-100vw / 2 - 100%)) rotateZ(0deg); }
100% { transform: translateX(calc(100vw / 2 + 100%)) rotateZ(720deg); }
}
.animation-pulse {
animation: pulse 2s ease-in-out infinite;
@keyframes animation-jump {
0% { transform: scale(1,1) translateY(0); }
10% { transform: scale(1.1,.9) translateY(0); }
30% { transform: scale(.9,1.1) translateY(-100px); }
50% { transform: scale(1.05,.95) translateY(0); }
57% { transform: scale(1,1) translateY(-7px); }
64% { transform: scale(1,1) translateY(0); }
100% { transform: scale(1,1) translateY(0); }
}
@keyframes animation-shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.animation-roll {
transform-origin: center center;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-name: animation-roll;
animation-timing-function: linear;
}
.animation-jump {
transform-origin: bottom;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-name: animation-jump;
animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}
.animation-shake {
animation: shake 0.3s ease-in-out;
animation: animation-shake 0.3s ease-in-out;
}
height: 100vh;
@ -21,55 +61,4 @@
.progress {
width: 50%;
}
@keyframes pulse {
0% {
transform: scale(1, 1);
filter: drop-shadow(0 0 0px black);
}
10% {
transform: scale(1.5, 1.5);
filter: drop-shadow(0 0 100px white);
}
100% {
transform: scale(1, 1);
filter: drop-shadow(0 0 0px black);
}
}
@keyframes shake {
0% {
transform: translate(1px, 1px) rotate(0deg);
}
10% {
transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
transform: translate(-3px, 0px) rotate(1deg);
}
30% {
transform: translate(3px, 2px) rotate(0deg);
}
40% {
transform: translate(1px, -1px) rotate(1deg);
}
50% {
transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
transform: translate(-3px, 1px) rotate(0deg);
}
70% {
transform: translate(3px, 1px) rotate(-1deg);
}
80% {
transform: translate(-1px, -1px) rotate(1deg);
}
90% {
transform: translate(1px, 2px) rotate(0deg);
}
100% {
transform: translate(1px, -2px) rotate(-1deg);
}
}
}

11
src/components/application-loader/loading-screen.tsx
View file

@ -1,6 +1,6 @@
import React from 'react'
import { Alert } from 'react-bootstrap'
import { ForkAwesomeIcon } from '../common/fork-awesome/fork-awesome-icon'
import { HedgeDocLogo, HedgeDocLogoSize } from '../common/hedge-doc-logo/hedge-doc-logo'
import { ShowIf } from '../common/show-if/show-if'
export interface LoadingScreenProps {
@ -9,12 +9,13 @@ export interface LoadingScreenProps {
export const LoadingScreen: React.FC<LoadingScreenProps> = ({ failedTitle }) => {
return (
<div className="loader middle text-light">
<div className="loader middle text-light overflow-hidden">
<div className="mb-3 text-light">
<ForkAwesomeIcon icon="file-text" size="5x"
className={failedTitle ? 'animation-shake' : 'animation-pulse'}/>
<span className={`d-block ${failedTitle ? 'animation-shake' : 'animation-jump'}`}>
<HedgeDocLogo size={HedgeDocLogoSize.BIG}/>
</span>
</div>
<ShowIf condition={ !!failedTitle}>
<ShowIf condition={!!failedTitle}>
<Alert variant={'danger'}>
The task '{failedTitle}' failed.<br/>
For further information look into the browser console.