feat: move to Bulma CSS

author: Navan Chauhan <navanchauhan@gmail.com> 2024-07-01 00:07:20 -0600
committer: Navan Chauhan <navanchauhan@gmail.com> 2024-07-01 00:07:20 -0600
commit: ae2c6cda8b028988e87388f54492e910b2a4a257 (patch)
tree: 3cb8ebc6d8ffa385726b9313b03cd0a44d2c4932
parent: f4658affad27456b115f26abb8a29666fde78aaf (diff)
1 files changed, 108 insertions, 74 deletions
diff --git a/index.html b/index.html
index 7717543..3a987f1 100644
--- a/index.html
+++ b/index.html
@@ -1,80 +1,113 @@
 <!DOCTYPE html>
 <html>
-
-<head>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>CU Boulder Grades Database</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.9.0/sql-wasm.js" onload integrity="sha512-PAyD/84QEfxE1X/H3RDJY9kqXtJObyGq6qA93+LnkMNWdTLHjcTKHsDOcz6Y5xAdsaMGItRP5vNs4vtj3/FRuw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
     <script src="sorttable.js"></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.1/css/bulma.min.css">
     <script defer data-domain="web.navan.dev" src="https://plausible.io/js/script.js"></script>
-</head>
-
-<body>
-    <main class="container">
-    <h1>iNeedATitle</h1>
-    <p>Last Semester to be included in the database: Fall 2023</p>
-    <p id="database-loading"><b>Loading database...</b></p>
-    <form>
-        <textarea id="output" rows="10" cols="80"></textarea>
-        <input type="text" id="query" value="SELECT COUNT(*) FROM raw_data" style="width: 100%">
-        <br>
-        <button type="button" value="Run Raw Query" onclick="run()" disabled>Run Raw Query</button>
-    </form>
-    <hr>
-    <section>
-    <h2>Queries</h2>
-    <h3>By Instructor</h3>
-    <p>Find classes, and average grade for a given instructor</p>
-    <p>Since the instructor names are provided in the format <pre>Last Name, First Name</pre> It is best if you start typing the last name first.</p>
-    <label for="instructor">Instructor</label>
-    <input type="text" id="instructor" name="instructor" list="instructors">
-    <datalist id="instructors" class="instructorDatalist">
-    </datalist>
-    <button type="button" onclick="getClassesByInstructor()" disabled>Get Classes & Average Grades</button>
-    <form>
-        <div id="table-container"></div>
-    </form>
-    <hr>
-    <h3>By Class Code</h3>
-    <p>Note: There is a space between the subject and course code. For example, "CSCI 1300"</p>
-    <label for="classCode">Class Code</label>
-    <input type="text" id="classCode" name="classCode" list="classCodes">
-    <datalist id="classCodes" class="classCodeDatalist">
-    </datalist>
-    <button type="button" onclick="getClassesByClassCode()" disabled>Get Instructors & Average Grades</button>
-    <form>
-        <div id="table-container-class-codes"></div>
-    </form>
-    <hr>
-    <h3>By Subject</h3>
-    <p>...</p>
-    <hr>
-    <h3>By A&S Division</h3>
-    <h4>Useful for finding electives</h4>
-    <p>Find classes, and average grade for a given A&S Division</p>
-    <label for="division">Division (AH, SS, or NS)</label>
-    <select name="division" id="division">
-        <option value="AH">Arts & Humanities</option>
-        <option value="SS" selected>Social Sciences</option>
-        <option value="NS">Natural Sciences</option>
-    </select>
-    <label for="grade">Upper or Lower Division</label>
-    <select name="grade" id="grade">
-        <option value="upper" selected>Upper Division (3XXX - 4XXXX)</option>
-        <option value="lower">Lower Division (1XXX - 2XXX)</option>
-        <option value="both">Both (1XXXX - 4XXXX)</option>
-        <option value="grad">Graduate Level (>= 5000)
-    </select>
-    <button type="button" onclick="getClassesByDivision()" disabled>Get Classes & Average Grades</button>
-    <form>
-        <div id="table-container-division"></div>
-    </form>
+  </head>
+  <body>
+  <section class="section">
+    <div class="container">
+      <h1 class="title is-1">
+        CU Boulder Grades Database
+      </h1>
+      <p class="subtitle">
+        Database contains data from <strong>Spring 2016</strong> to <strong>Spring 2024</strong>
+      </p>
+      <form>
+        <textarea id="output" rows="10" cols="80" class="textarea"></textarea>
+        <input type="text" id="query" value="SELECT COUNT(*) FROM raw_data" class="input">
+        <button type="button" value="Run Raw Query" onclick="run()" class="button is-info is-loading is-fullwidth" disabled>Run Raw Query</button>
+      </form>
+    </div>
+  </section>
+  <section class="section">
+    <div class="container">
+      <h2 class="title is-2">
+        Search
+      </h2>
+      <h3 class="title is-3">
+        By Instructor
+      </h3>
+      <p class="subtitle">Find classes, and average grades for a given instructor</p>
+      <p>Since CU provides instructor names in the format <pre>Last Name, First Name</pre> It is best if you start typing the last name first.</p>
+      <div class="field is-grouped pt-2">
+      <div class="control is-expanded">
+        <input type="text" id="instructor" name="instructor" list="instructors" class="input is-medium" placeholder="Instructor">
+        <datalist id="instructors"></datalist>
+      </div>
+      <div class="control">
+        <button type="button" onclick="getClassesByInstructor()" class="button is-primary is-loading is-medium" disabled>Get Classes & Average Grades</button>
+      </div>
+      </div>
+        <form>
+          <div id="table-container"></div>
+        </form>
+      </div>
+      <div class="container">
+        <h3 class="title is-3">
+          By Class Code
+        </h3>
+        <p>There is a space between the subject and course code. For example: <pre>CSCI 1300</pre></p>
+        <div class="field is-grouped pt-2">
+          <div class="control is-expanded">
+            <input type="text" id="classCode" name="classCode" list="classCodes" class="input is-medium" placeholder="Class Code">
+            <datalist id="classCodes"></datalist>
+          </div>
+          <div class="control">
+            <button type="button" onclick="getClassesByClassCode()" class="button is-primary is-loading is-medium" disabled>Get Instructors & Average Grades</button>
+          </div>
+          
+        </div>
+        <form>
+          <div id="table-container-class-codes"></div>
+        </form>
+      </div>
+      <div class="container">
+        <h3 class="title is-3">
+          By A&S Division
+        </h3>
+        <p class="subtitle">Useful for finding electives as you can find classes, and average grade for a given A&S division</p>
+
+          <div class="field">
+            <label for="division" class="label">Division (AH, SS, or NS)</label>
+            <div class="control">
+                <div class="select is-fullwidth">
+                  <select name="division" id="division" >
+                    <option value="AH">Arts & Humanities</option>
+                    <option value="SS" selected>Social Sciences</option>
+                    <option value="NS">Natural Sciences</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          <div class="field">
+            <label for="grade" class="label">Upper or Lower Division</label>
+            <div class="control">
+              <div class="select is-fullwidth">
+                <select name="grade" id="grade">
+                  <option value="upper" selected>Upper Division (3XXX - 4XXXX)</option>
+                  <option value="lower">Lower Division (1XXX - 2XXX)</option>
+                  <option value="both">Both (1XXXX - 4XXXX)</option>
+                  <option value="grad">Graduate Level (>= 5000)</option>
+                </select>
+              </div>
+            </div>
+          </div>
+      
+        
+        
+        <button type="button" onclick="getClassesByDivision()" class="button is-primary is-loading is-fullwidth is-medium" disabled>Get Classes & Average Grades</button>
+        <form>
+          <div id="table-container-division"></div>
+        </form>
+      </div>
     </section>
