progresses on #5

assets/binary.go

@@ -8,6 +8,7 @@
 // assets/public/js/form2js.js
 // assets/templates/actions.tmpl
 // assets/templates/base.tmpl
+// assets/templates/buttons.tmpl
 // assets/templates/editor.tmpl
 // assets/templates/frontmatter.tmpl
 // assets/templates/listing.tmpl
@@ -183,6 +184,24 @@ func templatesBaseTmpl() (*asset, error) {
 	return a, err
 }
 
+// templatesButtonsTmpl reads file data from disk. It returns an error on failure.
+func templatesButtonsTmpl() (*asset, error) {
+	path := "D:\\Code\\Go\\src\\github.com\\hacdias\\caddy-filemanager\\assets\\templates\\buttons.tmpl"
+	name := "templates/buttons.tmpl"
+	bytes, err := bindataRead(path, name)
+	if err != nil {
+		return nil, err
+	}
+
+	fi, err := os.Stat(path)
+	if err != nil {
+		err = fmt.Errorf("Error reading asset info %s at %s: %v", name, path, err)
+	}
+
+	a := &asset{bytes: bytes, info: fi}
+	return a, err
+}
+
 // templatesEditorTmpl reads file data from disk. It returns an error on failure.
 func templatesEditorTmpl() (*asset, error) {
 	path := "D:\\Code\\Go\\src\\github.com\\hacdias\\caddy-filemanager\\assets\\templates\\editor.tmpl"
@@ -333,6 +352,7 @@ var _bindata = map[string]func() (*asset, error){
 	"public/js/form2js.js": publicJsForm2jsJs,
 	"templates/actions.tmpl": templatesActionsTmpl,
 	"templates/base.tmpl": templatesBaseTmpl,
+	"templates/buttons.tmpl": templatesButtonsTmpl,
 	"templates/editor.tmpl": templatesEditorTmpl,
 	"templates/frontmatter.tmpl": templatesFrontmatterTmpl,
 	"templates/listing.tmpl": templatesListingTmpl,
@@ -395,6 +415,7 @@ var _bintree = &bintree{nil, map[string]*bintree{
 	"templates": &bintree{nil, map[string]*bintree{
 		"actions.tmpl": &bintree{templatesActionsTmpl, map[string]*bintree{}},
 		"base.tmpl": &bintree{templatesBaseTmpl, map[string]*bintree{}},
+		"buttons.tmpl": &bintree{templatesButtonsTmpl, map[string]*bintree{}},
 		"editor.tmpl": &bintree{templatesEditorTmpl, map[string]*bintree{}},
 		"frontmatter.tmpl": &bintree{templatesFrontmatterTmpl, map[string]*bintree{}},
 		"listing.tmpl": &bintree{templatesListingTmpl, map[string]*bintree{}},

assets/public/css/styles.css

@@ -489,7 +489,7 @@ header p i {
  vertical-align: middle;
 }
 
-header #search {
+#search {
  position: relative;
  display: inline-block;
  height: 100%;
@@ -501,29 +501,29 @@ header #search {
  transition: .1s ease all;
 }
 
-header #search.active {
+#search.active {
  background-color: #fff;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12);
 }
 
-header #search.active i,
+#search.active i,
-header #search.active input {
+#search.active input {
  color: #212121;
 }
 
-header #search i,
+#search i,
-header #search input {
+#search input {
  vertical-align: middle;
 }
 
-header #search i {
+#search i {
  margin-right: 0.3em;
  color: rgba(255, 255, 255, .5);
 }
 
-header #search input {
+#search input {
  min-width: 20em;
  border: 0;
  outline: 0;
@@ -531,13 +531,13 @@ header #search input {
  background-color: transparent;
 }
 
-header #search.active div {
+#search.active div {
  visibility: visible;
  opacity: 1;
  top: 100%;
 }
 
-header #search div {
+#search div {
  position: absolute;
  top: 0;
  width: 100%;
@@ -555,30 +555,31 @@ header #search div {
  opacity: 0;
 }
 
-header #search.active div i {
+#search.active div i,
+#sidebar #search.active div i {
  color: #ccc;
  display: block;
  text-align: center;
 }
 
-header #search::-webkit-input-placeholder {
+#search::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: rgba(255, 255, 255, .5);
 }
 
-header #search:-moz-placeholder {
+#search:-moz-placeholder {
  opacity: 1;
  /* Mozilla Firefox 4 to 18 */
  color: rgba(255, 255, 255, .5);
 }
 
-header #search::-moz-placeholder {
+#search::-moz-placeholder {
  opacity: 1;
  /* Mozilla Firefox 19+ */
  color: rgba(255, 255, 255, .5);
 }
 
-header #search:-ms-input-placeholder {
+#search:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: rgba(255, 255, 255, .5);
 }
@@ -611,6 +612,10 @@ header p {
  vertical-align: middle;
 }
 
+header #open-nav {
+ display: none;
+}
+
 #toolbar p a,
 #toolbar p a:hover,
 header p a,
@@ -664,6 +669,10 @@ header div:nth-child(2) {
  background-color: rgba(0, 0, 0, .1);
 }
 
