Test datatables again

RussellDash332 · Feb 24, 2024 · 14e3e2c · 14e3e2c
1 parent 3dbed90
commit 14e3e2c
Show file tree

Hide file tree

Showing 4 changed files with 359 additions and 10 deletions.
diff --git a/_config.yml b/_config.yml
diff --git a/build.py b/build.py
@@ -73,24 +73,20 @@
 assert not nus_problems, nus_problems
 with open('README.md', 'w+') as f:
     for line in lines: f.write(line)
-    f.write(f'## Total problems solved: {len(contents)}\datatable: truen\n')
+    f.write(f'## Total problems solved: {len(contents)}\n\n')
     f.write('\n\n'.join([
         'Note that the table below is auto-generated using [autokattis](https://github.com/RussellDash332/autokattis).',
         'You might find [this link](https://stackoverflow.com/questions/42843288/is-there-any-way-to-make-markdown-tables-sortable) useful to interact with the table.',
-        'For more Python data structure implementations, head over to [pytils](https://github.com/RussellDash332/pytils).',
-        '<div class="datatable-begin"></div>'
+        'For more Python data structure implementations, head over to [pytils](https://github.com/RussellDash332/pytils).'
     ])+'\n\n')
     if diff_mapper != None: f.write('|Problem Name|Problem ID|Difficulty|Languages|\n|:---|:---|:---|:---|\n')
     else:                   f.write('|Problem Name|Problem ID|Languages|\n|:---|:---|:---|\n')
     for key, content in sorted(contents): f.write(content)
-    f.write('\n<div class="datatable-end"></div>\n')
 
     f.write('\n\n'.join([
         '\n## NUS-exclusive problems',
         'These problems can only be found in NUS Kattis and therefore do not contribute to the number of problems solved.',
-        '<div class="datatable-begin"></div>',
         '|Problem Name|Problem ID|Languages|\n|:---|:---|:---|'
     ])+'\n')
     for key, content in sorted(nus_contents): f.write(content)
