ktyl
/
singularity
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add user profile

This commit is contained in:
ktyl 2024-07-11 22:53:45 +01:00
parent 29b975a60c
commit 29cd6cbd41
3 changed files with 90 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@ -4,6 +4,13 @@
</head> </head>
<body> <body>
<a id="home" href="#" onclick="goToHome()">Home</a>
<div id="profile">
<h1 id="profile-name"></h1>
<p id="profile-description"></p>
</div>
<!-- posts are added by JavaScript so container starts empty --> <!-- posts are added by JavaScript so container starts empty -->
<div id="post-container"></div> <div id="post-container"></div>

52
main.js
View File

@ -54,7 +54,13 @@ class Post {
// add a header to the post // add a header to the post
const headerElem = document.createElement("h1"); const headerElem = document.createElement("h1");
headerElem.innerHTML = this.username; 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 // TODO: add content to the post
const contentElem = document.createElement("p"); 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() { function createPost() {
const post = new Post(); const post = new Post();
postContainer.appendChild(post.getElement()); postContainer.appendChild(post.getElement());

37
styles.css
View File

@ -1,13 +1,31 @@
#post-container { #home {
display: flex; position: fixed;
flex-wrap: wrap; top: 0;
justify-content: center; left: 0;
margin-inline: auto; }
/* 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%; width: 100%;
max-width: 300px;
background-color: red;
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
/* For bigger than phones */ /* For bigger than phones */
#profile {
visibility: visible;
}
#post-container { #post-container {
max-width: 600px; max-width: 600px;
} }
@ -17,6 +35,15 @@
} }
} }
#post-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-inline: auto;
width: 100%;
}
.post { .post {
height: 55vh; height: 55vh;
width: calc(100% - 16px); width: calc(100% - 16px);