login-page: add login transition

2 files changed, 25 insertions, 2 deletions

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();
+	}
 }