Skip to content

Commit

Permalink
new blog design
Browse files Browse the repository at this point in the history
  • Loading branch information
@nan-dan-unni
nan-dan-unni committed Jul 5, 2021
1 parent fec7a4a commit c0d268b
Show file tree
Hide file tree
Showing 6 changed files with 173 additions and 129 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"@testing-library/user-event": "^12.1.10",
"antd": "^4.16.6",
"axios": "^0.21.1",
"feather-icons-react": "^0.4.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-loading-skeleton": "^2.2.0",
Expand Down
151 changes: 84 additions & 67 deletions src/app/pages/Features/Feed.css
View file
Original file line number Diff line number Diff line change
@@ -1,85 +1,102 @@
.Feed {
background-color: rgb(246, 246, 246);
background-color: white;
min-height: 100vh;
}

.Blogs {
padding-top: 5vh;
padding-top: 10vh;
}
.Blog {
font-family: 'Montserrat', sans-serif;
height: fit-content;
width: 80vw;
margin-top: 8vh;
margin-left: 10vw;
margin-right: 10vw;
border-top: 0.1vh solid rgb(0, 100, 140);
border-bottom: 0.3vh solid rgb(0, 100, 140);
background-color: rgb(235, 235, 235);
border-radius: 1vh;
}
.Blog h3 {
font-family: 'Open Sans', sans-serif;
color: dodgerblue;
font-weight: 900;
font-size: 3vh;
}
.Blog a {
color: tomato;
padding-left: 0.5vw;
font-size: 2vh;
}
.Blog p {
font-size: 1.8vh;
padding-left: 2vw;
padding-right: 2vw;
white-space: pre-wrap;
overflow-wrap: break-word;
}
.Blog-Content {
padding: 3vh;
padding-bottom: 1vh;
font-family: "Montserrat", sans-serif;
height: fit-content;
width: 80vw;
margin: 15px auto;
padding: 15px 20px 1px 20px;
border-radius: 10px;
border: 2px solid rgb(230, 230, 230);
}
.Blog-Head {
display: flex;
align-items: center;
justify-content: space-between;
}
.Blog-Head h3 {
margin: 0;
}
.Blog-Head-left {
display: flex;
align-items: center;
}
.Blog-Head span {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-around;
margin-left: 15px;
}
.Blog-Head img {
height: 50px;
width: 50px;
}
.Blog-Body {
border-top: 1px solid whitesmoke;
border-bottom: 1px solid whitesmoke;
margin: 10px 0;
padding: 0 10px;
font-size: 14px;
text-align: justify;
white-space: pre-line;
overflow: hidden;
}
.Blog-Nav {
display: flex;
}
.Blog-Nav z {
color: rgb(0, 128, 255);
font-size: 2.4vh;
display: flex;
align-items: center;
justify-content: space-between;
height: fit-content;
}
.Blog-Nav button {
border: none;
background-color: transparent;
cursor: pointer;
outline: none;
}
.Blog-Nav-left {
margin-right: auto;
}
.Blog-Nav-right {
margin-left: auto;
order: 2;
}
.Blog-Nav i {
font-size: 3.5vh;
color: tomato;
}
.Blog-Nav iu {
font-size: 3.5vh;
color: rgb(0, 100, 140);
height: fit-content;
width: fit-content;
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
font-size: 3vh;
}
.Blog-Nav span {
display: flex;
align-items: center;
}
.Blog-Nav .bookmarked,
.Blog-Nav .not-bookmarked:hover {
color: dodgerblue;
}
.Blog-Nav .not-bookmarked,
.Blog-Nav .not-liked {
color: rgb(160, 160, 160);
}
.Blog-Nav .liked,
.Blog-Nav .not-liked:hover {
color: tomato;
}
.Blog svg {
color: gray;
cursor: pointer;
}

.Sk {
margin-top: 8vh;
margin-left: 10vw;
margin-right: 10vw;
border-bottom: 0.3vh solid rgb(220, 220, 220);
margin-top: 8vh;
margin-left: 10vw;
margin-right: 10vw;
border-bottom: 0.3vh solid rgb(220, 220, 220);
}
.Sk-Nav {
display: flex;
display: flex;
}
.Sk-left {
margin-right: auto;
margin-right: auto;
}
.Sk-right {
margin-left: auto;
order: 2;
}
margin-left: auto;
order: 2;
}
136 changes: 74 additions & 62 deletions src/app/pages/Features/Feed.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
import React, { Component } from "react";
import Skeleton from "react-loading-skeleton";
import { Link } from "react-router-dom";
import FeatherIcon from "feather-icons-react";

import "./Feed.css";
import { Logo, Navbar, Footer } from "../../components";
import { logoutWriterAPI } from "../../../services/writer";
import { likeBlogAPI, saveBlogAPI, feedAPI } from "../../../services/blog";
import { ellipsis } from "../../../utils";
import { routes } from "../../router/routes";
import { writerImg } from "../../../static";

