diff options
| -rw-r--r-- | README.md | 25 | ||||
| -rw-r--r-- | src/components/Card.svelte | 2 | ||||
| -rw-r--r-- | src/components/FileUploads.svelte | 108 |
3 files changed, 69 insertions, 66 deletions
@@ -9,20 +9,23 @@ cd PTDatabaseApp && npm i ``` -Then start [Rollup](https://rollupjs.org) +The original version of this app (forked from Scott Wilkins) used [Rollup](https://rollupjs.org/guide/en/). It has now been switched to use [Vite](https://vitejs.dev/), which allows an effortless project setup for various frameworks. A project that uses `Svelte`, `tailwind`, `postcss`, can easily be instantiated with +```shell +npm create vite@latest +``` + +To run the development build ```bash npm run dev ``` **note** that `npm run <arg>` is defined in [`package.json`](./package.json) -Navigate to [localhost:1776](http://localhost:1776) to interact with the app through the browser. The port is *always* subject to change, so read the output in your terminal to see the port chosen by `sirv`. +Navigate to whichever `localhost:PORT/PTDatabaseApp` URL Vite chose for the server. The link should be written to `STDOUT` so keep an eye on your shell after running the command above. -By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`. - -This application uses Svelte and Typescript. +This application uses Svelte, Typescript, Tailwind, and daisyUI. ## Svelte Svelte is a tool for building fast web applications, similar to React, Angular, or Vue. @@ -47,10 +50,8 @@ and then run the compiled js file using `node` as such ```bash node app.js ``` - -## Tailwind - -This project began by mainly utilizing the Svelte UI library named [Svelte Material UI](https://sveltematerialui.com/). As this is the first time I am working with professional-level web development tools (other than a not-so-elegant React project), I began looking into web development philosophy and methodologies. I came across a popular tool named Tailwind that is used by global companies like Github, Netflix, Heroku, Kickstarter, Twitch, and Segment. +Once you become familiar with Typescript, you will never go back to plain Javascript. +## Tailwind CSS Tailwind's utility-first fundamentals favor inline CSS in HTML files over maintaining separate CSS classes for each component. It focuses on building complex components from a constrained set of primitive utilities (the utilities offered by Tailwind through `<div class="">`). Building designs through Tailwind's utilities - Saves energy investing class names for everything @@ -61,3 +62,9 @@ Although it may feel like basically inline css but with shorter text, Tailwind's - Designing with constraints: The predefined design system makes it easier to build visually consistent UI - Responsive design: `@media` breakpoints can easily be factored in through the `sm`, `md`, `lg`, `xl`, and `2xl` prefixes - Hover, focus, and other states: Inline styles cannot target states like hover or focus, while Tailwind's state variants make it easy through prefixes. + +In this project, Tailwind directives are located in [app.css](./src/app.css) + +## daisyUI + +[daisyUI](https://daisyui.com/components/) is a Tailwind CSS component library. There are a million of component libraries to choose from when using `Svelte` and `Tailwind`. I chose this because I liked their components. diff --git a/src/components/Card.svelte b/src/components/Card.svelte index 6b4b59e..4d1c8bb 100644 --- a/src/components/Card.svelte +++ b/src/components/Card.svelte @@ -3,7 +3,7 @@ export let desc = ""; </script> -<div class="card bg-primary text-primary-content"> +<div class="card card-compact w-100 bg-primary text-primary-content"> <div class="card-body"> <h2 class="card-title">{title}</h2> <p>{desc}</p> diff --git a/src/components/FileUploads.svelte b/src/components/FileUploads.svelte index da3d255..b38961f 100644 --- a/src/components/FileUploads.svelte +++ b/src/components/FileUploads.svelte @@ -1,6 +1,4 @@ <script lang="ts"> - let x: number | null; - import { Label } from "@smui/button"; import IconButton from "@smui/icon-button"; import Snackbar, { Actions } from "@smui/snackbar"; @@ -16,8 +14,8 @@ let ptSchedules: FileList | null; let labSchedule: FileList | null; let dbFile: FileList | null; - let snackbar; - let snackbarText; + let snackbar : Snackbar; + let snackbarText : Snackbar; $: { if (ptSchedules?.length) { @@ -124,59 +122,57 @@ } </script> -<div class="flex flex-col items-center justify-center h-full "> - <div class="flex grid grid-cols-2 gap-6"> - <Card - title="Peer Teacher" - desc="Upload one or more Peer Teacher schedule txt files" - > - <UploadButton - accept="text/plain" - multiple={true} - bind:files={ptSchedules} - /> - </Card> - - <Card - title="Labs" - desc="Upload one or more Labs as json file. Acquired from Howdy" - > - <UploadButton - color="btn-success" - accept="application/json" - multiple={true} - bind:files={labSchedule} - /> - </Card> - - <Card - title="Data Base" - desc="Upload the json database file to continue working" - > - <UploadButton - color="btn-info" - accept="application/json" - multiple={true} - bind:files={dbFile} - /> - </Card> - - <Card - title="Export DB" - desc="Download the json database file to save your work. Remember to save it on the cloud somewhere!" - > - <button class="btn btn-warning" on:click={exportDB}>Download</button> - </Card> - - <Card - title="Export to Local Storage" - desc="Save current DB to local storage. Local storage db should only be used for testing purposes to avoid data anomalies" +<div class="flex grid m-10 grid-cols-2 gap-2"> + <Card + title="Peer Teacher" + desc="Upload one or more Peer Teacher schedule txt files" + > + <UploadButton + accept="text/plain" + multiple={true} + bind:files={ptSchedules} + /> + </Card> + + <Card + title="Labs" + desc="Upload one or more Labs as json file. Acquired from Howdy" + > + <UploadButton + color="btn-success" + accept="application/json" + multiple={true} + bind:files={labSchedule} + /> + </Card> + + <Card + title="Data Base" + desc="Upload the json database file to continue working" + > + <UploadButton + color="btn-info" + accept="application/json" + multiple={true} + bind:files={dbFile} + /> + </Card> + + <Card + title="Export DB" + desc="Download the json database file to save your work. Remember to save it on the cloud somewhere!" + > + <button class="btn btn-warning" on:click={exportDB}>Download</button> + </Card> + + <Card + title="Export to Local Storage" + desc="Save current DB to local storage. Local storage db should only be used for testing purposes to avoid data anomalies" + > + <button class="btn btn-warning" on:click={exportDB2LocalStorage} + >LocalStorage</button > - <button class="btn btn-warning" on:click={exportDB2LocalStorage} - >LocalStorage</button - > - </Card> - </div> + </Card> </div> <!-- https://github.com/saadeghi/daisyui/issues/221 --> |