andrew
/
teacher-tools
1
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

More styling updates.
Build and Test App / Build-and-test-App (push) Successful in 34s Details

This commit is contained in:
Andrew Lalis 2025-02-20 14:01:36 -05:00
parent 117e7bf992
commit ac01b5c94c
9 changed files with 95 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/src/App.vue
View File

@ -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 to="/my-account" v-if="authStore.state">My Account</RouterLink>
<RouterLink to="/admin-dashboard" v-if="authStore.admin">Admin</RouterLink>
<RouterLink class="link" to="/">Apps</RouterLink>
<RouterLink class="link" to="/my-account" v-if="authStore.state">My Account</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>

7
app/src/apps/classroom_compliance/GuideView.vue
View File

@ -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:

6
app/src/apps/classroom_compliance/MainView.vue
View File

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

16
app/src/apps/classroom_compliance/StudentView.vue
View File

@ -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>
<p class="align-center">
From
<RouterLink :to="'/classroom-compliance/classes/' + classId">
<span v-text="'class ' + cls?.number + ', ' + cls?.schoolYear"></span>
<h1 class="align-center" style="margin-bottom: 0;">{{ student.name }}</h1>
<p class="align-center" style="margin-top: 0;">
in
<RouterLink class="link link-color" :to="'/classroom-compliance/classes/' + classId">
<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>

21
app/src/assets/base.css
View File

@ -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;
}

12
app/src/components/AppListItem.vue
View File

@ -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>

9
app/src/views/HomeView.vue
View File

@ -1,5 +1,8 @@
<script setup lang="ts">
import AppListItem from '@/components/AppListItem.vue';
import { useAuthStore } from '@/stores/auth';
const authStore = useAuthStore()
</script>
@ -7,6 +10,7 @@ import AppListItem from '@/components/AppListItem.vue';
<main class="centered-content">
<h1 class="align-center">My Applications</h1>
<div v-if="authStore.state">
<AppListItem name="Classroom Compliance" route="/classroom-compliance">
Track your students' phone usage and behavior, record notes, and automatically calculate weekly scores for each
student.
@ -14,5 +18,10 @@ import AppListItem from '@/components/AppListItem.vue';
<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>

38
app/src/views/LoginView.vue
View File

@ -28,23 +28,22 @@ async function doLogin() {
}
</script>
<template>
<main>
<h1>Login</h1>
<main class="centered-content">
<h1 class="align-center">Login</h1>
<form>
<div>
<label for="username-input">Username</label>
<input id="username-input" name="username" type="text" v-model="credentials.username" />
<div class="login-input-row">
<input id="username-input" name="username" type="text" v-model="credentials.username" placeholder="Username" />
</div>
<div>
<label for="password-input">Password</label>
<input id="password-input" name="password" type="password" v-model="credentials.password" />
<div class="login-input-row">
<input id="password-input" name="password" type="password" v-model="credentials.password"
placeholder="Password" />
</div>
<div class="button-bar">
<button type="button" @click="doLogin">Login</button>
<div class="button-bar align-center">
<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>

4
app/src/views/MyAccountView.vue
View File

@ -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>