diff --git a/README.rst b/README.rst index 393e1e8..ae66533 100644 --- a/README.rst +++ b/README.rst @@ -6,3 +6,5 @@ This repo contains `Bootstrap`_ templates for the Django blog training project. Bootstrap ver. 5.2.3 is used within this sub-project. .. _Bootstrap: https://getbootstrap.com + +Live preview available at: https://edu-python-course.github.io/blog-bootstrap/ diff --git a/css/blog.css b/css/blog.css index 2a7a343..29f3ea3 100644 --- a/css/blog.css +++ b/css/blog.css @@ -99,4 +99,34 @@ width: 5rem; } -/*# sourceMappingURL=blog.css.map */ +.avatar { + max-height: 10rem; + max-width: 10rem; +} + +.profile-image { + max-height: 400px; + max-width: 400px; +} + +.blogpost-comment { + margin-bottom: 0.75rem; +} +.blogpost-comment .avatar { + max-height: 7rem; + max-width: 7rem; +} +.blogpost-comment div strong { + margin-bottom: 0.5rem; +} +.blogpost-comment div div { + margin-bottom: 0.5rem; +} +.blogpost-comment .bi-calendar { + margin-right: 0.5rem; +} + +.profile-action { + display: block; + width: 100%; +} diff --git a/css/blog.css.map b/css/blog.css.map index eae8269..a390413 100644 --- a/css/blog.css.map +++ b/css/blog.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["blog.scss"],"names":[],"mappings":"AAAA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;;;AAIF;EACE;EACA;;;AAIJ;EACE;;AACA;EACE;EACA","file":"blog.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["blog.scss"],"names":[],"mappings":"AAAA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;;;AAKF;EACE;EACA;;;AAIJ;EACE;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;AAEA;EACE;EACA;;AAIA;EACE;;AAGF;EACE;;AAIJ;EACE;;;AAIJ;EACE;EACA","file":"blog.css"} diff --git a/css/blog.min.css b/css/blog.min.css index 8661097..4e73910 100644 --- a/css/blog.min.css +++ b/css/blog.min.css @@ -1 +1,2 @@ -.blog-header{border-bottom:2px solid #e5e5e5}.blog-header .avatar,.blog-header .logo{max-height:2.75rem;max-width:2.75rem}.blog-title{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-size:2.25rem}.blog-title:hover{text-decoration:none}.nav-scroller{position:relative;z-index:2;height:2.75rem;overflow-y:hidden}.nav-scroller .nav{display:flex;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.position-sticky{top:2rem}.social{font-size:2.75rem;color:var(--bs-body-color)}.carousel{margin-bottom:4rem}.carousel-caption{bottom:3rem;z-index:10}.carousel-item{height:25rem}.form-auth{height:100%;display:block;align-items:center;text-align:center;max-width:300px;padding:15px}.form-auth input{border-radius:0}.form-auth input#username{border-top-left-radius:1rem;border-top-right-radius:1rem}.form-auth .form-floating:focus-within{z-index:2}.form-auth.form-signin #password,.form-auth.form-signup #confirmPassword{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}.blog-pagination{margin-bottom:2rem}.blog-pagination .btn{margin-left:1rem;width:5rem} \ No newline at end of file +.blog-header{border-bottom:2px solid #e5e5e5}.blog-header .avatar,.blog-header .logo{max-height:2.75rem;max-width:2.75rem}.blog-title{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-size:2.25rem}.blog-title:hover{text-decoration:none}.nav-scroller{position:relative;z-index:2;height:2.75rem;overflow-y:hidden}.nav-scroller .nav{display:flex;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.position-sticky{top:2rem}.social{font-size:2.75rem;color:var(--bs-body-color)}.carousel{margin-bottom:4rem}.carousel-caption{bottom:3rem;z-index:10}.carousel-item{height:25rem}.form-auth{height:100%;display:block;align-items:center;text-align:center;max-width:300px;padding:15px}.form-auth input{border-radius:0}.form-auth input#username{border-top-left-radius:1rem;border-top-right-radius:1rem}.form-auth .form-floating:focus-within{z-index:2}.form-auth.form-signin #password,.form-auth.form-signup #confirmPassword{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}.blog-pagination{margin-bottom:2rem}.blog-pagination .btn{margin-left:1rem;width:5rem}.avatar{max-height:10rem;max-width:10rem}.profile-image{max-height:400px;max-width:400px}.blogpost-comment{margin-bottom:.75rem}.blogpost-comment .avatar{max-height:7rem;max-width:7rem}.blogpost-comment div div,.blogpost-comment div strong{margin-bottom:.5rem}.blogpost-comment .bi-calendar{margin-right:.5rem}.profile-action{display:block;width:100%} + diff --git a/css/blog.scss b/css/blog.scss index 1d2fd48..1c143e0 100644 --- a/css/blog.scss +++ b/css/blog.scss @@ -94,6 +94,7 @@ border-bottom-right-radius: 1rem; } } + .form-auth.form-signup { #confirmPassword { border-bottom-left-radius: 1rem; @@ -103,8 +104,42 @@ .blog-pagination { margin-bottom: 2rem; - .btn { - margin-left: 1rem; - width: 5rem; + +} + +.avatar { + max-height: 10rem; + max-width: 10rem; +} + +.profile-image { + max-height: 400px; + max-width: 400px; +} + +.blogpost-comment { + margin-bottom: 0.75rem; + + .avatar { + max-height: 7rem; + max-width: 7rem; } -} \ No newline at end of file + + div { + strong { + margin-bottom: 0.5rem; + } + + div { + margin-bottom: 0.5rem; + } + } + + .bi-calendar { + margin-right: 0.5rem; + } +} + +.profile-action { + display: block; + width: 100%; diff --git a/img/anonymous.svg b/img/anonymous.svg new file mode 100644 index 0000000..ffc9539 --- /dev/null +++ b/img/anonymous.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..0574c60 --- /dev/null +++ b/index.html @@ -0,0 +1,342 @@ + + + + + + + + Django Blog + + + + + + + + +
+
+
+
+ +
+
+ Django Blog +
+
+
+ avatar +
+ +
+
+
+
+ +
+
+ +
+
+
+

Blog posts

+
+ + + + + + + + + + + + + + + +
+
+
+
+
+

About Us

+

+ To the puréed cracker crumps add turkey, popcorn, melon sauce and sweet leek. Mackerel stew has to have a + delicious, shredded margerine component. +

+
+
+

Archive

+ +
+
+

Out social media

+
    +
    • +
    • +
    • +
+
+
+
+
+
+ + + + + diff --git a/js/blog.js b/js/blog.js new file mode 100644 index 0000000..8a38ef6 --- /dev/null +++ b/js/blog.js @@ -0,0 +1,67 @@ +// blogpost comment creation + +const createBlogpostComment = ({author, message, created_at}) => { + const comment = document.createElement("div"); + comment.classList.add("blogpost-comment", "col-12", "d-flex"); + + const author_avatar = document.createElement("img"); + author_avatar.src = author.img; + author_avatar.classList.add("avatar", "rounded-circle", "p-2"); + comment.appendChild(author_avatar); + + const comment_body = document.createElement("div"); + comment.appendChild(comment_body); + + const comment_author = document.createElement("strong"); + comment_author.classList.add("h4", "mb-2"); + comment_author.innerText = author.name; + comment_body.appendChild(comment_author); + + const comment_message = document.createElement("div"); + comment_message.innerText = message; + comment_body.appendChild(comment_message); + + const comment_created = document.createElement("small"); + const icon = document.createElement("i"); + comment_created.classList.add("text-muted"); + comment_created.innerText = created_at; + icon.classList.add("bi", "bi-calendar"); + comment_created.insertBefore(icon, comment_created.firstChild); + comment_body.appendChild(comment_created); + + return comment; +} + + +const addBlogpostComment = comment => { + const container = document.getElementById("BlogpostCommentsContainer"); + if (container) container.insertBefore(comment, container.firstChild); +} + + +const handleNewCommentSubmit = (event) => { + event.preventDefault(); + event.stopPropagation(); + + const message = event.target.querySelector("textarea").value.trim(); + event.target.reset(); + + if (!message) return; + + // TODO: get payload from backend + const payload = { + author: { + img: "https://i.pravatar.cc/350?u=da594f2b", + name: "Bosco Longhole", + }, + message, + created_at: "Feb 2, 2023", + } + + const comment = createBlogpostComment(payload); + addBlogpostComment(comment); +} + + +const BlogpostCommentsForm = document.getElementById("BlogpostCommentForm"); +if (BlogpostCommentsForm) BlogpostCommentsForm.addEventListener("submit", handleNewCommentSubmit); diff --git a/package.json b/package.json index 68a8170..fab6249 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "blog-bootstrap", - "version": "0.9.1", + "version": "0.9.2", "private": true, "description": "Bootstrap templates for the Django blog project", "keywords": [ diff --git a/templates/blogpost.html b/templates/blogpost.html index 44611cd..0ae8291 100644 --- a/templates/blogpost.html +++ b/templates/blogpost.html @@ -25,32 +25,32 @@ Django Blog
-
- - - +
+ avatar
+
@@ -111,8 +111,8 @@
-

