diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 16 | ||||
| -rw-r--r-- | src/components/ActionBar.vue | 31 | ||||
| -rw-r--r-- | src/components/EditorLists.vue | 75 | ||||
| -rw-r--r-- | src/components/FileUpload.vue | 11 | ||||
| -rw-r--r-- | src/components/List.vue | 17 | ||||
| -rw-r--r-- | src/components/UIButton.vue | 32 | ||||
| -rw-r--r-- | src/models/EventInfo.ts | 2 | ||||
| -rw-r--r-- | src/router/index.ts | 6 | ||||
| -rw-r--r-- | src/views/About.vue | 31 | ||||
| -rw-r--r-- | src/views/Editor.vue | 18 | ||||
| -rw-r--r-- | src/views/Start.vue | 53 |
11 files changed, 214 insertions, 78 deletions
diff --git a/src/App.vue b/src/App.vue index 34945a9..5a1f608 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,16 +3,28 @@ </template> <style> +*, *:before, *:after { + box-sizing: inherit; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + html { box-sizing: border-box; } -*, *:before, *:after { - box-sizing: inherit; +html, body { + margin: 0; + padding: 0; } #app { height: 100vh; max-height: 100vh; } + +@media (prefers-color-scheme: dark) { + body { + background-color: #121212; + } +} </style> diff --git a/src/components/ActionBar.vue b/src/components/ActionBar.vue index 96dbaae..e50c791 100644 --- a/src/components/ActionBar.vue +++ b/src/components/ActionBar.vue @@ -1,25 +1,26 @@ <template> - <div> - <file-upload + <div id="action-bar"> + <FileUpload :accept="'text/plain'" :multiple="true" - @file-changed="handlePtChange">Upload PT Schedule</file-upload> - <file-upload + @fileChanged="handlePtChange">Upload PT Schedule</FileUpload> + <FileUpload :accept="'application/json'" - @file-changed="handleLabChange">Upload Lab Schedule</file-upload> - <button @click="save">Export</button> + @fileChanged="handleLabChange">Import Lab Schedule</FileUpload> + <UIButton @click="save">Export</UIButton> </div> </template> <script> import FileUpload from '@/components/FileUpload.vue'; - import { parseLabFile, parsePtSchedule } from '@/features/parser'; +import UIButton from '@/components/UIButton.vue'; export default { name: 'ActionBar', components: { FileUpload, + UIButton, }, methods: { handleLabChange(files) { @@ -73,3 +74,19 @@ export default { }, }; </script> + +<style> +#action-bar { + max-width: 100vw; + overflow-x: auto; + white-space: nowrap; +} + +#action-bar > * { + margin-left: 0.5rem; +} + +#action-bar > *:first-child { + margin-left: 0; +} +</style> diff --git a/src/components/EditorLists.vue b/src/components/EditorLists.vue index ae0aa22..60c965c 100644 --- a/src/components/EditorLists.vue +++ b/src/components/EditorLists.vue @@ -1,19 +1,28 @@ <template> - <div id="editor"> + <div id="editor-lists"> <div class="column"> - <list :items="peerTeachers" @selection-changed="handlePtClick" #default="pt"> - {{ pt.item.name }} <button @click.stop="deletePeerTeacher(pt.item.id)">X</button> - </list> + <h3 class="column-header">Peer Teachers</h3> + <List :items="peerTeachers" @selection-changed="handlePtClick" #default="pt"> + <span class="list-item"> + {{ pt.item.name }} <button @click.stop="deletePeerTeacher(pt.item.id)">x</button> + </span> + </List> </div> <div class="column"> - <list :items="compatibleLabs" #default="lab"> - {{ lab.item.fullInfo }} <button @click.stop="assignLab(lab.item.id)">+</button> - </list> + <h3 class="column-header">Labs</h3> + <List :items="compatibleLabs" #default="lab"> + <span class="list-item"> + {{ lab.item.fullInfo }} <button @click.stop="assignLab(lab.item.id)">+</button> + </span> + </List> </div> <div class="column"> - <list :items="selectedPeerTeacherAssignments" #default="lab"> - {{ lab.item.fullInfo }} <button @click.stop="unassignLab(lab.item.id)">X</button> - </list> + <h3 class="column-header">{{ this.selectedPeerTeacher.name }}</h3> + <List :items="selectedPeerTeacherAssignments" #default="lab"> + <span class="list-item"> + {{ lab.item.fullInfo }} <button @click.stop="unassignLab(lab.item.id)">x</button> + </span> + </List> </div> </div> </template> @@ -84,13 +93,57 @@ export default defineComponent({ </script> <style> -#editor { +#editor-lists { display: flex; max-height: inherit; + min-height: 0; +} + +.column-header { + margin: 0; } .column { flex: 1; overflow: auto; } + +.list-item { + align-items: center; + background-color: #f0f0f0; + display: flex; + justify-content: space-between; + margin: 0.5em; + padding: 0.5em; +} + +.list-item:hover { + background-color: #c0c0c0; +} + +.list-item > button { + background-color: #500000; + border: none; + color: white; + font-size: 1em; +} + +@media (prefers-color-scheme: dark) { + .column-header { + color: white; + } + + .list-item { + background-color: #303030; + color: white; + } + + .list-item:hover { + background-color: #707070; + } + + .list-item > button { + background-color: #81302b; + } +} </style> diff --git a/src/components/FileUpload.vue b/src/components/FileUpload.vue index b2fdb14..fe3ef1e 100644 --- a/src/components/FileUpload.vue +++ b/src/components/FileUpload.vue @@ -20,7 +20,7 @@ export default { }, }, emits: { - selectionChanged: null, + fileChanged: null, }, }; </script> @@ -29,8 +29,7 @@ export default { .file-upload-lbl { background-color: #500000; color: white; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - padding: 5px; + padding: 0.5em; text-align: center; } @@ -38,4 +37,10 @@ export default { color: grey; cursor: pointer; } + +@media (prefers-color-scheme: dark) { + .file-upload-lbl { + background-color: #81302b; + } +} </style> diff --git a/src/components/List.vue b/src/components/List.vue index 031f708..f1ef690 100644 --- a/src/components/List.vue +++ b/src/components/List.vue @@ -3,8 +3,7 @@ <li v-for="item in items" :key="item.id" - @click="$emit('selectionChanged', item)" - class="list-item"> + @click="$emit('selectionChanged', item)"> <slot :item="item">{{ item }}</slot> </li> </ul> @@ -25,17 +24,7 @@ export default { <style scoped> .list { list-style-type: none; -} - -.list-item { - border: 1px solid grey; - border-radius: 5px; - margin: 5px 0; - padding: 0.15em; - text-align: center; -} - -.list-item:hover { - background-color: rgb(182, 182, 182); + margin: 0; + padding: 0; } </style> diff --git a/src/components/UIButton.vue b/src/components/UIButton.vue new file mode 100644 index 0000000..57b155b --- /dev/null +++ b/src/components/UIButton.vue @@ -0,0 +1,32 @@ +<template> + <button class="ui-button"><slot></slot></button> +</template> + +<script lang="ts"> +import { defineComponent } from 'vue'; + +export default defineComponent({ + name: 'UIButton', +}); +</script> + +<style> +.ui-button { + background-color: #500000; + border: none; + color: white; + font-size: 1em; + padding: 0.5em; +} + +.ui-button:hover { + color: grey; + cursor: pointer; +} + +@media (prefers-color-scheme: dark) { + .ui-button { + background-color: #81302b; + } +} +</style> diff --git a/src/models/EventInfo.ts b/src/models/EventInfo.ts index 4493162..962ec70 100644 --- a/src/models/EventInfo.ts +++ b/src/models/EventInfo.ts @@ -39,7 +39,7 @@ export default class EventInfo { get info() { if (this.days === '') { - return 'ONLINE'; + return 'WEB'; } return `${this.days} ${EventInfo.timeToStr(this.start)}-${EventInfo.timeToStr(this.end)}`; } diff --git a/src/router/index.ts b/src/router/index.ts index 7a598b3..a36cb7e 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,12 +1,12 @@ import { createRouter, createWebHashHistory } from 'vue-router'; import Editor from '../views/Editor.vue'; -import About from '../views/About.vue'; +import Start from '../views/Start.vue'; const routes = [ { path: '/', - name: 'About', - component: About, + name: 'Start', + component: Start, }, { path: '/editor', diff --git a/src/views/About.vue b/src/views/About.vue deleted file mode 100644 index ac2bde1..0000000 --- a/src/views/About.vue +++ /dev/null @@ -1,31 +0,0 @@ -<template> - <div class="about"> - <router-link to="/editor">Create new database</router-link> - <file-upload - :accept="'application/json'" - @file-changed="handleDatabaseChange">Use existing database</file-upload> - </div> -</template> - -<script lang="ts"> -import { defineComponent } from 'vue'; -import FileUpload from '../components/FileUpload.vue'; - -import { parsePtDatabase } from '../features/parser'; - -export default defineComponent({ - name: 'About', - components: { - FileUpload, - }, - methods: { - handleDatabaseChange(files: File[]) { - parsePtDatabase(files[0]).then((result) => { - this.$store.commit('setLabs', result.labs); - this.$store.commit('setPeerTeachers', result.peerTeachers); - this.$router.push({ name: 'Editor' }); - }); - }, - }, -}); -</script> diff --git a/src/views/Editor.vue b/src/views/Editor.vue index b4a2e8e..4fcb9fa 100644 --- a/src/views/Editor.vue +++ b/src/views/Editor.vue @@ -1,16 +1,16 @@ <template> - <div id="home"> - <action-bar /> - <editor-lists :peerTeachers="peerTeachers" :labs="labs" /> + <div id="editor"> + <ActionBar /> + <EditorLists :peerTeachers="peerTeachers" :labs="labs" /> </div> </template> <script lang="ts"> -import { defineComponent } from 'vue'; import ActionBar from '@/components/ActionBar.vue'; +import { defineComponent } from 'vue'; import EditorLists from '@/components/EditorLists.vue'; -import PeerTeacher from '@/models/PeerTeacher'; import Lab from '@/models/Lab'; +import PeerTeacher from '@/models/PeerTeacher'; export default defineComponent({ name: 'Editor', @@ -32,7 +32,13 @@ export default defineComponent({ </script> <style> -#home { +#editor { + display: flex; + flex-direction: column; max-height: inherit; } + +#action-bar { + flex-shrink: 0; +} </style> diff --git a/src/views/Start.vue b/src/views/Start.vue new file mode 100644 index 0000000..567582d --- /dev/null +++ b/src/views/Start.vue @@ -0,0 +1,53 @@ +<template> + <div id="start"> + <router-link to="/editor"> + <UIButton>Create new database</UIButton> + </router-link> + <FileUpload + :accept="'application/json'" + @fileChanged="handleDatabaseChange">Use existing database</FileUpload> + </div> +</template> + +<script lang="ts"> +import { defineComponent } from 'vue'; +import FileUpload from '@/components/FileUpload.vue'; +import { parsePtDatabase } from '@/features/parser'; +import UIButton from '@/components/UIButton.vue'; + +export default defineComponent({ + name: 'Start', + components: { + FileUpload, + UIButton, + }, + methods: { + handleDatabaseChange(files: File[]) { + parsePtDatabase(files[0]).then((result) => { + this.$store.commit('setLabs', result.labs); + this.$store.commit('setPeerTeachers', result.peerTeachers); + this.$router.push({ name: 'Editor' }); + }); + }, + }, +}); +</script> + +<style> +#start { + align-items: center; + display: flex; + flex-direction: column; + font-size: 1.5rem; + height: 100vh; + justify-content: center; +} + +#start > * { + margin-top: 1em; +} + +#start > *:first-child { + margin-top: 0; +} +</style> |