More styling updates.

app/src/App.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
-import { RouterLink, RouterView, useRouter } from 'vue-router'
+import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from './stores/auth'
 import AlertDialog from './components/AlertDialog.vue'
 import AnnouncementsBanner from './components/AnnouncementsBanner.vue'
+import { computed } from 'vue'
 
 const authStore = useAuthStore()
 const router = useRouter()
+const route = useRoute()
+
+const onLoginPage = computed(() => route.path === '/login')
 
 async function logOut() {
   authStore.logOut()
@@ -16,16 +20,16 @@ async function logOut() {
 <template>
   <header>
     <div>
-      <nav class="global-navbar">
+      <nav class="global-navbar" v-if="!onLoginPage">
         <div>
           <span style="font-weight: bold; font-size: large;">Teacher Tools</span>
-          <RouterLink to="/">Apps</RouterLink>
+          <RouterLink class="link" to="/">Apps</RouterLink>
-          <RouterLink to="/my-account" v-if="authStore.state">My Account</RouterLink>
+          <RouterLink class="link" to="/my-account" v-if="authStore.state">My Account</RouterLink>
-          <RouterLink to="/admin-dashboard" v-if="authStore.admin">Admin</RouterLink>
+          <RouterLink class="link" to="/admin-dashboard" v-if="authStore.admin">Admin</RouterLink>
         </div>
 
         <div>
-          <RouterLink to="/login" v-if="!authStore.state">Login</RouterLink>
+          <RouterLink class="link" to="/login" v-if="!authStore.state">Login</RouterLink>
           <span v-if="authStore.state" style="margin-right: 0.25em; font-style: italic; font-size: smaller;">
             Logged in as <span v-text="authStore.state.username"
               style="font-weight: bold; font-style: normal; font-size: medium;"></span>
@@ -57,14 +61,4 @@ async function logOut() {
 .global-navbar>div>*+* {
   margin-left: 1em;
 }
-
-.global-navbar a {
-  color: inherit;
-  text-decoration: none;
-}
-
-.global-navbar a:hover {
-  text-decoration: underline;
-  color: lightgray;
-}
 </style>

app/src/apps/classroom_compliance/GuideView.vue

@@ -32,7 +32,9 @@ const sampleEntry: Ref<Entry | null> = ref({
       school year to identify it.
     </p>
     <p>
-      You can view all your classes with the <RouterLink to="/classroom-compliance">View My Classes</RouterLink>
+      You can view all your classes with the <RouterLink class="link link-color" to="/classroom-compliance">View My
+        Classes
+      </RouterLink>
       link at the top of this page. Click on any of the classes you see listed,
       and you'll go to that class' page.
     </p>
@@ -128,7 +130,8 @@ const sampleEntry: Ref<Entry | null> = ref({
     <hr />
     <h3>Adding / Editing Students</h3>
     <p>
-      As mentioned briefly in <a href="#the-class-page">The Class Page</a>, you can add students one-by-one, or in bulk.
+      As mentioned briefly in <a class="link link-color" href="#the-class-page">The Class Page</a>, you can add students
+      one-by-one, or in bulk.
     </p>
     <p>
       When adding a student individually, or editing an existing student, here's what you need to know:

app/src/apps/classroom_compliance/MainView.vue

@@ -25,9 +25,9 @@ async function downloadExport() {
     <h1>Classroom Compliance</h1>
 
     <div class="button-bar">
-      <RouterLink to="/classroom-compliance">View My Classes</RouterLink>
+      <RouterLink class="link" to="/classroom-compliance">View My Classes</RouterLink>
-      <RouterLink to="/classroom-compliance/guide">Guide</RouterLink>
+      <RouterLink class="link" to="/classroom-compliance/guide">Guide</RouterLink>
-      <a @click.prevent="downloadExport()" href="#">Export All Data</a>
+      <a class="link" @click.prevent="downloadExport()" href="#">Export All Data</a>
     </div>
     <hr />
 

app/src/apps/classroom_compliance/StudentView.vue

@@ -54,11 +54,11 @@ async function deleteThisStudent() {
 </script>
 <template>
   <div v-if="student" class="centered-content">
-    <h2 class="align-center" v-text="student.name"></h2>
+    <h1 class="align-center" style="margin-bottom: 0;">{{ student.name }}</h1>
-    <p class="align-center">
+    <p class="align-center" style="margin-top: 0;">
-      From
+      in
-      <RouterLink :to="'/classroom-compliance/classes/' + classId">
+      <RouterLink class="link link-color" :to="'/classroom-compliance/classes/' + classId">
-        <span v-text="'class ' + cls?.number + ', ' + cls?.schoolYear"></span>
+        <span v-text="'class ' + cls?.number"></span>
       </RouterLink>
     </p>
 
@@ -72,7 +72,10 @@ async function deleteThisStudent() {
       <tbody>
         <tr>
           <th>Desk Number</th>
-          <td>{{ student.deskNumber }}</td>
+          <td>
+            {{ student.deskNumber }}
+            <span v-if="student.deskNumber === 0" style="font-style: italic; font-size: small;">*No assigned desk</span>
+          </td>
         </tr>
         <tr>
           <th>Removed</th>
@@ -121,5 +124,6 @@ async function deleteThisStudent() {
 
 .student-properties-table td {
   text-align: right;
+  font-family: 'SourceCodePro', monospace;
 }
 </style>

app/src/assets/base.css

@@ -74,6 +74,27 @@ button {
   font-family: 'Open Sans', sans-serif;
 }
 
+.link {
+  text-decoration: none;
+  color: inherit;
+}
+.link:hover {
+  text-decoration: underline;
+  color: lightgray;
+}
+.link-color {
+  color: rgb(165, 210, 253);
+}
+.link-color:hover {
+  color: rgb(95, 121, 190);
+}
+.link-ext {
+  color: rgb(158, 255, 134);
+}
+.link-ext:hover {
+  color: rgb(110, 179, 93);
+}
+
 form > div + div {
   margin-top: 0.5em;
 }

app/src/components/AppListItem.vue

@@ -7,7 +7,7 @@ defineProps<{
 <template>
   <div class="app-list-item">
     <h3>
-      <RouterLink :to="route">{{ name }}</RouterLink>
+      <RouterLink class="link" :to="route">{{ name }}</RouterLink>
     </h3>
     <p>
       <slot></slot>
@@ -26,14 +26,4 @@ defineProps<{
   margin-bottom: 0;
   font-size: x-large;
 }
-
-.app-list-item>h3>a {
-  text-decoration: none;
-  color: inherit;
-}
-
-.app-list-item>h3>a:hover {
-  text-decoration: underline;
-  color: lightgray;
-}
 </style>

app/src/views/HomeView.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import AppListItem from '@/components/AppListItem.vue';
+import { useAuthStore } from '@/stores/auth';
+
+const authStore = useAuthStore()
 
 </script>
 
@@ -7,12 +10,18 @@ import AppListItem from '@/components/AppListItem.vue';
   <main class="centered-content">
     <h1 class="align-center">My Applications</h1>
 
-    <AppListItem name="Classroom Compliance" route="/classroom-compliance">
+    <div v-if="authStore.state">
-      Track your students' phone usage and behavior, record notes, and automatically calculate weekly scores for each
+      <AppListItem name="Classroom Compliance" route="/classroom-compliance">
-      student.
+        Track your students' phone usage and behavior, record notes, and automatically calculate weekly scores for each
-    </AppListItem>
+        student.
-    <p style="text-align: right; font-style: italic;">
+      </AppListItem>
-      ... and more apps coming soon!
+      <p style="text-align: right; font-style: italic;">
+        ... and more apps coming soon!
+      </p>
+    </div>
+
+    <p v-if="!authStore.state" class="align-center">
+      Please <RouterLink to="/login">log in</RouterLink> to view your applications.
     </p>
   </main>
 </template>

app/src/views/LoginView.vue

@@ -28,23 +28,22 @@ async function doLogin() {
 }
 </script>
 <template>
-  <main>
+  <main class="centered-content">
-    <h1>Login</h1>
+    <h1 class="align-center">Login</h1>
     <form>
-      <div>
+      <div class="login-input-row">
-        <label for="username-input">Username</label>
+        <input id="username-input" name="username" type="text" v-model="credentials.username" placeholder="Username" />
-        <input id="username-input" name="username" type="text" v-model="credentials.username" />
       </div>
-      <div>
+      <div class="login-input-row">
-        <label for="password-input">Password</label>
+        <input id="password-input" name="password" type="password" v-model="credentials.password"
-        <input id="password-input" name="password" type="password" v-model="credentials.password" />
+          placeholder="Password" />
       </div>
-      <div class="button-bar">
+      <div class="button-bar align-center">
-        <button type="button" @click="doLogin">Login</button>
+        <button type="button" @click="doLogin" style="font-size: large;">Login</button>
       </div>
       <div>
         <p>
-          If you forgot your password or would like to create an account, please contact <a
+          If you forgot your password or would like to create an account, please contact <a class="link link-ext"
             href="https://andrewlalis.com/contact">Andrew Lalis</a> for assistance.
         </p>
         <p>
@@ -54,3 +53,20 @@ async function doLogin() {
     </form>
   </main>
 </template>
+<style scoped>
+.login-input-row {
+  max-width: 30ch;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.login-input-row>input {
+  width: 100%;
+  font-size: medium;
+  padding: 0.5em;
+}
+
+.login-input-row+.login-input-row {
+  margin-top: 1em;
+}
+</style>

app/src/views/MyAccountView.vue

@@ -37,7 +37,8 @@ const authStore = useAuthStore()
       Suggestions for new features are also highly encouraged!
     </p>
     <p>
-      Contact Andrew at <a href="https://www.andrewlalis.com/contact" target="_blank">andrewlalis.com/contact</a>.
+      Contact Andrew at <a class="link link-ext" href="https://www.andrewlalis.com/contact"
+        target="_blank">andrewlalis.com/contact</a>.
     </p>
   </main>
 </template>
@@ -58,5 +59,6 @@ const authStore = useAuthStore()
 
 .account-properties-table td {
   text-align: right;
+  font-family: 'SourceCodePro', monospace;
 }
 </style>