Theme for nginx fancyindex module

2026-04-09 13:37:50 +03:00
parent 88d81e293d
commit d7ffebe55c
5 changed files with 86 additions and 0 deletions
--- a/flat-theme/footer.html
+++ b/flat-theme/footer.html
@@ -0,0 +1,24 @@
+     </div>
+    </div>
+  </div>
+
+  <footer class="footer navbar">
+    <div class="container">
+      <div class="col text-right text-muted text-small text-nowrap">
+        <small>
+          Powered by <a href="http://nginx.org">nginx</a>,
+            <a href="https://github.com/aperezdc/ngx-fancyindex">fancyindex</a>
+            and the <a href="https://github.com/alehaa/nginx-fancyindex-flat-theme">flat theme</a>.
+        </small>
+      </div>
+    </div>
+  </footer>
+
+  <script type="text/javascript">
+    generateBreadcrumbs();
+    generateList();
+  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox-plus-jquery.min.js"></script>
+</body>
+
+</html>
--- a/flat-theme/header.html
+++ b/flat-theme/header.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+  <title>File Browser</title>
+
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.min.css">
+  <link rel="stylesheet" href="/theme/theme.css">
+
+  <script type="text/javascript" src="/theme/js/breadcrumbs.js"></script>
+  <script type="text/javascript" src="/theme/js/list.js"></script>
+</head>
+
+<body>
+  <div class="header">
+    <nav class="navbar sticky-top container">
+      <div class="navbar-brand">
+        <i class="fa fa-fw fa-files-o" aria-hidden="true"></i>
+        File Browser
+      </div>
+    </nav>
+  </div>
+
+  <div class="container">
+    <nav aria-label="breadcrumb">
+      <ol class="breadcrumb" id="breadcrumbs"/>
+    </nav>
+
+    <div class="row">
+      <div class="col">
--- a/flat-theme/js/breadcrumbs.js
+++ b/flat-theme/js/breadcrumbs.js
@@ -0,0 +1,9 @@
+/*!
+ *
+ * This file is part of the nginx-fancyindex-flat-theme, licensed under the GNU
+ * General Public License. See the LICENSE file for details.
+ *
+ * Copyright (C)
+ *  2018-2024 Alexander Haase <ahaase@alexhaase.de>
+ */
+function generateBreadcrumbs(){for(var e,a,n,r=window.location.pathname.replace(/\/$/,"").split("/"),t="",c="",o=0;o<r.length;o++)c+=r[o]+"/",t+=(e=0==o?"Home":decodeURIComponent(r[o]),a=c,'<li class="breadcrumb-item'+((n=o==r.length-1)?' active aria-current="page':"")+'">'+(n?"":'<a href="'+a+'">')+e+(n?"":"</a>"));document.getElementById("breadcrumbs").innerHTML=t}
--- a/flat-theme/js/list.js
+++ b/flat-theme/js/list.js
@@ -0,0 +1,9 @@
+/*!
+ *
+ * This file is part of the nginx-fancyindex-flat-theme, licensed under the GNU
+ * General Public License. See the LICENSE file for details.
+ *
+ * Copyright (C)
+ *  2018-2024 Alexander Haase <ahaase@alexhaase.de>
+ */
+function generateList(){function e(e){return'<i class="fa fa-fw '+function(e){switch(e){case"folder":return"fa-folder";case"archive":case"audio":case"code":case"excel":case"image":case"pdf":case"powerpoint":case"text":case"video":case"word":return"fa-file-"+e+"-o";default:return"fa-file-o"}}(e)+'" aria-hidden="true"></i>'}var a=document.getElementById("list");a.removeAttribute("cellpadding"),a.removeAttribute("cellspacing"),a.classList.add("table","table-sm","table-hover","text-nowrap"),a.tHead.children[0].classList.add("d-none","d-md-table-row"),"/"!=window.location.pathname&&a.deleteRow(1);for(var s,c=0;s=a.rows[c];c++)filetype=function(e){if(e.endsWith("/"))return"folder";switch(e.split(".").pop().toLowerCase()){case"txt":return"text";case"pdf":return"pdf";case"bmp":case"gif":case"jpeg":case"jpg":case"png":case"tif":case"tiff":return"image";case"aac":case"aiff":case"m4a":case"mp3":case"ogg":case"opus":case"wav":return"audio";case"amv":case"avi":case"flv":case"m4v":case"mkv":case"mov":case"mp4":case"m4p":case"mpeg":case"mpg":case"ogv":case"vob":case"webm":case"wmv":return"video";case"7z":case"a":case"apk":case"ar":case"bin":case"bz2":case"cab":case"dmg":case"gz":case"iso":case"jar":case"lz":case"lzma":case"lzo":case"pak":case"partimg":case"rar":case"s7z":case"tar":case"tbz2":case"tgz":case"tlz":case"txz":case"xz":case"zip":return"archive";case"doc":case"docx":case"odt":case"rtf":return"word";case"csv":case"ods":case"xls":case"xlsx":return"excel";case"odp":case"ppt":case"pptx":return"powerpoint";case"c":case"class":case"cpp":case"cs":case"h":case"hpp":case"hxx":case"java":case"py":case"sh":case"swift":case"vb":return"code"}}(s.cells[0].children[0].innerHTML),s.insertCell(0).innerHTML=0<c?e(filetype):"",s.cells[0].classList.add("col-auto"),s.cells[1].classList.add("col","filename"),s.cells[2].classList.add("col-auto","d-none","d-md-table-cell"),s.cells[3].classList.add("col-auto","d-none","d-md-table-cell"),"image"==filetype&&s.cells[1].children[0].setAttribute("data-lightbox","roadtrip")}
--- a/flat-theme/theme.css
+++ b/flat-theme/theme.css
@@ -0,0 +1,9 @@
+/*!
+ * This file is part of the nginx-fancyindex-flat-theme (licensed under the GPL
+ * license) and uses Twitter Bootstrap (v4) (licensed under the MIT license).
+ *
+ * Copyright (C)
+ *  2018-2024 Alexander Haase <ahaase@alexhaase.de>
+ *
+ * See the LICENSE file for details.
+ */body{background-color:#f8f9fa;padding-bottom:20px}@media (prefers-color-scheme:dark){body{background-color:#343a40;color:#fff}}.breadcrumb{background-color:transparent;padding-left:35px}.breadcrumb .breadcrumb-item a{color:#4caf50}html{position:relative;min-height:100%}.footer{position:absolute;bottom:0;width:100%;margin-bottom:0}.footer a,.footer a:focus,.footer a:hover{color:#4caf50}.header{background-color:#4caf50;color:#fff;min-height:24px}.header .navbar-brand{padding:0 8px;font-size:16px;line-height:24px;height:24px}#list a,#list a:focus,#list a:hover{color:#000}#list colgroup{display:none}#list .filename{word-break:break-all;white-space:normal}@media (prefers-color-scheme:dark){#list a,#list a:focus,#list a:hover{color:#fff}}