function Skltn() {
return (
Expand Down Expand Up @@ -77,108 +82,115 @@ class Feed extends Component {
<div className="Feed">
<Logo></Logo>
<Navbar>
<a href="/logout/" onClick={this.handleLogout}>
<Link to={routes.LOGOUT} onClick={this.handleLogout}>
<i class="material-icons">power_settings_new</i>
<br />
<z>Logout</z>
</a>
<a href={`/writer/view/${user.username}`}>
</Link>
<Link to={routes.VIEW_WRITER(user.username)}>
<i class="material-icons">account_circle</i>
<br />
<z>Profile</z>
</a>
<a href="/search/">
</Link>
<Link to={routes.SEARCH}>
<i class="material-icons">person_add_alt_1</i>
<br />
<z>Search</z>
</a>
<a href="/blog/create/">
</Link>
<Link to={routes.CREATE_BLOG}>
<i class="material-icons">create</i>
<br />
<z>New Blog</z>
</a>
{user.is_superuser ? (
<a href="http://keyblogsapi.herokuapp.com">
</Link>
{user.is_superuser && (
<Link to="https://blogbookapi.herokuapp.com">
<i class="material-icons">construction</i>
<br />
<z>API</z>
</a>
) : (
<b></b>
</Link>
)}
</Navbar>
<div className="Blogs">
{this.state.loaded ? (
this.state.blogs.map((blog) => (
<div className="Blog">
<div className="Blog-Content">
<h3>{blog.title}</h3>
<a href={`/writer/view/${blog.author.username}`}>
{blog.author.username}
</a>
<br />
<br />
<p>{blog.content}</p>
<br />
<div className="Blog-Nav">
<z>{blog.no_of_likes}</z>
<div className="Blog" key={blog.pk}>
<div className="Blog-Head">
<div className="Blog-Head-left">
<img
src={writerImg}
onError={(e) => (e.target.src = writerImg)}
alt="dp"
/>
<span>
<h3>{blog.title}</h3>
<Link to={routes.VIEW_WRITER(blog.author.username)}>
{blog.author.username}
</Link>
</span>
</div>
<div className="Blog-Head-right">
<FeatherIcon icon="more-vertical" />
</div>
</div>
<div className="Blog-Body">
{window.screen.width > 600 ? (
<p>{ellipsis(blog.content, 600)}</p>
) : (
<p>{ellipsis(blog.content, 300)}</p>
)}
</div>
<div className="Blog-Nav">
<span>
<p>{blog.no_of_likes}</p>
{blog.likes.some(
(like) => like.username === user.username
) ? (
<div
className="Blog-Nav-left"
<button
class="material-icons liked"
onClick={() => this.handleLike(blog.pk)}
>
<button>
<i class="material-icons">favorite</i>
</button>
</div>
favorite
</button>
) : (
<div
className="Blog-Nav-left"
<button
class="material-icons not-liked"
onClick={() => this.handleLike(blog.pk)}
>
<button>
<iu class="material-icons">favorite_border</iu>
</button>
</div>
favorite_border
</button>
)}
{blog.saves.some(
(save) => save.username === user.username
) ? (
<div
className="Blog-Nav-right"
onClick={() => this.handleSave(blog.pk)}
>
<button>
<i class="material-icons">bookmark</i>
</button>
</div>
) : (
<div
className="Blog-Nav-right"
onClick={() => this.handleSave(blog.pk)}
>
<button>
<iu class="material-icons">bookmark_border</iu>
</button>
</div>
)}
</div>
</span>
{blog.saves.some(
(save) => save.username === user.username
) ? (
<button
className="material-icons bookmarked"
onClick={() => this.handleSave(blog.pk)}
>
bookmark
</button>
) : (
<button
class="material-icons not-bookmarked"
onClick={() => this.handleSave(blog.pk)}
>
bookmark_border
</button>
)}
</div>
</div>
))
) : (
<p>
<>
<Skltn />
<Skltn />
</p>
</>
)}
</div>
<br />
<br />
<hr />
<Footer></Footer>
<Footer />
</div>
);
}
Expand Down
6 changes: 6 additions & 0 deletions src/utils/ellipsis.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
const ellipsis = (text, len) => {
if (text.length > len) return text.substring(0, len) + "...";
return text;
};

export default ellipsis;
3 changes: 3 additions & 0 deletions src/utils/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import ellipsis from "./ellipsis";

export { ellipsis };
5 changes: 5 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5114,6 +5114,11 @@ fb-watchman@^2.0.0:
dependencies:
bser "2.1.1"

feather-icons-react@^0.4.3:
version "0.4.3"
resolved "https://registry.yarnpkg.com/feather-icons-react/-/feather-icons-react-0.4.3.tgz#50b5ee96a26773926636fa41ae3d60f2a8fee4db"
integrity sha512-tROWNpZD0HYOovJlaUoHwDN71S2HRoWMxtb3iKlJGObRGbSUzYdmPVcEO4Ksja8ADVbASDXOiD+KlkzDkPP7cA==

figgy-pudding@^3.5.1:
version "3.5.2"
resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
Expand Down

0 comments on commit c0d268b

Please sign in to comment.