From 696ddb2badbfbc7c909ad4e367548a4f79885e73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Sat, 26 Nov 2022 11:53:23 +0800
Subject: [PATCH] feat: add sign in for mobile

---
 components/main/MainContent.vue  | 5 +++++
 components/modal/ModalDialog.vue | 2 +-
 components/user/UserSignIn.vue   | 4 ++--
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
index 337a402c..faedeb53 100644
--- a/components/main/MainContent.vue
+++ b/components/main/MainContent.vue
@@ -21,6 +21,11 @@
               <AccountAvatar :account="currentUser.account" h="1.5em" />
             </NuxtLink>
           </template>
+          <template v-else>
+            <button btn-solid text-sm px-2 py-1 text-center @click="openSigninDialog()">
+              Sign in
+            </button>
+          </template>
         </div>
       </div>
       <slot name="header" />
diff --git a/components/modal/ModalDialog.vue b/components/modal/ModalDialog.vue
index db1be7ca..0876ca18 100644
--- a/components/modal/ModalDialog.vue
+++ b/components/modal/ModalDialog.vue
@@ -23,7 +23,7 @@ watchOnce(modelValue, () => {
     />
     <div
       class="
-        bg-base absolute transition-all duration-200 ease-out shadow rounded-md transform ml-0
+        bg-base absolute transition-all duration-200 ease-out shadow rounded-md transform
         border border-base top-1/2 -translate-y-1/2 mx-8 md:(left-1/2 -translate-x-1/2)
       "
       :class="modelValue ? 'opacity-100' : 'opacity-0'"
diff --git a/components/user/UserSignIn.vue b/components/user/UserSignIn.vue
index 44c37e86..7cde0a0d 100644
--- a/components/user/UserSignIn.vue
+++ b/components/user/UserSignIn.vue
@@ -15,12 +15,12 @@ async function handleInput() {
 </script>
 
 <template>
-  <div h-full text-center justify-center flex="~ col items-center gap2">
+  <div text-center justify-center flex="~ col items-center gap2">
     <div text-3xl mb2>
       Sign in
     </div>
     <div>Mastodon Server Name</div>
-    <div flex bg-gray:10 px2 py1 mxa rounded border="~ border" w-80 text-xl items-center>
+    <div flex bg-gray:10 px2 py1 mxa rounded border="~ border" text-xl items-center>
       <span op35 mr1 text-sm>https://</span>
       <input v-model="server" :placeholder="DEFAULT_SERVER" outline-none bg-transparent @input="handleInput">
     </div>