style updates

pull/144/head
Henrique Dias 2016-12-29 18:36:53 +00:00
parent c6bcc3ad64
commit 23115e50db
3 changed files with 44 additions and 53 deletions

View File

@ -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 {

View File

@ -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;
});

View File

@ -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>