Sidebar and such

Former-commit-id: ebced026b182699c6917c7a45cf4c9820ab5c71d [formerly 52e269ffe5f2ea87b2cd066c26572318d0686143] [formerly ae3fabb0a62e226d36bceee980a937f0445e6d0e [formerly ad0368b745]]
Former-commit-id: b975208dd1a279fc4a4c2b988523385fccb9d517 [formerly 28205475b615611c29f3ba2fc447ba4c1290c25b]
Former-commit-id: 8fea88e559f2712d37a7c58261f50c376e1f0a56

_assets/css/styles.css

@@ -242,12 +242,16 @@ fieldset h3,
 .action {
   display: inline-block;
   cursor: pointer;
-  -webkit-transition: 0.2s ease all;
   transition: 0.2s ease all;
   border: 0;
   margin: 0;
   color: #546E7A;
   border-radius: 50%;
+  background: transparent;
+  padding: 0;
+  box-shadow: 0 0 0 0;
+  vertical-align: middle;
+  text-align: left;
 }
 
 .action.disabled {
@@ -262,7 +266,7 @@ fieldset h3,
   border-radius: 50%;
 }
 
-.action:hover i {
+.action:hover {
   background-color: rgba(0, 0, 0, .1);
 }
 
@@ -395,6 +399,30 @@ header>div div {
   display: block;
 }
 
+/* SIDEBAR */
+
+#sidebar {
+  position: fixed;
+  left: 0;
+  width: 20%;
+}
+#sidebar .action {
+  width: 100%;
+  display: block;
+  border-radius: 0;
+  font-size: 1.1em;
+  padding: .5em;
+}
+
+#sidebar .action > * {
+  vertical-align: middle;
+}
+
+main {
+  width: 78%;
+  margin-left: 20%;
+}
+
 
 /* * * * * * * * * * * * * * * *
  *            TOP BAR          *
@@ -791,9 +819,9 @@ header>div div {
 #listing.list .item {
   width: 100%;
   margin: 0;
-  border: 0;
+  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding: 1em;
+  border-top: 0;
 }
 
 #listing.list h2 {
@@ -840,13 +868,15 @@ header>div div {
 
 #listing.list .item.header {
   display: flex !important;
-  background: #fafafa;
+  background: #f8f8f8;
   position: fixed;
-  width: 100%;
+  width: 78%;
   top: 7.8em;
-  left: 0;
+  left: 20%;
   z-index: 999;
   padding: .85em;
+  border: 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 
 #listing.list .item.header>div:first-child {

_assets/templates/actions.tmpl

@@ -0,0 +1,91 @@
+{{ define "right-side-actions" }}
+    {{- if .IsDir }}
+    <a aria-label="Switch View" href="?display={{- if eq .Display "mosaic" }}list{{ else }}mosaic{{ end }}" class="action">
+        <i class="material-icons">{{- if eq .Display "mosaic" }}view_list{{ else }}view_module{{ end }}</i>
+        <span>Switch view</span>
+    </a>
+
+    <button aria-label="Select multiple" class="action mobile-only" id="multiple-selection-activate">
+        <i class="material-icons">check_circle</i>
+        <span>Select</span>
+    </button>
+    {{- end }}
+
+    {{- if and (.User.AllowNew) (.IsDir) }}
+    <button aria-label="Upload" title="Upload" class="action" id="upload">
+        <i class="material-icons">file_upload</i>
+        <span>Upload</span>
+    </button>
+    {{- end }}
+
+    {{- if and .User.AllowEdit (not .IsDir) }}
+    <button aria-label="Delete"  title="Delete" class="action" id="delete">
+        <i class="material-icons">delete</i>
+        <span>Delete</span>
+    </button>
+    {{- end }}
+
+    <button {{ if .IsDir }}data-dropdown{{ end }} aria-label="Download" title="Download" class="action" id="download">
+        {{- if not .IsDir}}<a href="?download=true">{{ end }}
+        <i class="material-icons">file_download</i><span>Download</span>
+        {{- if not .IsDir}}</a>{{ end }}
+
+        {{- if .IsDir }}
+        <ul class="dropdown" id="download-drop">
+            <a tabindex="0" aria-label="Download as Zip" data-format="zip" href="?download=zip"><li>zip</li></a>
+            <a tabindex="0" aria-label="Download as Tar" data-format="tar" href="?download=tar"><li>tar</li></a>
+            <a tabindex="0" aria-label="Download as TarGz" data-format="targz" href="?download=targz"><li>tar.gz</li></a>
+            <a tabindex="0" aria-label="Download as TarBz2" data-format="tarbz2" href="?download=tarbz2"><li>tar.bz2</li></a>
+            <a tabindex="0" aria-label="Download as TarXz" data-format="tarbz2" href="?download=tarxz"><li>tar.xz</li></a>
+        </ul>
+        {{- end }}
+    </button>
+
+    <button title="Info" aria-label="Info" class="action" id="info">
+        <i class="material-icons">info</i>
+        <span>Info</span>
+    </button>
+{{ end }}
+
+{{ define "left-side-actions" }}
+    {{- if and (not .IsDir) (.User.AllowEdit) }}
+    {{- if .Editor}}
+
+    {{- if eq .Data.Mode "markdown" }}
+    <button aria-label="Preview" class="action" id="preview" onclick="notImplemented(event);">
+        <i class="material-icons" title="Preview">remove_red_eye</i>
+    </button>
+    {{- end }}
+
+    {{- if eq .Data.Visual true }}
+    <button aria-label="Toggle edit source" class="action" id="edit-source">
+        <i class="material-icons" title="Toggle edit source">code</i>
+    </button>
+    {{- end }}
+
+    {{/* end if editor */}}
+    {{- end }}
+
+    <button aria-label="Save" class="action" id="save">
+        <i class="material-icons" title="Save">save</i>
+    </button>
+
+    {{/* end if not dir and AllowEdit */}}
+    {{- end }}
+
+    {{- if and .IsDir .User.AllowEdit }}
+    <button aria-label="Edit" class="action" id="rename">
+        <i class="material-icons" title="Edit">mode_edit</i>
+        <span>Rename</span>
+    </button>
+
+    <button aria-label="Move" class="action" id="move">
+        <i class="material-icons" title="Move">forward</i>
+        <span>Move file</span>
+    </button>
+
+    <button aria-label="Delete" class="action" id="delete">
+    <i class="material-icons" title="Delete">delete</i><span>Delete</span>
+    </button>
+    {{- end }}
+{{ end }}

