From 3c3deda9868258a7baba0bc3f8c2527969dc942b Mon Sep 17 00:00:00 2001 From: Mike Smith <89040888+smiggiddy@users.noreply.github.com> Date: Tue, 31 Dec 2024 14:29:00 -0500 Subject: [PATCH] ui: better design and stuff --- nodejs-mini-message-board/src/db.js | 3 +- .../src/public/styles.css | 47 +++++++++++++++++-- .../src/views/header.ejs | 6 +-- nodejs-mini-message-board/src/views/index.ejs | 7 ++- nodejs-mini-message-board/src/views/msgs.ejs | 4 +- 5 files changed, 56 insertions(+), 11 deletions(-) diff --git a/nodejs-mini-message-board/src/db.js b/nodejs-mini-message-board/src/db.js index 52dd24f..965e2dc 100644 --- a/nodejs-mini-message-board/src/db.js +++ b/nodejs-mini-message-board/src/db.js @@ -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); diff --git a/nodejs-mini-message-board/src/public/styles.css b/nodejs-mini-message-board/src/public/styles.css index b1745ba..0156c67 100644 --- a/nodejs-mini-message-board/src/public/styles.css +++ b/nodejs-mini-message-board/src/public/styles.css @@ -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; } diff --git a/nodejs-mini-message-board/src/views/header.ejs b/nodejs-mini-message-board/src/views/header.ejs index 6692306..9b246de 100644 --- a/nodejs-mini-message-board/src/views/header.ejs +++ b/nodejs-mini-message-board/src/views/header.ejs @@ -3,9 +3,9 @@ Message the people - - - + + + diff --git a/nodejs-mini-message-board/src/views/index.ejs b/nodejs-mini-message-board/src/views/index.ejs index afe34f1..2cce263 100644 --- a/nodejs-mini-message-board/src/views/index.ejs +++ b/nodejs-mini-message-board/src/views/index.ejs @@ -1,13 +1,18 @@ <%- include('header') %>
+
+

Join the chat!

+
<% msgs.forEach((msg) => { %>

@<%= msg.username %>

<%= dateParser(msg.date) %>
-

<%= msg.message %>

+
+

<%= msg.message %>

+
<% }); %> diff --git a/nodejs-mini-message-board/src/views/msgs.ejs b/nodejs-mini-message-board/src/views/msgs.ejs index 932294b..bbf7ff6 100644 --- a/nodejs-mini-message-board/src/views/msgs.ejs +++ b/nodejs-mini-message-board/src/views/msgs.ejs @@ -3,7 +3,7 @@ <%- include('partials/errors.ejs') %>
-

Add a message :)

+

Add to the conversation :)

@@ -12,7 +12,7 @@
-
+