scott/crabfit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

New tab recents on extension

Browse source
This commit is contained in:
Ben Grant 2021-06-01 15:32:36 +10:00
parent 8dff37fd9e
commit ff169a6de2
3 changed files with 6 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
crabfit-frontend/src/components/Recents/Recents.tsx
View file

@ -8,7 +8,7 @@ import { Recent } from './recentsStyle';
dayjs.extend(relativeTime); dayjs.extend(relativeTime);
const Recents = () => { const Recents = ({ target }) => {
const recents = useRecentsStore(state => state.recents); const recents = useRecentsStore(state => state.recents);
const locale = useLocaleUpdateStore(state => state.locale); const locale = useLocaleUpdateStore(state => state.locale);
const { t } = useTranslation(['home', 'common']); const { t } = useTranslation(['home', 'common']);
@ -18,7 +18,7 @@ const Recents = () => {
<StyledMain> <StyledMain>
<h2>{t('home:recently_visited')}</h2> <h2>{t('home:recently_visited')}</h2>
{recents.map(event => ( {recents.map(event => (
<Recent href={`/${event.id}`} key={event.id}> <Recent href={`/${event.id}`} target={target} key={event.id}>
<span className="name">{event.name}</span> <span className="name">{event.name}</span>
<span locale={locale} className="date" title={dayjs.unix(event.created).format('D MMMM, YYYY')}>{t('common:created', { date: dayjs.unix(event.created).fromNow() })}</span> <span locale={locale} className="date" title={dayjs.unix(event.created).format('D MMMM, YYYY')}>{t('common:created', { date: dayjs.unix(event.created).fromNow() })}</span>
</Recent> </Recent>

2
crabfit-frontend/src/pages/Create/Create.tsx
View file

@ -170,7 +170,7 @@ const Create = ({ offline }) => {
</StyledMain> </StyledMain>
) : ( ) : (
<> <>
<Recents /> <Recents target="_blank" />
<StyledMain> <StyledMain>
{offline ? ( {offline ? (

5
crabfit-frontend/src/pages/Home/homeStyle.ts
View file

@ -47,8 +47,9 @@ export const TitleLarge = styled.h1`
export const Logo = styled.img` export const Logo = styled.img`
width: 80px; width: 80px;
transition: transform .2s; transition: transform .15s;
animation: jelly .5s 1 .1s; animation: jelly .5s 1 .05s;
user-select: none;
@keyframes jelly { @keyframes jelly {
from,to { from,to {