diff options
Diffstat (limited to 'Pages/ViewMedia.razor')
| -rw-r--r-- | Pages/ViewMedia.razor | 27 |
1 files changed, 19 insertions, 8 deletions
diff --git a/Pages/ViewMedia.razor b/Pages/ViewMedia.razor index 27a366c..46cbc45 100644 --- a/Pages/ViewMedia.razor +++ b/Pages/ViewMedia.razor @@ -14,23 +14,34 @@ document.getElementById("hcontainer").classList.toggle("hide-metadata"); } - function showSidebar(visible) { - document.getElementById("hcontainer").classList.toggle("hide-metadata", !visible) + function setMobilePane(pane) { + var panes = Array.from(document.querySelectorAll('[class^="mobile-pane-"]')); + + panes.forEach(e => e.classList.remove('visible')); + panes + .filter(e => e.classList.contains(`mobile-pane-${pane}`)) + .forEach(e => e.classList.add('visible')); + } + + function pageKeyDownHandler(e) { + if(!e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey && !e.isComposing) + if(e.key == 's') + toggleSidebar(); } </script> <div id="vcontainer"> - <div id="hcontainer" class="hide-metadata"> - <div id="image-container"> + <div id="hcontainer"> + <div id="image-container" class="mobile-pane-image visible"> <img src="/media/@(media.Guid)" width=@media.CurrentUploadedFile.Width height=@media.CurrentUploadedFile.Height/> </div> <div id="metadata-show-button"> - <a href="javascript:toggleSidebar();"></a> + <a href="javascript:toggleSidebar();" title="Toggle sidebar (S)"></a> </div> - <div id="metadata"> + <div id="metadata" class="mobile-pane-metadata"> <div id="metadata-container"> <div id="metadata-fileinfo"> @if(infoEditMode) { @@ -143,8 +154,8 @@ </div> </div> <div id="bottom-bar"> - <img onclick="showSidebar(false);" src="/images/photo.svg" width="25" height="25"/> - <img onclick="showSidebar(true);" src="/images/info.svg" width="25" height="25"/> + <img onclick="setMobilePane('image');" src="/images/photo.svg" width="25" height="25"/> + <img onclick="setMobilePane('metadata');" src="/images/info.svg" width="25" height="25"/> </div> </div> |