diff --git a/Nodejs/initial.sql b/Nodejs/initial.sql index f0217c7..0f1b906 100644 --- a/Nodejs/initial.sql +++ b/Nodejs/initial.sql @@ -41,6 +41,14 @@ CREATE TABLE "t_users" ( "role" text ); + +CREATE TABLE "t_profile_posts" ( + "username" text, + "date_created" text, + "profile_post_content" text, + "post_id" bigint +); + CREATE TABLE "session" ( "sid" varchar NOT NULL COLLATE "default", "sess" json NOT NULL, diff --git a/Nodejs/odal.js b/Nodejs/odal.js index 7dfb9d4..dc6220e 100644 --- a/Nodejs/odal.js +++ b/Nodejs/odal.js @@ -56,7 +56,7 @@ app.use(session({ resave: false, saveUninitialized: false, cookie: {maxAge: null, secure: false, httpOnly: false}, - // In production change httpOnly to true and change 'secure' to true. + // In production change 'secure' to true. autoRemove: 'native', })); @@ -65,7 +65,7 @@ app.use(bodyParser.urlencoded({ extended: true })); const limiter = rateLimit({ windowMs: 15 * 60 * 1000, - max: 100 + max: 1000 }); app.use(limiter); @@ -115,7 +115,7 @@ app.post('/login', async function(req, res){ var userExists = await db.checkExistingUser(req.body.Username); if (req.body.Username == "" || req.body.Password == "") { throw '

Empty username or password

'; - } else if (userExists.rowCount == 0) { + } else if (userExists.rowCount == false) { throw `${req.body.Username} not found, please register first`; } else { db.validateUser(req, res); @@ -134,6 +134,7 @@ app.get('/profile', async function(req, res) { layout: false, user: req.session.user, userBio: await db.retrieveUserBio(req.session.user), + userPosts: await db.retrieveUserPosts(req.session.user), }); } else { res.status(403).send("

Please register, login, or enable cookies to access this content.

"); @@ -196,12 +197,14 @@ app.get('/user/:username', async function(req, res) { layout: false, name: req.params.username, userBio: await db.retrieveUserBio(req.params.username), + userPosts: await db.retrieveUserPosts(req.params.username), }); } else { res.render('other-profiles-unfollowed', { layout: false, name: req.params.username, userBio: await db.retrieveUserBio(req.params.username), + userPosts: await db.retrieveUserPosts(req.params.username), }); } } else { @@ -413,6 +416,25 @@ app.post('/create/miniverse-post', async function(req, res) { } }); +app.post('/create/profile-post', async function(req, res) { + if (vd.verifySession(req)) { + if (req.body.profilePostContent != '') { + var d = new Date(); + var date = d.toString(); + if (await db.checkProfilePostsExist() == false) { + db.insertProfilePost(req.session.user, date, req.body.profilePostContent, 1); + } else { + let postID = await db.lastPostID(req.session.user); + postID = parseInt(postID) + 1; + db.insertProfilePost(req.session.user, date, req.body.profilePostContent, postID); + } + } + res.redirect('back'); + } else { + res.status(403).send("

Please register, login, or enable cookies to access this content.

"); + } +}); + app.get('/admin', async function(req, res) { app.use(express.static('public/css')); if (vd.verifySession(req)) { @@ -432,7 +454,7 @@ app.get('/admin', async function(req, res) { app.get('/chat', function(req, res){ res.send("Feature is currently disabled."); -}) +}); app.get('/terms-and-conditions', function(req, res) { app.use(express.static("public/css")); diff --git a/Nodejs/package-lock.json b/Nodejs/package-lock.json index 6f555ff..00e79a0 100644 --- a/Nodejs/package-lock.json +++ b/Nodejs/package-lock.json @@ -1106,9 +1106,9 @@ } }, "uglify-js": { - "version": "3.10.4", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.10.4.tgz", - "integrity": "sha512-kBFT3U4Dcj4/pJ52vfjCSfyLyvG9VYYuGYPmrPvAxRw/i7xHiT4VvCev+uiEMcEEiu6UNB6KgWmGtSUYIWScbw==", + "version": "3.11.2", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.11.2.tgz", + "integrity": "sha512-G440NU6fewtnQftSgqRV1r2A5ChKbU1gqFCJ7I8S7MPpY/eZZfLGefaY6gUZYiWebMaO+txgiQ1ZyLDuNWJulg==", "optional": true }, "uid-safe": { diff --git a/Nodejs/private/database.js b/Nodejs/private/database.js index c7eaf60..3f1812e 100644 --- a/Nodejs/private/database.js +++ b/Nodejs/private/database.js @@ -330,4 +330,31 @@ retrieveUsersData: async function retrieveUsersData() { var results = await client.query(query); return results.rows; }, + + +checkProfilePostsExist: async function checkProfilePostsExist() { + var query = `SELECT * FROM "t_profile_posts" WHERE "post_id" = 1`; + var result = await client.query(query); + return result.rowCount; +}, + +insertProfilePost: async function insertProfilePost(sessionUser, profilePostCreationDate, profilePostContent, postID) { + var query = `INSERT INTO "t_profile_posts" (username, date_created, profile_post_content, post_id) VALUES($1, $2, $3, $4)`; + var queryValues = [sessionUser, profilePostCreationDate, profilePostContent, postID]; + await client.query(query, queryValues); +}, + +lastPostID: async function lastPostID() { + var query = `SELECT "post_id" FROM t_profile_posts ORDER BY "date_created" DESC LIMIT 1`; + var result = await client.query(query); + return result.rows[0].post_id; + }, + +retrieveUserPosts: async function retrieveUserPosts(sessionUser) { + var query = `SELECT * FROM "t_profile_posts" WHERE "username" = $1 ORDER BY date_created DESC`; + var queryValues = [sessionUser]; + var result = await client.query(query, queryValues); + return result.rows; +}, + } diff --git a/Nodejs/public/css/browser.css b/Nodejs/public/css/browser.css index 130e472..acb7525 100644 --- a/Nodejs/public/css/browser.css +++ b/Nodejs/public/css/browser.css @@ -63,6 +63,7 @@ a:hover { #follower-count-box { display: inline-block; font-size: 20px; + margin-left: 3px; } #browser-content { @@ -71,12 +72,14 @@ a:hover { } #miniverse-title { margin-right: 135px; + font-weight: bold; } .type-spacing { margin-left: 50px; } .title-styling { text-decoration: underline; + font-weight: bold; } @media screen and (max-width: 630px) { diff --git a/Nodejs/public/css/create-miniverse.css b/Nodejs/public/css/create-miniverse.css index e5be130..0d42e7e 100644 --- a/Nodejs/public/css/create-miniverse.css +++ b/Nodejs/public/css/create-miniverse.css @@ -15,7 +15,10 @@ a:hover { grid-template-columns: repeat(40, 1fr); } - +#navbar-grid-size { + grid-column: 1/41; + grid-row: 1; +} .miniverse-form { text-align: center; @@ -25,14 +28,14 @@ a:hover { border-radius: 20px; border-width: 7px; grid-column: 19/20; - grid-row: 1; + grid-row: 2; + margin-top: 25px; } .title-text { color: black; font-size: 20px; - border-radius: 7px; - background-color: #1affc6; + background-color: #00b7ffde; font-family: "Arial"; width: 287px; padding-left: 7px; @@ -41,6 +44,11 @@ a:hover { padding-top: 1px; } +.rounded-top-element { + border-top-left-radius: 10px; + border-top-right-radius: 10px; +} + ul { font-size: 14px; @@ -56,7 +64,6 @@ input[type="textarea"] { border-width: 2px; border-color: #dfe1e5; padding: 7px; - border-radius: 9px; width: 283px; } @@ -64,7 +71,6 @@ textarea { border-style: solid; border-width: 2px; border-color: #dfe1e5; - border-radius: 9px; padding: 7px; width: 283px; } diff --git a/Nodejs/public/css/login.css b/Nodejs/public/css/login.css index ffc9a25..9b2e857 100644 --- a/Nodejs/public/css/login.css +++ b/Nodejs/public/css/login.css @@ -54,18 +54,10 @@ input[type=submit] { color: black; font-size: 20px; border-radius: 7px; - background-color: #1affc6; + background-color: #00b7ffde; font-family: "Arial"; } -#username-box { - padding: 0px; -} - -#password-box { - padding: 0px; -} - .hover-background:hover { background-color: #e7e7e7; } diff --git a/Nodejs/public/css/miniverse-topic.css b/Nodejs/public/css/miniverse-topic.css index 767fea3..655d270 100644 --- a/Nodejs/public/css/miniverse-topic.css +++ b/Nodejs/public/css/miniverse-topic.css @@ -11,6 +11,7 @@ pre { margin: 0px; display: flex; padding-bottom: 5px; + padding-top: 5px; } #grid { @@ -19,46 +20,28 @@ pre { grid-gap: 0px; } -#topic-title { - font-size: 20px; - padding-left: 15px; - grid-column: 10/18; - grid-row: 2; - padding-top: 7px; +#navbar-grid-size { + grid-column: 1/31; } -#delete-topic { +#inner-grid { + display: grid; grid-row: 2; - grid-column: 19/19; - font-size: 30px; -} - -#delete-topic:hover { - color: red; - cursor: pointer; -} - -#delete-topic-icon { - font-size: 30px; -} -#delete-topic-icon:hover { - color: red; - cursor: pointer; + grid-column: 10/21; + margin-top: 25px; + background-color: #00b7ffde; + border-style: solid; + border-radius: 10px; + grid-template-columns: repeat(20, 1fr) } -#delete-reply-container { - grid-column: 12/18; - grid-row: 6/6; - color: blue; - display: block; - position: relative; - text-align: center; - margin-bottom: 80px; - border-radius: 5px; - border-style: solid; - background-color: #d9d9d9; - cursor: pointer; - z-index: 1; +#topic-title { + font-size: 20px; + padding-left: 15px; + grid-column: 1/20; + padding-top: 7px; + border-radius: 20px; + font-family: "Arial"; } .button-icon { @@ -67,26 +50,23 @@ pre { } #topic-summary { - background-color: DarkGray; margin-bottom: 15px; padding: 4px; padding-left: 15px; background-color: white; border-color: black; - border-style: solid; - border-radius: 20px; - grid-column: 10/20; - grid-row: 3; + border-top-style: solid; + border-bottom-style: solid; + grid-column: 1/21; } #reply-button-container { - grid-column: 12/18; - grid-row: 5/5; + grid-column: 7/16; color: blue; display: block; position: relative; text-align: center; - margin-bottom: 15px; + margin-bottom: 21px; border-radius: 5px; border-style: solid; background-color: #d9d9d9; @@ -102,6 +82,7 @@ pre { border-width: 5px; display: none; position: absolute; + right: -50px; cursor: context-menu; } @@ -114,14 +95,15 @@ pre { border-width: 5px; display: none; position: absolute; + right: -50px; cursor: context-menu; } #reply-list { display: block; - grid-column: 11/19; - grid-row: 7; - margin-bottom: 75px; + grid-column: 3/19; + grid-row: 5; + /* margin-bottom: 75px; */ } #reply-container { @@ -136,8 +118,38 @@ pre { hyphens: auto; } -#navbar-grid-size { - grid-column: 1/31; + +#delete-topic { + grid-column: 20; + font-size: 30px; +} + +#delete-topic:hover { + color: red; + cursor: pointer; +} + +#delete-topic-icon { + font-size: 30px; +} +#delete-topic-icon:hover { + color: red; + cursor: pointer; +} + +#delete-reply-container { + grid-column: 7/16; + grid-row: 4; + color: blue; + display: block; + position: relative; + text-align: center; + margin-bottom: 21px; + border-radius: 5px; + border-style: solid; + background-color: #d9d9d9; + cursor: pointer; + z-index: 1; } .background-styling-1 { @@ -151,26 +163,26 @@ pre { } .form-submission { - width: 207px; + width: 287px; } @media screen and (max-width: 800px) { #topic-title { - grid-column: 5/25; - grid-row: 1; + grid-column: 5/23; + grid-row: 2; } #topic-summary { grid-column: 5/25; - grid-row: 2; + grid-row: 3; } #reply-button-container { - grid-column: 5/25; - grid-row: 3; + grid-column: 9/21; + grid-row: 4; } #delete-reply-container { - grid-column: 5/25; - grid-row: 4; + grid-column: 9/21; + grid-row: 5; } #reply-list { @@ -179,7 +191,7 @@ pre { } #delete-topic { - grid-column: 24/24; + grid-column: 24/25; } } diff --git a/Nodejs/public/css/miniverse.css b/Nodejs/public/css/miniverse.css index c757d8c..345483e 100644 --- a/Nodejs/public/css/miniverse.css +++ b/Nodejs/public/css/miniverse.css @@ -2,9 +2,20 @@ body { background-color: #28f0da; } +.miniverse-container { + grid-column: 29/55; + grid-row: 2; + background-color: #00b7ffde; + border-style: solid; + border-radius: 5px; + display: inline-grid; + grid-template-columns: repeat(10, 1fr); + margin-top: 25px; +} + #miniverse-name { grid-row: 2/2; - grid-column: 29/50; + grid-column: 1/11; font-size: 30px; padding-left: 15px; cursor: default; @@ -18,12 +29,12 @@ body { margin-bottom: 15px; padding: 4px; padding-left: 15px; - grid-column: 29/50; + grid-column: 1/11; grid-row: 3/3; background-color: white; border-color: black; - border-style: solid; - border-radius: 20px; + border-top-style: solid; + border-bottom-style: solid; } #reply-area { @@ -32,7 +43,7 @@ body { } #delete-miniverse { grid-row: 2; - grid-column: 46/49; + grid-column: 10/11; font-size: 30px; } @@ -66,6 +77,7 @@ body { border-color: LightGray; cursor: pointer; } + .button-styling:hover { background-color: #bfbfbf; } @@ -97,13 +109,15 @@ a { } #create-post-container { - grid-column: 29/50; + grid-column: 1/11; grid-row: 4/4; color: blue; display: block; position: relative; text-align: center; margin-bottom: 15px; + margin-left: 100px; + margin-right: 100px; border-radius: 5px; border-style: solid; background-color: #d9d9d9; @@ -124,6 +138,7 @@ a { display: none; position: absolute; cursor: default; + right: -52px; } #topic-box { @@ -154,11 +169,12 @@ a { display: flex; flex-flow: column; border-style: solid; - border-radius: 5px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; border-color: #737373; background-color: #cceeff; grid-row: 5; - grid-column: 29/50; + grid-column: 1/11; } .topic-divider { @@ -188,7 +204,9 @@ pre { border: solid; border-color: #9da7a8; cursor: default; + padding-bottom: 3px; } + #topic-sorting-box { display: none; border: solid; @@ -199,32 +217,67 @@ pre { padding-left: 81px; } - .expand-summary:hover { color: grey; cursor: pointer; } +@media screen and (max-width: 950px) { + #miniverse-name { + grid-column: 20/58; + } + #delete-miniverse { + grid-column: 40/52; + } + #miniverse-summary { + grid-column: 22/57; + } + #create-post-container { + grid-column: 25/54; + } + #topics-list { + grid-column: 25/54; + } +} + @media screen and (max-width: 850px) { #miniverse-name { - grid-column: 22/52; + grid-column: 24/54; } #delete-miniverse { - grid-column: 50/50; + grid-column: 50/52; } #miniverse-summary { - grid-column: 22/52; + grid-column: 24/55; } #create-post-container { - grid-column: 22/52; + grid-column: 25/54; } + + #topics-list { + grid-column: 25/54; + } +} +@media screen and (max-width: 700px) { + #miniverse-name { + grid-column: 24/54; + } + #delete-miniverse { + grid-column: 50/52; + } + #miniverse-summary { + grid-column: 24/55; + } + #create-post-container { + grid-column: 25/54; + } #topics-list { - grid-column: 22/52; + grid-column: 25/54; } } @@ -251,6 +304,24 @@ pre { } } +@media screen and (max-width: 420px) { + #miniverse-name { + grid-column: 24/54; + } + #delete-miniverse { + grid-column: 50/52; + } + #miniverse-summary { + grid-column: 24/55; + } + #create-post-container { + grid-column: 25/54; + } + #topics-list { + grid-column: 25/54; + } +} + @media screen and (max-width: 350px) { #miniverse-name { @@ -272,4 +343,4 @@ pre { #topics-list { grid-column: 1/83; } -} \ No newline at end of file +} diff --git a/Nodejs/public/css/navbar.css b/Nodejs/public/css/navbar.css index 3fe5d0d..89c78ae 100644 --- a/Nodejs/public/css/navbar.css +++ b/Nodejs/public/css/navbar.css @@ -7,6 +7,7 @@ font-size: 17px; border-radius: 5px; padding-right: 3px; + cursor: pointer; } a { @@ -30,13 +31,15 @@ a:hover { font-size: 15px; } + .links-content { - display: inline; + display: inline-block; + border-width: 2px; border-radius: 8px; border-color: black; border-style: solid; background-color: #cceeff; - margin-bottom: 55px; + margin-bottom: 5px; border-top-width: 2px; } diff --git a/Nodejs/public/css/profile-customize.css b/Nodejs/public/css/profile-customize.css index 8bb8bd3..7c74d9b 100644 --- a/Nodejs/public/css/profile-customize.css +++ b/Nodejs/public/css/profile-customize.css @@ -2,11 +2,43 @@ body { background-color: #28f0da; } -#upload-image-form { +#update-bio-form { + font-size: 30px; + font-family: "Calibri"; +} +#grid-container { + display: grid; + grid-template-columns: repeat(30, 1fr); } -#update-bio-form { - font-size: 30px; - font-family: "Arial"; +#navbar-grid-size { + grid-column: 1/31; +} + +#bio-container { + background-color: #00b7ffde; + grid-column: 10/21; + text-align: center; + border-style: solid; + border-radius: 5px; + grid-row: 2; + margin-top: 25px; +} + +textarea[name="update_bio"] { + resize: none; +} + +.links-container { + border-width: 2px; + border-color: black; + border-style: solid; + background-color: #cceeff; + border-top-width: 2px; + border-radius: 8px; +} +.flex { + display: flex; + flex-flow: column; } diff --git a/Nodejs/public/css/profile.css b/Nodejs/public/css/profile.css index 68bdb06..706f631 100644 --- a/Nodejs/public/css/profile.css +++ b/Nodejs/public/css/profile.css @@ -3,9 +3,7 @@ body { } a { - text-decoration: none; background-color: white; - color: blue; border-style: solid; border-color: black; border-radius: 5px; @@ -16,17 +14,18 @@ a { a:hover { color: red; } +.profile-grid { + display: grid; + grid-template-columns: repeat(30, 1fr); +} #grid-container { display: grid; grid-template-columns: repeat(30, 1fr); - grid-template-rows: repeat(5, 1fr); } #username { font-size: 25px; - grid-row: 2/2; - grid-column: 13/18; text-align: center; } @@ -51,8 +50,8 @@ a:hover { #searchbar-text { -grid-row: 1/1; -grid-column: 30/32; + grid-row: 1/1; + grid-column: 30/32; } #submitbox { @@ -73,85 +72,118 @@ grid-column: 30/32; grid-column: 1/32; } -#links-content { - border-width: 2px; +#bio { + grid-column: 10/21; + grid-row: 3/3; + background-color: white; + text-align: left; + padding-top: 5px; + padding-bottom: 5px; + padding-left: 25px; + padding-right: 25px; + margin-top: 5px; + font-size: 25px; border-color: black; + border-top-style: solid; + border-bottom-style: solid; + word-wrap: anywhere; +} + +#profile-post-container { + color: blue; + display: block; + text-align: center; border-style: solid; - background-color: #cceeff; - font-size: 15px; - margin-bottom: 55px; - border-radius: 8px; - padding-bottom: 5px; + border-radius: 5px; + background-color: #d9d9d9; + cursor: pointer; + margin-top: 20px; + margin-bottom: 20px; + margin-left: 125px; + margin-right: 125px; +} +#profile-post-form { + display: none; + color: black; + background-color: #cceeff; + border-color: black; + border-style: solid; + border-radius: 5px; + position: absolute; + cursor: default; } -#bio { - grid-column: 10/21; - grid-row: 3/3; - background-color: white; - text-align: left; - padding-top: 5px; - padding-bottom: 5px; - padding-left: 25px; - padding-right: 25px; - font-size: 25px; - border-radius: 75px; - border-color: black; - border-style: solid; - word-wrap: anywhere; +.user-posts-container { + text-align: center; + background-color: white; + border-color: black; + border-style: solid; + margin-top: 25px; + border-bottom-left-radius: 7px; + border-bottom-right-radius: 7px; } -#profile-post-container { -grid-column: 12/19; -grid-row: 4/4; -color: blue; -display: block; -position: relative; -text-align: center; -border-radius: 20px; -border-style: solid; -background-color: #d9d9d9; -cursor: pointer; -height: 25px; -top: 5px; -} - -.text-spacing { - margin-top: 3px; +.profile-table { + grid-row: 1; + grid-column: 10/21; + background-color: #00b7ffde; + border-radius: 10px; + border-style: solid; + margin-top: 35px; + } -.posts { +.user-posts { + border-top-style: solid; + border-width: 1px; +} +.user-post-date { + color: #ababab; } .float-right { float: right; } -@media screen and (max-width: 391px) { -#username { - grid-row: 2; - grid-column: 19; +.links-container { + border-width: 2px; + border-color: black; + border-style: solid; + background-color: #cceeff; + border-top-width: 2px; + border-radius: 8px; } -#links-main { - grid-row: 1; - grid-column: 1/2; -} -#image-box { - grid-column: 19; - grid-row: 3/6; +.flex { + display: flex; + flex-flow: column; } + +@media screen and (max-width: 391px) { + #username { + grid-row: 2; + grid-column: 19; + } + #links-main { + grid-row: 1; + grid-column: 1/2; + } + #image-box { + grid-column: 19; + grid-row: 3/6; + } } @media screen and (max-width: 430px) { - #links-content { + .links-content { display: block; } } @media screen and (max-width: 900px) { #username { - grid-column: 1/50; + grid-column: 1/50; } #bio { grid-column: 1/50; @@ -159,8 +191,8 @@ top: 5px; } @media screen and (max-width: 514px) { - a { - margin-left: 0px; - margin-right: 0px; - } + a { + margin-left: 0px; + margin-right: 0px; + } } diff --git a/Nodejs/public/css/register.css b/Nodejs/public/css/register.css index 0abf27b..036bf6f 100644 --- a/Nodejs/public/css/register.css +++ b/Nodejs/public/css/register.css @@ -47,7 +47,7 @@ input[type=submit] { color: black; font-size: 18px; border-radius: 10px; - background-color: #1affc6; + background-color: #00b7ffde; font-family: "Arial"; } diff --git a/Nodejs/public/css/search.css b/Nodejs/public/css/search.css index a5c314f..db29968 100644 --- a/Nodejs/public/css/search.css +++ b/Nodejs/public/css/search.css @@ -24,16 +24,17 @@ body { display: block; grid-row: 2/2; grid-column: 12/21; +margin-top: 25px; border-style: solid; -border: 2px 2px 2px 2px; -background-color: #cceeff; +background-color: #00b7ffde; border-radius: 8px; padding: 3px; border-width: 7px; border-color: #595959; +text-align: center; } -#search-form-pos { +#search-form-grid { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(2, 1fr); @@ -49,9 +50,8 @@ border-color: #595959; #txt-clr-bg { color: black; - background-color: #1affc6; + background-color: #cceeff; border-top-left-radius: 5px; - border-bottom-left-radius: 5px; border-top-right-radius: 5px; padding-left: 5px; padding-right: 5px; @@ -65,8 +65,7 @@ border-color: #595959; input[type="submit"] { - grid-column: 2/8; - grid-row: 3; + grid-column: 4/6; border-color: #999999; border-radius: 20px; margin-top: 7px; diff --git a/Nodejs/public/css/user-followers.css b/Nodejs/public/css/user-followers.css index 5a74fe4..2a14851 100644 --- a/Nodejs/public/css/user-followers.css +++ b/Nodejs/public/css/user-followers.css @@ -4,15 +4,27 @@ body { #grid { display: grid; grid-template-columns: repeat(20, 1fr); + grid-template-rows: repeat(5, 1fr); } #navbar-grid-size { - grid-row: 1/1; + grid-row: 1; grid-column: 1/21; } +#follower-box-header { + grid-row: 4; + grid-column: 6/16; + font-size: 20px; + font-family: "Arial"; +} + #follower-box { + grid-row: 5; + grid-column: 6/16; font-size: 30px; border-style: solid; border-width: 2px; + border-radius: 7px; + background-color: white; } diff --git a/Nodejs/public/css/user-following.css b/Nodejs/public/css/user-following.css index 2ab6ea0..3b7ccad 100644 --- a/Nodejs/public/css/user-following.css +++ b/Nodejs/public/css/user-following.css @@ -2,18 +2,31 @@ body { background-color: #28f0da; } -#navbar-grid-size { - grid-row: 1/1; - grid-column: 1/21; -} #grid { display: grid; grid-template-columns: repeat(20, 1fr); + grid-template-rows: repeat(5, 1fr); +} + +#navbar-grid-size { + grid-row: 1; + grid-column: 1/21; +} + +#following-box-header { + grid-row: 4; + grid-column: 6/16; + font-size: 20px; + font-family: "Arial"; } #following-box { + grid-row: 5; + grid-column: 6/16; font-size: 30px; border-style: solid; border-width: 2px; + border-radius: 7px; + background-color: white; } diff --git a/Nodejs/public/html/create-miniverse.html b/Nodejs/public/html/create-miniverse.html index fba8ca4..ddf8646 100644 --- a/Nodejs/public/html/create-miniverse.html +++ b/Nodejs/public/html/create-miniverse.html @@ -4,16 +4,22 @@ Create + +
+
+ Logout + Profile + Browser +
-
Miniverse Name
+
Miniverse Name
    -
  • Must have both a name and summary
  • Must be 20 characters or less
@@ -26,6 +32,7 @@

Agree to creation diff --git a/Nodejs/public/js/profile-post.js b/Nodejs/public/js/profile-post.js new file mode 100644 index 0000000..1a4edf8 --- /dev/null +++ b/Nodejs/public/js/profile-post.js @@ -0,0 +1,8 @@ +var profilePostButton = document.getElementById("profile-post-form"); +document.getElementById("profile-post-container").addEventListener("click", function(event) { + if (profilePostButton.style.display === "block" && (event.target.name != "profilePostContent" && event.target.name != "")) { + profilePostButton.style.display = "none"; + } else { + profilePostButton.style.display = "block"; + } +}); diff --git a/Nodejs/views/miniverse-creator.handlebars b/Nodejs/views/miniverse-creator.handlebars index bb91b80..6183df4 100644 --- a/Nodejs/views/miniverse-creator.handlebars +++ b/Nodejs/views/miniverse-creator.handlebars @@ -14,7 +14,9 @@ Search Logout Profile + Browser +
{{miniverseName}}
@@ -31,23 +33,27 @@
- CREATE TOPIC + Post
- Topic Title - - Topic Content + Title +
+ +
+ Description +
+
- TOPICS + Topics
- TOP + Top | - RECENT + Recent
{{#each miniverseTopics}} @@ -75,6 +81,8 @@ {{/each}}
+ +