Merge pull request #6 from mohamnag/gruvbox-theme

adding dark theme

.gitignore

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

.idea/modules.xml

@@ -3,6 +3,7 @@
   <component name="ProjectModuleManager">
     <modules>
       <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>
   </component>
 </project>

Dockerfile

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

README.md

@@ -3,7 +3,8 @@
 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).
 
-![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
 

css/main.css

@@ -7,15 +7,19 @@ a {
     text-decoration: none;
 }
 
-.list-sort {
+.controls {
     background: #ddd;
     border-radius: 1rem;
     padding: 1.5rem 2rem .5rem;
 }
 
-.list-sort label {
+.controls span:not(:first-of-type) {
+    padding-left: 4rem;
+}
+
+.controls label {
     display: inline-block;
-    margin: 0 1rem 0 0;
+    margin: 0 0 0 .5rem;
 }
 
 .file-list {
@@ -104,3 +108,43 @@ footer {
 footer small + small {
     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;
+}

index.html

@@ -20,8 +20,8 @@
 <div class="container">
     <h1>File Browser</h1>
 
-    <div class="list-sort">
+    <div class="controls">
-        <span>sort list by</span>
+        <span>sort list by:</span>
         <label>
             date
             <input type="radio" name="sort" value="date" checked>
@@ -34,6 +34,16 @@
             size
             <input type="radio" name="sort" value="size">
         </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>
 
     <ul id="file-list" class="file-list">
@@ -49,14 +59,12 @@
 <footer>
     <div class="container">
         <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>
-            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>
     </div>
 </footer>

js/main.js

@@ -6,19 +6,24 @@
  * * NOTICE:
  *      If your nginx config varies from the default config
  *      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.
  */
 
-
-
 $(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) {
 
@@ -203,14 +208,26 @@ $(document).ready(function () {
 
     }
 
-    var isNavigating = false;
-
     function navigateToUrlLocation() {
         var requestedPath = window.location.hash;
         var startPath = requestedPath ? requestedPath.substr(1) : "/";
         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 () {
         if (!isNavigating) {
             navigateToUrlLocation();