hydras volare!

+

hydras volare!

category @@ -144,7 +144,7 @@

hydras volare!

minus quia quos saepe suscipit totam. Accusamus cum exercitationem harum id itaque, officia quos ullam voluptatem.

-

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto dicta, ea esse excepturi ipsa laudantium libero molestias officiis quas quidem quisquam ratione? Dolores est, iste laborum pariatur ullam vitae? Atque? @@ -167,7 +167,7 @@

hydras volare!

minus quia quos saepe suscipit totam. Accusamus cum exercitationem harum id itaque, officia quos ullam voluptatem.

-

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto dicta, ea esse excepturi ipsa laudantium libero molestias officiis quas quidem quisquam ratione? Dolores est, iste laborum pariatur ullam vitae? Atque? @@ -192,6 +192,80 @@

hydras volare!

+

Comments

+
+
+

New comment

+ +
+
+ avatar + + +
+
+
+
+ avatar +
+ John Doe +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam beatae dolorem iure molestiae + molestias quis quisquam reprehenderit! A animi assumenda autem blanditiis ea esse hic magnam officia + praesentium quam. +
+ Jan 31, 2023 +
+
+
+ avatar +
+ John Doe +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam beatae dolorem iure molestiae + molestias quis quisquam reprehenderit! A animi assumenda autem blanditiis ea esse hic magnam officia + praesentium quam. +
+ Jan 31, 2023 +
+
+
+ avatar +
+ John Doe +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam beatae dolorem iure molestiae + molestias quis quisquam reprehenderit! A animi assumenda autem blanditiis ea esse hic magnam officia + praesentium quam. +
+ Jan 31, 2023 +
+
+
+ avatar +
+ John Doe +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam beatae dolorem iure molestiae + molestias quis quisquam reprehenderit! A animi assumenda autem blanditiis ea esse hic magnam officia + praesentium quam. +
+ Jan 31, 2023 +
+
+
+ avatar +
+ John Doe +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam beatae dolorem iure molestiae + molestias quis quisquam reprehenderit! A animi assumenda autem blanditiis ea esse hic magnam officia + praesentium quam. +
+ Jan 31, 2023 +
+
+
@@ -205,18 +279,18 @@

About Us

Archive

@@ -233,5 +307,6 @@

Out social media

+ diff --git a/templates/homepage.html b/templates/homepage.html index 8d701c8..d6c501c 100644 --- a/templates/homepage.html +++ b/templates/homepage.html @@ -26,31 +26,27 @@
- avatar + avatar
@@ -313,18 +309,18 @@

About Us

Archive

@@ -341,5 +337,6 @@

Out social media

+ diff --git a/templates/profile.html b/templates/profile.html index ffb3680..e0563b2 100644 --- a/templates/profile.html +++ b/templates/profile.html @@ -41,16 +41,16 @@
@@ -59,7 +59,21 @@
- avatar + avatar +
+
+

Bosco Longhole

+
Articles: 20
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae distinctio nulla repellat sed! Dolore + doloremque, eligendi expedita facere ipsum magni, maxime natus optio quo recusandae reiciendis rem, saepe + temporibus voluptatibus. +
+
+ + + +

Blog posts by this author

@@ -258,18 +272,18 @@

About Us

Archive

@@ -286,5 +300,6 @@

Out social media

+ diff --git a/templates/signin.html b/templates/signin.html index f415503..b63203b 100644 --- a/templates/signin.html +++ b/templates/signin.html @@ -74,5 +74,6 @@

Please sign in

+ diff --git a/templates/signup.html b/templates/signup.html index 484a7f4..93b58a8 100644 --- a/templates/signup.html +++ b/templates/signup.html @@ -88,5 +88,6 @@

Please sign in

+