style updates
parent
c6bcc3ad64
commit
23115e50db
|
@ -604,7 +604,7 @@ pre {
|
|||
header {
|
||||
z-index: 999;
|
||||
padding: 1.7em 0;
|
||||
background-color: #2196f3;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.075);
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
@ -632,7 +632,7 @@ header p i {
|
|||
}
|
||||
|
||||
header #logout {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 0;
|
||||
margin: -0.5em -0.5em -0.5em 0;
|
||||
padding: .5em;
|
||||
|
@ -648,9 +648,8 @@ header p i {
|
|||
height: 100%;
|
||||
padding: 0.75em;
|
||||
vertical-align: middle;
|
||||
color: #fff;
|
||||
border-radius: 0.3em;
|
||||
background-color: #1e88e5;
|
||||
background-color: #f5f5f5;
|
||||
transition: .1s ease all;
|
||||
}
|
||||
|
||||
|
@ -673,7 +672,7 @@ header p i {
|
|||
|
||||
#search i {
|
||||
margin-right: 0.3em;
|
||||
color: rgba(255, 255, 255, .5);
|
||||
/* color: rgba(255, 255, 255, .5); */
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
@ -681,7 +680,7 @@ header p i {
|
|||
min-width: 20em;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
color: rgba(255, 255, 255, 0.72);
|
||||
/* color: rgba(255, 255, 255, 0.72); */
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
@ -782,7 +781,6 @@ header {
|
|||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0.5em;
|
||||
color: #fff;
|
||||
max-height: 4em;
|
||||
}
|
||||
|
||||
|
@ -820,7 +818,7 @@ header p a:hover {
|
|||
transition: 0.2s ease-in-out all;
|
||||
opacity: 0;
|
||||
color: #fff;
|
||||
background-color: #6f6f6f;
|
||||
background-color: #2196f3;
|
||||
}
|
||||
|
||||
#toolbar.enabled {
|
||||
|
@ -982,7 +980,7 @@ header .action span {
|
|||
display: flex;
|
||||
padding: 0;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;;
|
||||
justify-content: flex-start;
|
||||
max-width: calc(100% - 2.2em);
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
|
@ -990,15 +988,20 @@ header .action span {
|
|||
}
|
||||
|
||||
#listing.list {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
margin-top: -1em;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#listing.list .item {
|
||||
width: 100%;
|
||||
margin: 0 0 1em;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
#listing .item {
|
||||
|
@ -1051,6 +1054,18 @@ header .action span {
|
|||
}
|
||||
|
||||
|
||||
#listing.list .item div:first-of-type {
|
||||
width: 3em;
|
||||
}
|
||||
|
||||
#listing.list .item div:first-of-type i {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
#listing.list .item div:last-of-type {
|
||||
width: calc(100% - 3em);
|
||||
}
|
||||
|
||||
/* ANIMATIONS */
|
||||
|
||||
i.spin {
|
||||
|
|
|
@ -170,14 +170,9 @@ var reloadListing = function(callback) {
|
|||
if (request.readyState == 4) {
|
||||
if (request.status == 200) {
|
||||
document.querySelector('body main').innerHTML = request.responseText;
|
||||
// Handle date times
|
||||
let timeList = document.getElementsByTagName("time");
|
||||
Array.from(timeList).forEach(localizeDatetime);
|
||||
|
||||
addNewDirEvents();
|
||||
|
||||
document.getElementById("listing").style.opacity = 1;
|
||||
|
||||
|
||||
if (typeof callback == 'function') {
|
||||
callback();
|
||||
}
|
||||
|
@ -300,21 +295,6 @@ var backEvent = function(event) {
|
|||
return false;
|
||||
}
|
||||
|
||||
// Handles the datetimes present on the document
|
||||
var localizeDatetime = function(e, index, ar) {
|
||||
if (e.textContent === undefined) {
|
||||
return;
|
||||
}
|
||||
var d = new Date(e.getAttribute('datetime'));
|
||||
if (isNaN(d)) {
|
||||
d = new Date(e.textContent);
|
||||
if (isNaN(d)) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
e.textContent = d.toLocaleString();
|
||||
}
|
||||
|
||||
// Toggles the view mode
|
||||
var viewEvent = function(event) {
|
||||
let cookie = document.getCookie('view-list');
|
||||
|
@ -505,10 +485,6 @@ var searchEvent = function(event) {
|
|||
}
|
||||
|
||||
document.addEventListener('listing', event => {
|
||||
// Handle date times
|
||||
let timeList = document.getElementsByTagName("time");
|
||||
Array.from(timeList).forEach(localizeDatetime);
|
||||
|
||||
// Handles the current view mode and adds the event to the button
|
||||
handleViewType(document.getCookie("view-list"));
|
||||
document.getElementById("view").addEventListener("click", viewEvent);
|
||||
|
@ -686,7 +662,7 @@ function openItem(event) {
|
|||
function selectItem(event) {
|
||||
let el = event.currentTarget,
|
||||
url = el.dataset.url;
|
||||
|
||||
|
||||
if (selectedItems.length != 0) event.preventDefault();
|
||||
if (selectedItems.indexOf(url) == -1) {
|
||||
el.setAttribute("aria-selected", true);
|
||||
|
@ -1013,16 +989,16 @@ document.addEventListener("DOMContentLoaded", function(event) {
|
|||
|
||||
|
||||
(function() {
|
||||
let columns = Math.floor(document.getElementById('listing').offsetWidth / 300);
|
||||
let columns = Math.floor(document.getElementById('listing').offsetWidth / 300);
|
||||
var header = getCSSRule('#listing .item');
|
||||
header.style.width = `calc(${100/columns}% - 1em)`;
|
||||
|
||||
|
||||
document.getElementById("listing").style.opacity = 1;
|
||||
}());
|
||||
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
let columns = Math.floor(document.getElementById('listing').offsetWidth / 300);
|
||||
let columns = Math.floor(document.getElementById('listing').offsetWidth / 300);
|
||||
var itens = getCSSRule('#listing .item');
|
||||
itens.style.width = `calc(${100/columns}% - 1em)`;
|
||||
});
|
||||
|
@ -1035,8 +1011,8 @@ function getCSSRule(ruleName) {
|
|||
|
||||
find.call(document.styleSheets, styleSheet => {
|
||||
result = find.call(styleSheet.cssRules, cssRule => {
|
||||
return cssRule instanceof CSSStyleRule
|
||||
&& cssRule.selectorText.toLowerCase() == ruleName;
|
||||
return cssRule instanceof CSSStyleRule &&
|
||||
cssRule.selectorText.toLowerCase() == ruleName;
|
||||
});
|
||||
return result != null;
|
||||
});
|
||||
|
|
|
@ -5,14 +5,14 @@
|
|||
{{- range .Items}}
|
||||
{{ if .UserAllowed }}
|
||||
<div ondragstart="itemDragStart(event)"
|
||||
{{ if .IsDir}}ondragover="itemDragOver(event)" ondrop="itemDrop(event)"{{ end }}
|
||||
draggable="true"
|
||||
class="item"
|
||||
onclick="selectItem(event)"
|
||||
ondblclick="openItem(event)"
|
||||
data-dir="{{ .IsDir }}"
|
||||
data-url="{{ .URL }}"
|
||||
id="{{.URL}}">
|
||||
{{ if .IsDir}}ondragover="itemDragOver(event)" ondrop="itemDrop(event)"{{ end }}
|
||||
draggable="true"
|
||||
class="item"
|
||||
onclick="selectItem(event)"
|
||||
ondblclick="openItem(event)"
|
||||
data-dir="{{ .IsDir }}"
|
||||
data-url="{{ .URL }}"
|
||||
id="{{.URL}}">
|
||||
<div>
|
||||
{{- if .IsDir}}
|
||||
<i class="material-icons">folder</i>
|
||||
|
@ -28,7 +28,7 @@
|
|||
<p data-order="{{.Size}}">{{.HumanSize}}</p>
|
||||
{{- end}}
|
||||
<p>
|
||||
<time datetime="{{.HumanModTime " 2006-01-02T15:04:05Z"}}">{{.HumanModTime "01/02/2006 03:04:05 PM -07:00"}}</time>
|
||||
<time datetime="{{.HumanModTime "2006-01-02T15:04:05Z"}}">{{.HumanModTime "2 Jan 2006 03:04 PM"}}</time>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue