src/core/static/css/main.css

@@ -56,6 +56,7 @@
 	text-overflow: ellipsis;
 }
 
+
 .volume-control-positioner {
     position: absolute;
     bottom: 3.5em;

src/core/static/css/overrides.css

@@ -13,13 +13,14 @@
 }
 
 body {
-  font-family: Dosis;
+    font-family: Dosis;
 }
 
 ul, li {
     list-style: none;
 }
 
+
 /* Vertical slider */
 input[type=range][orient=vertical] {
     writing-mode: bt-lr; /* IE */
@@ -30,18 +31,18 @@ input[type=range][orient=vertical] {
 }
 
 [class*="col-"] {
-	background-clip: padding-box;
+	  background-clip: padding-box;
-	border: 10px solid transparent;
+	  border: 10px solid transparent;
-	margin: 0em !important;
+	  margin: 0em !important;
-	padding: 0em !important;
+	  padding: 0em !important;
 }
 
 #video-container::-webkit-media-controls {
-  display: none !important;
+    display: none !important;
 }
 
 #video-container::-webkit-media-controls-enclosure {
-  display: none !important;
+    display: none !important;
 }
 
 
@@ -57,6 +58,23 @@ input[type=range][orient=vertical] {
     background-color: rgba(50, 56, 62, 0.84);
 }
 
+.card-body {
+	min-height: 326px;
+	font-size: x-large;
+	vertical-align: middle !important;
+	align-items: center;
+	display: grid;
+}
+
+.card-img, .card-img-top {
+	  max-height: 285px !important;
+	  object-fit: contain;
+}
+
+.list-group-item {
+    color: rgba(255, 255, 255, 1) !important;
+}
+
 .label-as-badge {
     border-radius: 1em;
     cursor: pointer;

src/core/static/js/context-menu.js

@@ -14,6 +14,7 @@ const setPosition = ({ top, left }) => {
     toggleMenu("show");
 };
 
+
 window.addEventListener("click", e => {
     if(menuVisible) toggleMenu("hide");
 });

src/core/static/js/events-privileged.js

@@ -28,3 +28,7 @@ $( "#uploadFiles" ).bind( "click", function(eve) {
     const files = document.getElementById('toUpload').files;
     uploadFiles(files);
 });
+
+$( "#clearUploadFiles" ).bind( "click", function(eve) {
+    clearUlList();
+});

src/core/static/js/privileged-logic.js

@@ -1,5 +1,13 @@
 
 // Uploader Logic
+const clearUlList = () => {
+    const titles = document.getElementById('uploadListTitles');
+    const files  = document.getElementById('toUpload');
+
+    files.value = null;
+    clearChildNodes(titles);
+}
+
 const setUploadListTitles = (files = null) => {
     if (files == null) {
         return ;

src/core/static/js/ui-logic.js

@@ -4,14 +4,6 @@ const goHome = () => {
     goHomeAjax();
 }
 
-const clearUlList = () => {
-    const titles = document.getElementById('uploadListTitles');
-    const files  = document.getElementById('toUpload');
-
-    files.value = null;
-    clearChildNodes(titles);
-}
-
 const downloadItem = (eve) => {
     let elm = active_card.querySelector('a');
     elm.click();

src/core/templates/body-footer.html

@@ -11,7 +11,7 @@
                 <li class="nav-item mr-2">
                     <span id="tggl-faves-btn" class="btn btn-info btn-sm" title="Add/Delete from favorites..." >&#9734;</span>
                 </li>
-                <li class="nav-item">
+                <li class="nav-item mx-auto">
                     <span id="path">{{current_directory}}</span>
                 </li>
             </ul>

src/core/templates/layout.html

@@ -60,8 +60,8 @@
 
     <div class="menu">
         <ul class="menu-options">
+            <li class="menu-option" onclick="goUpADirectory()">Back</li>
             <li class="menu-option" onclick="goHome()">Home Directory</li>
-            <li class="menu-option" onclick="clearUlList()">Clear Upload List</li>
             <li class="menu-option" onclick="downloadItem()">Download</li>
             <li class="menu-option" onclick="deleteItem()">Delete</li>
         </ul>

src/core/templates/modals/file-modal.html

@@ -13,7 +13,7 @@
                     <div class="col scroller" style="max-height: 70vh; overflow: auto;">
                         <!-- For video -->
                         <div id="video-container">
-                            <video id="video" class="card-img-top viewer"
+                            <video id="video" class="viewer"
                                 loop
                                 src=""
                                 autoplay=""

src/core/templates/modals/options-modal.html

@@ -22,7 +22,8 @@
                             </ul>
                             <input id="toUpload" class="btn btn-dark" type="file" multiple>
                             <button id="uploadFiles" class="btn btn-success">Submit Files...</button>
-                        {% else %}
+                            <button id="clearUploadFiles" class="btn btn-dark">Clear</button>
+                            {% else %}
                             <h3>Upload not available to this user...</h3>
                         {% endif %}
                     </div>