Skip to content

Commit 331d7e8

Browse files
NiloCKNiloCK
authored
ui.sessionConfig.tweaks (#692)
- **side-by-side, up/down->left/right** - **make start btn column sticky**
2 parents 0568a6b + c643afc commit 331d7e8

File tree

1 file changed

+143
-65
lines changed

1 file changed

+143
-65
lines changed

‎packages/platform-ui/src/components/Study/SessionConfiguration.vue‎

Lines changed: 143 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,90 @@
11
<template>
22
<div v-if="hasRegistrations">
3-
<div data-cy="select-quilts-header" class="text-h4">Select your quilts</div>
4-
<table width="100%">
5-
<thead>
6-
<tr>
7-
<th>
8-
<v-checkbox
9-
id="SelectAll"
10-
ref="selectAll"
11-
v-model="allSelected"
12-
autofocus
13-
label="Select All"
14-
@update:model-value="toggleAll"
15-
></v-checkbox>
16-
</th>
17-
18-
<th>
19-
Reviews
20-
<!-- <v-icon>info</v-icon> -->
21-
</th>
22-
</tr>
23-
</thead>
24-
<tbody>
25-
<tr v-for="classroom in activeClasses" :key="classroom.classID">
26-
<td>
27-
<v-checkbox v-model="classroom.selected" :label="`Class: ${classroom.name}`" @click.capture="update" />
28-
</td>
29-
<td>-</td>
30-
</tr>
31-
<tr v-for="course in activeCourses" :key="course.courseID">
32-
<td>
33-
<v-checkbox
34-
v-model="course.selected"
35-
data-cy="course-checkbox"
36-
:label="`q/${course.name}`"
37-
@click.capture="update"
3+
<div data-cy="select-quilts-header" class="text-h4 mb-4">Study Session Setup</div>
4+
5+
<div class="session-layout">
6+
<!-- Left Column: Time Configuration and Start Button -->
7+
<div class="fixed-controls-container">
8+
<div class="fixed-controls">
9+
<div class="text-h6 mb-3">Session Settings</div>
10+
11+
<div class="mb-5">
12+
<v-text-field
13+
ref="numberField"
14+
v-model="timeLimit"
15+
class="time-limit-field"
16+
variant="outlined"
17+
label="Study Session Timelimit"
18+
prepend-inner-icon="mdi-clock-outline"
19+
prepend-icon="mdi-minus"
20+
append-icon="mdi-plus"
21+
:suffix="timeLimit > 1 ? 'minutes' : 'minute'"
22+
mask="##"
23+
type="number"
24+
@click:prepend="dec"
25+
@click:append="inc"
3826
/>
39-
</td>
40-
<td>{{ course.reviews }}</td>
41-
</tr>
42-
</tbody>
43-
</table>
44-
<!-- <v-text-field
45-
label="Card Limit for this Session"
46-
hint="Study as much or as little as you like by adjusting this"
47-
type="number"
48-
ref="numberField"
49-
v-model="cardCount"
50-
/> -->
51-
<v-text-field
52-
ref="numberField"
53-
v-model="timeLimit"
54-
class="col-12 col-sm-6 col-md-4 col-lg-3 text-h5"
55-
variant="solo"
56-
prepend-inner-icon="mdi-clock-outline"
57-
prepend-icon="mdi-minus"
58-
append-icon="mdi-plus"
59-
:suffix="timeLimit > 1 ? '(minutes)' : '(minute)'"
60-
hint="Time Limit for this Session"
61-
mask="##"
62-
type="number"
63-
@click:prepend="dec"
64-
@click:append="inc"
65-
/>
66-
<v-btn data-cy="start-studying-button" color="success" @click="startSession">Start Studying!</v-btn>
27+
</div>
28+
29+
<v-btn
30+
data-cy="start-studying-button"
31+
color="success"
32+
size="large"
33+
block
34+
class="start-btn"
35+
@click="startSession"
36+
>
37+
<v-icon start>mdi-play</v-icon>
38+
Start!
39+
</v-btn>
40+
</div>
41+
</div>
42+
43+
<!-- Right Column: Course Selection -->
44+
<div class="course-selection-container">
45+
<div class="text-h6 mb-3">Select Quilts to Study</div>
46+
<table width="100%">
47+
<thead>
48+
<tr>
49+
<th>
50+
<v-checkbox
51+
id="SelectAll"
52+
ref="selectAll"
53+
v-model="allSelected"
54+
autofocus
55+
label="Select All"
56+
@update:model-value="toggleAll"
57+
></v-checkbox>
58+
</th>
59+
60+
<th>
61+
Reviews
62+
<!-- <v-icon>info</v-icon> -->
63+
</th>
64+
</tr>
65+
</thead>
66+
<tbody>
67+
<tr v-for="classroom in activeClasses" :key="classroom.classID">
68+
<td>
69+
<v-checkbox v-model="classroom.selected" :label="`Class: ${classroom.name}`" @click.capture="update" />
70+
</td>
71+
<td>-</td>
72+
</tr>
73+
<tr v-for="course in activeCourses" :key="course.courseID">
74+
<td>
75+
<v-checkbox
76+
v-model="course.selected"
77+
data-cy="course-checkbox"
78+
:label="`q/${course.name}`"
79+
@click.capture="update"
80+
/>
81+
</td>
82+
<td>{{ course.reviews }}</td>
83+
</tr>
84+
</tbody>
85+
</table>
86+
</div>
87+
</div>
6788
</div>
6889
<div v-else class="text-h4">
6990
<p>You don't have anything to study!</p>
@@ -229,14 +250,14 @@ export default defineComponent({
229250
SkldrMouseTrap.reset();
230251
SkldrMouseTrap.bind([
231252
{
232-
hotkey: 'up',
253+
hotkey: 'right',
233254
callback: () => {
234255
this.timeLimit++;
235256
},
236257
command: '',
237258
},
238259
{
239-
hotkey: 'down',
260+
hotkey: 'left',
240261
callback: () => {
241262
this.timeLimit--;
242263
},
@@ -263,4 +284,61 @@ td {
263284
align-content: center !important;
264285
text-align: center !important;
265286
}
287+
288+
/* Layout for session configuration */
289+
.session-layout {
290+
display: flex;
291+
flex-direction: column;
292+
}
293+
294+
/* Fixed controls container */
295+
.fixed-controls-container {
296+
width: 100%;
297+
margin-bottom: 20px;
298+
}
299+
300+
.fixed-controls {
301+
display: flex;
302+
flex-direction: column;
303+
}
304+
305+
.time-limit-field {
306+
width: 100%;
307+
margin-bottom: 16px;
308+
}
309+
310+
.start-btn {
311+
margin-top: 8px;
312+
max-height: 150px;
313+
}
314+
315+
/* Course selection styles */
316+
.course-selection-container {
317+
width: 100%;
318+
}
319+
320+
/* Media queries for desktop layout */
321+
@media (min-width: 960px) {
322+
.session-layout {
323+
flex-direction: row;
324+
gap: 40px;
325+
}
326+
327+
.fixed-controls-container {
328+
width: 300px;
329+
flex-shrink: 0;
330+
}
331+
332+
.fixed-controls {
333+
position: sticky;
334+
top: 20px;
335+
padding-right: 20px;
336+
}
337+
338+
.course-selection-container {
339+
flex-grow: 1;
340+
border-left: 1px solid rgba(0, 0, 0, 0.12);
341+
padding-left: 20px;
342+
}
343+
}
266344
</style>

0 commit comments

Comments
 (0)