From 52857844a729c7a062fd7049aeedf65e93d575bb Mon Sep 17 00:00:00 2001 From: Daniel Schmidt Date: Wed, 18 Sep 2024 21:13:35 +0200 Subject: [PATCH] feat: reordered home page --- frontend/src/css/style.scss | 35 +++++++++- frontend/src/js/ui/components/layout/grid.ts | 3 +- .../src/js/ui/components/supporter-bar.ts | 30 ++++++++ frontend/src/js/ui/views/home.ts | 69 +++++++++---------- 4 files changed, 99 insertions(+), 38 deletions(-) create mode 100644 frontend/src/js/ui/components/supporter-bar.ts diff --git a/frontend/src/css/style.scss b/frontend/src/css/style.scss index f2a29d74..dbceb819 100644 --- a/frontend/src/css/style.scss +++ b/frontend/src/css/style.scss @@ -129,4 +129,37 @@ body { // https://stackoverflow.com/a/71876526 .monaco-editor { position: absolute !important; -} \ No newline at end of file +} + +.scroll-text { + display: block; + -moz-transform: translateX(100%); + -webkit-transform: translateX(100%); + transform: translateX(100%); + -moz-animation: scroll-anim 80s linear infinite; + -webkit-animation: scroll-anim 80s linear infinite; + animation: scroll-anim 80s linear infinite; +} + +@-moz-keyframes scroll-anim { + from { -moz-transform: translateX(100%); } + to { -moz-transform: translateX(-100%); } +} + +@-webkit-keyframes scroll-anim { + from { -webkit-transform: translateX(100%); } + to { -webkit-transform: translateX(-100%); } +} + +@keyframes scroll-anim { + from { + -moz-transform: translateX(100%); + -webkit-transform: translateX(100%); + transform: translateX(100%); + } + to { + -moz-transform: translateX(-100%); + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + } +} diff --git a/frontend/src/js/ui/components/layout/grid.ts b/frontend/src/js/ui/components/layout/grid.ts index d6b00ef4..71098f5e 100644 --- a/frontend/src/js/ui/components/layout/grid.ts +++ b/frontend/src/js/ui/components/layout/grid.ts @@ -5,6 +5,7 @@ type GridProps = { minWidth?: string; maxWidth?: string; gap?: number; + columns?: string; }; /** @@ -17,7 +18,7 @@ export default (): m.Component => ({ let style = { display: 'grid', - gridTemplateColumns: `repeat(auto-fit, minmax(${min}, ${max}))`, + gridTemplateColumns: attrs.columns ?? `repeat(auto-fit, minmax(${min}, ${max}))`, }; return m( diff --git a/frontend/src/js/ui/components/supporter-bar.ts b/frontend/src/js/ui/components/supporter-bar.ts new file mode 100644 index 00000000..cf0d12a5 --- /dev/null +++ b/frontend/src/js/ui/components/supporter-bar.ts @@ -0,0 +1,30 @@ +import m from 'mithril'; + +import Icon from './atomic/icon'; +import Flex from './layout/flex'; + +let supporter: string[] = ['loading']; + +m.request({ + url: '/proxy/https://raw.githubusercontent.com/BigJk/snd-package-repo/refs/heads/v2/supporter.json', +}).then((res) => { + supporter = res as string[]; +}); + +export default (): m.Component => ({ + view(vnode) { + return m(Flex, { className: '.mb3' }, [ + m(Flex, { className: '.bg-primary.ph3.white.br3.br--left', items: 'center', justify: 'center' }, m(Icon, { icon: 'mail' })), + m( + 'div.grid-bg.pv2.white.f8.overflow-hidden.flex-grow-1', + m('span.scroll-text', [ + m('span.col-error.mr1', '♥'), + m('span.b.mr3.ttu', 'Thanks to all supporters and contributors!'), // + m('span.mr3', supporter.join(', ') + '...'), + m('span.o-70', ' and everyone else that checked the project out!'), + ]), + ), + m('div.bg-primary.br3.br--right.w1'), + ]); + }, +}); diff --git a/frontend/src/js/ui/views/home.ts b/frontend/src/js/ui/views/home.ts index 9425ce3a..cb1d368e 100644 --- a/frontend/src/js/ui/views/home.ts +++ b/frontend/src/js/ui/views/home.ts @@ -1,5 +1,8 @@ import m from 'mithril'; +import Grid from '../components/layout/grid'; +import SupporterBar from '../components/supporter-bar'; + import store from 'js/core/store'; import Button from 'js/ui/shoelace/button'; @@ -16,33 +19,11 @@ import Base from 'js/ui/components/view-layout/base'; export default (): m.Component => ({ view(vnode) { - return m( - Base, - { title: m(Title, 'Dashboard'), active: 'dashboard', classNameContainer: '.pa3' }, - m(Flex, { className: '.flex-gap-3' }, [ - m('div', [ - m( - Box, - { className: '.mb3.w-100.ph4.pv3' }, - m(Flex, { justify: 'between' }, [ - m(Flex, { gap: 2, items: 'center' }, [ - m( - Flex, - { className: '.w2.h2.br2.bg-primary', justify: 'center', items: 'center' }, - m(Icon, { icon: 'list-box', className: '.white' }), - ), - m('div.ml2', [m('div.ttu.f7.b..text-muted', 'Templates'), m('div.f4', store.value.templates.length)]), - ]), - m(Flex, { gap: 2, items: 'center' }, [ - m(Flex, { className: '.w2.h2.br2.bg-primary', justify: 'center', items: 'center' }, m(Icon, { icon: 'switch', className: '.white' })), - m('div.ml2', [m('div.ttu.f7.b.text-muted', 'Generators'), m('div.f4', store.value.generators.length)]), - ]), - m(Flex, { gap: 2, items: 'center' }, [ - m(Flex, { className: '.w2.h2.br2.bg-primary', justify: 'center', items: 'center' }, m(Icon, { icon: 'list', className: '.white' })), - m('div.ml2', [m('div.ttu.f7.b.text-muted', 'Data Sources'), m('div.f4', store.value.sources.length)]), - ]), - ]), - ), + return m(Base, { title: m(Title, 'Dashboard'), active: 'dashboard', classNameContainer: '.pa3' }, [ + m(SupporterBar), + m(Grid, { columns: '3fr 1fr' }, [ + m( + 'div', m(Hero, { title: 'Welcome to Sales & Dungeons!', icon: m('div.flex-shrink-0', m(Logo, { className: '.mb3.ml3', scale: 1.5 })), @@ -54,15 +35,31 @@ export default (): m.Component => ({ m(Button, { intend: 'error', link: 'https://ko-fi.com/bigjk' }, 'Support the Project'), ], }), - ]), - m(Flex, { className: '.flex-gap-3', direction: 'column' }, [ - m(BoxVersion, { - newVersion: !store.value.version.latest?.newest ?? false, - newVersionTag: store.value.version.latest?.tag.name ?? '', - }), - m('div', m(DiscordWidget, { className: 'w-100', height: 400 })), - ]), + ), + m('div', m(DiscordWidget, { className: 'w-100' })), + m( + Box, + { className: '.w-100.ph4.pv3.flex.items-center' }, + m(Flex, { justify: 'between', items: 'center', className: '.w-100' }, [ + m(Flex, { gap: 2, items: 'center' }, [ + m(Flex, { className: '.w2.h2.br2.bg-primary', justify: 'center', items: 'center' }, m(Icon, { icon: 'list-box', className: '.white' })), + m('div.ml2', [m('div.ttu.f7.b.text-muted', 'Templates'), m('div.f3', store.value.templates.length)]), + ]), + m(Flex, { gap: 2, items: 'center' }, [ + m(Flex, { className: '.w2.h2.br2.bg-primary', justify: 'center', items: 'center' }, m(Icon, { icon: 'switch', className: '.white' })), + m('div.ml2', [m('div.ttu.f7.b.text-muted', 'Generators'), m('div.f3', store.value.generators.length)]), + ]), + m(Flex, { gap: 2, items: 'center' }, [ + m(Flex, { className: '.w2.h2.br2.bg-primary', justify: 'center', items: 'center' }, m(Icon, { icon: 'list', className: '.white' })), + m('div.ml2', [m('div.ttu.f7.b.text-muted', 'Data Sources'), m('div.f3', store.value.sources.length)]), + ]), + ]), + ), + m(BoxVersion, { + newVersion: !store.value.version.latest?.newest ?? false, + newVersionTag: store.value.version.latest?.tag.name ?? '', + }), ]), - ); + ]); }, });