Skip to content

Commit

Permalink
pushed
Browse files Browse the repository at this point in the history
  • Loading branch information
@t4nn
t4nn committed Jan 13, 2023
1 parent b1a9128 commit 4fd91ed
Show file tree
Hide file tree
Showing 6 changed files with 155 additions and 88 deletions.
9 changes: 9 additions & 0 deletions public/stylesheets/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,4 +167,13 @@ body{
bottom: 15px;
left: 20px;
z-index: -1;
}

.box {
border: 1px solid black;
padding: 20px;
}

.box:hover {
box-shadow: 4px 4px 4px grey;
}
22 changes: 12 additions & 10 deletions views/home/index.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,18 @@
</head>

<body>
<p>You've been logged out, please log in to continue.</p>
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
<p>Please log in or sign up</p>
<br>
<div style="border: 2px solid black; border-radius: 20px; width: 300px">

<div class="box">
<br>
<form id="new-session-form" action="/sessions" method="post">
<label for="email">Email: </label>
<input id="email" type="email" name="email" value="">

<input id="email" type="email" name="email" value="" type="text" placeholder="Enter your e-mail">
<br>
<label for="password">Password: </label>
<input id="password" type="password" name="password" value=""> <br> <br>

<input id="password" type="password" name="password" value="" type="text" placeholder="Password"> <br> <br>
{{#if accountCreated}}
Account created! Please sign in.
{{/if}}
Expand All @@ -35,16 +37,16 @@
<br>
{{!-- password and user prompts for incorrect --}}
<br>
<br> <input id="submit" type="submit" value="Submit">
<br> <input id="submit" type="submit" value="Log in" style="position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);">
</form> <br>
<form id="new-session-form" action="/users/new" method="get">
<input id="submit" type="submit" value="Sign up">
<input id="submit" type="submit" value="Sign up" style="position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);">
</form> <br>
{{!-- currently doesn't work needs to have a new route added with a form --}}
<form id="new-session-form" action="/sessions" method="post">
<input id="submit" type="submit" value="Forgot password">
<input id="submit" type="submit" value="Forgot password" style="position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);">
</form><br>
</div>

</div>
</body>
</html>
2 changes: 1 addition & 1 deletion views/layout.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>

<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<head>

<title>Catbook</title>
Expand Down
137 changes: 84 additions & 53 deletions views/posts/explore.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@
<head>

<style>
h1 {text-align: center;}
p {text-align: center;}
div {text-align: center;}
* {
padding: 0;
margin: 0;
Expand Down Expand Up @@ -48,11 +53,13 @@
display: flex
}
.usericon {
#usericon {
width: 50px;
height: 50px;
margin-right: 10px;
}
</style>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Expand Down Expand Up @@ -138,79 +145,103 @@
</script>

</head>

<body>
<div>
<div class="profile">
<img id="usericon" src="https://visualpharm.com/assets/422/Cat%20Profile-595b40b65ba036ed117d3d6b.svg" alt="User">
<span class="author"></span>
<h1 style="display:none;" id="mainuser">{{user.username}}</h1>
<p style="font-size:40px">Welcome {{user.username}}
</p>
</div>
<br>

<div class="container-fluid text-center">
{{!-- for each of the posts array, the message and date is posted and a button
rendered - the button has a onclick method that runs a method from the script,
each button has a data-post-id attached in which the posts.id is attached to.
the item with likes count is given an idea which is also associated with posts.id --}}
{{#each posts }}
<div class="posts" style="margin-left: 50px">
<div>
<b>{{ this.message }}</b><br>
<span id="author-{{ this.author }}">
<h3>{{ this.author }}</h3>
</span>
<button data-id="{{ this.author }}" class="fav-button" onclick="actFollow(event)">Follow</button><br>
<small>{{ this.date }}</small>
</div>
{{!-- adds a little meow with the like counter, associated with this.id and showing this.likes_count --}}
<div class="row" style="display: inline-block; margin-left: -20px;"></div>
<span>&#x1F63B;</span>
<span id="likes-count-{{ this.id }}">{{ this.likes }}</span>
<div class="profile" style="display: flex; justify-content: center; align-items: center;">
{{#if user.profilepic }}
<img src="{{user.profilepic}}" width="50" height="50">
{{else}}
<img id="usericon" src="https://visualpharm.com/assets/422/Cat%20Profile-595b40b65ba036ed117d3d6b.svg" alt="User">
{{/if}}
<span class="author"></span>
<h1 style="display:none;" id="mainuser">{{user.username}}</h1>
<p style="font-size:40px;">Welcome {{user.username}}
</p>
</div>

<br>

<span style="margin-left:30px">&#128062;</span>
<span id="loves-count-{{ this.id }}">{{ this.loves }}</span>
<div class="container-fluid text-center">
{{!-- for each of the posts array, the message and date is posted and a button
rendered - the button has a onclick method that runs a method from the script,
each button has a data-post-id attached in which the posts.id is attached to.
the item with likes count is given an idea which is also associated with posts.id --}}
{{#each posts }}
<div class="box">
<div class="posts" style="margin-left: 50px">
<div>
<b>{{ this.message }}</b><br>
<div class="photoURL">

{{#if this.image }}
<img src="{{this.image}}" width="100" height="100" alt="image not found!">
{{else}}
<p></p>
{{/if}}

</div>
<span id="author-{{ this.author }}">
<h3>{{ this.author }}</h3>
{{!-- {{#if }}
<img src="{{this.}}" width="100" height="100" alt="image not found!">
{{else}}
<p></p>
{{/if}} --}}
</span>
<br>
<button data-id="{{ this.author }}" class="fav-button" onclick="actFollow(event)">Follow</button><br>
<small>{{ this.date }}</small>
</div>
{{!-- adds a little meow with the like counter, associated with this.id and showing this.likes_count --}}
<div class="row" style="margin-left:30px">

</div>
<span style="margin-left: -40px;"> &#x1F63B;</span>
<span id="likes-count-{{ this.id }}">{{ this.likes }}</span>

<span style="margin-left:60px">&#128062;</span>
<span id="loves-count-{{ this.id }}">{{ this.loves }}</span>

</div>
{{!-- set the data-post-id as posts.id onto this button --}}
</div>
{{!-- set the data-post-id as posts.id onto this button --}}

<div id="button-div">
<button style="display:inline" onclick="actOnPost(event);" data-post-id="{{ this.id }}" class="like-button"
style="margin-left: 50px">Like
</button>
<button style="display:inline" onclick="actOnPostLove(event);" data-post-id="{{ this.id }}" class="love-button"
style="margin-left: 50px">Love
</button><br>
</div>
</div>
<div id="button-div">
<button style="display: flex; justify-content: center;" ><button style="margin-left:30px" onclick="actOnPost(event);" data-post-id="{{ this.id }}" class="like-button">Like</button>
<button style="margin-left:30px" onclick="actOnPostLove(event);" data-post-id="{{ this.id }}" class="love-button">Love</button>
</div>
</div>
</div>
{{!-- adds a little meow with the like counter, associated with this.id and showing this.likes_count --}}
{{!-- set the data-post-id as posts.id onto this button --}}

<div id="post-comments">
<h5> Comments </h5>
<br>
<div id="post-comments" style="font-size: 18px">
<h5> Comments: </h5>
{{#each this.comments}}
"{{this.comment}}" - <small>{{this.user}}, {{this.date}}</small>
<br>
<div class="comment-container" style="text-align:center">
"{{this.comment}}" - <small>{{this.user}}, {{this.date}}</small></div>

{{/each}}
</div>
</div>
<br>
<div style="display: flex; justify-content: center;">
<form id="comment-form" method="post" action="/posts/{{ this.id }}/comment">
<input
style="height:80px; width:200px; display: inline-block; margin-left: 30px; <div style= border: 2px solid black; border-radius: 20px;"
type="text" id="comment-" +{{ this.id }} name="comment" placeholder="Enter your comment here">
style="height:50px; width:200px; display: inline-block; margin-left: 30px; border: 2px solid black; border-radius: 20px;"
type="text" id="comment-" +{{ this.id }} name="comment" placeholder=" Enter your comment here">

<button class="submit-button" type="submit">Submit</button>
</form>

</div>


{{/each}}

</div>

<br>
{{/each}}
</div>
</div>
<br>


</body>
Expand Down
6 changes: 3 additions & 3 deletions views/posts/index.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ div {text-align: center;}
each button has a data-post-id attached in which the posts.id is attached to.
the item with likes count is given an idea which is also associated with posts.id --}}
{{#each posts }}

<div class="box">
<div class="posts" style="margin-left: 50px">
<div>
<b>{{ this.message }}</b><br>
Expand Down Expand Up @@ -237,9 +237,9 @@ div {text-align: center;}




<br>
{{/each}}

</div>
</div>
<br>

Expand Down
67 changes: 46 additions & 21 deletions views/sessions/new.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,52 @@
<html>
<head>

</head>
<body>
<form id="new-session-form" action="/sessions" method="post">
<label for="email">Email: </label>
<input id="email" type="email" name="email" value="">
<label for="password">Password: </label>
<input id="password" type="password" name="password" value=""> <br><br>

<input id="submit" type="submit" value="Submit">
</form> <br>

<form id="new-session-form" action="/users/new" method="get">
<head>

</head>

<input id="signup" type="submit" value="Sign up">
</form> <br>

<body>
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
<p>Please log in or sign up</p>
<br>

<div class="box">
<br>
<form id="new-session-form" action="/sessions" method="post">
<input id="forgot" type="submit" value="Forgot password">
</form>

</body>
</html>

<input id="email" type="email" name="email" value="" type="text" placeholder="Enter your e-mail">
<br>

<input id="password" type="password" name="password" value="" type="text" placeholder="Password"> <br> <br>
{{#if accountCreated}}
Account created! Please sign in.
{{/if}}
{{#if emailExists}}
Email already exists! <br>
Please try to log in, or try to sign up with a different email.
{{/if}}
{{#if usernameExists}}
Username already exists! <br>
Please try to log in, or try to sign up with a different username.
{{/if}}
{{#if wronguser}}
User does not exist, please sign up!
{{/if}}
{{#if wrongpass}}
Password is incorrect, please try again.
{{/if}}
<br>
{{!-- password and user prompts for incorrect --}}
<br>
<br> <input id="submit" type="submit" value="Log in" style="position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);">
</form> <br>
<form id="new-session-form" action="/users/new" method="get">
<input id="submit" type="submit" value="Sign up" style="position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);">
</form> <br>
{{!-- currently doesn't work needs to have a new route added with a form --}}
<form id="new-session-form" action="/sessions" method="post">
<input id="submit" type="submit" value="Forgot password" style="position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);">
</form><br>
</div>
</div>
</body>
</html>

0 comments on commit 4fd91ed

Please sign in to comment.