forked from NginxProxyManager/nginx-proxy-manager
-
Notifications
You must be signed in to change notification settings - Fork 30
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix design on mobile and add ascending sorting arrow
- Loading branch information
1 parent
383aa71
commit bb4223f
Showing
2 changed files
with
173 additions
and
156 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,30 +1,39 @@ | ||
| </div> | ||
| <p id="notice">Powered by <a href="https://github.com/ZoeyVid/NPMplus">NPMplus</a></p> | ||
| <script> | ||
| var input = document.createElement("input"); | ||
| input.id = "search"; | ||
| input.type = "text"; | ||
| input.placeholder = "Search here..."; | ||
| document.querySelector("h1").after(input); | ||
| var items = [].slice.call(document.querySelectorAll("#list tbody tr")); | ||
| function filterItems(item, filter) { | ||
| return !item.querySelector("td").textContent.trim().includes(filter); | ||
| } | ||
| input.addEventListener("keyup", function () { | ||
| items.forEach((item) => { | ||
| item.hidden = false; | ||
| }); | ||
| items | ||
| .filter((item) => filterItems(item, this.value.trim())) | ||
| .forEach((item) => { | ||
| item.hidden = true; | ||
| }); | ||
| }); | ||
| </div> | ||
| <p id="notice">Powered by <a href="https://github.com/ZoeyVid/NPMplus">NPMplus</p> | ||
| <script>; | ||
| var input = document.createElement("input"); | ||
| input.id = "search"; | ||
| input.type = "text"; | ||
| input.placeholder = "Search here..."; | ||
| document.querySelector("h1").after(input); | ||
| var items = [].slice.call(document.querySelectorAll('#list tbody tr')); | ||
| function filterItems(item, filter) { | ||
| return !item.querySelector("td").textContent.trim().includes(filter); | ||
| } | ||
| input.addEventListener("keyup", function() { | ||
| items.forEach(item => { | ||
| item.hidden = false | ||
| }); | ||
| items.filter((item) => filterItems(item, this.value.trim())).forEach(item => { | ||
| item.hidden = true; | ||
| }); | ||
| }) | ||
|
|
||
| var tableDiv = document.createElement("div"); | ||
| tableDiv.id = "tableDiv"; | ||
| tableDiv.appendChild(document.querySelector("table")); | ||
| document.getElementById("search").after(tableDiv); | ||
| </script> | ||
| </body> | ||
| </html> | ||
| var tableDiv = document.createElement("div"); | ||
| tableDiv.id = "tableDiv" | ||
| tableDiv.appendChild(document.querySelector("table")); | ||
| document.getElementById("search").after(tableDiv); | ||
|
|
||
| var headers = document.querySelectorAll('th'); | ||
| headers.forEach(header => { | ||
| console.log(header) | ||
| var links = header.querySelectorAll('a'); | ||
| var ascendingLink = document.createElement("a"); | ||
| ascendingLink.textContent = "↑"; | ||
| ascendingLink.href = links[0].href; | ||
| links[0].removeAttribute("href"); | ||
| links[1].after(ascendingLink); | ||
| }) | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,160 +1,168 @@ | ||
| <!doctype html> | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Directory index</title> | ||
| <title>Nginx Directory</title> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <meta name="application-name" content="NPMplus" /> | ||
| <meta name="author" content="ZoeyVid" /> | ||
| <meta name="description" content="Directory index of NPMplus" /> | ||
| <meta name="keywords" content="NPMplus, default" /> | ||
| <!-- TODO: Icon --> | ||
| <link rel="icon" type="image/webp" href="/fancyindex/favicon.webp" /> | ||
| </head> | ||
| <body> | ||
| <style> | ||
| @media (prefers-color-scheme: dark) { | ||
| </head> | ||
| <body> | ||
| <style> | ||
| @media (prefers-color-scheme: dark) { | ||
| body { | ||
| background-color: rgb(17 24 39); | ||
| color: white; | ||
| } | ||
|
|
||
| #box { | ||
| background-color: rgb(31 41 55); | ||
| } | ||
|
|
||
| tr a { | ||
| color: white; | ||
| } | ||
|
|
||
| td, th { | ||
| border-bottom-color: white; | ||
| } | ||
|
|
||
| #search { | ||
| border-bottom: 2px solid white !important; | ||
| color: white; | ||
| } | ||
| } | ||
|
|
||
| @media (prefers-color-scheme: light) { | ||
| body { | ||
| background-color: white; | ||
| color: black; | ||
| } | ||
|
|
||
| #box { | ||
| background-color: rgb(229 231 235); | ||
| } | ||
|
|
||
| tr a { | ||
| color: black; | ||
| } | ||
|
|
||
| td, th { | ||
| border-bottom-color: black; | ||
| } | ||
|
|
||
| #search { | ||
| border-bottom: 2px solid black !important; | ||
| color: black; | ||
| } | ||
| } | ||
|
|
||
| body { | ||
| background-color: rgb(17 24 39); | ||
| color: white; | ||
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | ||
| text-align: center; | ||
| } | ||
|
|
||
| #box { | ||
| background-color: rgb(31 41 55); | ||
| border-radius: 2rem; | ||
| padding: 1rem; | ||
| margin: 8rem; | ||
| margin-top: 10vh; | ||
| margin-bottom: 0rem; | ||
| } | ||
|
|
||
| tr a { | ||
| color: white; | ||
| #tableDiv { | ||
| overflow-x: auto; | ||
| margin-bottom: 3rem; | ||
| } | ||
|
|
||
| td, | ||
| th { | ||
| border-bottom-color: white; | ||
| h1 { | ||
| font-size: 48px; | ||
| } | ||
|
|
||
| #search { | ||
| border-bottom: 2px solid white !important; | ||
| color: white; | ||
| p { | ||
| font-size: 24px; | ||
| } | ||
| } | ||
|
|
||
| @media (prefers-color-scheme: light) { | ||
| body { | ||
| background-color: white; | ||
| color: black; | ||
| #notice { | ||
| font-size: 12px; | ||
| text-align: center; | ||
| bottom: 0; | ||
| } | ||
|
|
||
| #box { | ||
| background-color: rgb(229 231 235); | ||
| table { | ||
| max-width: max-content; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| border-collapse: collapse; | ||
| text-align: left; | ||
| font-size: large; | ||
| } | ||
|
|
||
| td, th { | ||
| border-bottom-width: 1px; | ||
| border-bottom-style: solid; | ||
| line-height: 2.5rem; | ||
| padding: 0.4rem; | ||
| overflow-wrap: break-word; | ||
| } | ||
|
|
||
| tr a { | ||
| color: black; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| td, | ||
| th { | ||
| border-bottom-color: black; | ||
| tr a:hover { | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| #search { | ||
| border-bottom: 2px solid black !important; | ||
| color: black; | ||
| } | ||
| } | ||
|
|
||
| body { | ||
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | ||
| text-align: center; | ||
| } | ||
|
|
||
| #box { | ||
| border-radius: 2rem; | ||
| padding: 1rem; | ||
| margin: 8rem; | ||
| margin-top: 10vh; | ||
| margin-bottom: 0rem; | ||
| } | ||
|
|
||
| #tableDiv { | ||
| overflow-x: auto; | ||
| margin-bottom: 3rem; | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 48px; | ||
| } | ||
|
|
||
| p { | ||
| font-size: 24px; | ||
| } | ||
|
|
||
| #notice { | ||
| font-size: 12px; | ||
| text-align: center; | ||
| bottom: 0; | ||
| } | ||
|
|
||
| table { | ||
| max-width: max-content; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| border-collapse: collapse; | ||
| text-align: left; | ||
| font-size: large; | ||
| } | ||
|
|
||
| td, | ||
| th { | ||
| border-bottom-width: 1px; | ||
| border-bottom-style: solid; | ||
| line-height: 2.5rem; | ||
| } | ||
|
|
||
| tr a { | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| tr a:hover { | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| th a { | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| th { | ||
| padding-right: 10rem; | ||
| } | ||
|
|
||
| #search { | ||
| margin-bottom: 2rem; | ||
| background-color: transparent; | ||
| border: none; | ||
| outline: none; | ||
| font-size: 24px; | ||
| } | ||
|
|
||
| @media (max-width: 600px) { | ||
| h1 { | ||
| font-size: 32px; | ||
| th a { | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| p { | ||
| font-size: 16px; | ||
| th { | ||
| padding-right: 10rem; | ||
| } | ||
|
|
||
| #box { | ||
| padding-right: 1rem; | ||
| padding-left: 1rem; | ||
| margin: 2rem; | ||
| margin-bottom: 0rem; | ||
| #search { | ||
| margin-bottom: 2rem; | ||
| background-color: transparent; | ||
| border: none; | ||
| outline: none; | ||
| font-size: 24px; | ||
| } | ||
|
|
||
| th { | ||
| @media (max-width: 600px) { | ||
| h1 { | ||
| font-size: 32px; | ||
| } | ||
|
|
||
| p { | ||
| font-size: 16px; | ||
| } | ||
|
|
||
| #box { | ||
| padding-right: 1rem; | ||
| padding-left: 1rem; | ||
| margin: 0.5rem; | ||
| margin-top: 1.5rem; | ||
| margin-bottom: 0rem; | ||
| } | ||
|
|
||
| th { | ||
| padding-right: 0rem; | ||
| } | ||
|
|
||
| #search { | ||
| font-size: 16px; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| } | ||
|
|
||
| table { | ||
| font-size: medium; | ||
| } | ||
|
|
||
| td { | ||
| max-width: 10rem; | ||
| } | ||
| } | ||
| } | ||
| </style> | ||
| <div id="box"> | ||
| <h1>Directory: | ||
| </style> | ||
| <div id="box"> | ||
| <h1>Directory: |