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))]