KylerOlsen
/
snow-finals-schedule
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor class input layout and enhance checkbox styling

This commit is contained in:
Kyler Olsen 2025-07-11 01:41:04 -06:00
parent 52b5e96854
commit 5120396971
2 changed files with 46 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
www/index.css
View File

@ -110,10 +110,33 @@ body[mode="dark"] a {
color: #3399ff;
}
.no-classes {
.input-group {
margin-top: 4px;
display: inline-block;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label {
border: #121212 1px solid;
border-radius: 4px;
padding: 2px 4px;
}
body[mode="dark"] input[type="checkbox"] + label {
border-color: #808080;
}
input[type="checkbox"]:checked + label {
background-color: #99bbff;
}
body[mode="dark"] input[type="checkbox"]:checked + label {
background-color: #3366cc;
}
.error-message {
color: red;
font-weight: bold;
@ -127,3 +150,7 @@ body[mode="dark"] .error-message {
.error-message.hidden {
display: none;
}
.no-classes {
display: none;
}

26
www/index.html
View File

@ -36,14 +36,24 @@
<em>Please enter the class information below:</em>
<!-- <br/><small>Class name is just a label, this app doesn't have the college class schedule.</small> -->
</p>
<label for="class-name">Class Name </label><input type="text" id="class-name" placeholder="Enter Class Name">
<label for="Mon">M</label><input type="checkbox" id="Mon">
<label for="Tue">T</label><input type="checkbox" id="Tue">
<label for="Wed">W</label><input type="checkbox" id="Wed">
<label for="Thu">Th</label><input type="checkbox" id="Thu">
<label for="Fri">F</label><input type="checkbox" id="Fri">
<label for="time">Time </label><input type="time" id="time">
<button id="add-class">Add Class</button>
<div>
<span class="input-group">
<label for="class-name">Class Name </label>
<input type="text" id="class-name" placeholder="Enter Class Name">
</span>
<span class="input-group">
<span>Days </span>
<input type="checkbox" id="Mon"><label for="Mon">M</label>
<input type="checkbox" id="Tue"><label for="Tue">T</label>
<input type="checkbox" id="Wed"><label for="Wed">W</label>
<input type="checkbox" id="Thu"><label for="Thu">Th</label>
<input type="checkbox" id="Fri"><label for="Fri">F</label>
</span>
<span class="input-group">
<label for="time">Time </label><input type="time" id="time">
<button id="add-class">Add Class</button>
</span>
</div>
<p class="error-message hidden">
Please enter a class time and select at least one day.
</p>