feat: reordered home page

BigJk · Sep 18, 2024 · 5285784 · 5285784
1 parent 4c42f41
commit 5285784
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 38 deletions.
diff --git 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;
-}
+}
+
+.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
@@ -5,6 +5,7 @@ type GridProps = {
 	minWidth?: string;
 	maxWidth?: string;
 	gap?: number;
+	columns?: string;
 };
 
 /**
@@ -17,7 +18,7 @@ export default (): m.Component<GridProps> => ({
 
 		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
@@ -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
@@ -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 ?? '',
+				}),
 			]),
-		);
+		]);
 	},
 });