Skip to content

Commit 3601320

Browse files
jbcarrasjbcarras
committed
Tidy up styling
1 parent a45f7d4 commit 3601320

9 files changed

Lines changed: 142 additions & 33 deletions

File tree

‎client/src/App.vue‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,18 @@
11
<script setup lang="ts">
22
3+
4+
35
</script>
46

57
<template>
68

7-
<header id="site-header">
8-
<h1>Make Office Hours</h1>
9-
</header>
10-
11-
<div>
12-
<RouterView/>
13-
</div>
9+
<RouterView/>
1410

1511
</template>
1612

1713
<style>
1814
1915
@import "assets/css/base.css";
2016
21-
#site-header {
22-
margin-bottom: 32px;
23-
}
2417
2518
</style>

‎client/src/assets/css/base.css‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
background-color: #CFF7D3;
1818
height: 5vh;
1919
color: black;
20-
margin-top: -32px;
2120
margin-bottom: 16px;
2221
}
2322

@@ -66,7 +65,7 @@ html {
6665
}
6766

6867
h1 {
69-
font-size: 2.2rem;
68+
font-size: clamp(20px, 5vh, 2.2rem);
7069
}
7170

7271
h1 {
@@ -159,6 +158,12 @@ section {
159158
font-size: 2.5rem;
160159
}
161160

161+
.circle.pos {
162+
background-color: var(--accent-color);
163+
color: white;
164+
box-shadow: 0 2px 4px gray;
165+
}
166+
162167
input {
163168
font-size: 1rem;
164169
min-height: 2rem;

‎client/src/assets/css/student-queue.css‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,6 @@
1414
margin: 8px;
1515
}
1616

17-
.circle.pos {
18-
background-color: var(--accent-color);
19-
color: white;
20-
box-shadow: 0 2px 4px gray;
21-
}
22-
2317
#user {
2418
display: flex;
2519
flex-direction: column;
@@ -38,9 +32,11 @@
3832
resize: none;
3933
height: 8rem;
4034
width: 20rem;
35+
max-width: 70vw;
4136
padding: 16px;
4237
border: 2px solid #D9D9D9;
4338
border-radius: 10px;
39+
margin: 16px;
4440
}
4541

4642
br {

‎client/src/assets/github.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎client/src/components/Header.vue‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script setup lang="ts">
2+
3+
</script>
4+
5+
<template>
6+
<header id="site-header">
7+
<h1>Make Office Hours</h1>
8+
</header>
9+
</template>
10+
11+
<style scoped>
12+
13+
</style>

‎client/src/layouts/AppLayout.vue‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<script setup lang="ts">
2+
3+
import githubLogo from "@/assets/github.svg";
4+
import Header from "@/components/Header.vue";
5+
6+
</script>
7+
8+
<template>
9+
<div id="site-body">
10+
<Header/>
11+
12+
<div id="site-content">
13+
<RouterView/>
14+
</div>
15+
16+
<footer>
17+
<div id="site-footer">
18+
<a id="github-link" href="https://github.com/makeopensource/MakeOfficeHours">
19+
<img :src="githubLogo" alt="github-logo" height="32">
20+
GitHub
21+
</a>
22+
</div>
23+
</footer>
24+
</div>
25+
</template>
26+
27+
<style scoped>
28+
29+
30+
#github-link {
31+
display: flex;
32+
align-items: center;
33+
gap: 8px;
34+
}
35+
36+
a {
37+
text-decoration: none;
38+
color: black;
39+
font-size: 1.0rem;
40+
}
41+
42+
#site-body {
43+
display: flex;
44+
flex-direction: column;
45+
min-height: 100vh;
46+
}
47+
48+
#site-content {
49+
flex: 1;
50+
}
51+
52+
53+
footer {
54+
margin: 16px 8%;
55+
}
56+
57+
#site-footer {
58+
padding: 16px;
59+
display: flex;
60+
gap: 32px;
61+
align-items: center;
62+
border-top: 1px solid #d9d9d9;
63+
border-bottom: 1px solid #d9d9d9;
64+
}
65+
66+
hr {
67+
border: 1px solid #d9d9d9
68+
}
69+
70+
</style>

