move account to static position

Signed-off-by: cbh778899 <[email protected]>
SkywardAI · Jul 10, 2024 · f8ac747 · f8ac747
1 parent a32dfb2
commit f8ac747
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 57 deletions.
diff --git a/components/account-page/index.js b/components/account-page/index.js
@@ -1,21 +1,6 @@
-export default function createAccountPage() {
-
-    document.getElementById('main').innerHTML = `
-    <div class='account-page'>
-        <div class='input-field'>
-            <div class='title'>Username</div>
-            <input type='text' id='account-input-username'>
-        </div>
-        <div class='input-field'>
-            <div class='title'>Email</div>
-            <input type='text' id='account-input-email'>
-        </div>
-        <div class='input-field'>
-            <div class='title'>Password</div>
-            <input type='text' id='account-input-password'>
-        </div>
-        <div class='submit-account-btn clickable'>Submit</div>
-    </div>`
+import getSVG from "../../tools/svgs.js";
 
-    return null;
+export default function createAccountPage() {
+    document.getElementById('user-avatar')
+    .insertAdjacentHTML("afterbegin", getSVG('person-fill'))
 }
diff --git a/components/sidebar.js b/components/sidebar.js
@@ -3,7 +3,6 @@ import getSVG from "../tools/svgs.js";
 
 const pages = [
     { name: 'chat', svgName: 'chat-dots-fill' },
-    { name: 'account', svgName: 'person-fill' },
     { name: 'model-hero', svgName: 'hero' },
     { name: 'training' },
     { name: 'info', svgName: 'info-circle-fill', not_page: true }

diff --git a/components/user-page.js b/components/user-page.js
@@ -0,0 +1,6 @@
+import getSVG from "../tools/svgs.js";
+
+export default function createUserPage() {
+    document.getElementById('user-avatar')
+    .insertAdjacentHTML("afterbegin", getSVG('person-fill'))
+}
diff --git a/index.html b/index.html
@@ -16,6 +16,7 @@
     </head>
     <body>
         <div id="sidebar"></div>
+        <div id="user-avatar" class="clickable"></div>
         <div id="main"></div>
     </body>
 </html>
diff --git a/index.js b/index.js
@@ -14,9 +14,6 @@ function switchSelectedPage(page) {
     componetDismount = null;
 
     switch(page) {
-        case 'account':
-            componetDismount = createAccountPage();
-            break;
         case 'model-hero':
             componetDismount = createModelHeroPage();
             break;
@@ -36,6 +33,7 @@ function switchSelectedPage(page) {
 
 function build() {
     createSideBar(switchSelectedPage);
+    createAccountPage();
 }
 
 window.onload = build;
diff --git a/styles/account_page.css b/styles/account_page.css
@@ -1,35 +1,7 @@
-.account-page {
-    width: fit-content;
-    margin: auto;
-}
-
-.account-page .input-field {
-    margin: 30px;
-}
-
-.account-page .input-field .title {
-    font-size: 18px;
-    margin-bottom: 10px;
-}
-
-.account-page .input-field input {
-    width: 300px;
-    height: 40px;
-    border-radius: 7px;
-    border: 1px solid gray;
-    padding: 0px 20px;
-    box-sizing: border-box;
-}
-
-.account-page .submit-account-btn {
-    width: 200px;
-    border: 1px solid;
-    padding: 15px 20px;
-    text-align: center;
-    margin: auto;
-    border-radius: 10px;
-    margin-top: 50px;
-    background-color: dodgerblue;
-    color: white;
-    font-size: 18px;
+#user-avatar svg {
+    width: 110%;
+    height: 110%;
+    left: -5%;
+    bottom: -5%;
+    position: relative;
 }
diff --git a/styles/index.css b/styles/index.css
@@ -69,6 +69,25 @@ dialog {
     z-index: 1;
 }
 
+#user-avatar {
+    --user-avatar-size: 40px;
+    --user-avatar-margin: 30px;
+
+    position: fixed;
+    right: var(--user-avatar-margin);
+    top: 5px;
+
+    width: var(--user-avatar-size);
+    height: var(--user-avatar-size);
+    border-radius: var(--user-avatar-size);
+
+    background-color: var(--transparent-gray-bg);
+    color: gray;
+    border: 2px solid gray;
+    overflow: hidden;
+    z-index: 2;
+}
+
 
 @keyframes rotateLoading {
     from { transform: rotate(0); }