login-page: add login transition

4 files changed, 36 insertions, 11 deletions

diff --git a/static/index.css b/static/index.css
index dea1dd7..67c1407 100644
--- a/static/index.css
+++ b/static/index.css
@@ -15,6 +15,7 @@ html, body {
 	padding: 0;
 	width: 100%;
 	height: 100%;
+	overflow: hidden;
 }
 
 body {
diff --git a/static/index.js b/static/index.js
index c6388eb..a7211e2 100644
--- a/static/index.js
+++ b/static/index.js
@@ -33,12 +33,7 @@ const image_viewer = ImageViewer.new();
 const login = LoginView.new({
 	onlogin: async (user, password) => {
 		if (await api.auth.login(user, password)) {
-			document.body.innerHTML = '';
-			document.body.append(
-				main,
-				search,
-				month_select,
-			)
+			login.hide();
 		} else {
 			login.comment = 'Incorrect username or password.';
 		}
@@ -63,8 +58,7 @@ const month_select = MonthSelect.new({
 
 const settings = SettingsView.new({
 	onlogout: () => {
-		document.body.innerHTML = '';
-		document.body.append(login)
+		login.show();
 		main.active_view = image_viewer;
 	},
 });
@@ -101,4 +95,11 @@ const main = MainView.new({
 	},
 });
 
-document.body.append(login);
+document.body.append(
+	login,
+	main,
+	search,
+	month_select,
+);
+
+login.focus();
diff --git a/static/pages/login/index.css b/static/pages/login/index.css
index aa6726e..f4a99ba 100644
--- a/static/pages/login/index.css
+++ b/static/pages/login/index.css
@@ -3,6 +3,15 @@
 	overflow: hidden;
 	width: 100%;
 	height: 100%;
+	z-index: 1000;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	transition: top 0.2s ease;
+}
+
+#container.hidden {
+	top: -100%;
 }
 
 #box {
@@ -15,7 +24,7 @@
 	padding: 0px;
 	box-shadow: #223223aa 1px 1px 4px;
 	border-radius: var(--border-radius);
-	z-index: 2000;
+	z-index: 5000;
 	display: grid;
 	grid-template-columns: auto 30px;
 	background: #ffffff99;
diff --git a/static/pages/login/index.js b/static/pages/login/index.js
index 07c0aa2..80bacb0 100644
--- a/static/pages/login/index.js
+++ b/static/pages/login/index.js
@@ -6,6 +6,7 @@ import icons from '../../icons/index.js';
 const css = await sfw.css(import.meta.url, './index.css');
 
 export default class LoginView extends sfw.element.Container {
+	#container
 	#input
 	#user
 	#comment
@@ -19,7 +20,7 @@ export default class LoginView extends sfw.element.Container {
 		this.#user = null;
 
 		this.body.append(
-			Div.new({
+			this.#container = Div.new({
 				id: 'container',
 				children: [
 					Div.new({ id: 'title', innerText: 'Memora' }),
@@ -85,4 +86,17 @@ export default class LoginView extends sfw.element.Container {
 	set comment(value) {
 		this.#comment.innerText = value;
 	}
+
+	show() {
+		this.#container.classList.remove('hidden');
+		this.focus();
+	}
+
+	hide() {
+		this.#container.classList.add('hidden');
+	}
+
+	focus() {
+		this.#input.focus();
+	}
 }