simono41/phanpy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make sheet have header and body section

Browse source
This commit is contained in:
Lim Chee Aun 2022-12-25 18:01:01 +08:00
parent 0276820185
commit cf4fbc8553
6 changed files with 325 additions and 295 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/app.css
View file

@ -583,22 +583,36 @@ button.carousel-dot[disabled].active {
} }
.sheet { .sheet {
align-self: flex-end; align-self: flex-end;
display: flex;
flex-direction: column;
max-height: 90vh; max-height: 90vh;
max-height: 90dvh; max-height: 90dvh;
overflow: auto; overflow: hidden;
overflow-x: hidden;
background-color: var(--bg-color); background-color: var(--bg-color);
width: 100%; width: 100%;
max-width: calc(40em - 50px - 16px); max-width: calc(40em - 50px - 16px);
border-radius: 16px 16px 0 0; border-radius: 16px 16px 0 0;
padding: 16px;
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
padding-bottom: max(16px, env(safe-area-inset-bottom));
box-shadow: 0 -1px 32px var(--divider-color); box-shadow: 0 -1px 32px var(--divider-color);
animation: slide-up 0.2s var(--timing-function); animation: slide-up 0.2s var(--timing-function);
border: 1px solid var(--outline-color); border: 1px solid var(--outline-color);
}
.sheet header {
padding: 16px 16px 8px;
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
}
.sheet main {
overflow: auto;
overflow-x: hidden;
overscroll-behavior: contain; overscroll-behavior: contain;
padding: 16px 16px;
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
padding-bottom: max(16px, env(safe-area-inset-bottom));
mask-image: linear-gradient(to bottom, transparent 0%, black 10px);
}
.sheet header + main {
padding-top: 0;
} }
/* TAG */ /* TAG */

2
src/components/account.css
View file

@ -12,7 +12,7 @@
font-size: 95%; font-size: 95%;
line-height: 1.4; line-height: 1.4;
} }
#account-container .note:not(:has(p)) { #account-container .note:not(:has(p)):not(:empty) {
/* Some notes don't have <p> tags, so we need to add some padding */ /* Some notes don't have <p> tags, so we need to add some padding */
padding: 1em 0; padding: 1em 0;
} }

195
src/components/account.jsx
View file

