Merge pull request #6 from mohamnag/gruvbox-theme

adding dark theme
This commit is contained in:
Mohammad Naghavi 2022-02-07 16:59:36 +01:00 committed by GitHub
commit cd39c80f67
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 92 additions and 21 deletions

2
.gitignore vendored
View file

@ -4,7 +4,7 @@
*.iml *.iml
## Directory-based project format: ## Directory-based project format:
#.idea/ .idea/
# if you remove the above rule, at least ignore the following: # if you remove the above rule, at least ignore the following:
# User-specific stuff: # User-specific stuff:

View file

@ -3,6 +3,7 @@
<component name="ProjectModuleManager"> <component name="ProjectModuleManager">
<modules> <modules>
<module fileurl="file://$PROJECT_DIR$/.idea/file-browser.iml" filepath="$PROJECT_DIR$/.idea/file-browser.iml" /> <module fileurl="file://$PROJECT_DIR$/.idea/file-browser.iml" filepath="$PROJECT_DIR$/.idea/file-browser.iml" />
<module fileurl="file://$PROJECT_DIR$/nginx-file-browser.iml" filepath="$PROJECT_DIR$/nginx-file-browser.iml" />
</modules> </modules>
</component> </component>
</project> </project>

View file

@ -1,4 +1,4 @@
FROM nginx FROM nginx:alpine
MAINTAINER Mohammad Naghavi <mohamnag@gmail.com> MAINTAINER Mohammad Naghavi <mohamnag@gmail.com>

View file

@ -3,7 +3,8 @@
This web application is a very simple file browser which can be used This web application is a very simple file browser which can be used
effectively together with [nginx's autoindex module](http://nginx.org/en/docs/http/ngx_http_autoindex_module.html). effectively together with [nginx's autoindex module](http://nginx.org/en/docs/http/ngx_http_autoindex_module.html).
![nginx file browser in action](assets/Screen-Shot-1.jpg) ![nginx file browser in action - light theme](assets/screenshot-light.jpg)
![nginx file browser in action - light theme](assets/screenshot-dark.jpg)
A sample nginx configuration is also included which mounts **file browser** under root (`/`) and mounts files to be listed under `/files` path. Hence is the `filesBaseUrl` under A sample nginx configuration is also included which mounts **file browser** under root (`/`) and mounts files to be listed under `/files` path. Hence is the `filesBaseUrl` under

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 214 KiB

BIN
assets/screenshot-dark.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 KiB

BIN
assets/screenshot-light.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

View file

@ -7,15 +7,19 @@ a {
text-decoration: none; text-decoration: none;
} }
.list-sort { .controls {
background: #ddd; background: #ddd;
border-radius: 1rem; border-radius: 1rem;
padding: 1.5rem 2rem .5rem; padding: 1.5rem 2rem .5rem;
} }
.list-sort label { .controls span:not(:first-of-type) {
padding-left: 4rem;
}
.controls label {
display: inline-block; display: inline-block;
margin: 0 1rem 0 0; margin: 0 0 0 .5rem;
} }
.file-list { .file-list {
@ -103,4 +107,44 @@ footer {
footer small + small { footer small + small {
margin-left: 2rem; margin-left: 2rem;
}
/*
Start of alternations for dark theme
*/
body.dark {
background-color: #252525;
color: #ecdbb2;
}
body.dark h1 {
color: #9dd08e;
}
body.dark a {
color: #549699;
}
body.dark a.file-name {
color: #ecdbb2;
}
body.dark .controls {
background: #413e3d;
color: #ecdbb2;
}
body.dark input[name="sort"] {
accent-color: #fe6142;
}
body.dark .file-list .file-date {
background: #549699;
color: #ecdbb2;
}
body.dark .file-list .file-size {
background: #79aa7d;
color: #ecdbb2;
} }

View file

@ -20,8 +20,8 @@
<div class="container"> <div class="container">
<h1>File Browser</h1> <h1>File Browser</h1>
<div class="list-sort"> <div class="controls">
<span>sort list by</span> <span>sort list by:</span>
<label> <label>
date date
<input type="radio" name="sort" value="date" checked> <input type="radio" name="sort" value="date" checked>
@ -34,6 +34,16 @@
size size
<input type="radio" name="sort" value="size"> <input type="radio" name="sort" value="size">
</label> </label>
<span>theme:</span>
<label>
light
<input type="radio" name="theme" value="" checked>
</label>
<label>
dark
<input type="radio" name="theme" value="dark">
</label>
</div> </div>
<ul id="file-list" class="file-list"> <ul id="file-list" class="file-list">
@ -49,14 +59,12 @@
<footer> <footer>
<div class="container"> <div class="container">
<small> <small>
<a href="https://github.com/mohamnag/nginx-file-browser">nginx file browser</a> by <a href="https://github.com/mohamnag/nginx-file-browser">nginx file browser</a>
<a href="http://naghavi.me">Mohammad Naghavi</a>
</small> </small>
<small> <small>
icons by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a icons by <a href="http://www.freepik.com" title="Freepik">Freepik</a>
href="http://www.flaticon.com" from <a href="http://www.flaticon.com" title="Flaticon">flaticon.com</a>
title="Flaticon">flaticon.com</a>
</small> </small>
</div> </div>
</footer> </footer>

View file

@ -6,19 +6,24 @@
* * NOTICE: * * NOTICE:
* If your nginx config varies from the default config * If your nginx config varies from the default config
* provided in this code, you probably need to change * provided in this code, you probably need to change
* value of filesBaseUrl on top of this module too. * value of filesBaseUrl here too.
* *
* Created by mohamnag on 11/02/16. * Created by mohamnag on 11/02/16.
*/ */
$(document).ready(function () { $(document).ready(function () {
var filesBaseUrl = "/files"; function applyTheme() {
var theme = $('input[name=theme]:checked').val()
var fileListElement = $("#file-list"); console.log(`setting theme to '${theme}'`)
var fileItemElementTemplate = fileListElement.find("li").detach();
$('body')
.removeClass()
.addClass(theme)
localStorage.setItem("theme", theme)
}
function renderFileElement(directory, fileName, fileType, fileSize, fileDate) { function renderFileElement(directory, fileName, fileType, fileSize, fileDate) {
@ -203,14 +208,26 @@ $(document).ready(function () {
} }
var isNavigating = false;
function navigateToUrlLocation() { function navigateToUrlLocation() {
var requestedPath = window.location.hash; var requestedPath = window.location.hash;
var startPath = requestedPath ? requestedPath.substr(1) : "/"; var startPath = requestedPath ? requestedPath.substr(1) : "/";
navigateTo(startPath); navigateTo(startPath);
} }
var filesBaseUrl = "/files";
var isNavigating = false;
var fileListElement = $("#file-list");
var fileItemElementTemplate = fileListElement.find("li").detach();
// setup theme switching
$('input[name=theme]').on("change", applyTheme);
// apply current theme
var theme = localStorage.getItem("theme")
console.log(`theme '${theme}' loaded`)
$(`input[name=theme][value='${theme}']`).prop('checked', true)
applyTheme()
window.onpopstate = function () { window.onpopstate = function () {
if (!isNavigating) { if (!isNavigating) {
navigateToUrlLocation(); navigateToUrlLocation();