viewer improvements

updates to config
thumbnail size increase

AobaClient/assets/style/main.scss

@@ -1,5 +1,8 @@
 @import "mixins";
 @import "colors";
+* {
+	box-sizing: border-box;
+}
 
 :root {
 	background-color: $mainBGColor;
@@ -35,27 +38,49 @@ body {
 	/* margin-left: $navBarSize; */
 }
 
+$mediaItemSize: 300px;
+
 .mediaGrid {
 	display: flex;
 	flex-wrap: wrap;
-	gap: 5px;
+	justify-content: center;
+	gap: 10px;
+	margin: 10px 0;
 
 	.mediaItem {
-		width: 200px;
-		background-color: $featureColor;
+		width: $mediaItemSize;
+		height: $mediaItemSize;
+		overflow: hidden;
+		display: grid;
+		grid-template-columns: $mediaItemSize;
+		grid-template-areas: "A";
+		box-shadow: 0 0 2px #000;
+		color: $mainTextColor;
+		text-decoration: none;
+		transition:
+			transform 0.25s ease-out,
+			box-shadow 0.25s ease-out;
+
+		> * {
+			grid-area: A;
+		}
 
 		img {
 			aspect-ratio: 1;
 			object-fit: cover;
-			object-position: center;
 			width: 100%;
+			object-position: center;
 			background-color: $invertTextColor;
 			border: 0;
 			outline: none;
 		}
 
 		.info {
-			padding: 2px 5px;
+			align-self: end;
+			backdrop-filter: blur(20px) brightness(0.5);
+			transition: transform 0.25s ease-out;
+			transform: translateY(100%);
+			padding: 2px;
 
 			.name {
 				text-align: center;
@@ -68,6 +93,15 @@ body {
 				justify-content: space-between;
 			}
 		}
+
+		&:hover {
+			transform: scale(110%) translateZ(2px);
+			box-shadow: 0 0 8px #000;
+
+			.info {
+				transform: translateY(0%);
+			}
+		}
 	}
 }
 

AobaClient/assets/style/nav.scss

@@ -9,10 +9,15 @@ nav {
 	height: 100dvh;
 	position: fixed;
 	width: $navBarSize;
+	box-shadow: 0 0 3px #000;
+	gap: 20px;
+	padding: 20px 0;
 
 	> * {
 		display: flex;
 		flex-direction: column;
+		align-items: center;
+		gap: 10px;
 	}
 
 	.branding {

AobaClient/src/components/media_item.rs

@@ -15,16 +15,18 @@ pub fn MediaItem(props: MediaItemProps) -> Element {
 
 	let src = format!("{HOST}/m/thumb/{id}");
 	rsx! {
-		div{
+		a{
 			class: "mediaItem",
+			href: "{HOST}/m/{id}",
+			target: "_blank",
 			img{ src: src }
-			div {
+			span {
 				class: "info",
 				span{
 					class: "name",
 					"{filename}"
 				},
-				div{
+				span{
 					class: "details",
 					span{
 						"{mtype}"

AobaClient/src/components/navbar.rs

@@ -1,6 +1,6 @@
 use dioxus::prelude::*;
 
-use crate::{contexts::AuthContext, Route};
+use crate::{Route, contexts::AuthContext};
 
 const NAV_CSS: Asset = asset!("/assets/style/nav.scss");
 const NAV_ICON: Asset = asset!("/assets/favicon.ico");
@@ -32,8 +32,7 @@ pub fn MainNaviagation() -> Element {
 pub fn Branding() -> Element {
 	rsx! {
 		div { class: "branding",
-			"Aoba"
-			img {src: NAV_ICON}
+			img {src: NAV_ICON, alt: "Aoba"}
 		}
 	}
 }

AobaClient/src/main.rs

@@ -11,9 +11,9 @@ use dioxus::prelude::*;
 use route::Route;
 
 #[cfg(debug_assertions)]
-pub const HOST: &'static str = "http://localhost:8080";
+pub const HOST: &'static str = "http://localhost:8081";
 #[cfg(debug_assertions)]
-pub const RPC_HOST: &'static str = "http://localhost:8080";
+pub const RPC_HOST: &'static str = "http://localhost:8081";
 #[cfg(not(debug_assertions))]
 pub const RPC_HOST: &'static str = "https://grpc.aoba.app:8443";
 #[cfg(not(debug_assertions))]

AobaCore/Services/ThumbnailService.cs

@@ -45,7 +45,12 @@ public class ThumbnailService(IMongoDatabase db, AobaService aobaService)
 		var img = Image.Load(stream);
 		img.Mutate(o =>
 		{
-			o.Resize(200, 200);
+			o.Resize(new ResizeOptions
+			{
+				Position = AnchorPositionMode.Center,
+				Mode = ResizeMode.Crop,
+				Size = new Size(300, 300)
+			});
 		});
 		var result = new MemoryStream();
 		await img.SaveAsWebpAsync(result, cancellationToken);

AobaServer/Program.cs

@@ -14,14 +14,16 @@ var builder = WebApplication.CreateBuilder(args);
 
 builder.WebHost.ConfigureKestrel(o =>
 {
-    o.ListenAnyIP(8081, lo =>
+#if !DEBUG
+	o.ListenAnyIP(8081, lo =>
     {
         lo.Protocols = Microsoft.AspNetCore.Server.Kestrel.Core.HttpProtocols.Http2;
     });
-    o.ListenAnyIP(8080, lo =>
+	o.ListenAnyIP(8080, lo =>
     {
         lo.Protocols = Microsoft.AspNetCore.Server.Kestrel.Core.HttpProtocols.Http1AndHttp2;
     });
+#endif
 });
 var config = builder.Configuration;
 // Add services to the container.

AobaServer/Properties/launchSettings.json

@@ -6,7 +6,7 @@
         "ASPNETCORE_ENVIRONMENT": "Development"
       },
       "dotnetRunMessages": true,
-      "applicationUrl": "http://localhost:5164"
+      "applicationUrl": "http://localhost:8081"
     },
     "https": {
       "commandName": "Project",
@@ -14,17 +14,16 @@
         "ASPNETCORE_ENVIRONMENT": "Development"
       },
       "dotnetRunMessages": true,
-      "applicationUrl": "https://localhost:7167;http://localhost:5164"
+      "applicationUrl": "http://localhost:8081"
     },
     "Container (Dockerfile)": {
       "commandName": "Docker",
       "launchUrl": "{Scheme}://{ServiceHost}:{ServicePort}",
       "environmentVariables": {
-        "ASPNETCORE_HTTPS_PORTS": "8081",
-        "ASPNETCORE_HTTP_PORTS": "8080"
+        "ASPNETCORE_HTTP_PORTS": "8081"
       },
       "publishAllPorts": true,
-      "useSSL": true
+      "useSSL": false
     }
   },
   "$schema": "https://json.schemastore.org/launchsettings.json"

AobaServer/appsettings.json

@@ -1,8 +1,5 @@
 {
 	"Kestrel": {
-		"EndpointDefaults": {
-			"Protocols": "Http1AndHttp2"
-		},
 		"Logging": {
 			"LogLevel": {
 				"Default": "Information",