monorail
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Change animation on feed generation screen in web UI 

Port 3cf6681736 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko 2024-12-16 08:38:56 +01:00 committed by Claire
parent e516066112
commit 2f9efb721c
4 changed files with 37 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/javascript/flavours/glitch/components/regeneration_indicator.jsx
View File

@ -1,18 +0,0 @@
import { FormattedMessage } from 'react-intl';
import illustration from '@/images/elephant_ui_working.svg';
const RegenerationIndicator = () => (
<div className='regeneration-indicator'>
<div className='regeneration-indicator__figure'>
<img src={illustration} alt='' />
</div>
<div className='regeneration-indicator__label'>
<FormattedMessage id='regeneration_indicator.label' tagName='strong' defaultMessage='Loading&hellip;' />
<FormattedMessage id='regeneration_indicator.sublabel' defaultMessage='Your home feed is being prepared!' />
</div>
</div>
);
export default RegenerationIndicator;

26
app/javascript/flavours/glitch/components/regeneration_indicator.tsx Normal file
View File

@ -0,0 +1,26 @@
import { FormattedMessage } from 'react-intl';
import { GIF } from './gif';
export const RegenerationIndicator: React.FC = () => (
<div className='regeneration-indicator'>
<GIF
src='/loading.gif'
staticSrc='/loading.png'
className='regeneration-indicator__figure'
/>
<div className='regeneration-indicator__label'>
<strong>
<FormattedMessage
id='regeneration_indicator.preparing_your_home_feed'
defaultMessage='Preparing your home feed…'
/>
</strong>
<FormattedMessage
id='regeneration_indicator.please_stand_by'
defaultMessage='Please stand by.'
/>
</div>
</div>
);

2
app/javascript/flavours/glitch/components/status_list.jsx
View File

@ -6,7 +6,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import { TIMELINE_GAP, TIMELINE_SUGGESTIONS } from 'flavours/glitch/actions/timelines'; import { TIMELINE_GAP, TIMELINE_SUGGESTIONS } from 'flavours/glitch/actions/timelines';
import RegenerationIndicator from 'flavours/glitch/components/regeneration_indicator'; import { RegenerationIndicator } from 'flavours/glitch/components/regeneration_indicator';
import { InlineFollowSuggestions } from 'flavours/glitch/features/home_timeline/components/inline_follow_suggestions'; import { InlineFollowSuggestions } from 'flavours/glitch/features/home_timeline/components/inline_follow_suggestions';
import StatusContainer from '../containers/status_container'; import StatusContainer from '../containers/status_container';

28
app/javascript/flavours/glitch/styles/components.scss
View File

@ -4171,10 +4171,7 @@ a.status-card {
} }
.regeneration-indicator { .regeneration-indicator {
text-align: center; color: $darker-text-color;
font-size: 16px;
font-weight: 500;
color: $dark-text-color;
border: 1px solid var(--background-border-color); border: 1px solid var(--background-border-color);
border-top: 0; border-top: 0;
cursor: default; cursor: default;
@ -4186,31 +4183,26 @@ a.status-card {
padding: 20px; padding: 20px;
&__figure { &__figure {
&, display: block;
img { width: 100%;
display: block; height: auto;
width: auto; max-width: 350px;
height: 160px; margin-top: -50px;
margin: 0;
}
}
&--without-header {
padding-top: 20px + 48px;
} }
&__label { &__label {
margin-top: 30px; text-align: center;
font-size: 16px;
strong { strong {
font-weight: 500;
display: block; display: block;
margin-bottom: 10px; margin-bottom: 10px;
color: $dark-text-color; color: $darker-text-color;
} }
span { span {
font-size: 15px; font-size: 15px;
font-weight: 400;
} }
} }
} }