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; color: #3399ff;
} }
.no-classes { .input-group {
margin-top: 4px;
display: inline-block;
}
input[type="checkbox"] {
display: none; 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 { .error-message {
color: red; color: red;
font-weight: bold; font-weight: bold;
@ -127,3 +150,7 @@ body[mode="dark"] .error-message {
.error-message.hidden { .error-message.hidden {
display: none; display: none;
} }
.no-classes {
display: none;
}

26
www/index.html
View File

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