style

static/public/css/style.css

@@ -57,6 +57,7 @@ body.filter-active #pch-navbar .bt-filter-inactive {
     margin: 0 auto 0 auto;
     padding: 0;
     text-align: center;
+    justify-content: center;
 }
 
 #pch-mediaList > .pch-image.loading {

static/public/js/uiFilter.js

@@ -87,7 +87,7 @@ $(() => {
         let container = document.getElementById('pch-filterbar');
         container.textContent = '';
         for (let i of Object.keys(mediaManager.allMetaTypes).filter(i => mediaManager.allMetaTypes[i].type === 'string' ||
-                ['orientation'].indexOf(i) >= 0)) {
+                [].indexOf(i) >= 0)) {
             let filterUi = buildFilterBar(i, mediaManager.allMetaTypes[i].canBeEmpty, Array.from(mediaManager.allMeta[i]).sort());
             container.appendChild(filterUi.content);
         }

static/public/js/uiMedia.js

@@ -28,7 +28,7 @@ $(() => {
         let editButtonSpan = document.createElement("span");
         editButtonSpan.className = "bi bi-pen";
         editButton.appendChild(editButtonSpan);
-        container.className = "pch-image loading col-12 col-md-6 col-xl-4";
+        container.className = "pch-image loading col-12 col-md-6 col-xl-4 align-self-center";
         loadingImg.classList.add("spinner");
         loadingImg.innerHTML = "<span class='spinner-grow'></span>";
         container.dataset.md5sum = mediaItem.fixedSum;

templates/index.js

@@ -3,7 +3,7 @@ module.exports = require('./_header.js') +require('./_menu.js')
     +`
 <div id="fullScreenOverlay"></div>
 <div id="pch-page">
-    <ul id="pch-mediaList" class="container-fluid"></ul>
+    <ul id="pch-mediaList" class="container-fluid row"></ul>
     <div class="spinner" id="pch-infiniteScrollLoading">
         <div class="spinner-grow"></div>
     </div>`