view list/modules
Henrique Dias
parent
1641b287b6
commit
9d4f343375
|
|
@ -509,6 +509,7 @@ footer {
|
|||
font-size: .6em;
|
||||
text-align: center;
|
||||
color: grey;
|
||||
margin: 1em 0;
|
||||
}
|
||||
footer a,
|
||||
footer a:hover {
|
||||
|
|
@ -572,7 +573,7 @@ pre {
|
|||
/* HEADER */
|
||||
|
||||
header {
|
||||
background-color: #2196F3;
|
||||
background-color: #2196f3;
|
||||
padding: 1.7em 0;
|
||||
}
|
||||
header h1 {
|
||||
|
|
@ -588,7 +589,7 @@ header p {
|
|||
}
|
||||
header p i {
|
||||
font-size: 1em !important;
|
||||
color: rgba(0, 0, 0, 0.21);
|
||||
color: rgba(255, 255, 255, 0.31);
|
||||
}
|
||||
header p i {
|
||||
vertical-align: middle;
|
||||
|
|
@ -597,7 +598,7 @@ header form {
|
|||
display: inline-block;
|
||||
background-color: #1E88E5;
|
||||
padding: .75em;
|
||||
color: #212121;
|
||||
color: #fff;
|
||||
border-radius: .3em;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
|
|
@ -607,7 +608,7 @@ header form input, header form i {
|
|||
}
|
||||
header form i {
|
||||
margin-right: .3em;
|
||||
color: rgba(0, 0, 0, 0.5)
|
||||
color: rgba(255,255,255, 0.5)
|
||||
}
|
||||
header form input {
|
||||
border: 0;
|
||||
|
|
@ -617,21 +618,21 @@ header form input {
|
|||
}
|
||||
::-webkit-input-placeholder {
|
||||
/* WebKit, Blink, Edge */
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
color: rgba(255,255,255, 0.5);
|
||||
}
|
||||
:-moz-placeholder {
|
||||
/* Mozilla Firefox 4 to 18 */
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
color: rgba(255,255,255, 0.5);
|
||||
opacity: 1;
|
||||
}
|
||||
::-moz-placeholder {
|
||||
/* Mozilla Firefox 19+ */
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
color: rgba(255,255,255, 0.5);
|
||||
opacity: 1;
|
||||
}
|
||||
:-ms-input-placeholder {
|
||||
/* Internet Explorer 10-11 */
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
color: rgba(255,255,255, 0.5);
|
||||
}
|
||||
header, #toolbar {
|
||||
position: fixed;
|
||||
|
|
@ -640,6 +641,7 @@ header, #toolbar {
|
|||
left: 0;
|
||||
padding: .5em;
|
||||
display: flex;
|
||||
color: #fff;
|
||||
}
|
||||
#toolbar div, header div {
|
||||
flex-grow: 1;
|
||||
|
|
@ -696,6 +698,9 @@ header, #toolbar {
|
|||
justify-content: space-between;
|
||||
padding: 0 .5em;
|
||||
}
|
||||
#listing.list {
|
||||
flex-direction: column;
|
||||
}
|
||||
#listing .item {
|
||||
background-color: #fff;
|
||||
border-radius: .2em;
|
||||
|
|
@ -729,7 +734,10 @@ header, #toolbar {
|
|||
font-size: 4em;
|
||||
margin-right: .1em;
|
||||
}
|
||||
|
||||
.item a:hover,
|
||||
.item a {
|
||||
color: #6f6f6f;
|
||||
}
|
||||
/* ANIMATIONS */
|
||||
i.spin {
|
||||
animation: 1s spin linear infinite;
|
||||
|
|
|
|||
|
|
@ -9,39 +9,40 @@ Array.prototype.removeElement = function(element) {
|
|||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
var items = document.getElementsByClassName('item');
|
||||
Array.from(items).forEach(link => {
|
||||
link.addEventListener('click', function(event) {
|
||||
var url = link.getElementsByTagName('a')[0].getAttribute('href');
|
||||
if (selectedItems.indexOf(url) == -1) {
|
||||
link.classList.add('selected');
|
||||
selectedItems.push(url);
|
||||
} else {
|
||||
link.classList.remove('selected');
|
||||
selectedItems.removeElement(url);
|
||||
}
|
||||
var viewEvent = function(event) {
|
||||
var cookie = getCookie("view-list");
|
||||
var listing = document.getElementById("listing");
|
||||
|
||||
var event = new CustomEvent('changed-selected');
|
||||
document.dispatchEvent(event);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById("open").addEventListener("click", openEvent);
|
||||
if (document.getElementById("back")) {
|
||||
document.getElementById("back").addEventListener("click", backEvent)
|
||||
};
|
||||
document.getElementById("delete").addEventListener("click", deleteEvent);
|
||||
document.getElementById("download").addEventListener("click", downloadEvent);
|
||||
return false;
|
||||
});
|
||||
|
||||
var changeView = function(event) {
|
||||
if (cookie != "true") {
|
||||
document.cookie = "view-list=true";
|
||||
} else {
|
||||
document.cookie = "view-list=false";
|
||||
}
|
||||
|
||||
handleViewType(getCookie("view-list"));
|
||||
return false;
|
||||
}
|
||||
|
||||
var handleViewType = function(viewList) {
|
||||
var listing = document.getElementById("listing");
|
||||
var button = document.getElementById("view");
|
||||
|
||||
if (viewList == "true") {
|
||||
listing.classList.add("list");
|
||||
button.innerHTML = "<i class=\"material-icons\">view_module</i>";
|
||||
return false;
|
||||
}
|
||||
|
||||
button.innerHTML = "<i class=\"material-icons\">view_list</i>";
|
||||
listing.classList.remove("list");
|
||||
return false;
|
||||
}
|
||||
|
||||
var getCookie = function(name) {
|
||||
var re = new RegExp("(?:(?:^|.*;\\s*)" + name + "\\s*\\=\\s*([^;]*).*$)|^.*$");
|
||||
return document.cookie.replace(re, "$1");
|
||||
}
|
||||
|
||||
var changeToLoading = function(element) {
|
||||
var originalText = element.innerHTML;
|
||||
element.style.opacity = 0;
|
||||
|
|
@ -184,3 +185,35 @@ document.addEventListener("changed-selected", function(event) {
|
|||
toolbar.classList.remove("enabled");
|
||||
return false;
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
var items = document.getElementsByClassName('item');
|
||||
Array.from(items).forEach(link => {
|
||||
link.addEventListener('click', function(event) {
|
||||
var url = link.getElementsByTagName('a')[0].getAttribute('href');
|
||||
if (selectedItems.indexOf(url) == -1) {
|
||||
link.classList.add('selected');
|
||||
selectedItems.push(url);
|
||||
} else {
|
||||
link.classList.remove('selected');
|
||||
selectedItems.removeElement(url);
|
||||
}
|
||||
|
||||
var event = new CustomEvent('changed-selected');
|
||||
document.dispatchEvent(event);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById("open").addEventListener("click", openEvent);
|
||||
if (document.getElementById("back")) {
|
||||
document.getElementById("back").addEventListener("click", backEvent)
|
||||
};
|
||||
if (document.getElementById("view")) {
|
||||
handleViewType(getCookie("view-list"));
|
||||
document.getElementById("view").addEventListener("click", viewEvent)
|
||||
};
|
||||
document.getElementById("delete").addEventListener("click", deleteEvent);
|
||||
document.getElementById("download").addEventListener("click", downloadEvent);
|
||||
return false;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -13,13 +13,15 @@
|
|||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<span class="name">{{.Name}}</span>
|
||||
{{- if .IsDir}}
|
||||
<p data-order="-1">—</p>
|
||||
{{- else}}
|
||||
<p data-order="{{.Size}}">{{.HumanSize}}</p>
|
||||
{{- end}}
|
||||
<p class="hideable"><time datetime="{{.HumanModTime "2006-01-02T15:04:05Z"}}">{{.HumanModTime "01/02/2006 03:04:05 PM -07:00"}}</time></p>
|
||||
<a href="{{.URL}}">
|
||||
<span class="name">{{.Name}}</span>
|
||||
{{- if .IsDir}}
|
||||
<p data-order="-1">—</p>
|
||||
{{- else}}
|
||||
<p data-order="{{.Size}}">{{.HumanSize}}</p>
|
||||
{{- end}}
|
||||
<p class="hideable"><time datetime="{{.HumanModTime "2006-01-02T15:04:05Z"}}">{{.HumanModTime "01/02/2006 03:04:05 PM -07:00"}}</time></p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{{- end}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue