diff --git a/res/static/script/ListNavigator.js b/res/static/script/ListNavigator.js index bed875c..5364a7b 100644 --- a/res/static/script/ListNavigator.js +++ b/res/static/script/ListNavigator.js @@ -67,17 +67,15 @@ var ListNavigator = { this.addToHistory(index); - $("#listNavigatorItems").find("*").removeClass("list_item_selected"); - $("#listNavigatorItems div").eq(this.position).addClass("list_item_selected"); + $("#list_navigator").find("*").removeClass("file_button_selected"); + var selectedItem = $("#list_navigator div").eq(this.position); + selectedItem.addClass("file_button_selected"); + var itemWidth = selectedItem.outerWidth(true); // This centers the scroll bar exactly on the selected item - $("#listNavigatorItems").animate( - { - scrollLeft: ((this.position * 109) + (109/2)) - ($("#listNavigator").width() / 2) - }, { - duration: 1000, - queue: false - } + $("#list_navigator").animate( + {scrollLeft: ((this.position * itemWidth) + (itemWidth / 2)) - ($("#list_navigator").width() / 2)}, + {duration: 1000, queue: false} ); this.loadThumbnails(index); @@ -123,27 +121,25 @@ var ListNavigator = { } console.log(endPos); - var navigatorItems = document.getElementById("listNavigatorItems").children + var navigatorItems = document.getElementById("list_navigator").children for (i = startPos; i <= endPos; i++){ - if (navigatorItems[i].innerHTML.includes("listItemThumbnail")) { - console.log("skip"); - continue; + if (navigatorItems[i].innerHTML.includes("list_item_thumbnail")) { + continue; // Thumbnail already loaded } var thumb = "/api/file/" + this.data[i].id + "/thumbnail"; var name = this.data[i].name; - var itemHtml = escapeHTML(name) + "
" - + "\"""; + var itemHtml = "\""" + + escapeHTML(name); navigatorItems[i].innerHTML = itemHtml; } }, init: function(data){ - var hashPos = getHashValue("item"); this.data = data; this.length = data.length; @@ -156,19 +152,12 @@ var ListNavigator = { filename = "Removed File"; } - listHTML += "
" + escapeHTML(filename) + "
" + "
"; }); - document.getElementById("listNavigatorItems").innerHTML = listHTML; - - // Skip to this file if the parameter is set - if(Number.isInteger(parseInt(hashPos))){ - this.setItem(hashPos); - }else{ - this.setItem(0); - } + document.getElementById("list_navigator").innerHTML = listHTML; var btnLastItem = document.createElement("button"); btnLastItem.innerText = "◀"; @@ -221,7 +210,14 @@ var ListNavigator = { document.getElementById("btnShare").after(btnShuffle); // Make the navigator visible - document.getElementById("listNavigator").style.display = "inline-block"; + document.getElementById("list_navigator").style.display = "inline-block"; + + // Skip to the file defined in the link hash + if(Number.isInteger(parseInt(getHashValue("item")))){ + this.setItem(parseInt(getHashValue("item"))); + }else{ + this.setItem(0); + } } }; diff --git a/res/static/script/Viewer.js b/res/static/script/Viewer.js index 80fad41..e656cdb 100644 --- a/res/static/script/Viewer.js +++ b/res/static/script/Viewer.js @@ -18,6 +18,12 @@ var Viewer = { Toolbar.toggle(); } + // The close button only works if the window has an opener. So we hide + // the button if it does not + if (window.opener === null) { + $("#button_close_file_viewer").remove(); + } + if(type === "file"){ this.isFile = true; this.currentFile = data.id; diff --git a/res/static/style/layout.css b/res/static/style/layout.css index 39d6ddc..880713f 100644 --- a/res/static/style/layout.css +++ b/res/static/style/layout.css @@ -301,27 +301,28 @@ pre{ margin: 6px; padding: 0; overflow: hidden; - border-radius: 5px; + border-radius: 2px; box-shadow: 2px 2px 8px -3px var(--shadow_color); - /* border: 1px solid var(--accent_color_dark); */ background-color: var(--file_background_color); color: #bfbfbf; /* Fallback */ color: var(--text_color); word-break: break-all; text-align: left; - line-height: 120%; + line-height: 1.2em; display: inline-block; transition: box-shadow 0.3s, opacity 2s; + white-space: normal; } -.file_button:hover{ - box-shadow: 0px 0px 10px 3px var(--highlight_color), inset 0px 0px 6px 1px var(--highlight_color); +.file_button:hover, +.file_button_selected { + box-shadow: 0px 0px 3px 3px var(--highlight_color); text-decoration: none; color: #bfbfbf; /* Fallback */ color: var(--text_color); } .file_button > img{ - max-height: 60px; - max-width: 120px; + max-height: 100%; + max-width: 25%; margin-right: 5px; float: left; display: block; diff --git a/res/static/style/viewer.css b/res/static/style/viewer.css index 2039bb2..7555b40 100644 --- a/res/static/style/viewer.css +++ b/res/static/style/viewer.css @@ -25,6 +25,11 @@ body{ text-align: left; padding: 0.2em; } +.file_viewer > .highlight_headerbar > .button_group { + flex-grow: 0; + flex-shrink: 0; + display: inline-flex; +} .file_viewer > .highlight_headerbar > .button_toggle_toolbar { flex-grow: 0; flex-shrink: 0; @@ -41,30 +46,29 @@ body{ white-space: nowrap; line-height: 2em; } -.file_viewer > .highlight_headerbar > .list_navigator_buttons { - flex-grow: 0; - flex-shrink: 0; - display: inline-flex; -} .file_viewer > .highlight_headerbar > .button_close_file_viewer { flex-grow: 0; flex-shrink: 0; margin-left: .5em; } -.file_viewer > .list_navigator{ +.file_viewer > .list_navigator { flex-grow: 0; flex-shrink: 0; position: relative; display: none; /* Becomes visible if the page is a list */ width: 100%; - height: 100px; background-color: var(--accent_color_dark); - box-shadow: 2px 2px 8px var(--shadow_color); + box-shadow: 0 0 8px var(--shadow_color); text-align: center; - overflow-x: hidden; + line-height: 1em; + overflow-x: scroll; overflow-y: hidden; z-index: 50; - transition: top 1.5s; + white-space: nowrap; +} +.file_viewer > .list_navigator > .list_item{ + height: 40px !important; + width: 250px !important; } .file_viewer > .file_viewer_window { flex-grow: 1; @@ -337,41 +341,3 @@ table > tbody > tr {border: none !important;} height: 100%; border: none; } - - -#listNavigatorItems{ - position: relative; - top: 0; - left: 0; - right: 0; - height: 100%; - white-space: nowrap; - overflow-x: scroll; - overflow-y: hidden; - border: none; - padding: 0; -} - -.listItem{ - display: inline-block; - position: relative; - height: 95%; - width: 100px; - margin-right: 5px; - text-align: center; - border: var(--input_color) solid 2px; - border-radius: 2px; - font-size: 12px; - overflow: hidden; - cursor: pointer; -} -.list_item_selected{ - border: var(--highlight_color) solid 2px; -} - -.listItemThumbnail{ - position: relative; - max-width: 100%; - max-height: 84%; - margin: 0; -} diff --git a/res/template/file_viewer.html b/res/template/file_viewer.html index c5307b3..174aab8 100644 --- a/res/template/file_viewer.html +++ b/res/template/file_viewer.html @@ -6,8 +6,8 @@ {{template "user_style" .}} - - + + @@ -32,12 +32,10 @@ {{.Title}} -
+
-
-
-
+
@@ -164,10 +162,10 @@ - - - - + + + +