‎client/src/main.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,15 @@ import Queue from "@/pages/Queue.vue";
88
import ManageCourse from "@/pages/ManageCourse.vue";
99
import Swipe from "@/pages/Swipe.vue";
1010
import SwipeAuth from "@/pages/SwipeAuth.vue";
11+
import AppLayout from "@/layouts/AppLayout.vue";
1112

1213
const router = createRouter({
1314
history: createWebHistory(),
1415
routes: [
15-
{ path: '/', component: Home},
16+
{ path: '/', component: AppLayout, children: [{path: '/', component: Home}]},
1617
{ path: '/dev-login', component: DevLogin},
17-
{ path: '/queue', component: Queue},
18-
{ path: '/manage', component: ManageCourse},
18+
{ path: '/queue', component: AppLayout, children: [{path: '/queue', component: Queue}]},
19+
{ path: '/manage', component: AppLayout, children: [{path: '/manage', component: ManageCourse}]},
1920
{ path: '/swipe', component: Swipe},
2021
{ path: '/swipe-auth', component: SwipeAuth}
2122
]

‎client/src/pages/InstructorQueue.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@ router.beforeEach((to, from, next) => {
199199

200200
<template>
201201

202-
<Visit ref="visitDialog" :visit_info="visitInfo" @close="getInProgressVisit"/>
202+
<Visit ref="visitDialog" :visit_info="visitInfo" @close="() => { getQueue(); getInProgressVisit(); } "/>
203203

204204
<ConfirmationDialog @open="resetForceEnqueueDialog" ref="forceEnqueueDialog">
205205
<label for="force-enqueue">Student Identifier (UBITName or Person Number)</label><br/>

‎client/src/pages/Swipe.vue‎

Lines changed: 32 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,16 @@
22
33
import {ref} from "vue";
44
import {useRouter} from "vue-router";
5+
import Header from "@/components/Header.vue";
56
67
let inputRef = ref<HTMLInputElement>();
78
89
let status = ref<string>("");
910
1011
let queueLen = ref<number>(0);
1112
13+
const hostname = window.location.hostname;
14+
1215
const router = useRouter()
1316
1417
inputRef.value?.focus();
@@ -29,7 +32,7 @@ const swipeInput = () => {
2932
}).then(res => {
3033
if (res.ok) {
3134
refreshQueueLen()
32-
status.value = "You're in the queue! Visit cseoh.com to track your position."
35+
status.value = `You're in the queue! Visit ${hostname} to track your position.`
3336
clearStatus();
3437
} else if (res.status == 400) {
3538
status.value = "Bad card read, please try again."
@@ -86,27 +89,36 @@ if (localStorage.getItem("auth-code") === null) {
8689
8790
</script>
8891

89-
<template id="welcome">
92+
<template>
9093

91-
<h1>Welcome to Office Hours!</h1>
92-
<h2>Swipe your UB Card to join the queue.</h2>
93-
<input id="swipe" type="text" ref="inputRef" autofocus @keydown.enter="swipeInput" @focusout="inputRef?.focus()">
94+
<Header/>
9495

95-
<div id="queue-len" class="circle">
96-
{{ queueLen }}
97-
</div>
98-
<h3>Queue Size</h3>
96+
<div id="welcome">
97+
<h1>Welcome to Office Hours!</h1>
98+
<h2>Swipe your UB Card to join the queue.</h2>
99+
<h2>Visit {{ hostname }} for updates!</h2>
100+
<input id="swipe" type="text" ref="inputRef" autofocus @keydown.enter="swipeInput" @focusout="inputRef?.focus()">
99101

102+
<div id="queue-len" class="circle pos">
103+
{{ queueLen }}
104+
</div>
105+
<h2>Queue Size</h2>
100106

101-
<p>{{ status }}</p>
102107

108+
<p>{{ status }}</p>
109+
</div>
103110

104111
</template>
105112

106113
<style scoped>
107114
115+
.circle {
116+
height: 256px;
117+
width: 256px;
118+
}
119+
108120
#welcome {
109-
margin: 72px;
121+
margin: 32px;
110122
}
111123
112124
h1, h2, h3, p {
@@ -120,6 +132,15 @@ h1, h2, h3, p {
120132
121133
#queue-len {
122134
margin: auto;
135+
font-size: 128px;
136+
}
137+
138+
br {
139+
margin-top: 32px;
140+
}
141+
142+
footer {
143+
display: none;
123144
}
124145
125146
</style>

0 commit comments

Comments
 (0)