mirror of
https://github.com/lidarr/lidarr.git
synced 2025-07-10 23:33:38 -07:00
Initial Commit Rework
This commit is contained in:
parent
74a4cc048c
commit
95051cbd63
2483 changed files with 101351 additions and 111396 deletions
65
frontend/src/Components/Loading/LoadingIndicator.css
Normal file
65
frontend/src/Components/Loading/LoadingIndicator.css
Normal file
|
@ -0,0 +1,65 @@
|
|||
.loading {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rippleContainer {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ripple:nth-child(0) {
|
||||
animation-delay: -0.8s;
|
||||
}
|
||||
|
||||
.ripple:nth-child(1) {
|
||||
animation-delay: -0.6s;
|
||||
}
|
||||
|
||||
.ripple:nth-child(2) {
|
||||
animation-delay: -0.4s;
|
||||
}
|
||||
|
||||
.ripple:nth-child(3) {
|
||||
animation-delay: -0.2s;
|
||||
}
|
||||
|
||||
.ripple {
|
||||
position: absolute;
|
||||
border: 2px solid #3a3f51;
|
||||
border-radius: 100%;
|
||||
animation-fill-mode: both;
|
||||
animation: rippleContainer 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
|
||||
}
|
||||
|
||||
@-webkit-keyframes rippleContainer {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(0.1);
|
||||
}
|
||||
|
||||
70% {
|
||||
opacity: 0.7;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rippleContainer {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(0.1);
|
||||
}
|
||||
|
||||
70% {
|
||||
opacity: 0.7;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
48
frontend/src/Components/Loading/LoadingIndicator.js
Normal file
48
frontend/src/Components/Loading/LoadingIndicator.js
Normal file
|
@ -0,0 +1,48 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import styles from './LoadingIndicator.css';
|
||||
|
||||
function LoadingIndicator({ className, size }) {
|
||||
const sizeInPx = `${size}px`;
|
||||
const width = sizeInPx;
|
||||
const height = sizeInPx;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={className}
|
||||
style={{ height }}
|
||||
>
|
||||
<div
|
||||
className={styles.rippleContainer}
|
||||
style={{ width, height }}
|
||||
>
|
||||
<div
|
||||
className={styles.ripple}
|
||||
style={{ width, height }}
|
||||
/>
|
||||
|
||||
<div
|
||||
className={styles.ripple}
|
||||
style={{ width, height }}
|
||||
/>
|
||||
|
||||
<div
|
||||
className={styles.ripple}
|
||||
style={{ width, height }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
LoadingIndicator.propTypes = {
|
||||
className: PropTypes.string,
|
||||
size: PropTypes.number
|
||||
};
|
||||
|
||||
LoadingIndicator.defaultProps = {
|
||||
className: styles.loading,
|
||||
size: 50
|
||||
};
|
||||
|
||||
export default LoadingIndicator;
|
6
frontend/src/Components/Loading/LoadingMessage.css
Normal file
6
frontend/src/Components/Loading/LoadingMessage.css
Normal file
|
@ -0,0 +1,6 @@
|
|||
.loadingMessage {
|
||||
margin: 50px 10px 0;
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
font-size: 36px;
|
||||
}
|
36
frontend/src/Components/Loading/LoadingMessage.js
Normal file
36
frontend/src/Components/Loading/LoadingMessage.js
Normal file
|
@ -0,0 +1,36 @@
|
|||
import React from 'react';
|
||||
import styles from './LoadingMessage.css';
|
||||
|
||||
const messages = [
|
||||
'Downloading more RAM',
|
||||
'Now in Technicolor',
|
||||
'Previously on Sonarr...',
|
||||
'Bleep Bloop.',
|
||||
'Locating the required gigapixels to render...',
|
||||
'Spinning up the hamster wheel...',
|
||||
'At least you\'re not on hold',
|
||||
'Hum something loud while others stare',
|
||||
'Loading humorous message... Please Wait',
|
||||
'I could\'ve been faster in Python',
|
||||
'Don\'t forget to rewind your episodes',
|
||||
'Congratulations! you are the 1000th visitor.',
|
||||
'HELP!, I\'m being held hostage and forced to write these stupid lines!',
|
||||
'RE-calibrating the internet...',
|
||||
'I\'ll be here all week',
|
||||
'Don\'t forget to tip your waitress',
|
||||
'Apply directly to the forehead',
|
||||
'Loading Battlestation'
|
||||
];
|
||||
|
||||
function LoadingMessage() {
|
||||
const index = Math.floor(Math.random() * messages.length);
|
||||
const message = messages[index];
|
||||
|
||||
return (
|
||||
<div className={styles.loadingMessage}>
|
||||
{message}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default LoadingMessage;
|
Loading…
Add table
Add a link
Reference in a new issue