From 5bc19db82263da9a79fca8b0498505c9097f63bd Mon Sep 17 00:00:00 2001
From: Brook Gagnon <brook@pikalabs.com>
Date: Sun, 25 Aug 2024 17:34:15 +0000
Subject: [PATCH] move media details thumbnail to right side of header

---
 VERSION                 |   2 +-
 html/media/details.html | 203 ++++++++++++++++++++--------------------
 2 files changed, 103 insertions(+), 102 deletions(-)

diff --git a/VERSION b/VERSION
index afc6f576..5d54fb27 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-5.3.3-20240821
+5.3.3-20240825
diff --git a/html/media/details.html b/html/media/details.html
index 630efc6f..fe736056 100644
--- a/html/media/details.html
+++ b/html/media/details.html
@@ -1,103 +1,104 @@
 <ob-tabs>
-<ob-tab data-name="Details">
-
-  <h1 id="media_heading" data-t>Media Details</h1>
-
-  <p>
-    <button data-t id="media_details_download" class="hidden add">Download</button>
-    <button data-t id="media_details_edit" class="hidden edit">Edit</button>
-    <button data-t id="media_details_restore" class="hidden">Restore</button>
-    <button data-t id="media_details_delete" class="hidden delete">Delete</button>
-    <button data-t id="media_details_versions" class="hidden">Versions</button>
-  </p>
-
-  <fieldset id="media_details_fieldset">
-
-  <div class="hidden" id="media_details_table">
-
-  <div class="fieldrow">
-    <label data-t>ID</label><span id="media_details_id"></span>
-  </div>
-
-  <div class="fieldrow">
-    <label data-t>Thumbnail</label><ob-field-thumbnail readonly id="media_details_thumbnail"></ob-field-thumbnail>
-  </div>
-
-  <div class="fieldrow">
-    <label data-t>Artist</label><span id="media_details_artist"></span>
-  </div>
-
-  <div class="fieldrow">
-    <label data-t>Title</label><span id="media_details_title"></span>
-  </div>
-
-  <div class="fieldrow">
-    <label data-t>Album</label><span id="media_details_album"></span>
-  </div>
-
-  <div class="fieldrow">
-    <label data-t>Year</label><span id="media_details_year"></span>
-  </div>
-
-  <div class="fieldrow">
-    <label data-t>Category</label><span id="media_details_category"></span>
-  </div>
-
-  <div class="fieldrow">
-    <label data-t>Country</label><span id="media_details_country"></span>
-  </div>
-
-  <div class="fieldrow">
-    <label data-t>Language</label><span id="media_details_language"></span>
-  </div>
-
-  <div class="fieldrow">
-    <label data-t>Genre</label><span id="media_details_genre"></span>
-  </div>
-
-  <div class="fieldrow">
-    <label data-t>Comments</label><span id="media_details_comments"></span>
-  </div>
-
-  <div id="media_details_metadata"></div>
-
-  <div class="fieldrow">
-    <label data-t>Uploader</label><span id="media_details_uploader"></span>
-  </div>
-
-  <div class="fieldrow">
-    <label data-t>Created</label><span id="media_details_created"></span>
-  </div>
-
-  <div class="fieldrow">
-    <label data-t>Last Updated</label><span id="media_details_updated"></span>
-  </div>
-
-  <div class="fieldrow">
-    <label data-t>Copyright</label><span id="media_details_copyright"></span>
-  </div>
-
-  <div class="fieldrow">
-    <label data-t>Approval</label><span id="media_details_approval"></span>
-  </div>
-
-  <div class="fieldrow">
-    <label data-t>Status</label><span id="media_details_visibility"></span>
-  </div>
-
-  <div class="fieldrow">
-    <label data-t>Dynamic Selections</label><span id="media_details_dynamic"></span>
-  </div>
-
-  </div>
-
-  </fieldset>
-</ob-tab>
-<ob-tab data-name="Where Used">
-  <h1>Where is this media used?</h1>
-  <div class="hidden" id="media_details_used">
-  <ul>
-  </ul>
-  </div>
-</ob-tab>
+  <ob-tab data-name="Details">
+
+    <div style="display: flex; justify-content: space-between;">
+      <div>
+        <h1 id="media_heading" data-t>Media Details</h1>
+        <p>
+          <button data-t id="media_details_download" class="hidden add">Download</button>
+          <button data-t id="media_details_edit" class="hidden edit">Edit</button>
+          <button data-t id="media_details_restore" class="hidden">Restore</button>
+          <button data-t id="media_details_delete" class="hidden delete">Delete</button>
+          <button data-t id="media_details_versions" class="hidden">Versions</button>
+        </p>
+      </div>
+      <ob-field-thumbnail readonly id="media_details_thumbnail"
+        style="position: relative; top: -25px; margin-bottom: -25px;"></ob-field-thumbnail>
+    </div>
+
+    <fieldset id="media_details_fieldset" style="margin-top: 7px;">
+
+      <div class="hidden" id="media_details_table">
+
+        <div class="fieldrow">
+          <label data-t>ID</label><span id="media_details_id"></span>
+        </div>
+
+        <div class="fieldrow">
+          <label data-t>Artist</label><span id="media_details_artist"></span>
+        </div>
+
+        <div class="fieldrow">
+          <label data-t>Title</label><span id="media_details_title"></span>
+        </div>
+
+        <div class="fieldrow">
+          <label data-t>Album</label><span id="media_details_album"></span>
+        </div>
+
+        <div class="fieldrow">
+          <label data-t>Year</label><span id="media_details_year"></span>
+        </div>
+
+        <div class="fieldrow">
+          <label data-t>Category</label><span id="media_details_category"></span>
+        </div>
+
+        <div class="fieldrow">
+          <label data-t>Country</label><span id="media_details_country"></span>
+        </div>
+
+        <div class="fieldrow">
+          <label data-t>Language</label><span id="media_details_language"></span>
+        </div>
+
+        <div class="fieldrow">
+          <label data-t>Genre</label><span id="media_details_genre"></span>
+        </div>
+
+        <div class="fieldrow">
+          <label data-t>Comments</label><span id="media_details_comments"></span>
+        </div>
+
+        <div id="media_details_metadata"></div>
+
+        <div class="fieldrow">
+          <label data-t>Uploader</label><span id="media_details_uploader"></span>
+        </div>
+
+        <div class="fieldrow">
+          <label data-t>Created</label><span id="media_details_created"></span>
+        </div>
+
+        <div class="fieldrow">
+          <label data-t>Last Updated</label><span id="media_details_updated"></span>
+        </div>
+
+        <div class="fieldrow">
+          <label data-t>Copyright</label><span id="media_details_copyright"></span>
+        </div>
+
+        <div class="fieldrow">
+          <label data-t>Approval</label><span id="media_details_approval"></span>
+        </div>
+
+        <div class="fieldrow">
+          <label data-t>Status</label><span id="media_details_visibility"></span>
+        </div>
+
+        <div class="fieldrow">
+          <label data-t>Dynamic Selections</label><span id="media_details_dynamic"></span>
+        </div>
+
+      </div>
+
+    </fieldset>
+  </ob-tab>
+  <ob-tab data-name="Where Used">
+    <h1>Where is this media used?</h1>
+    <div class="hidden" id="media_details_used">
+      <ul>
+      </ul>
+    </div>
+  </ob-tab>
 </ob-tabs>
\ No newline at end of file