_assets/templates/base.tmpl

@@ -62,101 +62,15 @@
             </div>
 
             <div class="actions{{ if .IsDir }} disabled{{ end }}" id="file-only">
-                {{- if and (not .IsDir) (.User.AllowEdit) }}
+              {{- template "left-side-actions" . -}}
-                {{- if .Editor}}
-
-                {{- if eq .Data.Mode "markdown" }}
-                <div tabindex="0" role="button" aria-label="Preview" class="action" id="preview" onclick="notImplemented(event);">
-                    <i class="material-icons" title="Preview">remove_red_eye</i>
-                </div>
-                {{- end }}
-
-                {{- if eq .Data.Visual true }}
-                <div tabindex="0" role="button" aria-label="Toggle edit source" class="action" id="edit-source">
-                    <i class="material-icons" title="Toggle edit source">code</i>
-                </div>
-                {{- end }}
-                {{- end }}
-
-                <div tabindex="0" role="button" aria-label="Save" class="action" id="save">
-                    <i class="material-icons" title="Save">save</i>
-                </div>
-                {{- end }}
-
-                {{- if and (.User.AllowEdit) (.IsDir) }}
-                <div tabindex="0" role="button" aria-label="Move" class="action" id="move">
-                    <i class="material-icons" title="Move">forward</i>
-                    <span>Move file</span>
-                </div>
-                {{- end }}
-
-                {{- if and .IsDir .User.AllowEdit }}
-                <div tabindex="0" role="button" aria-label="Edit" class="action" id="rename">
-                    <i class="material-icons" title="Edit">mode_edit</i>
-                </div>
-                {{- end }}
-
-                {{- if and .User.AllowEdit .IsDir }}
-                <div tabindex="0" role="button" aria-label="Delete" class="action" id="delete">
-                    <i class="material-icons" title="Delete">delete</i><span>Delete</span>
-                </div>
-                {{- end }}
             </div>
 
