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 { 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");
console.log(dbPath);
async function makeDirectory(path) {
const dirCreation = await mkdir(path);

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

@ -4,6 +4,12 @@
background-color: #eff3ea;
}
a {
color: #86a788;
font-weight: 600;
text-decoration: none;
}
.nav {
display: flex;
justify-content: center;
@ -13,7 +19,14 @@
}
.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 {
@ -27,6 +40,17 @@
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 {
margin-top: 3rem;
}
@ -44,9 +68,19 @@
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;
font-weight: 500;
font-family: "Leckerli One", serif;
font-size: 1.3rem;
padding: 1.3rem;
text-align: center;
}
.card-metadata {
@ -63,7 +97,7 @@
}
.card-metadata > span {
font-weight: 300;
font-weight: 400;
}
.form-item {
@ -111,6 +145,7 @@
border: 2px solid #677d6a;
background-color: transparent;
/*width: 100%;*/
flex: 1;
}
.primary-btn {
@ -119,6 +154,10 @@
font-weight: 800;
}
.btn-row {
flex-direction: row;
}
.errors {
color: red;
}

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

@ -3,9 +3,9 @@
<head>
<title>Message the people</title>
<link rel="stylesheet" href="/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<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 rel="preconnect" href="https://fonts.googleapis.com">
<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&family=Leckerli+One&display=swap" rel="stylesheet">
</head>
<body>
<!-- this should be some stuff that loads --!>

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

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

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

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