@ -108,15 +108,17 @@ function Account({ account }) {
<Avatar size="xxxl" /> <Avatar size="xxxl" />
███ ████████████ ███ ████████████
</header> </header>
<div class="note"> <main>
<p>████████ ███████</p> <div class="note">
<p>███████████████ ███████████████</p> <p>████████ ███████</p>
</div> <p>███████████████ ███████████████</p>
<p class="stats"> </div>
<span>██ Posts</span> <p class="stats">
<span>██ Following</span> <span>██ Posts</span>
<span>██ Followers</span> <span>██ Following</span>
</p> <span>██ Followers</span>
</p>
</main>
</> </>
) : ( ) : (
<> <>
@ -124,96 +126,99 @@ function Account({ account }) {
<Avatar url={avatar} size="xxxl" /> <Avatar url={avatar} size="xxxl" />
<NameText account={info} showAcct external /> <NameText account={info} showAcct external />
</header> </header>
<div <main>
class="note" <div
dangerouslySetInnerHTML={{ class="note"
__html: enhanceContent(note, { emojis }), dangerouslySetInnerHTML={{
}} __html: enhanceContent(note, { emojis }),
/> }}
{fields?.length > 0 && ( />
<div class="profile-metadata"> {fields?.length > 0 && (
{fields.map(({ name, value, verifiedAt }) => ( <div class="profile-metadata">
<div {fields.map(({ name, value, verifiedAt }) => (
class={`profile-field ${ <div
verifiedAt ? 'profile-verified' : '' class={`profile-field ${
}`} verifiedAt ? 'profile-verified' : ''
key={name} }`}
> key={name}
<b> >
{name}{' '} <b>
{!!verifiedAt && <Icon icon="check-circle" size="s" />} {name}{' '}
</b> {!!verifiedAt && <Icon icon="check-circle" size="s" />}
<p </b>
dangerouslySetInnerHTML={{ <p
__html: value, dangerouslySetInnerHTML={{
}} __html: value,
/> }}
</div> />
))} </div>
</div> ))}
)} </div>
<p class="stats"> )}
<span> <p class="stats">
<b title={statusesCount}>{shortenNumber(statusesCount)}</b> Posts
</span>
<span>
<b title={followingCount}>{shortenNumber(followingCount)}</b>{' '}
Following
</span>
<span>
<b title={followersCount}>{shortenNumber(followersCount)}</b>{' '}
Followers
</span>
{!!createdAt && (
<span> <span>
Joined:{' '} <b title={statusesCount}>{shortenNumber(statusesCount)}</b>{' '}
<b> Posts
<time datetime={createdAt}>
{Intl.DateTimeFormat('en', {
year: 'numeric',
month: 'short',
day: 'numeric',
}).format(new Date(createdAt))}
</time>
</b>
</span> </span>
)} <span>
</p> <b title={followingCount}>{shortenNumber(followingCount)}</b>{' '}
<p class="actions"> Following
{followedBy ? <span class="tag">Following you</span> : <span />}{' '} </span>
{relationshipUIState !== 'loading' && relationship && ( <span>
<button <b title={followersCount}>{shortenNumber(followersCount)}</b>{' '}
type="button" Followers
class={`${following ? 'light danger' : ''}`} </span>
disabled={relationshipUIState === 'loading'} {!!createdAt && (
onClick={() => { <span>
setRelationshipUIState('loading'); Joined:{' '}
(async () => { <b>
try { <time datetime={createdAt}>
let newRelationship; {Intl.DateTimeFormat('en', {
if (following) { year: 'numeric',
const yes = confirm( month: 'short',
'Are you sure that you want to unfollow this account?', day: 'numeric',
); }).format(new Date(createdAt))}
if (yes) { </time>
newRelationship = await masto.accounts.unfollow(id); </b>
</span>
)}
</p>
<p class="actions">
{followedBy ? <span class="tag">Following you</span> : <span />}{' '}
{relationshipUIState !== 'loading' && relationship && (
<button
type="button"
class={`${following ? 'light danger' : ''}`}
disabled={relationshipUIState === 'loading'}
onClick={() => {
setRelationshipUIState('loading');
(async () => {
try {
let newRelationship;
if (following) {
const yes = confirm(
'Are you sure that you want to unfollow this account?',
);
if (yes) {
newRelationship = await masto.accounts.unfollow(id);
}
} else {
newRelationship = await masto.accounts.follow(id);
} }
} else { if (newRelationship) setRelationship(newRelationship);
newRelationship = await masto.accounts.follow(id); setRelationshipUIState('default');
} catch (e) {
alert(e);
setRelationshipUIState('error');
} }
if (newRelationship) setRelationship(newRelationship); })();
setRelationshipUIState('default'); }}
} catch (e) { >
alert(e); {following ? 'Unfollow…' : 'Follow'}
setRelationshipUIState('error'); </button>
} )}
})(); </p>
}} </main>
>
{following ? 'Unfollow…' : 'Follow'}
</button>
)}
</p>
</> </>
)} )}
</div> </div>

5
src/components/status.css
View file

@ -712,6 +712,11 @@ a.card:hover {
min-height: 50dvh; min-height: 50dvh;
} }
#edit-history h2 {
margin: 0;
padding: 0;
}
#edit-history :is(ol, ol li) { #edit-history :is(ol, ol li) {
list-style: none; list-style: none;
margin: 0; margin: 0;

80
src/components/status.jsx
View file

@ -1134,46 +1134,50 @@ function EditedAtModal({ statusID, onClose = () => {} }) {
return ( return (
<div id="edit-history" class="sheet"> <div id="edit-history" class="sheet">
{/* <button type="button" class="close-button plain large" onClick={onClose}> <header>
{/* <button type="button" class="close-button plain large" onClick={onClose}>
<Icon icon="x" alt="Close" /> <Icon icon="x" alt="Close" />
</button> */} </button> */}
<h2>Edit History</h2> <h2>Edit History</h2>
{uiState === 'error' && <p>Failed to load history</p>} {uiState === 'error' && <p>Failed to load history</p>}
{uiState === 'loading' && ( {uiState === 'loading' && (
<p> <p>
<Loader abrupt /> Loading&hellip; <Loader abrupt /> Loading&hellip;
</p> </p>
)} )}
{editHistory.length > 0 && ( </header>
<ol> <main>
{editHistory.map((status) => { {editHistory.length > 0 && (
const { createdAt } = status; <ol>
const createdAtDate = new Date(createdAt); {editHistory.map((status) => {
return ( const { createdAt } = status;
<li key={createdAt} class="history-item"> const createdAtDate = new Date(createdAt);
<h3> return (
<time> <li key={createdAt} class="history-item">
{Intl.DateTimeFormat('en', { <h3>
// Show year if not current year <time>
year: {Intl.DateTimeFormat('en', {
createdAtDate.getFullYear() === currentYear // Show year if not current year
? undefined year:
: 'numeric', createdAtDate.getFullYear() === currentYear
month: 'short', ? undefined
day: 'numeric', : 'numeric',
weekday: 'short', month: 'short',
hour: 'numeric', day: 'numeric',
minute: '2-digit', weekday: 'short',
second: '2-digit', hour: 'numeric',
}).format(createdAtDate)} minute: '2-digit',
</time> second: '2-digit',
</h3> }).format(createdAtDate)}
<Status status={status} size="s" withinContext readOnly /> </time>
</li> </h3>
); <Status status={status} size="s" withinContext readOnly />
})} </li>
</ol> );
)} })}
</ol>
)}
</main>
</div> </div>
); );
} }

