Fix/blog UI changes (#49)

* fix(blog): Show pagination properly * fix(blog): Fix card clicking area * fix(blog): Add space between multilined tags
WebClub-NITK · Apr 9, 2021 · 98dda16 · 98dda16
1 parent 69d018c
commit 98dda16
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 19 deletions.
diff --git a/src/components/Blogs/BlogCard.js b/src/components/Blogs/BlogCard.js
@@ -30,26 +30,28 @@ class BlogCard extends Component {
     render() {
         return (
             <>
-                <Link to={"/blog/" + this.state.heading + "?id=" + this.props.blogsid} className="col-12" style={{ textDecoration: 'none' }}>
-                    <div className="col-12 m-0">
-                        <div className="blog-card my-2">
-                            <div className="meta">
-                                <div className="photo" style={{ background: this.props.color }}><span ref={this.headingFirstChar}></span></div>
-                                <ul className="details">
-                                    <li className="author py-3">{this.props.writer}</li>
-                                    <li className="date">{this.props.date}</li>
-                                </ul>
+                <div className="col-12">
+                    <div className='blog-card-container'>
+                        <Link to={"/blog/" + this.state.heading + "?id=" + this.props.blogsid} style={{ textDecoration: 'none' }}>
+                            <div className="blog-card">
+                                <div className="meta">
+                                    <div className="photo" style={{ background: this.props.color }}><span ref={this.headingFirstChar}></span></div>
+                                    <ul className="details">
+                                        <li className="author py-3">{this.props.writer}</li>
+                                        <li className="date">{this.props.date}</li>
+                                    </ul>
+                                </div>
+                                <div className="description text-dark ">
+                                    <h1 className="py-3" >{this.props.heading}</h1>
+                                    <p ref={this.htmlContent} className="py-1"> </p>
+                                    <ul className="tags list-inline pt-2">
+                                        {this.state.tagList}
+                                    </ul>
+                                </div>
                             </div>
-                            <div className="description text-dark ">
-                                <h1 className="py-3" >{this.props.heading}</h1>
-                                <p ref={this.htmlContent} className="py-1"> </p>
-                                <ul className="tags list-inline pt-2">
-                                    {this.state.tagList}
-                                </ul>
-                            </div>
-                        </div>
+                        </Link>
                     </div>
-                </Link>
+                </div>
             </>
         )
     }

diff --git a/src/components/Blogs/BlogsHome.js b/src/components/Blogs/BlogsHome.js
@@ -182,7 +182,7 @@ class BlogHome extends React.Component {
                                     {loaderContent}
                                 </div>
                                 {blogstoshow}
-                                <div className="col-12 pt-2 d-flex justify-content-center ">
+                                <div className="col-12 py-4 d-flex justify-content-center ">
                                     <ReactPaginate pageCount={noOfPages}
                                         onPageChange={this.handlePageClick}
                                         breakClassName={'page-item'}

diff --git a/src/styles/blog.css b/src/styles/blog.css
@@ -140,6 +140,12 @@ user-select: none;
     color: #16181a !important ;
 
 }
+
+.blog-card-container {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
 .blog-card {
     display: flex;
     flex-direction: column;
@@ -248,6 +254,7 @@ user-select: none;
     padding: 5px 10px;
     border-radius: 4px;
     text-transform: capitalize;
+    margin-bottom: 0.5rem;
 }
 .blog-card .description .tags li a:hover{
     color: white;