fix: author loading before quote

- Make author div not load if quote is empty
- photoinformation taking too much of the screen
- more transitions and consistent transitions
- running prettier across all files

Co-authored-by: David Ralph <me@davidcralph.co.uk>
This commit is contained in:
alexsparkes
2022-04-11 22:57:07 +01:00
parent 4498f5b934
commit 7bb48ebc8e
84 changed files with 2630 additions and 2323 deletions

View File

@@ -22,14 +22,14 @@ export default class SearchSettings extends PureComponent {
this.state = {
customEnabled: false,
customDisplay: 'none',
customValue: localStorage.getItem('customSearchEngine') || ''
customValue: localStorage.getItem('customSearchEngine') || '',
};
}
resetSearch() {
localStorage.removeItem('customSearchEngine');
this.setState({
customValue: ''
customValue: '',
});
toast(this.getMessage('toasts.reset'));
@@ -39,7 +39,7 @@ export default class SearchSettings extends PureComponent {
if (localStorage.getItem('searchEngine') === 'custom') {
this.setState({
customDisplay: 'block',
customEnabled: true
customEnabled: true,
});
} else {
localStorage.removeItem('customSearchEngine');
@@ -58,12 +58,12 @@ export default class SearchSettings extends PureComponent {
if (input === 'custom') {
this.setState({
customDisplay: 'block',
customEnabled: true
customEnabled: true,
});
} else {
this.setState({
customDisplay: 'none',
customEnabled: false
customEnabled: false,
});
localStorage.setItem('searchEngine', input);
}
@@ -74,30 +74,78 @@ export default class SearchSettings extends PureComponent {
render() {
return (
<>
<Header title={this.getMessage('modals.main.settings.sections.search.title')} setting='searchBar' category='widgets' switch={true}/>
<Header
title={this.getMessage('modals.main.settings.sections.search.title')}
setting="searchBar"
category="widgets"
switch={true}
/>
<SettingsItem title="Extra Options" subtitle="eeeee">
{/* not supported on firefox */}
{(navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined') ?
<Checkbox name='voiceSearch' text={this.getMessage('modals.main.settings.sections.search.voice_search')} category='search'/>
: null}
<Checkbox name='searchDropdown' text={this.getMessage('modals.main.settings.sections.search.dropdown')} category='search' element='.other'/>
<Checkbox name='searchFocus' text={this.getMessage('modals.main.settings.sections.search.focus')} category='search' element='.other'/>
<ul style={{ display: this.state.customDisplay }}>
<p style={{ marginTop: '0px' }}><span className='link' onClick={() => this.resetSearch()}>{this.getMessage('modals.main.settings.buttons.reset')}</span></p>
<TextField label={this.getMessage('modals.main.settings.sections.search.custom')} value={this.state.customValue} onInput={(e) => this.setState({ customValue: e.target.value })} varient='outlined' InputLabelProps={{ shrink: true }} />
</ul>
<Checkbox name='autocomplete' text={this.getMessage('modals.main.settings.sections.search.autocomplete')} category='search' />
{/* not supported on firefox */}
{navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined' ? (
<Checkbox
name="voiceSearch"
text={this.getMessage('modals.main.settings.sections.search.voice_search')}
category="search"
/>
) : null}
<Checkbox
name="searchDropdown"
text={this.getMessage('modals.main.settings.sections.search.dropdown')}
category="search"
element=".other"
/>
<Checkbox
name="searchFocus"
text={this.getMessage('modals.main.settings.sections.search.focus')}
category="search"
element=".other"
/>
<ul style={{ display: this.state.customDisplay }}>
<p style={{ marginTop: '0px' }}>
<span className="link" onClick={() => this.resetSearch()}>
{this.getMessage('modals.main.settings.buttons.reset')}
</span>
</p>
<TextField
label={this.getMessage('modals.main.settings.sections.search.custom')}
value={this.state.customValue}
onInput={(e) => this.setState({ customValue: e.target.value })}
varient="outlined"
InputLabelProps={{ shrink: true }}
/>
</ul>
<Checkbox
name="autocomplete"
text={this.getMessage('modals.main.settings.sections.search.autocomplete')}
category="search"
/>
</SettingsItem>
<SettingsItem title={this.getMessage('modals.main.settings.sections.search.search_engine')} subtitle="cheese is gucci tbf">
<Dropdown label={this.getMessage('modals.main.settings.sections.search.search_engine')} name='searchEngine' onChange={(value) => this.setSearchEngine(value)} manual={true}>
{searchEngines.map((engine) => (
<MenuItem key={engine.name} value={engine.settingsName}>{engine.name}</MenuItem>
))}
<MenuItem value='custom'>{this.getMessage('modals.main.settings.sections.search.custom').split(' ')[0]}</MenuItem>
</Dropdown>
<SettingsItem
title={this.getMessage('modals.main.settings.sections.search.search_engine')}
subtitle="cheese is gucci tbf"
>
<Dropdown
label={this.getMessage('modals.main.settings.sections.search.search_engine')}
name="searchEngine"
onChange={(value) => this.setSearchEngine(value)}
manual={true}
>
{searchEngines.map((engine) => (
<MenuItem key={engine.name} value={engine.settingsName}>
{engine.name}
</MenuItem>
))}
<MenuItem value="custom">
{this.getMessage('modals.main.settings.sections.search.custom').split(' ')[0]}
</MenuItem>
</Dropdown>
</SettingsItem>
<SettingsItem title={this.getMessage('modals.main.settings.sections.search.autocomplete_provider')} subtitle="cheese">
<Radio options={autocompleteProviders} name='autocompleteProvider' category='search'/>
<SettingsItem
title={this.getMessage('modals.main.settings.sections.search.autocomplete_provider')}
subtitle="cheese"
>
<Radio options={autocompleteProviders} name="autocompleteProvider" category="search" />
</SettingsItem>
</>
);