From 29cd6cbd411571d28aeadec2f92b9e4f7245b914 Mon Sep 17 00:00:00 2001 From: ktyl Date: Thu, 11 Jul 2024 22:53:45 +0100 Subject: [PATCH] feat: add user profile --- index.html | 7 +++++++ main.js | 52 +++++++++++++++++++++++++++++++++++++++++++++++++++- styles.css | 37 ++++++++++++++++++++++++++++++++----- 3 files changed, 90 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 7bf17cd..531319c 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,13 @@ +Home + +
+

+

+
+
diff --git a/main.js b/main.js index e332d65..bf04926 100644 --- a/main.js +++ b/main.js @@ -54,7 +54,13 @@ class Post { // add a header to the post const headerElem = document.createElement("h1"); headerElem.innerHTML = this.username; - postElem.appendChild(headerElem); + + const profileLinkElem = document.createElement("a"); + profileLinkElem.setAttribute("href", "#"); + profileLinkElem.addEventListener("click", () => updateUserProfile(this.username)); + profileLinkElem.appendChild(headerElem); + + postElem.appendChild(profileLinkElem); // TODO: add content to the post const contentElem = document.createElement("p"); @@ -66,6 +72,50 @@ class Post { } +var userProfile = null; +class UserProfile { + constructor(username) { + this.username = username; + this.bio = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."; + + this.elem = document.getElementById("profile"); + this.nameElem = document.getElementById("profile-name"); + this.descElem = document.getElementById("profile-description"); + } + + show() { + this.nameElem.innerHTML = this.username; + this.descElem.innerHTML = this.bio; + this.elem.style.visibility = "visible"; + } + + hide() { + this.descElem.innerHTML = ""; + this.nameElem.innerHTML = ""; + this.elem.style.visibility = "hidden"; + } +} + + +function goToHome() { + updateUserProfile(null); +} + + +function updateUserProfile(username) { + if (userProfile != null) { + userProfile.hide(); + userProfile = null; + } + + if (!username) + return; + + userProfile = new UserProfile(username); + userProfile.show(); +} + + function createPost() { const post = new Post(); postContainer.appendChild(post.getElement()); diff --git a/styles.css b/styles.css index c7bed2e..546edd2 100644 --- a/styles.css +++ b/styles.css @@ -1,13 +1,31 @@ -#post-container { - display: flex; - flex-wrap: wrap; - justify-content: center; - margin-inline: auto; +#home { + position: fixed; + top: 0; + left: 0; +} + +/* TODO: deal with visibility when screen cuts off left side */ +/* TODO: how do we show the profile on mobile */ +#profile { + /* profile starts hidden */ + visibility: hidden; + position: fixed; + right: calc(50% + 300px + 8px); + left: auto; + top: 16px; + height: 600px; width: 100%; + max-width: 300px; + + background-color: red; } @media only screen and (min-width: 768px) { /* For bigger than phones */ + #profile { + visibility: visible; + } + #post-container { max-width: 600px; } @@ -17,6 +35,15 @@ } } + +#post-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin-inline: auto; + width: 100%; +} + .post { height: 55vh; width: calc(100% - 16px);