diff --git a/_assets/css/styles.css b/_assets/css/styles.css
index eb1196a2..e921b8c2 100644
--- a/_assets/css/styles.css
+++ b/_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-bottom: 1px solid rgba(0, 0, 0, 0.1);
+ border: 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 {
diff --git a/_assets/templates/actions.tmpl b/_assets/templates/actions.tmpl
new file mode 100644
index 00000000..6bcecf1a
--- /dev/null
+++ b/_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 }}
\ No newline at end of file
diff --git a/_assets/templates/base.tmpl b/_assets/templates/base.tmpl
index daa9ef0d..fec41f43 100644
--- a/_assets/templates/base.tmpl
+++ b/_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) }}
- {{- 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 }}
+ {{- template "left-side-actions" . -}}
</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 }}
- <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>
+ {{- template "right-side-actions" . -}}
</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>
diff --git a/page.go b/page.go
index dec7a0a3..9324718d 100644
--- a/page.go
+++ b/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 {