♻️ Start working on v2

Androz2091 · Jun 19, 2021 · b2b82dd · b2b82dd
1 parent 4eae28e
commit b2b82dd
Show file tree

Hide file tree

Showing 9 changed files with 299 additions and 79 deletions.
diff --git a/package.json b/package.json
@@ -17,13 +17,15 @@
     "rollup-plugin-livereload": "^1.0.0",
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-terser": "^5.1.2",
-    "svelte": "^3.0.0"
+    "svelte": "^3.0.0",
+    "svelte-preprocess": "^4.7.3"
   },
   "dependencies": {
     "@zerodevx/svelte-toast": "^0.1.4",
     "axios": "^0.21.1",
     "fflate": "^0.6.7",
     "papaparse": "^5.3.0",
+    "sass": "^1.35.1",
     "sirv-cli": "^0.4.4",
     "snake-case": "^3.0.4",
     "svelte-frappe-charts": "^1.5.0",

diff --git a/public/global.css b/public/global.css
@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Rubik&display=swap");
+
 ::-webkit-scrollbar {
     width: 5px;
     background-color: none;

diff --git a/rollup.config.js b/rollup.config.js
@@ -5,6 +5,7 @@ import livereload from 'rollup-plugin-livereload';
 import { terser } from 'rollup-plugin-terser';
 import css from 'rollup-plugin-css-only';
 import json from '@rollup/plugin-json';
+import preprocess from 'svelte-preprocess';
 
 const production = !process.env.ROLLUP_WATCH;
 
@@ -39,6 +40,7 @@ export default {
     },
     plugins: [
         svelte({
+            preprocess: preprocess(),
             compilerOptions: {
                 // enable run-time checks when not in production
                 dev: !production

diff --git a/src/App.svelte b/src/App.svelte
@@ -1,6 +1,9 @@
 <script>
 	import { loaded } from './app/store';
 
+	import Header from './components/Header.svelte';
+	import Footer from './components/Footer.svelte';
+	
 	import Home from './views/Home.svelte';
 	import Loader from './views/Loader.svelte';
 
@@ -23,17 +26,22 @@
 		styleContent={{ 'background-color': '#18191c', color: 'white' }}
 		closeButton={false}
 	>
-		{#if $loaded}
-			<Home />
-		{:else}
-			<Loader />
-		{/if}
+		<Header />
+		<div>
+			{#if $loaded}
+				<Home />
+			{:else}
+				<Loader />
+			{/if}
+		</div>
+		<Footer />
 	</Modal>
 </main>
 
 <style>
 	.app {
-		width: 100vw;
-		height: 100vh;
+		min-height: 100vh;
+		display: grid;
+		grid-template-rows: 1fr auto;
 	}
 </style>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
@@ -0,0 +1,21 @@
+<template>
+	<footer>
+		<p>Made with ❤️ by <a href="https://twitter.com/Androz2091">Androz2091</a>. DDPE is <a href="https://github.com/Androz2091/discord-data-package-explorer">open source</a>!</p>
+	</footer>
+</template>
+
+<style>
+    footer {
+        grid-row-start: 2;
+        grid-row-end: 3;
+        background-color: var(--third-background-color);
+        padding-top: 1rem;
+        padding-bottom: 1rem;
+        margin-top: 2rem;
+    }
+
+    footer p {
+        margin: 0;
+        margin-left: 1rem;
+    }
+</style>
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
@@ -0,0 +1,36 @@
+<template>
+    <div class="app-header">
+        <div class="app-header-container">
+            <div class="app-header-icon tag"><a href="/">#</a></div>
+            <h1 on:click="{() => window.location.href = '/'}">Discord Data Package Explorer</h1>
+        </div>
+    </div>
+</template>
+
+<style lang="scss">
+    .app-header {
+        width: 100%;
+        position: fixed;
+        background-color: var(--secondary-background-color);
+    }
+    .app-header-container {
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        h1 {
+            font-size: 1.5rem;
+            font-weight: 800;
+            cursor: pointer;
+        }
+    }
+    .app-header-icon {
+        text-align: center;
+
+        a {
+            color: white !important;
+            text-decoration: none;
+        }
+    }
+</style>
diff --git a/src/main.css b/src/main.css
@@ -1,8 +1,53 @@
+:root {
+    --main-color: #5865F2;
+    --secondary-color: #7289da;
+    --secondary-color-r: 114;
+    --secondary-color-g: 137;
+    --secondary-color-b: 218;
+    --background-color: rgb(40, 42, 46);
+    --secondary-background-color: rgb(45, 47, 51);
+    --accent-background-color: rgb(37, 38, 41);
+    --third-background-color: rgb(32, 34, 37);
+    --box-background-color: rgb(48, 50, 54);
+}
+
+html {
+    height: 100%;
+    background-color: var(--background-color);
+}
+
 body {
-    overflow-x: hidden;
-    background-color: #373c42;
+    min-height: 100vh;
+    padding: 0;
     margin: 0;
-    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    color: white;
+    font-weight: 400;
+    overflow-x: hidden;
+	font-family: 'Rubik', sans-serif;
+}
+
+.tag {
+    text-align: center;
+    background-color: var(--main-color);
+    width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    margin-right: 0.6rem;
+    font-size: 1.3rem;
+    font-weight: 600;
+    border-radius: 0.3rem;
+    border: 0.1rem solid var(--accent-background-color);
+    transform: rotate(-4deg);
+}
+
+a {
+    color: var(--secondary-color) !important;
+    font-weight: bolder;
+    text-decoration: none;
+}
+
+path {
+    fill: var(--secondary-color);
 }
 
 .tooltip {
@@ -12,7 +57,3 @@ body {
 .text-discord {
     color: #7289DA;
 }
-
-a {
-    color: #7289DA;
-}