312
src/pages/settings.jsx
View file

@ -24,186 +24,188 @@ function Settings({ onClose }) {
return ( return (
<div id="settings-container" class="sheet"> <div id="settings-container" class="sheet">
{/* <button type="button" class="close-button plain large" onClick={onClose}> <main>
{/* <button type="button" class="close-button plain large" onClick={onClose}>
<Icon icon="x" alt="Close" /> <Icon icon="x" alt="Close" />
</button> */} </button> */}
<h2>Accounts</h2> <h2>Accounts</h2>
<ul class="accounts-list"> <ul class="accounts-list">
{accounts.map((account, i) => { {accounts.map((account, i) => {
const isCurrent = account.info.id === currentAccount; const isCurrent = account.info.id === currentAccount;
const isDefault = i === (currentDefault || 0); const isDefault = i === (currentDefault || 0);
return ( return (
<li> <li>
<div>
{moreThanOneAccount && (
<span class={`current ${isCurrent ? 'is-current' : ''}`}>
<Icon icon="check-circle" alt="Current" />
</span>
)}
<Avatar url={account.info.avatarStatic} size="xxl" />
<NameText account={account.info} showAcct />
</div>
<div class="actions">
{isDefault && moreThanOneAccount && (
<>
<span class="tag">Default</span>{' '}
</>
)}
{!isCurrent && (
<button
type="button"
class="light"
onClick={() => {
store.session.set('currentAccount', account.info.id);
location.reload();
}}
>
<Icon icon="transfer" /> Switch
</button>
)}
<div> <div>
{!isDefault && moreThanOneAccount && ( {moreThanOneAccount && (
<span class={`current ${isCurrent ? 'is-current' : ''}`}>
<Icon icon="check-circle" alt="Current" />
</span>
)}
<Avatar url={account.info.avatarStatic} size="xxl" />
<NameText account={account.info} showAcct />
</div>
<div class="actions">
{isDefault && moreThanOneAccount && (
<>
<span class="tag">Default</span>{' '}
</>
)}
{!isCurrent && (
<button <button
type="button" type="button"
class="plain small" class="light"
onClick={() => { onClick={() => {
// Move account to the top of the list store.session.set('currentAccount', account.info.id);
accounts.splice(i, 1); location.reload();
accounts.unshift(account);
store.local.setJSON('accounts', accounts);
setCurrentDefault(i);
}} }}
> >
Set as default <Icon icon="transfer" /> Switch
</button> </button>
)} )}
{isCurrent && ( <div>
<> {!isDefault && moreThanOneAccount && (
{' '}
<button <button
type="button" type="button"
class="plain small" class="plain small"
onClick={() => { onClick={() => {
const yes = confirm( // Move account to the top of the list
'Are you sure you want to log out?',
);
if (!yes) return;
accounts.splice(i, 1); accounts.splice(i, 1);
accounts.unshift(account);
store.local.setJSON('accounts', accounts); store.local.setJSON('accounts', accounts);
location.reload(); setCurrentDefault(i);
}} }}
> >
Log out Set as default
</button> </button>
</> )}
)} {isCurrent && (
<>
{' '}
<button
type="button"
class="plain small"
onClick={() => {
const yes = confirm(
'Are you sure you want to log out?',
);
if (!yes) return;
accounts.splice(i, 1);
store.local.setJSON('accounts', accounts);
location.reload();
}}
>
Log out
</button>
</>
)}
</div>
</div> </div>
</div> </li>
</li> );
); })}
})} </ul>
</ul> {moreThanOneAccount && (
{moreThanOneAccount && ( <p>
<p> <small>
<small> Note: <i>Default</i> account will always be used for first load.
Note: <i>Default</i> account will always be used for first load. Switched accounts will persist during the session.
Switched accounts will persist during the session. </small>
</small> </p>
)}
<p style={{ textAlign: 'end' }}>
<a href="/#/login" class="button" onClick={onClose}>
Add new account
</a>
</p> </p>
)} <h2>Theme</h2>
<p style={{ textAlign: 'end' }}> <form
<a href="/#/login" class="button" onClick={onClose}> ref={themeFormRef}
Add new account onInput={(e) => {
</a> console.log(e);
</p> e.preventDefault();
<h2>Theme</h2> const formData = new FormData(themeFormRef.current);
<form const theme = formData.get('theme');
ref={themeFormRef} const html = document.documentElement;
onInput={(e) => {
console.log(e);
e.preventDefault();
const formData = new FormData(themeFormRef.current);
const theme = formData.get('theme');
const html = document.documentElement;
if (theme === 'auto') { if (theme === 'auto') {
html.classList.remove('is-light', 'is-dark'); html.classList.remove('is-light', 'is-dark');
} else { } else {
html.classList.toggle('is-light', theme === 'light'); html.classList.toggle('is-light', theme === 'light');
html.classList.toggle('is-dark', theme === 'dark'); html.classList.toggle('is-dark', theme === 'dark');
} }
document document
.querySelector('meta[name="color-scheme"]') .querySelector('meta[name="color-scheme"]')
.setAttribute('content', theme); .setAttribute('content', theme);
if (theme === 'auto') { if (theme === 'auto') {
store.local.del('theme'); store.local.del('theme');
} else { } else {
store.local.set('theme', theme); store.local.set('theme', theme);
} }
}} }}
> >
<div class="radio-group"> <div class="radio-group">
<label> <label>
<input <input
type="radio" type="radio"
name="theme" name="theme"
value="light" value="light"
defaultChecked={currentTheme === 'light'} defaultChecked={currentTheme === 'light'}
/> />
<span>Light</span> <span>Light</span>
</label> </label>
<label> <label>
<input <input
type="radio" type="radio"
name="theme" name="theme"
value="dark" value="dark"
defaultChecked={currentTheme === 'dark'} defaultChecked={currentTheme === 'dark'}
/> />
<span>Dark</span> <span>Dark</span>
</label> </label>
<label> <label>
<input <input
type="radio" type="radio"
name="theme" name="theme"
value="auto" value="auto"
defaultChecked={ defaultChecked={
currentTheme !== 'light' && currentTheme !== 'dark' currentTheme !== 'light' && currentTheme !== 'dark'
} }
/> />
<span>Auto</span> <span>Auto</span>
</label> </label>
</div> </div>
</form> </form>
<h2>About</h2> <h2>About</h2>
<p>
<a href="https://github.com/cheeaun/phanpy" target="_blank">
Built
</a>{' '}
by{' '}
<a href="https://mastodon.social/@cheeaun" target="_blank">
@cheeaun
</a>
.
</p>
{__BUILD_TIME__ && (
<p> <p>
Last build:{' '} <a href="https://github.com/cheeaun/phanpy" target="_blank">
<relative-time datetime={new Date(__BUILD_TIME__).toISOString()} />{' '} Built
{__COMMIT_HASH__ && ( </a>{' '}
<> by{' '}
( <a href="https://mastodon.social/@cheeaun" target="_blank">
<a @cheeaun
href={`https://github.com/cheeaun/phanpy/commit/${__COMMIT_HASH__}`} </a>
target="_blank" .
>
<code>{__COMMIT_HASH__}</code>
</a>
)
</>
)}
</p> </p>
)} {__BUILD_TIME__ && (
<p>
Last build:{' '}
<relative-time datetime={new Date(__BUILD_TIME__).toISOString()} />{' '}
{__COMMIT_HASH__ && (
<>
(
<a
href={`https://github.com/cheeaun/phanpy/commit/${__COMMIT_HASH__}`}
target="_blank"
>
<code>{__COMMIT_HASH__}</code>
</a>
)
</>
)}
</p>
)}
</main>
</div> </div>
); );
} }