+header .action span {
+ display: none;
+}
+
 .floating {
  position: fixed;
  bottom: 1em;
@@ -701,6 +710,9 @@ header div:nth-child(2) {
 }
 
 
+/* SIDEBAR */
+
+
 /* LISTING */
 
 #listing {
@@ -970,8 +982,73 @@ i.spin {
 }
 
 @media screen and (max-width: 1024px) {
-    header p a:first-of-type,
+ header #prev {
-    header p i:first-of-type {
   display: none;
  }
+ header #open-nav {
+  display: inline-block;
+ }
+ /* SIDEBAR */
+ header> div:nth-child(2) {
+  position: fixed;
+  top: 0;
+  z-index: 999999;
+  background-color: #fff;
+  height: 100%;
+  width: 95%;
+  max-width: 20em;
+  text-align: left;
+  color: #212121;
+  left: -100%;
+  transition: .2s ease-in-out all;
+ }
+ header> div:nth-child(2).active {
+     left: 0;
+ }
+ header #search {
+  height: auto;
+  background-color: transparent;
+  color: #212121;
+  padding: 0;
+  border-bottom: 1px solid #eee;
+  border-radius: 0;
+  display: block;
+ }
+ header #search input {
+  color: #212121;
+  display: inline-block;
+  width: auto;
+  min-width: 0;
+ }
+ header #search i {
+  color: #212121;
+  display: inline-block;
+  padding: .5em;
+  margin: 0;
+ }
+ header> div:nth-child(2)> div {
+  display: block;
+ }
+ header> div:nth-child(2) .action {
+  border-radius: 0 !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  text-align: left;
+  background-color: transparent !important;
+ }
+ header> div:nth-child(2) .action:hover {
+  background-color: rgba(0, 0, 0, .1);
+ }
+ header> div:nth-child(2) .action:hover i {
+  background-color: transparent;
+ }
+ header> div:nth-child(2) .action i {
+  border-radius: 0;
+ }
+ header> div:nth-child(2) .action span {}
+ header> div:nth-child(2) .action i,
+ header> div:nth-child(2) .action span {
+  vertical-align: middle;
+  display: inline-block;
+ }
 }

assets/public/js/application.js

@@ -357,11 +357,11 @@ var handleViewType = function(viewList) {
 
     if (viewList == "true") {
         listing.classList.add('list');
-        button.innerHTML = '<i class="material-icons">view_module</i>';
+        button.innerHTML = '<i class="material-icons">view_module</i> <span>Switch view</span>';
         return false;
     }
 
-    button.innerHTML = '<i class="material-icons">view_list</i>';
+    button.innerHTML = '<i class="material-icons">view_list</i> <span>Switch view</span>';
     listing.classList.remove('list');
     return false;
 }
@@ -766,6 +766,7 @@ document.addEventListener("editor", (event) => {
  *           BOOTSTRAP         *
  *                             *
  * * * * * * * * * * * * * * * */
+
 document.addEventListener("DOMContentLoaded", function(event) {
     // Add event to logout button
     document.getElementById("logout").addEventListener("click", event => {
@@ -783,6 +784,9 @@ document.addEventListener("DOMContentLoaded", function(event) {
     document.getElementById("open").addEventListener("click", openEvent);
     document.getElementById("delete").addEventListener("click", deleteEvent);
     document.getElementById("download").addEventListener("click", downloadEvent);
+    document.getElementById("open-nav").addEventListener("click", event => {
+        let sidebar = document.querySelector("header > div:nth-child(2)").classList.toggle("active");
+    });
 
     if (document.getElementById('listing')) {
         document.sendCostumEvent('listing');

assets/templates/base.tmpl

@@ -27,6 +27,10 @@
      </a>
     {{ end }}
 
+    <div class="action" id="open-nav">
+        <i class="material-icons">menu</i>
+    </div>
+
     <p>
      <a href="{{ if eq .Config.BaseURL "" }}/{{ else }}{{ .Config.BaseURL }}{{ end }}">
       {{ if .Config.HugoEnabled }}Hugo{{ else }}File Manager{{ end }}
@@ -38,27 +42,7 @@
    </div>
 
    <div>
-    {{ if .IsDir}}
+       {{ template "buttons" . }}
-
-    <div id="search">
-        <i class="material-icons">storage</i>
-        <input type="text" placeholder="Execute a command...">
-        <div>Write your git, mercurial or svn command and press enter.</div>
-    </div>
-
-     <div class="action" id="view">
-      <i class="material-icons">view_headline</i>
-     </div>
-     <div class="action" id="upload">
-      <i class="material-icons">file_upload</i>
-     </div>
-     {{ else }}
-     {{ template "actions" . }}
-    {{ end }}
-
-    <div class="action" id="logout">
-     <i class="material-icons">exit_to_app</i>
-    </div>
    </div>
   </header>
 

assets/templates/buttons.tmpl

@@ -0,0 +1,23 @@
+{{ define "buttons" }}
+{{ if .IsDir}}
+
+<div id="search">
+    <i class="material-icons">storage</i>
+    <input type="text" placeholder="Execute a command...">
+    <div>Write your git, mercurial or svn command and press enter.</div>
+</div>
+
+ <div class="action" id="view">
+  <i class="material-icons">view_headline</i> <span>Switch view</span>
+ </div>
+ <div class="action" id="upload">
+  <i class="material-icons">file_upload</i> <span>Upload</span>
+ </div>
+ {{ else }}
+ {{ template "actions" . }}
+{{ end }}
+
+<div class="action" id="logout">
+ <i class="material-icons">exit_to_app</i> <span>Logout</span>
+</div>
+{{ end }}

page/page.go

@@ -82,7 +82,7 @@ func (p Page) PrintAsHTML(w http.ResponseWriter, templates ...string) (int, erro
 	if p.Minimal {
 		templates = append(templates, "actions", "minimal")
 	} else {
-		templates = append(templates, "actions", "base")
+		templates = append(templates, "buttons", "actions", "base")
 	}
 
 	var tpl *template.Template