From a119a3c73f02408b0e2ceedf0ac71e4e684b4cad Mon Sep 17 00:00:00 2001 From: Mark Powers Date: Thu, 7 Mar 2019 16:48:29 -0500 Subject: Add animation, blog, and feed template --- src/css/styles.css | 102 ++++++++++++++++++++++++++++++++++++++++++++++------ src/html/admin.html | 5 ++- src/html/blog.html | 36 +++++++++++++++++++ src/html/bread.html | 18 +++------- src/html/essay.html | 1 - src/html/feed.html | 16 +++++++++ src/html/index.html | 22 +++++------- src/html/login.html | 1 - src/index.js | 4 +++ src/js/feed.js | 10 ++++++ src/server.js | 14 ++++++++ 11 files changed, 188 insertions(+), 41 deletions(-) create mode 100644 src/html/blog.html create mode 100644 src/html/feed.html create mode 100644 src/js/feed.js (limited to 'src') diff --git a/src/css/styles.css b/src/css/styles.css index 9a7d048..a455835 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -1,5 +1,39 @@ +:root { + --background: #fff; + --background-accent: #f0f0f0; + --accent: #ada; + --text: #000; + --btn-color: #2d2; + --btn-text: #000; + --btn-hover: #0a0; + --light-text: #aaa +} + + body { padding: 15px; + background-color: var(--background); + font-family: Arial, Helvetica, sans-serif; +} + +h1 { + font-size: 30pt; + font-weight: 150; + margin-bottom: 0; +} + +@keyframes zoom-left { + 0% {left: 100%; } + 100% {left: 0;} +} + +footer { + text-align: center; + padding-top: 1em; + padding-bottom: 2em; + border-top: 1px solid var(--light-text); + color: var(--light-text); + background-color: var(--background-accent); } .essay{ @@ -7,14 +41,14 @@ body { } .figure { - border: 1px solid #777777; - background-color: #dddddd; + border: 1px solid #777; + background-color: #ddd; padding: 10px; } .item { margin: 10px; - border: 2px solid #777777; + border: 2px solid #777; border-radius: 5px; padding: 7px; } @@ -26,15 +60,17 @@ img { .card { margin: 1em; padding: 2%; - border: 1px solid #aaaaaa; + border: 1px solid var(--text); + border-radius: 3px; display: inline; min-width: 200px; + background-color: var(--background-accent); } .card img { width: 100%; - padding: 2%; - + margin: 2%; + border: 2px solid #888; } .main-page{ @@ -42,10 +78,22 @@ img { flex-direction: row; } +#feed { + width: 100%; +} .feed { width: 90%; display: flex; flex-direction: column; + margin-top: 8px; + animation-name: zoom-left; + animation-duration: .5s; + animation-iteration-count: 1; + position: relative; +} + +p { + margin-top: 0; } @media screen and (min-width: 900px) { @@ -60,14 +108,20 @@ img { } .sidebar { - height: 100vh; + /* height: 50vh; */ + height: 100%; width: 100px; margin: 20px; + padding: 20px; + border: 1px solid var(--text); + border-radius: 3px; + background-color: var(--background-accent); } .sidebar ul { list-style: none; padding: 0; + margin-top: 0; } .sidebar ul li { @@ -77,18 +131,46 @@ img { margin-right: auto; } -.btn-primary { +.btn { + display: inline-block; + padding: 1px 3px; + border: 1px solid var(--btn-text); + border-radius: 3px; width: 100%; - height: 2em; - border-radius: 0; + max-width: 100px; + line-height: 2em; text-align: center; + vertical-align: middle; + white-space: nowrap; + text-decoration: none; +} + +.btn-primary { + height: 2em; font-size: 20px; + background-color: var(--btn-color); + color: var(--btn-text); +} + +.btn-primary:hover{ + background-color: var(--btn-hover); } .date { font-style: italic; margin: 0em; } +.tag { + font-style: normal; + padding-left: 1em; + font-weight: lighter; + font-size: .8em; + text-decoration: none; + color: var(--light-text); +} +.tag::before{ + content: "#"; +} .url-table, .ip-table { width: 30%; diff --git a/src/html/admin.html b/src/html/admin.html index 1ec7e15..0f98eea 100644 --- a/src/html/admin.html +++ b/src/html/admin.html @@ -5,7 +5,6 @@ Mark's Kitchen - Admin - @@ -35,6 +34,9 @@
+
+ Tags: +
Images:
@@ -42,6 +44,7 @@ diff --git a/src/html/blog.html b/src/html/blog.html new file mode 100644 index 0000000..01cd2f6 --- /dev/null +++ b/src/html/blog.html @@ -0,0 +1,36 @@ + + + + + Mark's Kitchen - Blog + + + + + + + + + + +
+

Blog

+
+
+ + + \ No newline at end of file diff --git a/src/html/bread.html b/src/html/bread.html index 1ce1478..0658e11 100644 --- a/src/html/bread.html +++ b/src/html/bread.html @@ -5,12 +5,12 @@ Mark's Kitchen - Bread - + @@ -29,17 +29,7 @@

Bread

Some highlights (and lowlights) of breadmaking -
-
-

{{ post.description }}

-
- - - -
-

{{ post.createdAt.substring(0,10) }}

-
-
+
diff --git a/src/html/essay.html b/src/html/essay.html index 7110df1..6152a4f 100644 --- a/src/html/essay.html +++ b/src/html/essay.html @@ -5,7 +5,6 @@ Mark's Kitchen - Essays - diff --git a/src/html/feed.html b/src/html/feed.html new file mode 100644 index 0000000..358ef61 --- /dev/null +++ b/src/html/feed.html @@ -0,0 +1,16 @@ +
+
+

{{ post.description }}

+
+ + + +
+

+ {{ post.createdAt.substring(0,10) }} + + {{tag}} + +

+
+
\ No newline at end of file diff --git a/src/html/index.html b/src/html/index.html index 01f6e4e..73ed147 100644 --- a/src/html/index.html +++ b/src/html/index.html @@ -5,13 +5,13 @@ Mark's Kitchen - + @@ -32,22 +32,16 @@ -
-
-

{{ post.description }}

-
- - - -
-

{{ post.createdAt.substring(0,10) }}

-
-
+
+ \ No newline at end of file diff --git a/src/html/login.html b/src/html/login.html index 53a2d06..58ca2ae 100644 --- a/src/html/login.html +++ b/src/html/login.html @@ -5,7 +5,6 @@ Mark's Kitchen - Login - diff --git a/src/index.js b/src/index.js index c689779..5315c8d 100644 --- a/src/index.js +++ b/src/index.js @@ -57,6 +57,9 @@ function setUpModels(){ "pictures": database.define('pictures', { source: { type: Sequelize.TEXT, allowNull: false}, }), + "tags": database.define('tags', { + text: { type: Sequelize.TEXT, allowNull: false}, + }), "users": database.define('user', { username: { type: Sequelize.STRING, @@ -73,6 +76,7 @@ function setUpModels(){ }) } models.pictures.belongsTo(models.posts); + models.tags.belongsTo(models.posts); return models; } diff --git a/src/js/feed.js b/src/js/feed.js new file mode 100644 index 0000000..a80af9c --- /dev/null +++ b/src/js/feed.js @@ -0,0 +1,10 @@ +function loadFeed(callback){ + var myRequest = new Request('/feed'); + fetch(myRequest).then(function(response) { + return response.text(); + }).then(function(response) { + console.log(response); + document.getElementById("feed").innerHTML = response; + callback() + }); +} diff --git a/src/server.js b/src/server.js index 5bbb980..1f0573c 100644 --- a/src/server.js +++ b/src/server.js @@ -66,6 +66,8 @@ function setUpRoutes(models, jwtFunctions, database) { server.get('/admin', (req, res) => res.sendFile(__dirname + "/html/admin.html")); server.get('/login', (req, res) => res.sendFile(__dirname + "/html/login.html")) server.get('/bread', (req, res) => res.sendFile(__dirname + "/html/bread.html")); + server.get('/blog', (req, res) => res.sendFile(__dirname + "/html/blog.html")); + server.get('/feed', (req, res) => res.sendFile(__dirname + "/html/feed.html")); server.get('/essay', (req, res) => res.sendFile(__dirname + "/html/essay.html")); server.get('/snake', (req, res) => res.sendFile(__dirname + "/html/snake.html")); server.get('/setScore', (req, res) => { @@ -82,6 +84,9 @@ function setUpRoutes(models, jwtFunctions, database) { res.status(400).send(e.message); } }) + server.get('/blog/:id', async (req, res, next) => { + + }); server.get('/posts/:type', async (req, res, next) => { try { const { type } = req.params; @@ -90,6 +95,9 @@ function setUpRoutes(models, jwtFunctions, database) { for (const post of posts) { const images = await models.pictures.findAll({ attributes: ["source"], where: { postId: post.id } }).map(x => x.source); post.images = images; + const tags = await models.tags.findAll({ attributes: ["text"], where: { postId: post.id } }).map(x => x.text); + console.log(tags); + post.tags= tags; } res.status(200).send(posts); next(); @@ -105,6 +113,9 @@ function setUpRoutes(models, jwtFunctions, database) { await models.pictures.create({ "source": "uploads/" + file.filename, "postId": newPost.id }); console.log("uploaded ", file.path); }) + req.body.tags.split(" ").forEach(async (tag) => { + await models.tags.create({ "text": tag, "postId": newPost.id}); + }) console.log(newPost); res.redirect(`/${type}`); next(); @@ -137,6 +148,9 @@ function setUpRoutes(models, jwtFunctions, database) { server.get('/essay/:id', (req, res) => { res.sendFile(__dirname + "/html/essay/" + req.params.id); }); + server.get('/js/:id', (req, res) => { + res.sendFile(__dirname + "/js/" + req.params.id); + }); } -- cgit v1.2.3