mirror of
https://gitea.smigz.com/smiggiddy/odin-codeprojects.git
synced 2025-04-26 23:06:29 -04:00
additional styling and formatting
This commit is contained in:
parent
231902ab6d
commit
4417dec46a
7 changed files with 85 additions and 50 deletions
|
|
@ -130,8 +130,11 @@ input {
|
|||
}
|
||||
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.full-page {
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
.divider {
|
||||
|
|
@ -169,11 +172,12 @@ footer {
|
|||
}
|
||||
|
||||
.center-horizontal {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.hero__heading {
|
||||
|
|
@ -228,40 +232,62 @@ footer {
|
|||
.feed-heading {
|
||||
margin-left: 1em;
|
||||
text-transform: capitalize;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feed-heading span {
|
||||
text-transform: initial;
|
||||
}
|
||||
|
||||
.author__meta {
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
/*grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));*/
|
||||
gap: 1em;
|
||||
padding: 2em;
|
||||
grid-auto-flow: dense;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 2em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.grid-item.card {
|
||||
border: 1px solid black;
|
||||
border-radius: 0.5em;
|
||||
text-align: center;
|
||||
padding: 1.5em 1.5em 0.5em;
|
||||
background: var(--500-blue);
|
||||
}
|
||||
|
||||
.grid-item > p {
|
||||
padding: 5em;
|
||||
}
|
||||
|
||||
.grid__card__metadata {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
font-size: 0.8em;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 0 0.9em 0.7em;
|
||||
}
|
||||
|
||||
.likes {
|
||||
flex: 1;
|
||||
flex-grow: 0;
|
||||
display: flex;
|
||||
align-self: center;
|
||||
width: auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.card__likes {
|
||||
|
|
@ -337,6 +363,11 @@ footer {
|
|||
#main > .container.flex {
|
||||
gap: 10em;
|
||||
}
|
||||
|
||||
.grid {
|
||||
width: 100%;
|
||||
max-width: 750px;
|
||||
}
|
||||
.grid__span_two {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,36 +33,36 @@ VALUES ("jim", "$2a$10$Bmjre5WSpSSAi.nWBfLZFOlhQhbIAoY/MM7ikJz3Ho9tqeXCExaB6"),
|
|||
|
||||
INSERT OR REPLACE INTO messages (message_id, message, media, date, user_id)
|
||||
VALUES
|
||||
(1, "When life gives you lemons, make lemonade.", NULL, strftime('%s', 'now'), 1),
|
||||
(2, "Rome wasn’t built in a day – take your time.", NULL, strftime('%s', 'now'), 1),
|
||||
(3, "The grass is always greener on the other side.", NULL, strftime('%s', 'now'), 1),
|
||||
(4, "If it ain’t broke, don’t fix it.", NULL, strftime('%s', 'now'), 1),
|
||||
(5, "You can’t have your cake and eat it too.", NULL, strftime('%s', 'now'), 1),
|
||||
(6, "Better late than never.", NULL, strftime('%s', 'now'), 1),
|
||||
(7, "What doesn’t kill you makes you stronger.", NULL, strftime('%s', 'now'), 1),
|
||||
(8, "Every cloud has a silver lining.", NULL, strftime('%s', 'now'), 1),
|
||||
(9, "Don’t bite the hand that feeds you.", NULL, strftime('%s', 'now'), 1),
|
||||
(10, "Absence makes the heart grow fonder.", NULL, strftime('%s', 'now'), 1),
|
||||
(11, "Always trust your gut feeling – it’s usually right.", NULL, strftime('%s', 'now'), 2),
|
||||
(12, "Money can’t buy happiness, but it sure helps.", NULL, strftime('%s', 'now'), 2),
|
||||
(13, "Everything happens for a reason.", NULL, strftime('%s', 'now'), 2),
|
||||
(14, "Don’t go to bed angry – resolve conflicts before sleeping.", NULL, strftime('%s', 'now'), 2),
|
||||
(15, "The early bird catches the worm.", NULL, strftime('%s', 'now'), 2),
|
||||
(16, "You only live once – make the most of it.", NULL, strftime('%s', 'now'), 2),
|
||||
(17, "Hard work pays off in the end.", NULL, strftime('%s', 'now'), 2),
|
||||
(18, "Family is everything – cherish them.", NULL, strftime('%s', 'now'), 2),
|
||||
(19, "Don’t put off until tomorrow what you can do today.", NULL, strftime('%s', 'now'), 2),
|
||||
(20, "A smile costs nothing but gives so much.", NULL, strftime('%s', 'now'), 2),
|
||||
(21, "You can’t please everyone – focus on yourself.", NULL, strftime('%s', 'now'), 2),
|
||||
(22, "Health is wealth – take care of your body.", NULL, strftime('%s', 'now'), 2),
|
||||
(23, "Patience is a virtue – good things take time.", NULL, strftime('%s', 'now'), 2),
|
||||
(24, "Don’t judge a book by its cover.", NULL, strftime('%s', 'now'), 2),
|
||||
(25, "Actions speak louder than words.", NULL, strftime('%s', 'now'), 2),
|
||||
(26, "Learn from your mistakes – they make you wiser.", NULL, strftime('%s', 'now'), 2),
|
||||
(27, "Kindness costs nothing but means everything.", NULL, strftime('%s', 'now'), 2),
|
||||
(28, "Life is short – eat the cake.", NULL, strftime('%s', 'now'), 2),
|
||||
(29, "Comparison is the thief of joy – focus on your journey.", NULL, strftime('%s', 'now'), 2),
|
||||
(30, "The best things in life are free.", NULL, strftime('%s', 'now'), 2);
|
||||
(1, "When life gives you lemons, make lemonade.", NULL, strftime('%s', 'now')*1000, 1),
|
||||
(2, "Rome wasn’t built in a day – take your time.", NULL, strftime('%s', 'now')*1000, 1),
|
||||
(3, "The grass is always greener on the other side.", NULL, strftime('%s', 'now')*1000, 1),
|
||||
(4, "If it ain’t broke, don’t fix it.", NULL, strftime('%s', 'now')*1000, 1),
|
||||
(5, "You can’t have your cake and eat it too.", NULL, strftime('%s', 'now')*1000, 1),
|
||||
(6, "Better late than never.", NULL, strftime('%s', 'now')*1000, 1),
|
||||
(7, "What doesn’t kill you makes you stronger.", NULL, strftime('%s', 'now')*1000, 1),
|
||||
(8, "Every cloud has a silver lining.", NULL, strftime('%s', 'now')*1000, 1),
|
||||
(9, "Don’t bite the hand that feeds you.", NULL, strftime('%s', 'now')*1000, 1),
|
||||
(10, "Absence makes the heart grow fonder.", NULL, strftime('%s', 'now')*1000, 1),
|
||||
(11, "Always trust your gut feeling – it’s usually right.", NULL, strftime('%s', 'now')*1000, 2),
|
||||
(12, "Money can’t buy happiness, but it sure helps.", NULL, strftime('%s', 'now')*1000, 2),
|
||||
(13, "Everything happens for a reason.", NULL, strftime('%s', 'now')*1000, 2),
|
||||
(14, "Don’t go to bed angry – resolve conflicts before sleeping.", NULL, strftime('%s', 'now')*1000, 2),
|
||||
(15, "The early bird catches the worm.", NULL, strftime('%s', 'now')*1000, 2),
|
||||
(16, "You only live once – make the most of it.", NULL, strftime('%s', 'now')*1000, 2),
|
||||
(17, "Hard work pays off in the end.", NULL, strftime('%s', 'now')*1000, 2),
|
||||
(18, "Family is everything – cherish them.", NULL, strftime('%s', 'now')*1000, 2),
|
||||
(19, "Don’t put off until tomorrow what you can do today.", NULL, strftime('%s', 'now')*1000, 2),
|
||||
(20, "A smile costs nothing but gives so much.", NULL, strftime('%s', 'now')*1000, 2),
|
||||
(21, "You can’t please everyone – focus on yourself.", NULL, strftime('%s', 'now')*1000, 2),
|
||||
(22, "Health is wealth – take care of your body.", NULL, strftime('%s', 'now')*1000, 2),
|
||||
(23, "Patience is a virtue – good things take time.", NULL, strftime('%s', 'now')*1000, 2),
|
||||
(24, "Don’t judge a book by its cover.", NULL, strftime('%s', 'now')*1000, 2),
|
||||
(25, "Actions speak louder than words.", NULL, strftime('%s', 'now')*1000, 2),
|
||||
(26, "Learn from your mistakes – they make you wiser.", NULL, strftime('%s', 'now')*1000, 2),
|
||||
(27, "Kindness costs nothing but means everything.", NULL, strftime('%s', 'now')*1000, 2),
|
||||
(28, "Life is short – eat the cake.", NULL, strftime('%s', 'now')*1000, 2),
|
||||
(29, "Comparison is the thief of joy – focus on your journey.", NULL, strftime('%s', 'now')*1000, 2),
|
||||
(30, "The best things in life are free.", NULL, strftime('%s', 'now')*1000, 2);
|
||||
|
||||
-- ALTER TABLE likes
|
||||
-- ADD COLUMN user_id INTEGER REFERENCES users(user_id);
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ function getEveryNote() {
|
|||
FROM messages LEFT JOIN users ON messages.user_id = users.user_id
|
||||
LEFT JOIN likes ON messages.message_id = likes.message_id
|
||||
GROUP BY messages.message_id, message, media, date, users.username
|
||||
ORDER BY date DESC
|
||||
`,
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -11,18 +11,22 @@
|
|||
<% }; %>
|
||||
<div class="grid-item card<%= extraMessageClass %>">
|
||||
<p class="card__message"><%= note.message %></p>
|
||||
<div class="container flex grid__card__metadata">
|
||||
<div class="container grid__card__metadata">
|
||||
<div class="flex author__meta">
|
||||
<p class="card__author"><a href="/profile?userId=<%= note.user_id %>"><%= note.user %></a></p>
|
||||
<div class="likes flex">
|
||||
<p class="card__likes">•</p>
|
||||
<p class="card__likes"><%= new Date(note.date).toLocaleString() %></p>
|
||||
</div>
|
||||
<% if (currentUser.user_id === note.user_id) { %>
|
||||
<a href="/delete?userId=<%= currentUser.user_id %>&messageId=<%= note.message_id %>">delete post</a>
|
||||
<% }; %>
|
||||
<div class="likes">
|
||||
|
||||
<a href="/like?noteId=<%= note.message_id %>">
|
||||
<% if (likedPost) { %><i class="fa-solid fa-heart red"></i><% } else { %><i class="fa-regular fa-heart red"></i><% }; %>
|
||||
</a>
|
||||
<p class="card__likes"><%= note.likes_count %></p>
|
||||
</div>
|
||||
<% if (currentUser.user_id === note.user_id) { %>
|
||||
<a href="/delete?userId=<%= currentUser.user_id %>&messageId=<%= note.message_id %>"> X</a>
|
||||
<% }; %>
|
||||
</div>
|
||||
</div>
|
||||
<% }); %>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<footer>
|
||||
<div> Test </div>
|
||||
<footer class="footer flex">
|
||||
Test
|
||||
</footer>
|
||||
<script src="/js/script.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<form action="/new" method="POST" class="center-horizontal">
|
||||
<div class="form-item flex">
|
||||
<label for="message">Message</label>
|
||||
<input type="text" name="message" required/>
|
||||
<textarea type="text" name="message" required></textarea>
|
||||
</div>
|
||||
<div class="form-item flex">
|
||||
<label for="media">Media</label>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
<%- include("header") %>
|
||||
|
||||
<div class="container flex center-horizontal">
|
||||
<div class="full-page container center-horizontal">
|
||||
<h1 class="username"><%= user.username %></h1>
|
||||
<h2 class="email"><%= user.user_email %></h2>
|
||||
<% if(currentUser.user_id === user.user_id ) { %>
|
||||
<p>This is your profile page.</p>
|
||||
<% }; %>
|
||||
<p><%= totalPosts %> Posts</p>
|
||||
|
||||
<% if(currentUser.user_id === user.user_id ) { %>
|
||||
This is your profile page.
|
||||
<% }; %>
|
||||
</div>
|
||||
<%- include("footer") %>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue