fix: close button position
This commit is contained in:
florian
parent
3a2227f5f1
commit
25033d2b11
@ -7,3 +7,11 @@
|
||||
font-size: 1.5rem;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.closeButton {
|
||||
position: fixed;
|
||||
top: 2em;
|
||||
left: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -245,11 +245,6 @@
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.closeButton {
|
||||
position: fixed;
|
||||
top: 2em;
|
||||
left: 1.5em;
|
||||
}
|
||||
.details-actions .more .more-menu {
|
||||
bottom: 50px;
|
||||
right: 0px;
|
||||
|
||||
@ -35,8 +35,11 @@
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.settings {
|
||||
width: 90vw;
|
||||
height: 90vh;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
transform: none;
|
||||
left: 0;
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -123,3 +126,9 @@
|
||||
.settings .settings-mode > div.active {
|
||||
border-bottom: 1px solid #7600ff;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.settings .closeButton {
|
||||
left: 2.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FormEvent, useState } from 'react';
|
||||
import { FormEvent, useEffect, useState } from 'react';
|
||||
import './Settings.css';
|
||||
import useNav from '../utils/useNav';
|
||||
import CloseButton from './CloseButton/CloseButton';
|
||||
@ -6,6 +6,7 @@ import TagEditor, { Tag } from './TagEditor';
|
||||
import { defaultHashTags } from './env';
|
||||
import { useNDK } from '@nostr-dev-kit/ndk-react';
|
||||
import { createImgProxyUrl } from './nostrImageDownload';
|
||||
import { useGlobalState } from '../utils/globalState';
|
||||
|
||||
type SettingsProps = {
|
||||
onClose: () => void;
|
||||
@ -16,6 +17,7 @@ type Mode = 'all' | 'tags' | 'user';
|
||||
const SettingsDialog = ({ onClose }: SettingsProps) => {
|
||||
const { nav, currentSettings } = useNav();
|
||||
const { getProfile } = useNDK();
|
||||
const [state, setState] = useGlobalState();
|
||||
const [showAdult, setShowAdult] = useState(currentSettings.showAdult || false);
|
||||
const [showReplies, setShowReplies] = useState(currentSettings.showReplies || false);
|
||||
const [showReposts, setShowReposts] = useState(currentSettings.showReposts || false);
|
||||
@ -27,6 +29,11 @@ const SettingsDialog = ({ onClose }: SettingsProps) => {
|
||||
currentSettings.npubs.length == 1 ? 'user' : currentSettings.tags.length > 0 ? 'tags' : 'all'
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setState({ ...state, showNavButtons: false });
|
||||
return () => setState({ ...state, showNavButtons: true });
|
||||
});
|
||||
|
||||
const onSubmit = (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
const validNpubs = npubs.filter(t => t.length > 0);
|
||||
@ -59,95 +66,98 @@ const SettingsDialog = ({ onClose }: SettingsProps) => {
|
||||
const activeProfile = npubs.length > 0 ? getProfile(npubs[0]) : undefined;
|
||||
|
||||
return (
|
||||
<div className="settings" onClick={e => e.stopPropagation()}>
|
||||
<h2>Browse settings</h2>
|
||||
<CloseButton onClick={onClose}></CloseButton>
|
||||
<>
|
||||
{' '}
|
||||
<div className="settings" onClick={e => e.stopPropagation()}>
|
||||
<h2>Browse settings</h2>
|
||||
<CloseButton onClick={onClose}></CloseButton>
|
||||
|
||||
<div className="settings-content">
|
||||
<div className="settings-mode">
|
||||
<div className={mode == 'tags' ? 'active' : ''} onClick={() => setMode('tags')}>
|
||||
By tags
|
||||
<div className="settings-content">
|
||||
<div className="settings-mode">
|
||||
<div className={mode == 'tags' ? 'active' : ''} onClick={() => setMode('tags')}>
|
||||
By tags
|
||||
</div>
|
||||
<div className={mode == 'user' ? 'active' : ''} onClick={() => setMode('user')}>
|
||||
By user profile
|
||||
</div>
|
||||
<div className={mode == 'all' ? 'active' : ''} onClick={() => setMode('all')}>
|
||||
All of nostr
|
||||
</div>
|
||||
</div>
|
||||
<div className={mode == 'user' ? 'active' : ''} onClick={() => setMode('user')}>
|
||||
By user profile
|
||||
</div>
|
||||
<div className={mode == 'all' ? 'active' : ''} onClick={() => setMode('all')}>
|
||||
All of nostr
|
||||
</div>
|
||||
</div>
|
||||
{mode == 'tags' && (
|
||||
<>
|
||||
<label htmlFor="tags"></label>
|
||||
<TagEditor selectedTags={selectedTags} setSelectedTags={setSelectedTags} />
|
||||
</>
|
||||
)}
|
||||
{mode == 'user' && (
|
||||
<>
|
||||
<label htmlFor="npub">Images for user profile (npub):</label>
|
||||
<input
|
||||
type="text"
|
||||
name="npub"
|
||||
id="npub"
|
||||
value={npubs.join(', ')}
|
||||
onChange={e => setNpubs(e.target.value.split(',').map(t => t.trim().toLowerCase()))}
|
||||
onKeyDown={e => e.stopPropagation()}
|
||||
onKeyUp={e => e.stopPropagation()}
|
||||
/>
|
||||
{activeProfile && (
|
||||
<div className="details-author">
|
||||
<div
|
||||
className="author-image"
|
||||
style={{
|
||||
backgroundImage: activeProfile?.image
|
||||
? `url(${createImgProxyUrl(activeProfile?.image, 80, 80)})`
|
||||
: 'none',
|
||||
}}
|
||||
></div>
|
||||
{activeProfile?.displayName || activeProfile?.name}
|
||||
{mode == 'tags' && (
|
||||
<>
|
||||
<label htmlFor="tags"></label>
|
||||
<TagEditor selectedTags={selectedTags} setSelectedTags={setSelectedTags} />
|
||||
</>
|
||||
)}
|
||||
{mode == 'user' && (
|
||||
<>
|
||||
<label htmlFor="npub">Images for user profile (npub):</label>
|
||||
<input
|
||||
type="text"
|
||||
name="npub"
|
||||
id="npub"
|
||||
value={npubs.join(', ')}
|
||||
onChange={e => setNpubs(e.target.value.split(',').map(t => t.trim().toLowerCase()))}
|
||||
onKeyDown={e => e.stopPropagation()}
|
||||
onKeyUp={e => e.stopPropagation()}
|
||||
/>
|
||||
{activeProfile && (
|
||||
<div className="details-author">
|
||||
<div
|
||||
className="author-image"
|
||||
style={{
|
||||
backgroundImage: activeProfile?.image
|
||||
? `url(${createImgProxyUrl(activeProfile?.image, 80, 80)})`
|
||||
: 'none',
|
||||
}}
|
||||
></div>
|
||||
{activeProfile?.displayName || activeProfile?.name}
|
||||
</div>
|
||||
)}
|
||||
<div className="replies">
|
||||
<div>
|
||||
<input
|
||||
name="replies"
|
||||
type="checkbox"
|
||||
checked={showReplies}
|
||||
onChange={e => setShowAdult(e.target.checked)}
|
||||
/>
|
||||
</div>
|
||||
<label htmlFor="replies" onClick={() => setShowReplies(n => !n)} style={{ userSelect: 'none' }}>
|
||||
Include Replys
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
<div className="replies">
|
||||
<div>
|
||||
<div className="reposts">
|
||||
<input
|
||||
name="replies"
|
||||
name="reposts"
|
||||
type="checkbox"
|
||||
checked={showReplies}
|
||||
checked={showReposts}
|
||||
onChange={e => setShowAdult(e.target.checked)}
|
||||
/>
|
||||
<label htmlFor="reposts" onClick={() => setShowReposts(n => !n)} style={{ userSelect: 'none' }}>
|
||||
Include Reposts
|
||||
</label>
|
||||
</div>
|
||||
<label htmlFor="replies" onClick={() => setShowReplies(n => !n)} style={{ userSelect: 'none' }}>
|
||||
Include Replys
|
||||
</label>
|
||||
</>
|
||||
)}
|
||||
<div className="content-warning">
|
||||
<div>
|
||||
<input name="adult" type="checkbox" checked={showAdult} onChange={e => setShowAdult(e.target.checked)} />
|
||||
</div>
|
||||
<div className="reposts">
|
||||
<input
|
||||
name="reposts"
|
||||
type="checkbox"
|
||||
checked={showReposts}
|
||||
onChange={e => setShowAdult(e.target.checked)}
|
||||
/>
|
||||
<label htmlFor="reposts" onClick={() => setShowReposts(n => !n)} style={{ userSelect: 'none' }}>
|
||||
Include Reposts
|
||||
</label>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="content-warning">
|
||||
<div>
|
||||
<input name="adult" type="checkbox" checked={showAdult} onChange={e => setShowAdult(e.target.checked)} />
|
||||
<label htmlFor="adult" onClick={() => setShowAdult(n => !n)} style={{ userSelect: 'none' }}>
|
||||
<div className="warning">NSFW / adult content</div>
|
||||
Allow adult content to be shown and ignore content warnings.
|
||||
</label>
|
||||
</div>
|
||||
<label htmlFor="adult" onClick={() => setShowAdult(n => !n)} style={{ userSelect: 'none' }}>
|
||||
<div className="warning">NSFW / adult content</div>
|
||||
Allow adult content to be shown and ignore content warnings.
|
||||
</label>
|
||||
</div>
|
||||
<div className="settings-footer">
|
||||
<button type="submit" className="btn btn-primary" onClick={onSubmit}>
|
||||
Apply settings
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="settings-footer">
|
||||
<button type="submit" className="btn btn-primary" onClick={onSubmit}>
|
||||
Apply settings
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user