diff --git a/index.html b/index.html
index e16a877..21e5a20 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,7 @@
+
-
-
-
-
+
+
-
+
-
+
+
+
+
+
+
-
+
-
- ∽
+
+ ∽
-
+
-
+
diff --git a/resources/css/base.css b/resources/css/base.css
index f9409f0..84d502f 100644
--- a/resources/css/base.css
+++ b/resources/css/base.css
@@ -1,6 +1,7 @@
html {
margin: 0em;
padding: 0em;
+ /* overflow-x: hidden; */
}
ol, ul, li {
diff --git a/resources/css/main.css b/resources/css/main.css
index 26ec4c1..ec9594d 100644
--- a/resources/css/main.css
+++ b/resources/css/main.css
@@ -14,6 +14,7 @@
height: 100%;
z-index: -999;
}
+
#bg img {
position: absolute;
top: 0;
@@ -25,7 +26,7 @@
z-index: -999;
}
-#controls, #fullPathHeader, #dynDiv,
+#controls, #fullPathHeader, #dynUl,
.errorStyling, .dirStyle, .movieStyle, .fileStyle {
display: block;
width: 100%;
@@ -69,7 +70,16 @@
#controls { top: 0em; }
#fullPathHeader { top: 2em; }
-#dynDiv { margin-top: 5em; }
+
+#dynUl {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(15em, auto));
+ grid-column-gap: 1em;
+ grid-row-gap: 1em;
+ margin: 5em auto;
+ width: 85%;
+ padding: 2em;
+}
#imgView, #imgArea, #fileView {
width: 800px;
@@ -159,22 +169,15 @@
.movieStyle, .fileStyle { background-color: rgba(101, 101, 101, 0.56); }
.movieStyle {
- position: relative;
- float: left;
- width: 15em;
- height: 8.5em;
+ min-height: 6.5em;
overflow: hidden;
- margin: 0.5em;
- padding: 0.5em;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.videoInputField {
- position: absolute;
width: 100%;
- bottom: 0.64em;
- left: 0em;
+ margin-top: 5.5em;
background-color: rgba(0, 0, 0, 0.64);
color: rgb(255, 255, 255);
text-align: center;
diff --git a/resources/js/ajax.js b/resources/js/ajax.js
index b653bbe..49a3bb9 100644
--- a/resources/js/ajax.js
+++ b/resources/js/ajax.js
@@ -23,7 +23,7 @@ const doAjax = async (actionPath, data) => {
if (this.responseText != null) {
handleJSONReturnData(JSON.parse(this.responseText));
} else {
- document.getElementById('dynDiv').innerHTML =
+ document.getElementById('dynUl').innerHTML =
" "
+ "No content returned. Check the folder path.
";
}
diff --git a/resources/js/jsonParser.js b/resources/js/jsonParser.js
index 1e17db7..6fbbedc 100644
--- a/resources/js/jsonParser.js
+++ b/resources/js/jsonParser.js
@@ -1,4 +1,4 @@
-const insertArea = document.getElementById('dynDiv');
+const insertArea = document.getElementById('dynUl');
const handleJSONReturnData = (data) => {
@@ -130,7 +130,7 @@ const createElmBlock = (elm, imgSrc, fileName, isVideo = null, path = null) => {
contnrTag.style = "background-image: url('/resources/images/thumbnails/" + imgSrc + "')";
inputTag.className = "videoInputField";
let fullMedia = path + fileName;
- elm.querySelector("div").addEventListener("click", function (eve) {
+ elm.querySelector("span").addEventListener("click", function (eve) {
openInLocalProg(fullMedia);
});
} else {
diff --git a/resources/js/uiActions.js b/resources/js/uiActions.js
index bbd101c..1a07580 100644
--- a/resources/js/uiActions.js
+++ b/resources/js/uiActions.js
@@ -11,7 +11,7 @@ const tgglElmView = (id) => {
const searchPage = (elm) => {
let query = elm.value.toLowerCase();
- let list = document.getElementById("dynDiv").querySelectorAll("[title]");
+ let list = document.getElementById("dynUl").querySelectorAll("[title]");
let size = list.length;
for (var i = 0; i < size; i++) {
@@ -24,7 +24,7 @@ const searchPage = (elm) => {
}
const clearSearch = () => {
- let list = document.getElementById("dynDiv").querySelectorAll("[title]");
+ let list = document.getElementById("dynUl").querySelectorAll("[title]");
let size = list.length;
for (var i = 0; i < size; i++) {