update browse interface

This commit is contained in:
Henrique Dias 2016-02-06 16:33:54 +00:00
parent b98bf9fc85
commit 4779aeace9
3 changed files with 64 additions and 30 deletions

File diff suppressed because one or more lines are too long

View File

@ -42,6 +42,11 @@ h2 {
text-align: right; text-align: right;
} }
#content > header {
background-color: #EFEBEB;
padding: 1px 0;
}
/* NAVIGATION */ /* NAVIGATION */
@ -349,12 +354,8 @@ fieldset input {
text-decoration: none; text-decoration: none;
} }
.browse table {
width: 100%;
}
.browse .actions { .browse .actions {
background-color: #455a64; background-color: #90CAF9;
color: #fff; color: #fff;
padding: 1.5em 0; padding: 1.5em 0;
} }
@ -367,6 +368,21 @@ fieldset input {
display: flex; display: flex;
} }
.browse .actions .container > a,
.browse .actions .container > span {
line-height: 2em;
vertical-align: middle;
}
.browse .actions .container > a {
margin-right: 0.5em;
}
.browse .actions .container > span {
font-weight: bold;
font-size: 1.1em;
}
.browse .actions .fa { .browse .actions .fa {
vertical-align: middle; vertical-align: middle;
} }
@ -376,11 +392,32 @@ fieldset input {
position: relative; position: relative;
} }
.browse .go-right input[type="file"] {
display: none;
}
.browse table {
margin: 1em 0;
width: 100%;
}
.browse tr { .browse tr {
line-height: 2em; line-height: 2em;
border-bottom: 1px solid rgba(0, 0, 0, 0.03); border-bottom: 1px solid rgba(0, 0, 0, 0.03);
} }
.browse th.buttons {
width: 4em;
}
.browse tr button {
line-height: 1.5em;
border-radius: 50%;
width: 1.5em;
height: 1.5em;
padding: 0;
}
.browse #new-file { .browse #new-file {
display: none; display: none;
position: absolute; position: absolute;

View File

@ -1,16 +1,14 @@
{{ define "content" }}{{ $path := .Path }} {{ define "content" }}{{ $path := .Path }}
<div class="container">
<h1 id="site-title">Path: {{ $path }}</h1>
<main class="browse"> <main class="browse">
<div class="actions"> <div class="actions">
<div class="container"> <div class="container">
{{if .CanGoUp}}<a data-pjax href=".." class="up" title="Up one level"><i class="fa fa-arrow-left fa-lg"></i></a>{{end}} {{if .CanGoUp}}<a data-pjax href=".." class="up" title="Up one level"><i class="fa fa-arrow-left fa-lg"></i></a>{{end}}
<span id="site-title">Path: {{ $path }}</span>
<div class="go-right"> <div class="go-right">
<input type="file" value="Upload" multiple> <input type="file" value="Upload" multiple>
<button id="upload">Upload <i class="fa fa-cloud-upload"></i></button> <button id="upload">Upload <i class="fa fa-cloud-upload"></i></button>
<button class="default new">New &#43;</button> <button class="default new">New <i class="fa fa-plus"></i></button>
<div id="new-file"> <div id="new-file">
Write the name of the new file. If you want to use an archetype, add ':archetype' in the end, replacing 'archetype' by its name. Write the name of the new file. If you want to use an archetype, add ':archetype' in the end, replacing 'archetype' by its name.
<input id="new-file-name" type="text"> <input id="new-file-name" type="text">
@ -19,6 +17,7 @@
</div> </div>
</div> </div>
<div class="container">
<table> <table>
<tr> <tr>
<th class="left"> <th class="left">
@ -35,12 +34,11 @@
</th> </th>
<th class="hideable right"> <th class="hideable right">
{{if and (eq .Sort "time") (ne .Order "desc")}} {{if and (eq .Sort "time") (ne .Order "desc")}}
<a href="?sort=time&order=desc">Modified <i class="fa fa-arrow-up"></i></a> {{else if and (eq .Sort "time") (ne .Order "asc")}} <a data-pjax href="?sort=time&order=desc">Modified <i class="fa fa-arrow-up"></i></a> {{else if and (eq .Sort "time") (ne .Order "asc")}}
<a href="?sort=time&order=asc">Modified <i class="fa fa-arrow-down"></i></a> {{else}} <a data-pjax href="?sort=time&order=asc">Modified <i class="fa fa-arrow-down"></i></a> {{else}}
<a href="?sort=time&order=asc">Modified</a> {{end}} <a data-pjax href="?sort=time&order=asc">Modified</a> {{end}}
</th> </th>
<th class="right"></th> <th class="right buttons"></th>
<th class="right"></th>
</tr> </tr>
{{range .Items}} {{range .Items}}
<tr> <tr>
@ -52,11 +50,10 @@
</td> </td>
<td class="right hideable">{{.HumanSize}}</td> <td class="right hideable">{{.HumanSize}}</td>
<td class="right hideable">{{.HumanModTime "01/02/2006 3:04:05 PM"}}</td> <td class="right hideable">{{.HumanModTime "01/02/2006 3:04:05 PM"}}</td>
<td class="right"><button data-file="/admin/browse{{ $path }}{{.URL}}" data-message="File renamed." class="rename">&#9998;</button></td> <td class="right"><button data-file="/admin/browse{{ $path }}{{.URL}}" data-message="File renamed." class="rename">&#9998;</button> <button data-file="/admin/browse{{ $path }}{{.URL}}" data-message="File deleted." class="delete">&#10006;</button></td>
<td class="right"><button data-file="/admin/browse{{ $path }}{{.URL}}" data-message="File deleted." class="delete">&#10006;</button></td>
</tr> </tr>
{{end}} {{end}}
</table> </table>
</main>
</div> </div>
</main>
{{ end }} {{ end }}