-    <br>
-    <br>
-    </main>
-    <script type="text/javascript">
+        <script type="text/javascript">
         let SQL = undefined
         let db = undefined
 
@@ -122,10 +155,11 @@
                 classCodeDatalist.appendChild(option);
             }
 
-            document.getElementById("database-loading").textContent = "Database loaded!";
+            // document.getElementById("database-loading").textContent = "Database loaded!";
             let buttons = document.getElementsByTagName("button");
             for (let i = 0; i < buttons.length; i++) {
                 buttons[i].disabled = false;
+                buttons[i].classList.remove("is-loading")
             }
             
 
@@ -160,6 +194,7 @@
             const tableContainer = document.getElementById(className);
             const table = document.createElement("table");
             table.classList.add("sortable")
+            table.classList.add("table")
             const thead = document.createElement("thead");
             const tbody = document.createElement("tbody");
             const headerRow = document.createElement("tr");
@@ -282,6 +317,5 @@
 }
 
     </script>
-</body>
-
-</html>
+  </body>
+</html>
+\ No newline at end of file
author	Navan Chauhan <navanchauhan@gmail.com>	2024-07-01 00:07:20 -0600
committer	Navan Chauhan <navanchauhan@gmail.com>	2024-07-01 00:07:20 -0600
commit	ae2c6cda8b028988e87388f54492e910b2a4a257 (patch)
tree	3cb8ebc6d8ffa385726b9313b03cd0a44d2c4932
parent	f4658affad27456b115f26abb8a29666fde78aaf (diff)