-    f.write('\n<div class="datatable-end"></div>\n')
 print('Build done! Mapper exists:', diff_mapper != None)
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>RussellDash332 - kattis</title>
+        <link rel="stylesheet" href="style.css">
+        <style>
+            .red {
+                background-color: #ffafba;
+            }
+            .green {
+                background-color: #ebffc8;
+            }
+        </style>
+    </head>
+    <body>
+        <header>
+            <h1>
+                <a href="https://github.com/RussellDash332/kattis/">kattis</a>
+            </h1>
+        </header>
+
+        <h2>Kattis Solutions</h2>
+
+        <table id="data-table">
+            <thead>
+                <tr>
+                    <th>
+                        <b>Name</b>
+                    </th>
+                    <th>Ext.</th>
+                    <th>City</th>
+                    <th data-type="date" data-format="YYYY/DD/MM">Start Date</th>
+                    <th>Completion</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>Unity Pugh</td>
+                    <td>9958</td>
+                    <td>Curicó</td>
+                    <td>2005/02/11</td>
+                    <td>37%</td>
+                </tr>
+            </tbody>
+        </table>
+
+        <script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript">
+            window.dt = new DataTable("#data-table", {
+                perPageSelect: [5, 10, 15, ["All", -1]],
+                columns: [
+                    {
+                        select: 2,
+                        sortSequence: ["desc", "asc"]
+                    },
+                    {
+                        select: 3,
+                        sortSequence: ["desc"]
+                    },
+                    {
+                        select: 4,
+                        cellClass: "green",
+                        headerClass: "red"
+                    }
+                ]
+            })
+        </script>
+    </body>
+</html>
diff --git a/docs/style.css b/docs/style.css
@@ -0,0 +1,287 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: Roboto, Arial, Helvetica, sans-serif;
+}
+html,
+body {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+body {
+  margin: 2vw 5vw;
+}
+header {
+  display: flex;
+  align-items: baseline;
+  gap: 1rem;
+}
+header h1 a {
+  color: #16378d;
+}
+nav {
+  display: flex;
+  flex-direction: column;
+}
+a {
+  text-decoration: none;
+  color: #0031e6;
+}
+a:hover,
+a:focus {
+  color: #00198b;
+}
+h2 {
+  margin: 1rem 0;
+}
+button:not(.datatable-sorter):not(.datatable-filter) {
+  cursor: pointer;
+  padding: 0.5em;
+}
+
+tbody button {
+  background: #565656;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 0.25rem 0.5rem;
+  margin: 0 0 0 0.25rem;
+}
+tbody button:hover,
+tbody button:focus {
+  background: #3b3b3b;
+}
+
+.datatable-wrapper.no-header .datatable-container {
+  border-top: 1px solid #d9d9d9;
+}
+
+.datatable-wrapper.no-footer .datatable-container {
+  border-bottom: 1px solid #d9d9d9;
+}
+
+.datatable-top,
+.datatable-bottom {
+  padding: 8px 10px;
+}
+
+.datatable-top > nav:first-child,
+.datatable-top > div:first-child,
+.datatable-bottom > nav:first-child,
+.datatable-bottom > div:first-child {
+  float: left;
+}
+
+.datatable-top > nav:last-child,
+.datatable-top > div:not(first-child),
+.datatable-bottom > nav:last-child,
+.datatable-bottom > div:last-child {
+  float: right;
+}
+
+.datatable-selector {
+  padding: 6px;
+}
+
+.datatable-input {
+  padding: 6px 12px;
+}
+
+.datatable-info {
+  margin: 7px 0;
+}
+
+.datatable-pagination ul {
+  margin: 0;
+  padding-left: 0;
+}
+
+.datatable-pagination li {
+  list-style: none;
+  float: left;
+}
+
+.datatable-pagination li.datatable-hidden {
+  visibility: hidden;
+}
+
+.datatable-pagination a,
+.datatable-pagination button {
+  border: 1px solid transparent;
+  float: left;
+  margin-left: 2px;
+  padding: 6px 12px;
+  position: relative;
+  text-decoration: none;
+  color: #333;
+  cursor: pointer;
+}
+
+.datatable-pagination a:hover,
+.datatable-pagination button:hover {
+  background-color: #d9d9d9;
+}
+
+.datatable-pagination .datatable-active a,
+.datatable-pagination .datatable-active a:focus,
+.datatable-pagination .datatable-active a:hover,
+.datatable-pagination .datatable-active button,
+.datatable-pagination .datatable-active button:focus,
+.datatable-pagination .datatable-active button:hover {
+  background-color: #d9d9d9;
+  cursor: default;
+}
+
+.datatable-pagination .datatable-ellipsis a,
+.datatable-pagination .datatable-disabled a,
+.datatable-pagination .datatable-disabled a:focus,
+.datatable-pagination .datatable-disabled a:hover,
+.datatable-pagination .datatable-ellipsis button,
+.datatable-pagination .datatable-disabled button,
+.datatable-pagination .datatable-disabled button:focus,
+.datatable-pagination .datatable-disabled button:hover {
+  pointer-events: none;
+  cursor: default;
+}
+
+.datatable-pagination .datatable-disabled a,
+.datatable-pagination .datatable-disabled a:focus,
+.datatable-pagination .datatable-disabled a:hover,
+.datatable-pagination .datatable-disabled button,
+.datatable-pagination .datatable-disabled button:focus,
+.datatable-pagination .datatable-disabled button:hover {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.datatable-pagination .datatable-pagination a,
+.datatable-pagination .datatable-pagination button {
+  font-weight: bold;
+}
+
+.datatable-table {
+  max-width: 100%;
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: separate;
+}
+
+.datatable-table > tbody > tr > td,
+.datatable-table > tbody > tr > th,
+.datatable-table > tfoot > tr > td,
+.datatable-table > tfoot > tr > th,
+.datatable-table > thead > tr > td,
+.datatable-table > thead > tr > th {
+  vertical-align: top;
+  padding: 8px 10px;
+}
+
+.datatable-table > thead > tr > th {
+  vertical-align: bottom;
+  text-align: left;
+  border-bottom: 1px solid #d9d9d9;
+}
+
+.datatable-table > tfoot > tr > th {
+  vertical-align: bottom;
+  text-align: left;
+  border-top: 1px solid #d9d9d9;
+}
+
+.datatable-table th {
+  vertical-align: bottom;
+  text-align: left;
+}
+
+.datatable-table th a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.datatable-table th button,
+.datatable-pagination-list button {
+  color: inherit;
+  border: 0;
+  background-color: inherit;
+  cursor: pointer;
+  text-align: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+}
+
+.datatable-sorter,
+.datatable-filter {
+  display: inline-block;
+  height: 100%;
+  position: relative;
+  width: 100%;
+}
+
+.datatable-sorter::before,
+.datatable-sorter::after {
+  content: "";
+  height: 0;
+  width: 0;
+  position: absolute;
+  right: 4px;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  opacity: 0.2;
+}
+
+.datatable-sorter::before {
+  border-top: 4px solid #000;
+  bottom: 0px;
+}
+
+.datatable-sorter::after {
+  border-bottom: 4px solid #000;
+  border-top: 4px solid transparent;
+  top: 0px;
+}
+
+.datatable-ascending .datatable-sorter::after,
+.datatable-descending .datatable-sorter::before,
+.datatable-ascending .datatable-filter::after,
+.datatable-descending .datatable-filter::before {
+  opacity: 0.6;
+}
+
+.datatable-filter::before {
+  content: "";
+  position: absolute;
+  right: 4px;
+  opacity: 0.2;
+  width: 0;
+  height: 0;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-radius: 50%;
+  border-top: 10px solid #000;
+  top: 25%;
+}
+
+.datatable-filter-active .datatable-filter::before {
+  opacity: 0.6;
+}
+
+.datatable-empty {
+  text-align: center;
+}
+
+.datatable-top::after,
+.datatable-bottom::after {
+  clear: both;
+  content: " ";
+  display: table;
+}
+
+table.datatable-table:focus tr.datatable-cursor > td:first-child {
+  border-left: 3px blue solid;
+}
+
+table.datatable-table:focus {
+  outline: solid 1px black;
+  outline-offset: -1px;
+}