Fixed gridd layout and changed html a bit

index.html

@@ -11,6 +11,7 @@
     <!-- Background -->
     <img id="bg" />
 
+    <!-- Controls -->
     <!-- Create the menu -->
     <menu type="context" id="menu">
         <menuitem label="Home Directory" onclick="clearDirCookie()"></menuitem>
@@ -36,54 +37,55 @@
         Path:<span id="path"></span>
     </h2>
 
-    <!-- Dynamic content targets -->
-    <ul id="favesList" style="display: none;"> </ul>
-    <div id="dynDiv"></div>
-
     <div id="popOutControls" style="display:none;">
         <center>
-        <form>
+            <form>
-            <input class="ulFile" type="file" title="files To Upload" name="filesToUpload[]" data-multiple-caption="{count} files selected" multiple />
+                <input class="ulFile" type="file" title="files To Upload" name="filesToUpload[]" data-multiple-caption="{count} files selected" multiple />
-            <input type="button" onclick="uploadFiles()" name="UploadFiles" title="Upload File(s)" value="Upload File(s)" />
+                <input type="button" onclick="uploadFiles()" name="UploadFiles" title="Upload File(s)" value="Upload File(s)" />
-            <input type="reset" title="Clear" id="CLEARBTTN" value="Clear" style="display:none;">
+                <input type="reset" title="Clear" id="CLEARBTTN" value="Clear" style="display:none;">
-            <input type="text" id="DIRPATHUL" name="DIRPATHUL" value="">
+                <input type="text" id="DIRPATHUL" name="DIRPATHUL" value="">
-        </form>
+            </form>
-        <br/>
+            <br/>
             <input type="text" id="NewItem" value=""/>
             <input type="button" value="New Dir" onclick="createItem('dir')"/>
             <input type="button" value="New File" onclick="createItem('file')"/>
             <input type="button" value="Show Server Messages" onclick="tgglElmView('serverMsgView')"/>
-        <br/>
+            <br/>
             <input id="MergeType" type="checkbox" onchange="getDir('./')" />
             <label for="MergeType">Show seassons in same list.</label>
-    </center>
+        </center>
     </div>
 
+
+    <!-- Dynamic content targets -->
+    <ul id="favesList" style="display: none;"> </ul>
+    <ul id="dynUl"></ul>
+
     <!-- Uploader processor -->
     <div id="serverMsgView" style="display:none;"> </div>
 
 
     <!--  Templates  -->
     <template id="dirTemplate">
-        <div class="dirStyle" tabindex="1">
+        <li class="dirStyle" tabindex="1">
             <img id="dirID" class="systemIcon" src="" />
             <input id="titleID" class="dirTitle" type="text" value="" readonly="true" />
-        </div>
+        </li>
     </template>
     <template id="vidTemplate">
-        <span id="movieID" class="movieStyle" tabindex="1" style="background-image: url('')">
+        <li id="movieID" class="movieStyle" tabindex="1" style="background-image: url('')">
-            <div class="popOutBttnInner" title="Open In Local Program">&#8765;</div>
+            <span class="popOutBttnInner" title="Open In Local Program">&#8765;</span>
             <input id="titleID" class="movieTitle" type="text" value="" readonly="true" />
-        </span>
+        </li>
     </template>
     <template id="imgTemplate">
         <img id="imageID" class="iconImg" src="" alt="">
     </template>
     <template id="filTemplate">
-        <div class="fileStyle">
+        <li class="fileStyle">
             <img id="fileID" class="systemIcon" src="" />
             <input id="titleID" class="fileTitle" type="text" value="" readonly="true" />
-        </div>
+        </li>
     </template>
 
 

resources/css/base.css

@@ -1,6 +1,7 @@
 html {
     margin: 0em;
     padding: 0em;
+    /* overflow-x: hidden; */
 }
 
 ol, ul, li {

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;
+    min-height: 6.5em;
-    float: left;
-    width: 15em;
-    height: 8.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;
+    margin-top: 5.5em;
-    left: 0em;
     background-color: rgba(0, 0, 0, 0.64);
     color: rgb(255, 255, 255);
     text-align: center;

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 =
                 "<p class=\"error\" style=\"width:100%;text-align:center;\"> "
                 + "No content returned. Check the folder path.</p>";
             }

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 {

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++) {