smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2025-04-04 19:10:56 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui: better design and stuff

Browse source
This commit is contained in:
Mike 2024-12-31 14:29:00 -05:00
parent cd43c949aa
commit 3c3deda986
5 changed files with 56 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
nodejs-mini-message-board/src/db.js
View file

@ -3,8 +3,9 @@ const path = require("node:path");
const { stat } = require("node:fs"); const { stat } = require("node:fs");
const { mkdir } = require("node:fs/promises"); const { mkdir } = require("node:fs/promises");
const dbDirPath = path.join(path.dirname(__dirname)); const dbDirPath = path.join(path.dirname(__dirname), "/db");
const dbPath = path.join(dbDirPath, "/message-board.db"); const dbPath = path.join(dbDirPath, "/message-board.db");
console.log(dbPath);
async function makeDirectory(path) { async function makeDirectory(path) {
const dirCreation = await mkdir(path); const dirCreation = await mkdir(path);

47
nodejs-mini-message-board/src/public/styles.css
View file

@ -4,6 +4,12 @@
background-color: #eff3ea; background-color: #eff3ea;
} }
a {
color: #86a788;
font-weight: 600;
text-decoration: none;
}
.nav { .nav {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -13,7 +19,14 @@
} }
.nav-item { .nav-item {
margin: 0 1rem; margin: 10px 8px 0;
display: inline-block;
padding: 10px;
transition: background-color 1000ms ease-in-out;
}
.nav-item:hover {
background-color: hsl(123.64, 15.79%, 89.02%);
} }
.nav-link { .nav-link {
@ -27,6 +40,17 @@
align-items: center; align-items: center;
} }
.headline {
text-align: center;
margin: 0 0 5px 0;
}
.msg-headline {
color: #86a788;
text-align: center;
margin: 60px 0 20px 0;
}
.msg-feed { .msg-feed {
margin-top: 3rem; margin-top: 3rem;
} }
@ -44,9 +68,19 @@
box-shadow: 0px 1px 4px #525252; box-shadow: 0px 1px 4px #525252;
} }
.card p { .card-message {
width: 100%;
background-color: white;
margin: 0;
border-radius: 0 0 15px 15px;
}
.card-message p {
word-wrap: break-word; word-wrap: break-word;
font-weight: 500; font-family: "Leckerli One", serif;
font-size: 1.3rem;
padding: 1.3rem;
text-align: center;
} }
.card-metadata { .card-metadata {
@ -63,7 +97,7 @@
} }
.card-metadata > span { .card-metadata > span {
font-weight: 300; font-weight: 400;
} }
.form-item { .form-item {
@ -111,6 +145,7 @@
border: 2px solid #677d6a; border: 2px solid #677d6a;
background-color: transparent; background-color: transparent;
/*width: 100%;*/ /*width: 100%;*/
flex: 1;
} }
.primary-btn { .primary-btn {
@ -119,6 +154,10 @@
font-weight: 800; font-weight: 800;
} }
.btn-row {
flex-direction: row;
}
.errors { .errors {
color: red; color: red;
} }

6
nodejs-mini-message-board/src/views/header.ejs
View file

@ -3,9 +3,9 @@
<head> <head>
<title>Message the people</title> <title>Message the people</title>
<link rel="stylesheet" href="/styles.css"> <link rel="stylesheet" href="/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Leckerli+One&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<!-- this should be some stuff that loads --!> <!-- this should be some stuff that loads --!>

7
nodejs-mini-message-board/src/views/index.ejs
View file

@ -1,13 +1,18 @@
<%- include('header') %> <%- include('header') %>
<div class="container msg-feed"> <div class="container msg-feed">
<div class="headline">
<h1><a href="new">Join the chat!</a></h1>
</div>
<% msgs.forEach((msg) => { %> <% msgs.forEach((msg) => { %>
<div class="card"> <div class="card">
<div class="card-metadata"> <div class="card-metadata">
<h3>@<%= msg.username %></h3> <h3>@<%= msg.username %></h3>
<span><%= dateParser(msg.date) %></span> <span><%= dateParser(msg.date) %></span>
</div> </div>
<p><%= msg.message %></p> <div class="card-message">
<p><%= msg.message %></p>
</div>
</div> </div>
<% }); %> <% }); %>

4
nodejs-mini-message-board/src/views/msgs.ejs
View file

@ -3,7 +3,7 @@
<%- include('partials/errors.ejs') %> <%- include('partials/errors.ejs') %>
<form method="POST" action="/new"> <form method="POST" action="/new">
<div class="container"> <div class="container">
<h1 class="headline">Add a message :)</h1> <h1 class="msg-headline">Add to the conversation :)</h1>
<div class="form-item"> <div class="form-item">
<label for="uername">Name</label> <label for="uername">Name</label>
<input type="text" id="username" name="username" placeholder="Enter your name..."> <input type="text" id="username" name="username" placeholder="Enter your name...">
@ -12,7 +12,7 @@
<label for="message">Message</label> <label for="message">Message</label>
<textarea id="message" name="message" rows="5" placeholder="what's on your mind?"></textarea> <textarea id="message" name="message" rows="5" placeholder="what's on your mind?"></textarea>
</div> </div>
<div class="form-item"> <div class="form-item btn-row">
<button class="btn primary-btn" type="submit">Post</button> <button class="btn primary-btn" type="submit">Post</button>
<button class="btn" type="button" onCLick="window.location='/';">Return</button> <button class="btn" type="button" onCLick="window.location='/';">Return</button>
</div> </div>