From 6a152d5cf5f35bc58fc4b659fe6edcb6f94f760c Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Tue, 13 Apr 2021 12:35:46 -0500
Subject: Add custom button to normalize styling with FileUpload

---
 src/components/UIButton.vue | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 src/components/UIButton.vue

(limited to 'src')

diff --git a/src/components/UIButton.vue b/src/components/UIButton.vue
new file mode 100644
index 0000000..59f4686
--- /dev/null
+++ b/src/components/UIButton.vue
@@ -0,0 +1,33 @@
+<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-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-size: 1em;
+  padding: 0.5em;
+}
+
+.ui-button:hover {
+  color: grey;
+  cursor: pointer;
+}
+
+@media (prefers-color-scheme: dark) {
+  .ui-button {
+    background-color: #81302b;
+  }
+}
+</style>
-- 
cgit v1.2.3


From 65d0dbb9b3388e03c312c1dd456feeef740289e0 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Tue, 13 Apr 2021 12:49:14 -0500
Subject: Start styling and add initial dark mode support

---
 src/App.vue                    | 15 ++++++++++--
 src/components/ActionBar.vue   | 27 ++++++++++++++-------
 src/components/EditorLists.vue |  5 ++--
 src/components/FileUpload.vue  |  8 ++++++-
 src/components/List.vue        |  8 ++++++-
 src/router/index.ts            |  6 ++---
 src/views/About.vue            | 31 ------------------------
 src/views/Editor.vue           | 14 ++++++-----
 src/views/Start.vue            | 53 ++++++++++++++++++++++++++++++++++++++++++
 9 files changed, 113 insertions(+), 54 deletions(-)
 delete mode 100644 src/views/About.vue
 create mode 100644 src/views/Start.vue

(limited to 'src')

diff --git a/src/App.vue b/src/App.vue
index 34945a9..481fa7d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,16 +3,27 @@
 </template>
 
 <style>
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
 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..da70b8a 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="'application/json'"
+      @fileChanged="handleLabChange">Import Lab Schedule</FileUpload>
+    <FileUpload
       :accept="'text/plain'"
       :multiple="true"
-      @file-changed="handlePtChange">Upload PT Schedule</file-upload>
-    <file-upload
-      :accept="'application/json'"
-      @file-changed="handleLabChange">Upload Lab Schedule</file-upload>
-    <button @click="save">Export</button>
+      @fileChanged="handlePtChange">Upload PT 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,13 @@ export default {
   },
 };
 </script>
+
+<style>
+#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..26e0ecc 100644
--- a/src/components/EditorLists.vue
+++ b/src/components/EditorLists.vue
@@ -1,5 +1,5 @@
 <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>
@@ -84,9 +84,10 @@ export default defineComponent({
 </script>
 
 <style>
-#editor {
+#editor-lists {
   display: flex;
   max-height: inherit;
+  min-height: 0;
 }
 
 .column {
diff --git a/src/components/FileUpload.vue b/src/components/FileUpload.vue
index b2fdb14..a70e18d 100644
--- a/src/components/FileUpload.vue
+++ b/src/components/FileUpload.vue
@@ -30,7 +30,7 @@ export default {
   background-color: #500000;
   color: white;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  padding: 5px;
+  padding: 0.5em;
   text-align: center;
 }
 
@@ -38,4 +38,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..843370e 100644
--- a/src/components/List.vue
+++ b/src/components/List.vue
@@ -28,7 +28,6 @@ export default {
 }
 
 .list-item {
-  border: 1px solid grey;
   border-radius: 5px;
   margin: 5px 0;
   padding: 0.15em;
@@ -38,4 +37,11 @@ export default {
 .list-item:hover {
   background-color: rgb(182, 182, 182);
 }
+
+@media (prefers-color-scheme: dark) {
+  .list-item {
+    background-color: #303030;
+    color: white;
+  }
+}
 </style>
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..982ff90 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,9 @@ export default defineComponent({
 </script>
 
 <style>
-#home {
+#editor {
+  display: flex;
+  flex-direction: column;
   max-height: inherit;
 }
 </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>
-- 
cgit v1.2.3


From 21f8621395532eb1d3a6e7fde217eb67ac9374fe Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Tue, 13 Apr 2021 12:58:40 -0500
Subject: Make ActionBar horizontally scroll on overflow

---
 src/components/ActionBar.vue | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'src')

diff --git a/src/components/ActionBar.vue b/src/components/ActionBar.vue
index da70b8a..279a885 100644
--- a/src/components/ActionBar.vue
+++ b/src/components/ActionBar.vue
@@ -76,6 +76,12 @@ export default {
 </script>
 
 <style>
+#action-bar {
+  max-width: 100vw;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
 #action-bar > * {
   margin-left: 0.5rem;
 }
-- 
cgit v1.2.3


From 6df6cbbb47d8b932a790ed9ef68dc8fac42ce0f4 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Tue, 13 Apr 2021 15:24:03 -0500
Subject: Style editor lists

---
 src/components/EditorLists.vue | 67 ++++++++++++++++++++++++++++++++++++------
 src/components/List.vue        | 23 ++-------------
 src/models/EventInfo.ts        |  2 +-
 3 files changed, 62 insertions(+), 30 deletions(-)

(limited to 'src')

diff --git a/src/components/EditorLists.vue b/src/components/EditorLists.vue
index 26e0ecc..e70445d 100644
--- a/src/components/EditorLists.vue
+++ b/src/components/EditorLists.vue
@@ -1,19 +1,28 @@
 <template>
   <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>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>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>Assignments</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>
@@ -90,8 +99,48 @@ export default defineComponent({
   min-height: 0;
 }
 
+h3 {
+  color: white;
+  margin: 0;
+}
+
 .column {
   flex: 1;
   overflow: auto;
 }
+
+.list-item {
+  align-items: center;
+  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-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-size: 1em;
+}
+
+@media (prefers-color-scheme: dark) {
+  .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/List.vue b/src/components/List.vue
index 843370e..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,23 +24,7 @@ export default {
 <style scoped>
 .list {
   list-style-type: none;
-}
-
-.list-item {
-  border-radius: 5px;
-  margin: 5px 0;
-  padding: 0.15em;
-  text-align: center;
-}
-
-.list-item:hover {
-  background-color: rgb(182, 182, 182);
-}
-
-@media (prefers-color-scheme: dark) {
-  .list-item {
-    background-color: #303030;
-    color: white;
-  }
+  margin: 0;
+  padding: 0;
 }
 </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)}`;
   }
-- 
cgit v1.2.3


From fdc7b50f828e76b1ccfb12cd8f4cf5d88b2a9654 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Tue, 13 Apr 2021 15:30:44 -0500
Subject: Small light mode tweak

---
 src/components/ActionBar.vue   | 6 +++---
 src/components/EditorLists.vue | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/components/ActionBar.vue b/src/components/ActionBar.vue
index 279a885..e50c791 100644
--- a/src/components/ActionBar.vue
+++ b/src/components/ActionBar.vue
@@ -1,12 +1,12 @@
 <template>
   <div id="action-bar">
-    <FileUpload
-      :accept="'application/json'"
-      @fileChanged="handleLabChange">Import Lab Schedule</FileUpload>
     <FileUpload
       :accept="'text/plain'"
       :multiple="true"
       @fileChanged="handlePtChange">Upload PT Schedule</FileUpload>
+    <FileUpload
+      :accept="'application/json'"
+      @fileChanged="handleLabChange">Import Lab Schedule</FileUpload>
       <UIButton @click="save">Export</UIButton>
   </div>
 </template>
diff --git a/src/components/EditorLists.vue b/src/components/EditorLists.vue
index e70445d..e802237 100644
--- a/src/components/EditorLists.vue
+++ b/src/components/EditorLists.vue
@@ -111,6 +111,7 @@ h3 {
 
 .list-item {
   align-items: center;
+  background-color: #f0f0f0;
   display: flex;
   justify-content: space-between;
   margin: 0.5em;
-- 
cgit v1.2.3


From 432c3d66d7d795ae913c9ee50470ad3a42ccbd58 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Tue, 13 Apr 2021 21:17:35 -0500
Subject: Add headers to columns

---
 src/App.vue                    |  1 +
 src/components/EditorLists.vue | 14 ++++++++------
 src/components/FileUpload.vue  |  1 -
 src/components/UIButton.vue    |  1 -
 4 files changed, 9 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/App.vue b/src/App.vue
index 481fa7d..5a1f608 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,6 +5,7 @@
 <style>
 *, *:before, *:after {
   box-sizing: inherit;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 html {
diff --git a/src/components/EditorLists.vue b/src/components/EditorLists.vue
index e802237..60c965c 100644
--- a/src/components/EditorLists.vue
+++ b/src/components/EditorLists.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="editor-lists">
     <div class="column">
-      <h3>Peer Teachers</h3>
+      <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>
@@ -9,7 +9,7 @@
       </List>
     </div>
     <div class="column">
-      <h3>Labs</h3>
+      <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>
@@ -17,7 +17,7 @@
       </List>
     </div>
     <div class="column">
-      <h3>Assignments</h3>
+      <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>
@@ -99,8 +99,7 @@ export default defineComponent({
   min-height: 0;
 }
 
-h3 {
-  color: white;
+.column-header {
   margin: 0;
 }
 
@@ -126,11 +125,14 @@ h3 {
   background-color: #500000;
   border: none;
   color: white;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-size: 1em;
 }
 
 @media (prefers-color-scheme: dark) {
+  .column-header {
+    color: white;
+  }
+
   .list-item {
     background-color: #303030;
     color: white;
diff --git a/src/components/FileUpload.vue b/src/components/FileUpload.vue
index a70e18d..9318d63 100644
--- a/src/components/FileUpload.vue
+++ b/src/components/FileUpload.vue
@@ -29,7 +29,6 @@ export default {
 .file-upload-lbl {
   background-color: #500000;
   color: white;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   padding: 0.5em;
   text-align: center;
 }
diff --git a/src/components/UIButton.vue b/src/components/UIButton.vue
index 59f4686..57b155b 100644
--- a/src/components/UIButton.vue
+++ b/src/components/UIButton.vue
@@ -15,7 +15,6 @@ export default defineComponent({
   background-color: #500000;
   border: none;
   color: white;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-size: 1em;
   padding: 0.5em;
 }
-- 
cgit v1.2.3


From d1d65e0c699982478ccef985831cd64bf312fd5d Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Tue, 13 Apr 2021 23:04:54 -0500
Subject: Fix FileUpload emit

---
 src/components/FileUpload.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/FileUpload.vue b/src/components/FileUpload.vue
index 9318d63..fe3ef1e 100644
--- a/src/components/FileUpload.vue
+++ b/src/components/FileUpload.vue
@@ -20,7 +20,7 @@ export default {
     },
   },
   emits: {
-    selectionChanged: null,
+    fileChanged: null,
   },
 };
 </script>
-- 
cgit v1.2.3


From 5433214aa9b2cd3dd3445f9f2db297d4a6f2e670 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Tue, 13 Apr 2021 23:14:16 -0500
Subject: Fix collapsing ActionBar in Firefox

---
 src/views/Editor.vue | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'src')

diff --git a/src/views/Editor.vue b/src/views/Editor.vue
index 982ff90..4fcb9fa 100644
--- a/src/views/Editor.vue
+++ b/src/views/Editor.vue
@@ -37,4 +37,8 @@ export default defineComponent({
   flex-direction: column;
   max-height: inherit;
 }
+
+#action-bar {
+  flex-shrink: 0;
+}
 </style>
-- 
cgit v1.2.3