sonny/newsreader
1
0
Fork 0
Code Issues 13 Pull requests 2 Projects Releases 58 Packages Wiki Activity Actions

Refactor post list css classes

Browse source
This commit is contained in:
Sonny 2020-05-25 09:43:24 +02:00
parent f6a0eee710
commit e2a6b4020f
11 changed files with 58 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/newsreader/js/pages/homepage/components/feedlist/FeedList.js
View file

@ -62,8 +62,8 @@ class FeedList extends React.Component {
);
} else {
return (
<div className="post-block">
<ul className="posts">{postItems}</ul>
<div className="posts">
<ul className="posts__list">{postItems}</ul>
{this.props.isFetching && <LoadingIndicator />}
</div>
);

15
src/newsreader/js/pages/homepage/components/feedlist/PostItem.js
View file

@ -11,17 +11,16 @@ class PostItem extends React.Component {
const post = { ...this.props.post, rule: rule.id };
const publicationDate = formatDatetime(post.publicationDate);
const titleClassName = post.read
? 'posts-header__title posts-header__title--read'
: 'posts-header__title';
? 'posts__header posts__header--read'
: 'posts__header';
return (
<li
className="posts__item"
onClick={() => {
this.props.selectPost(post);
}}
<li className="posts__item">
<h5
className={titleClassName}
title={post.title}
onClick={() => this.props.selectPost(post)}
>
<h5 className={titleClassName} title={post.title}>
{post.title}
</h5>

23
src/newsreader/js/pages/homepage/components/feedlist/RuleItem.js
View file

@ -1,23 +0,0 @@
import React from 'react';
import PostItem from './PostItem.js';
class RuleItem extends React.Component {
render() {
const posts = Object.values(this.props.posts).sort((firstEl, secondEl) => {
return new Date(secondEl.publicationDate) - new Date(firstEl.publicationDate);
});
const postItems = posts.map(post => {
return <PostItem key={post.id} post={post} rule={this.props.rule} />;
});
return (
<section className="posts-section">
<ul className="posts">{postItems}</ul>
</section>
);
}
}
export default RuleItem;

45
src/newsreader/scss/components/index.scss
View file

@ -1,28 +1,25 @@
@import "body/index";
@import "form/index";
@import "main/index";
@import "navbar/index";
@import "loading-indicator/index";
@import "./body/index";
@import "./form/index";
@import "./main/index";
@import "./navbar/index";
@import "./loading-indicator/index";
@import "modal/index";
@import "./modal/index";
@import "card/index";
@import "list/index";
@import "messages/index";
@import "section/index";
@import "errorlist/index";
@import "fieldset/index";
@import "pagination/index";
@import "sidebar/index";
@import "table/index";
@import "./card/index";
@import "./list/index";
@import "./messages/index";
@import "./section/index";
@import "./errorlist/index";
@import "./fieldset/index";
@import "./pagination/index";
@import "./sidebar/index";
@import "./table/index";
@import "rules/index";
@import "category/index";
@import "./rules/index";
@import "./category/index";
@import "post/index";
@import "post-block/index";
@import "post-message/index";
@import "posts/index";
@import "posts-header/index";
@import "posts-info/index";
@import "posts-section/index";
@import "./post/index";
@import "./post-message/index";
@import "./posts/index";
@import "./posts-info/index";

10
src/newsreader/scss/components/post-block/_post-block.scss
View file

@ -1,10 +0,0 @@
.post-block {
display: flex;
flex-direction: column;
align-items: center;
width: 70%;
margin: 0 0 2% 0;
border-radius: 2px;
}

1
src/newsreader/scss/components/post-block/index.scss
View file

@ -1 +0,0 @@
@import "post-block";

15
src/newsreader/scss/components/posts-header/_posts-header.scss
View file

@ -1,15 +0,0 @@
.posts-header {
&__title {
width: 80%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 16px;
&--read {
color: darken($gainsboro, +10%);
}
}
}

1
src/newsreader/scss/components/posts-header/index.scss
View file

@ -1 +0,0 @@
@import "posts-header";

20
src/newsreader/scss/components/posts-section/_post-section.scss
View file

@ -1,20 +0,0 @@
.posts-section {
display: flex;
flex-direction: column;
width: 95%;
margin: 20px;
padding: 10px;
border-radius: 5px;
background-color: $white;
&:first-child {
padding: 0 10px 10px 10px;
margin: 0 20px 20px 20px;
}
&__name {
padding: 0 10px 10px 10px;
}
}

1
src/newsreader/scss/components/posts-section/index.scss
View file

@ -1 +0,0 @@
@import "post-section";

27
src/newsreader/scss/components/posts/_posts.scss
View file

@ -1,4 +1,8 @@
.posts {
width: 70%;
margin: 0 0 2% 0;
&__list {
display: flex;
flex-direction: column;
@ -6,6 +10,7 @@
width: 95%;
padding: 0;
}
&__item {
display: flex;
@ -17,11 +22,6 @@
padding: 0 10px 10px 10px;
}
&:hover {
cursor: pointer;
background-color: $gainsboro;
}
& span {
font-size: small;
text-overflow: ellipsis;
@ -37,4 +37,21 @@
border-bottom: 0;
}
}
&__header {
width: 80%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 16px;
&--read {
color: darken($gainsboro, +10%);
}
&:hover {
cursor: pointer;
}
}
}