v0.10av0.10a

6 files changed, 44 insertions, 28 deletions

diff --git a/Pages/Component/MobileMenu.razor b/Pages/Component/MobileMenu.razor
index 6cb3281..49c45d5 100644
--- a/Pages/Component/MobileMenu.razor
+++ b/Pages/Component/MobileMenu.razor
@@ -14,12 +14,6 @@
    	<a href="javascript:logout();">Logout</a>
 </div>
 
-<script suppress-error="BL9992">
-	function hideMobileMenu() {
-		document.getElementById('mobile-menu').classList.add('hidden');
-	}
-</script>
-
 @code {
 	protected override void OnInitialized() =>
 		navigationManager.LocationChanged += LocationChanged;
diff --git a/Pages/Component/TagSelectDialog.razor b/Pages/Component/TagSelectDialog.razor
index 20be31e..87065d7 100644
--- a/Pages/Component/TagSelectDialog.razor
+++ b/Pages/Component/TagSelectDialog.razor
@@ -7,7 +7,16 @@
 <link rel="stylesheet" href="@(nameof(HyperBooru)).styles.css"/>
 
 <Dialog Title=@(Title ?? "Select one or more tag(s)") @ref=dialog>
-    <input type="text" placeholder="Search" @ref=queryInput @oninput=QueryInput @onkeypress=QueryKey value=@query/>
+    <input
+        type="text"
+        placeholder="Search"
+        autocorrect="off"
+        autocapitalize="off"
+        autocomplete="off"
+        @ref=queryInput
+        @oninput=QueryInput
+        @onkeypress=QueryKey
+        value=@query/>
     <div class="tag-definitions">
         @for(int i = 0; i < tagDefinitions.Count(); i++) {
             if(!MatchesQuery(tagDefinitions[i].tagDefinition))
diff --git a/Pages/Component/Titlebar.razor b/Pages/Component/Titlebar.razor
index a0b9eec..48257b2 100644
--- a/Pages/Component/Titlebar.razor
+++ b/Pages/Component/Titlebar.razor
@@ -67,7 +67,14 @@
         <div id="navbar">
             <h2>Login</h2>
             <form class="login" action="javascript:login();">
-                <input id="username" placeholder="Username" type="text"/>
+                <input
+                    id="username"
+                    placeholder="Username"
+                    type="text"
+					autocorrect="off"
+					autocapitalize="off"
+					autocomplete="off"
+                    autofocus/>
                 <input id="password" placeholder="Password" type="password"/>
             </form>
             <a href="javascript:login();">Login</a>
diff --git a/Pages/Gallery.razor.css b/Pages/Gallery.razor.css
index 1b5ed86..6226d9b 100644
--- a/Pages/Gallery.razor.css
+++ b/Pages/Gallery.razor.css
@@ -1,6 +1,9 @@
 img {
+    height:       auto;
     margin-right: 5px;
     max-height:   200px;
+    max-width:    100%;
+    width:        auto;
 }
 
 div#feed-error {
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>
 
diff --git a/Pages/ViewMedia.razor.css b/Pages/ViewMedia.razor.css
index 080994a..60b04be 100644
--- a/Pages/ViewMedia.razor.css
+++ b/Pages/ViewMedia.razor.css
@@ -100,20 +100,12 @@ div#metadata {
 }
 
 @media (hover: none) and (pointer: coarse) {
-    div#image-container {
-        display: none;
+    [class^="mobile-pane-"] {
+        width: 100% !important;
     }
 
-    div#metadata {
-        width: 100%;
-    }
-
-    div#hcontainer.hide-metadata > div#image-container {
-        display: initial;
-    }
-
-    div#hcontainer.hide-metadata > div#metadata {
-        display: none;
+    [class^="mobile-pane-"]:not(.visible) {
+        display: none !important;
     }
 }