Unfloyded/misskey-tools
0
0
Fork 0
Code Activity

デザイン調整

Browse source
This commit is contained in:
Xeltica 2022-01-27 17:27:50 +09:00
parent c717a42bb6
commit ae17ec5777
7 changed files with 64 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/backend/views/frontend.pug
View file

@ -14,6 +14,7 @@ html
meta(name='twitter:card' content='summary')
meta(name='twitter:site' content='@Xeltica')
meta(name='twitter:creator' content='@Xeltica')
link(rel="stylesheet" href="https://koruri.chillout.chat/koruri.css")
link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css")
style.
.loading {

11
src/frontend/components/AccountsPage.tsx
View file

@ -31,12 +31,11 @@ export const AccountsPage: React.VFC = () => {
</div>
) : (
<div className="fade vstack">
<div className="card">
<div className="body">
<h1>{t('_accounts.currentAccount')}</h1>
<p>@{data.username}@{data.host}</p>
</div>
</div>
<article>
<p>
<b>{t('_accounts.currentAccount')}:</b> @{data.username}@{data.host}
</p>
</article>
<article className="card">
<div className="body">
<h1>{t('_accounts.switchAccount')}</h1>

6
src/frontend/components/AnnouncementList.tsx
View file

@ -24,8 +24,8 @@ export const AnnouncementList: React.VFC = () => {
if (announcements.length === 0) return null;
return (
<Card>
<h1>{t('announcements')}</h1>
<>
<h2 className="mb-0">{t('announcements')}</h2>
<div className="large menu fade">
{announcements.map(a => (
<Link className="item fluid" key={a.id} to={`/announcements/${a.id}`}>
@ -33,6 +33,6 @@ export const AnnouncementList: React.VFC = () => {
</Link>
))}
</div>
</Card>
</>
);
};

26
src/frontend/components/SettingPage.tsx
View file

@ -93,7 +93,7 @@ export const SettingPage: React.VFC = () => {
<Card bodyClassName="vstack">
<h1>{t('appearance')}</h1>
<h2>{t('theme')}</h2>
<div>
<div className="vstack">
{
themes.map(theme => (
<label key={theme} className="input-check">
@ -120,14 +120,22 @@ export const SettingPage: React.VFC = () => {
<a href="https://crowdin.com/project/misskey-tools" target="_blank" rel="noopener noreferrer">{t('helpTranslation')}</a>
</div>
</Card>
<Card bodyClassName="vstack">
<button className="btn block" onClick={onClickLogout}>{t('logout')}</button>
<p className="text-dimmed">{t('logoutDescription')}</p>
</Card>
<Card bodyClassName="vstack">
<button className="btn danger block" onClick={onClickDeleteAccount}>{t('deleteAccount')}</button>
<p className="text-dimmed">{t('deleteAccountDescription')}</p>
</Card>
<div className="list-form">
<button className="item" onClick={onClickLogout}>
<i className="icon bi bi-box-arrow-right" />
<div className="body">
<h1>{t('logout')}</h1>
<p className="desc">{t('logoutDescription')}</p>
</div>
</button>
<button className="item text-danger" onClick={onClickDeleteAccount}>
<i className="icon bi bi-trash-fill" />
<div className="body">
<h1>{t('deleteAccount')}</h1>
<p className="desc">{t('deleteAccountDescription')}</p>
</div>
</button>
</div>
</div>
);
};

40
src/frontend/pages/announcement.tsx
View file

@ -20,25 +20,27 @@ export const AnnouncementPage: React.VFC = () => {
return (
<article className="xarticle">
{!announcement ? <Skeleton width="100%" height="10rem" /> : (
<>
<header className="mb-4">
<h2 className="mb-0">{announcement.title}</h2>
<aside className="text-dimmed">
<i className="bi bi-clock" />&nbsp;
{dayjs(announcement.createdAt).locale(lang.split('_')[0]).fromNow()}
</aside>
</header>
<section>
{(() => {
const res: ReactNodeArray = [];
announcement.body.split('\n').forEach(s => {
res.push(<>{s}</>);
res.push(<br />);
});
return res;
})()}
</section>
</>
<div className="card">
<div className="body">
<header className="mb-4">
<h2 className="mb-0">{announcement.title}</h2>
<aside className="text-dimmed">
<i className="bi bi-clock" />&nbsp;
{dayjs(announcement.createdAt).locale(lang.split('_')[0]).fromNow()}
</aside>
</header>
<section>
{(() => {
const res: ReactNodeArray = [];
announcement.body.split('\n').forEach(s => {
res.push(<>{s}</>);
res.push(<br />);
});
return res;
})()}
</section>
</div>
</div>
)}
</article>
);

1
src/frontend/style.scss
View file

@ -1,5 +1,6 @@
body {
--primary: rgb(134, 179, 0);
font-family: "Koruri", sans-serif;
font-feature-settings: "pkna";
}

18
yarn.lock
View file

@ -1620,6 +1620,13 @@ debug@2.6.9, debug@^2.2.0:
dependencies:
ms "2.0.0"
debug@=3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
dependencies:
ms "2.0.0"
debug@^3.1.0, debug@^3.2.6:
version "3.2.7"
resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
@ -2253,6 +2260,13 @@ flatted@^3.1.0:
resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.2.tgz#64bfed5cb68fe3ca78b3eb214ad97b63bedce561"
integrity sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA==
follow-redirects@1.5.10:
version "1.5.10"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
dependencies:
debug "=3.1.0"
follow-redirects@^1.14.0:
version "1.14.4"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.4.tgz#838fdf48a8bbdd79e52ee51fb1c94e3ed98b9379"
@ -5633,8 +5647,8 @@ xdg-basedir@^4.0.0:
integrity sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==
xeltica-ui@xeltica/ui:
version "1.0.0-alpha.7"
resolved "https://codeload.github.com/xeltica/ui/tar.gz/765a73de505b5e405021b8ce182f4e3627560e72"
version "1.0.0-alpha.15"
resolved "https://codeload.github.com/xeltica/ui/tar.gz/d8088a79e78f0795a92a542d872b3449ad34dbcb"
xml2js@^0.4.17:
version "0.4.23"