diff --git a/_embed/public/css/styles.css b/_embed/public/css/styles.css
index d31a2579..68a29394 100644
--- a/_embed/public/css/styles.css
+++ b/_embed/public/css/styles.css
@@ -979,17 +979,14 @@ header .action span {
/* LISTING */
#listing {
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
padding: 0;
- -ms-flex-wrap: wrap;
flex-wrap: wrap;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
+ justify-content: flex-start;;
max-width: calc(100% - 2.2em);
width: 100%;
+ opacity: 0;
+ transition: .1s ease all;
}
#listing.list {
@@ -1005,62 +1002,30 @@ header .action span {
}
#listing .item {
- margin: 0 0 1em;
+ margin: .5em;
padding: 0.5em;
- cursor: pointer;
- -webkit-transition: 0.2s ease all;
- transition: 0.2s ease all;
- border: 0.2em solid #fff;
+ transition: 0.2s ease border;
border-radius: 0.2em;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12);
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
position: relative;
- width: calc(33% - .5em);
+ width: calc(33% - 1em);
display: flex;
flex-wrap: nowrap;
-}
-
-#listing .item:hover .checkbox {
- opacity: 1;
-}
-
-#listing .item .checkbox {
- position: absolute;
- top: -.9em;
- right: -.9em;
- border-radius: 50%;
- background: #fff;
- border: 0;
- -webkit-appearance: initial;
- box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12);
- line-height: 0;
- padding: .4em;
- transition: .2s ease all;
- opacity: 0;
-}
-
-#listing .checkbox i {
- font-size: 1em;
- margin: 0;
+ color: #6f6f6f;
}
.item:hover {
box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24) !important;
}
-.item.selected {
- border-color: #6f6f6f !important;
-}
-
-.item div {
- /* display: block; */
- /* vertical-align: middle; */
+.item[aria-selected=true] {
+ background: #2196f3 !important;
+ color: #fff !important;
}
.item div:first-of-type {
- width: 5vw;
+ width: 5em;
}
.item div:last-of-type {
@@ -1073,7 +1038,6 @@ header .action span {
.item p {
font-size: 0.9em;
margin: 0;
- color: #4e4e4e;
}
.item span {
@@ -1081,16 +1045,11 @@ header .action span {
}
.item i {
- font-size: 4vw;
+ font-size: 4em;
margin-right: 0.1em;
vertical-align: bottom;
}
-.item a,
-.item a:hover {
- color: #6f6f6f;
-}
-
/* ANIMATIONS */
diff --git a/_embed/public/js/application.js b/_embed/public/js/application.js
index 57f3bbf6..e090fa47 100644
--- a/_embed/public/js/application.js
+++ b/_embed/public/js/application.js
@@ -173,14 +173,10 @@ var reloadListing = function(callback) {
// Handle date times
let timeList = document.getElementsByTagName("time");
Array.from(timeList).forEach(localizeDatetime);
-
- // Add action to checkboxes
- let checkboxes = document.getElementsByClassName('checkbox');
- Array.from(checkboxes).forEach(link => {
- link.addEventListener('click', itemClickEvent);
- });
-
+
addNewDirEvents();
+
+ document.getElementById("listing").style.opacity = 1;
if (typeof callback == 'function') {
callback();
@@ -207,8 +203,6 @@ var renameEvent = function(event) {
let span = item.getElementsByTagName('span')[0];
let name = span.innerHTML;
- item.addEventListener('click', preventDefault);
- item.removeEventListener('click', itemClickEvent);
span.setAttribute('contenteditable', 'true');
span.focus();
@@ -252,8 +246,6 @@ var renameEvent = function(event) {
if (event.keyCode == 13 || event.keyCode == 27) {
span.setAttribute('contenteditable', 'false');
span.removeEventListener('keydown', keyDownEvent);
- item.removeEventListener('click', preventDefault);
- item.addEventListener('click', itemClickEvent);
event.preventDefault();
}
@@ -299,7 +291,7 @@ var handleFiles = function(files, base) {
var backEvent = function(event) {
var items = document.getElementsByClassName('item');
Array.from(items).forEach(link => {
- link.classList.remove('selected');
+ link.setAttribute("aria-selected", false);
});
selectedItems = [];
@@ -308,25 +300,6 @@ var backEvent = function(event) {
return false;
}
-// Handles the click event
-var itemClickEvent = function(event) {
- var url = this.dataset.href;
- var el = document.getElementById(url);
-
- if (selectedItems.length != 0) event.preventDefault();
- if (selectedItems.indexOf(url) == -1) {
- el.classList.add('selected');
- selectedItems.push(url);
- } else {
- el.classList.remove('selected');
- selectedItems.removeElement(url);
- }
-
- var event = new CustomEvent('changed-selected');
- document.dispatchEvent(event);
- return false;
-}
-
// Handles the datetimes present on the document
var localizeDatetime = function(e, index, ar) {
if (e.textContent === undefined) {
@@ -540,12 +513,6 @@ document.addEventListener('listing', event => {
handleViewType(document.getCookie("view-list"));
document.getElementById("view").addEventListener("click", viewEvent);
- // Add event to items
- let checkboxes = document.getElementsByClassName('checkbox');
- Array.from(checkboxes).forEach(link => {
- link.addEventListener('click', itemClickEvent);
- });
-
// Add event to back button and executes back event on ESC
document.getElementById("back").addEventListener("click", backEvent)
document.addEventListener('keydown', (event) => {
@@ -712,6 +679,29 @@ function itemDrop(e) {
}
+function openItem(event) {
+ window.location = event.currentTarget.dataset.url;
+}
+
+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);
+ selectedItems.push(url);
+ } else {
+ el.setAttribute("aria-selected", false);
+ selectedItems.removeElement(url);
+ }
+
+ var event = new CustomEvent('changed-selected');
+ document.dispatchEvent(event);
+ return false;
+}
+
+
/* * * * * * * * * * * * * * * *
* *
* EDITOR SPECIFIC FUNCTIONS *
@@ -1019,4 +1009,36 @@ document.addEventListener("DOMContentLoaded", function(event) {
}
return false;
-});
\ No newline at end of file
+});
+
+
+(function() {
+ 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);
+ var itens = getCSSRule('#listing .item');
+ itens.style.width = `calc(${100/columns}% - 1em)`;
+});
+
+
+function getCSSRule(ruleName) {
+ ruleName = ruleName.toLowerCase();
+ var result = null;
+ var find = Array.prototype.find;
+
+ find.call(document.styleSheets, styleSheet => {
+ result = find.call(styleSheet.cssRules, cssRule => {
+ return cssRule instanceof CSSStyleRule
+ && cssRule.selectorText.toLowerCase() == ruleName;
+ });
+ return result != null;
+ });
+ return result;
+}
\ No newline at end of file
diff --git a/_embed/templates/base.tmpl b/_embed/templates/base.tmpl
index 358239c3..525942f9 100644
--- a/_embed/templates/base.tmpl
+++ b/_embed/templates/base.tmpl
@@ -9,6 +9,13 @@
{{ if ne .User.StyleSheet "" }}
{{ end }}
+
+
+
+
+
+
+
@@ -109,12 +116,6 @@
-
-
-
-
-
-
- {{ if .Config.HugoEnabled }}{{ end }}
+