-            <div tabindex="0" role="button" aria-label="Moew" class="action mobile-only" id="more">
+            <button aria-label="More" class="action mobile-only" id="more">
                 <i class="material-icons">more_vert</i>
-            </div>
+            </button>
 
             <div class="actions" id="main-actions">
-                {{- if .IsDir }}
+                {{- template "right-side-actions" . -}}
-                <div role="button" class="action" id="view">
-                    {{- if eq .Display "mosaic" }}
-                        <a tabindex="0" aria-label="Switch to list" title="Switch View" href="?display=list">
-                            <i class="material-icons">view_list</i><span>Switch view</span>
-                        </a>
-                    {{- else }}
-                        <a tabindex="0" aria-label="Switch to Mosaic" title="Switch View" href="?display=mosaic">
-                            <i class="material-icons">view_module</i><span>Switch view</span>
-                        </a>
-                    {{- end }}
-                </div>
-
-                <div tabindex="0" role="button" aria-label="Select multiple" class="action mobile-only" id="multiple-selection-activate">
-                    <i class="material-icons">check_circle</i><span>Select</span>
-                </div>
-                {{- end }}
-
-                {{- if and (.User.AllowNew) (.IsDir) }}
-                <div tabindex="0" aria-label="Upload" role="button" class="action" id="upload">
-                    <i class="material-icons" title="Upload">file_upload</i><span>Upload</span>
-                </div>
-                {{- end }}
-
-                {{- if and .User.AllowEdit (not .IsDir) }}
-                <div tabindex="0" role="button" aria-label="Delete" class="action" id="delete">
-                    <i class="material-icons" title="Delete">delete</i><span>Delete</span>
-                </div>
-                {{- end }}
-
-                <div {{ if .IsDir }}data-dropdown{{ end }} tabindex="0" role="button" aria-label="Download" class="action" id="download">
-                    {{- if not .IsDir}}<a href="?download=true">{{ end }}
-                    <i class="material-icons" title="Download">file_download</i><span>Download</span>
-                    {{- if not .IsDir}}</a>{{ end }}
-
-                    {{- if .IsDir }}
-                    <ul class="dropdown" id="download-drop">
-                        <a tabindex="0" aria-label="Download as Zip" data-format="zip" href="?download=zip"><li>zip</li></a>
-                        <a tabindex="0" aria-label="Download as Tar" data-format="tar" href="?download=tar"><li>tar</li></a>
-                        <a tabindex="0" aria-label="Download as TarGz" data-format="targz" href="?download=targz"><li>tar.gz</li></a>
-                        <a tabindex="0" aria-label="Download as TarBz2" data-format="tarbz2" href="?download=tarbz2"><li>tar.bz2</li></a>
-                        <a tabindex="0" aria-label="Download as TarXz" data-format="tarbz2" href="?download=tarxz"><li>tar.xz</li></a>
-                    </ul>
-                    {{- end }}
-                </div>
-
-                <div tabindex="0" role="button" aria-label="Info" class="action" id="info">
-                    <i class="material-icons" title="Info">info</i><span>Info</span>
-                </div>
             </div>
         </div>
 
@@ -170,6 +84,13 @@
         </div>
     </div>
 
+    <nav id="sidebar">
+        <a class="action" href="{{ .BaseURL }}">
+            <i class="material-icons">folder</i>
+            <span>My Files</span>
+        </a>
+    </nav>
+
     <main>
         {{- template "content" . }}
     </main>

page.go

@@ -103,6 +103,7 @@ func (p page) PreviousLink() string {
 
 // PrintAsHTML formats the page in HTML and executes the template
 func (p page) PrintAsHTML(w http.ResponseWriter, m *FileManager, templates ...string) (int, error) {
+	templates = append(templates, "actions")
 	templates = append(templates, "templates")
 
 	if p.minimal {