DerexXD/ut-grade-distribution-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: make the forms prettier and more consistent to click

Browse Source
This commit is contained in:
Derek Chen
2025-10-19 02:15:11 -05:00
parent 1dab808cb2
commit b6120ffd40
2 changed files with 55 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
docs/index.html
View File

@@ -70,22 +70,33 @@
<p>Course Name is optional, but used for duplicate ID courses (e.g. "UGS 303")</p> <p>Course Name is optional, but used for duplicate ID courses (e.g. "UGS 303")</p>
<br> <br>
<form action=""> <form action="">
<!-- Data is separated into course number, course prefi;x, and course name--> <!-- Data is separated into course number, course prefix, and course name-->
<label for="courseField">Department (e.g. "MUS"):</label> <div class="form-group">
<input type="text" id="courseField" name="fname" required><br><br> <label for="courseField">Department (e.g. "MUS"):</label>
<label for="courseNum">Course Number (e.g. "307"):</label> <input type="text" id="courseField" name="fname" required>
<input type="text" id="courseNum" name="fname" required><br><br> </div>
<label for="courseName">Course Name (e.g. "JAZZ APPRECIATION-WB"):</label>
<input type="text" id="courseName" name="fname"><br><br> <div class="form-group">
<label for="courseNum">Course Number (e.g. "307"):</label>
<input type="text" id="courseNum" name="fname" required>
</div>
<div class="form-group">
<label for="courseName">Course Name (e.g. "JAZZ APPRECIATION-WB"):</label>
<input type="text" id="courseName" name="fname">
</div>
<!-- <label for="sectionNum">Section Number (Optional, Experimental)</label> <!-- <label for="sectionNum">Section Number (Optional, Experimental)</label>
<input type="text" id="sectionNum" name="fname" required><br><br> --> <input type="text" id="sectionNum" name="fname" required> -->
<label for="courseInstructor" title="This is an experimental option!">Instructor:</label>
<input type="text" id="courseInstructor" name="fname"><br><br> <div class="form-group">
<label for="courseInstructor" title="This is an experimental option!">Instructor:</label>
<input type="text" id="courseInstructor" name="fname">
</div>
<!-- Dropdown menu for semester selection --> <!-- Dropdown menu for semester selection -->
<form> <div class="form-group">
<label for="dropdown">Semester:</label> <label for="semester">Semester:</label>
<select id="semester" name="dropdown"> <select id="semester" name="dropdown">
<option value="f2024">Fall 2024</option> <option value="f2024">Fall 2024</option>
<option value="sp2024">Spring 2024</option> <option value="sp2024">Spring 2024</option>
@@ -102,9 +113,9 @@
<option value="s2020">Summer 2020</option> <option value="s2020">Summer 2020</option>
<option value="sp2020">Spring 2020</option> <option value="sp2020">Spring 2020</option>
</select> </select>
<br><br> </div>
</form>
<button type="button" id="subBut" class="submit-button">Submit</button><br><br> <button type="button" id="subBut" class="submit-button">Submit</button>
</form> </form>
<div class="chart-container" id="grades" value="invisible" style="position: relative; height:40vh; width:80vw"> <div class="chart-container" id="grades" value="invisible" style="position: relative; height:40vh; width:80vw">
<!--Bar graph stuff--> <!--Bar graph stuff-->

29
docs/main.css
View File

@@ -188,6 +188,35 @@ opacity: 1;
height: fit-content; height: fit-content;
} }
.form-group {
display: flex;
flex-direction: column;
margin-bottom: 15px;
text-align: center;
align-items: center;
}
.form-group label {
margin-bottom: 5px;
font-weight: 500;
}
.form-group input,
.form-group select {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: var(--p-size);
width: 100%;
max-width: 400px;
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: var(--link-color);
}
.chart-container { .chart-container {
position: relative; position: relative;
margin: auto; margin: auto;