-
+const MissingIndicator = ({ fullPage }) => (
+
+
+
+
-
-
-
-
+
+
+
);
+MissingIndicator.propTypes = {
+ fullPage: PropTypes.bool,
+};
+
export default MissingIndicator;
diff --git a/app/javascript/flavours/glitch/components/regeneration_indicator.js b/app/javascript/flavours/glitch/components/regeneration_indicator.js
new file mode 100644
index 000000000..f4e0a79ef
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/regeneration_indicator.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import illustration from 'flavours/glitch/images/elephant_ui_working.svg';
+
+const MissingIndicator = () => (
+
+
+
+
+
+
+
+
+
+
+);
+
+export default MissingIndicator;
diff --git a/app/javascript/flavours/glitch/components/status_list.js b/app/javascript/flavours/glitch/components/status_list.js
index c1f51b307..a399ff567 100644
--- a/app/javascript/flavours/glitch/components/status_list.js
+++ b/app/javascript/flavours/glitch/components/status_list.js
@@ -6,7 +6,7 @@ import StatusContainer from 'flavours/glitch/containers/status_container';
import ImmutablePureComponent from 'react-immutable-pure-component';
import LoadGap from './load_gap';
import ScrollableList from './scrollable_list';
-import { FormattedMessage } from 'react-intl';
+import RegenerationIndicator from 'flavours/glitch/components/regeneration_indicator';
export default class StatusList extends ImmutablePureComponent {
@@ -81,18 +81,7 @@ export default class StatusList extends ImmutablePureComponent {
const { isLoading, isPartial } = other;
if (isPartial) {
- return (
-
- );
+ return
;
}
let scrollableContent = (isLoading || statusIds.size > 0) ? (
diff --git a/app/javascript/flavours/glitch/features/generic_not_found/index.js b/app/javascript/flavours/glitch/features/generic_not_found/index.js
index d01a1ba47..4412adaed 100644
--- a/app/javascript/flavours/glitch/features/generic_not_found/index.js
+++ b/app/javascript/flavours/glitch/features/generic_not_found/index.js
@@ -4,7 +4,7 @@ import MissingIndicator from 'flavours/glitch/components/missing_indicator';
const GenericNotFound = () => (
-
+
);
diff --git a/app/javascript/flavours/glitch/styles/components/regeneration_indicator.scss b/app/javascript/flavours/glitch/styles/components/regeneration_indicator.scss
index 178df6652..c65e6a9af 100644
--- a/app/javascript/flavours/glitch/styles/components/regeneration_indicator.scss
+++ b/app/javascript/flavours/glitch/styles/components/regeneration_indicator.scss
@@ -7,37 +7,27 @@
cursor: default;
display: flex;
flex: 1 1 auto;
+ flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
- & > div {
- width: 100%;
- background: transparent;
- padding-top: 0;
- }
-
&__figure {
- background: url('~flavours/glitch/images/elephant_ui_working.svg') no-repeat center 0;
- width: 100%;
- height: 160px;
- background-size: contain;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
-
- &.missing-indicator {
- padding-top: 20px + 48px;
-
- .regeneration-indicator__figure {
- background-image: url('~flavours/glitch/images/elephant_ui_disappointed.svg');
+ &,
+ img {
+ display: block;
+ width: auto;
+ height: 160px;
+ margin: 0;
}
}
+ &--without-header {
+ padding-top: 20px + 48px;
+ }
+
&__label {
- margin-top: 200px;
+ margin-top: 30px;
strong {
display: block;