+ {% if widget %}
+ {% include "components/form/input.html" with widget=widget %}
+ {% else %}
+ {% include "components/form/input.html" with id=id name=name type="checkbox" value=value data_input=data_input checked=checked %}
+ {% endif %}
+
+
diff --git a/src/newsreader/templates/components/form/input.html b/src/newsreader/templates/components/form/input.html
new file mode 100644
index 0000000..08f32e1
--- /dev/null
+++ b/src/newsreader/templates/components/form/input.html
@@ -0,0 +1,7 @@
+{% spaceless %}
+
+{% endspaceless %}
diff --git a/src/newsreader/templates/django/forms/widgets/attrs.html b/src/newsreader/templates/django/forms/widgets/attrs.html
new file mode 120000
index 0000000..595204e
--- /dev/null
+++ b/src/newsreader/templates/django/forms/widgets/attrs.html
@@ -0,0 +1 @@
+../../../components/form/attrs.html
\ No newline at end of file
diff --git a/src/newsreader/templates/django/forms/widgets/checkbox.html b/src/newsreader/templates/django/forms/widgets/checkbox.html
new file mode 120000
index 0000000..f939869
--- /dev/null
+++ b/src/newsreader/templates/django/forms/widgets/checkbox.html
@@ -0,0 +1 @@
+../../../components/form/checkbox.html
\ No newline at end of file
diff --git a/src/newsreader/utils/__init__.py b/src/newsreader/utils/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/src/newsreader/utils/admin.py b/src/newsreader/utils/admin.py
new file mode 100644
index 0000000..846f6b4
--- /dev/null
+++ b/src/newsreader/utils/admin.py
@@ -0,0 +1 @@
+# Register your models here.
diff --git a/src/newsreader/utils/apps.py b/src/newsreader/utils/apps.py
new file mode 100644
index 0000000..3e82e49
--- /dev/null
+++ b/src/newsreader/utils/apps.py
@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class UtilsConfig(AppConfig):
+ name = "utils"
diff --git a/src/newsreader/utils/form.py b/src/newsreader/utils/form.py
new file mode 100644
index 0000000..dc619bf
--- /dev/null
+++ b/src/newsreader/utils/form.py
@@ -0,0 +1,16 @@
+from django.forms.renderers import DjangoTemplates
+from django.template.exceptions import TemplateDoesNotExist
+from django.template.loader import get_template
+
+
+class FormRenderer(DjangoTemplates):
+ """
+ Prioritizes templates from TEMPLATES setting and fall's back to django's
+ default FormRenderer behaviour
+ """
+
+ def get_template(self, template_name):
+ try:
+ return get_template(template_name)
+ except TemplateDoesNotExist:
+ return super().get_template(template_name)
diff --git a/src/newsreader/utils/migrations/__init__.py b/src/newsreader/utils/migrations/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/src/newsreader/utils/models.py b/src/newsreader/utils/models.py
new file mode 100644
index 0000000..6b20219
--- /dev/null
+++ b/src/newsreader/utils/models.py
@@ -0,0 +1 @@
+# Create your models here.
diff --git a/src/newsreader/utils/templatetags/filters.py b/src/newsreader/utils/templatetags/filters.py
new file mode 100644
index 0000000..94fa541
--- /dev/null
+++ b/src/newsreader/utils/templatetags/filters.py
@@ -0,0 +1,9 @@
+from django import template
+
+
+register = template.Library()
+
+
+@register.filter
+def id_for_label(instance, arg):
+ return f"{arg}_{instance.pk}"
diff --git a/src/newsreader/utils/views.py b/src/newsreader/utils/views.py
new file mode 100644
index 0000000..60f00ef
--- /dev/null
+++ b/src/newsreader/utils/views.py
@@ -0,0 +1 @@
+# Create your views here.
diff --git a/webpack.common.babel.js b/webpack.common.babel.js
index 2c8471c..4ad1700 100644
--- a/webpack.common.babel.js
+++ b/webpack.common.babel.js
@@ -21,6 +21,16 @@ export default {
test: /\.(sass|scss)$/,
use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader', 'sass-loader'],
},
+ {
+ test: /\.(ttf|woff|woff2)$/,
+ use: {
+ loader: 'file-loader',
+ options: {
+ name: 'fonts/[name].[ext]',
+ publicPath: '../',
+ },
+ },
+ },
],
},
plugins: [
@@ -62,8 +62,8 @@ class FeedList extends React.Component {
);
} else {
return (
- this.handleSelect()}>
diff --git a/src/newsreader/news/collection/templates/news/collection/views/rules.html b/src/newsreader/news/collection/templates/news/collection/views/rules.html
index a17b818..1da7c4d 100644
--- a/src/newsreader/news/collection/templates/news/collection/views/rules.html
+++ b/src/newsreader/news/collection/templates/news/collection/views/rules.html
@@ -1,5 +1,5 @@
{% extends "base.html" %}
-{% load i18n static %}
+{% load i18n static filters %}
{% block content %}
@@ -15,6 +15,7 @@
@@ -23,7 +24,7 @@
-
+ {% include "components/form/checkbox.html" with id="select-all" data_input="rules" id_for_label="select-all" %}
{% trans "Name" %}
{% trans "Category" %}
@@ -36,7 +37,11 @@
{% for rule in rules %}
-
+ {% with rule|id_for_label:"rules" as id_for_label %}
+ {% include "components/form/checkbox.html" with name="rules" value=rule.pk id=id_for_label id_for_label=id_for_label %}
+ {% endwith %}
+
{{ rule.name }}
{{ rule.category.name }}
{{ rule.url }}
diff --git a/src/newsreader/news/core/endpoints.py b/src/newsreader/news/core/endpoints.py
index acc4ab2..f5a48bc 100644
--- a/src/newsreader/news/core/endpoints.py
+++ b/src/newsreader/news/core/endpoints.py
@@ -92,7 +92,7 @@ class NestedPostCategoryView(ListAPIView):
queryset = Post.objects.filter(
rule__in=category.rules.values_list("id", flat=True)
- ).order_by("rule", "-publication_date")
+ ).order_by("-publication_date", "rule__name")
return queryset
diff --git a/src/newsreader/news/core/templates/news/core/widgets/rule.html b/src/newsreader/news/core/templates/news/core/widgets/rule.html
index b3c7b68..c8535e8 100644
--- a/src/newsreader/news/core/templates/news/core/widgets/rule.html
+++ b/src/newsreader/news/core/templates/news/core/widgets/rule.html
@@ -1,5 +1,8 @@
-
+{% load filters %}
+
+{% with option.instance|id_for_label:"category" as id_for_label %}
+ {% include "components/form/checkbox.html" with widget=option checked=option.selected id_for_label=id_for_label only %}
+{% endwith %}
{% if option.instance.favicon %}
diff --git a/src/newsreader/news/core/tests/endpoints/category/list/tests.py b/src/newsreader/news/core/tests/endpoints/category/list/tests.py
index aedd5e1..4d5f0e6 100644
--- a/src/newsreader/news/core/tests/endpoints/category/list/tests.py
+++ b/src/newsreader/news/core/tests/endpoints/category/list/tests.py
@@ -498,13 +498,12 @@ class NestedCategoryPostView(TestCase):
self.assertEquals(data["count"], 6)
self.assertEquals(posts[0]["title"], "Second BBC post")
- self.assertEquals(posts[1]["title"], "First BBC post")
-
+ self.assertEquals(posts[1]["title"], "Second Reuters post")
self.assertEquals(posts[2]["title"], "Second Guardian post")
- self.assertEquals(posts[3]["title"], "First Guardian post")
- self.assertEquals(posts[4]["title"], "Second Reuters post")
- self.assertEquals(posts[5]["title"], "First Reuters post")
+ self.assertEquals(posts[3]["title"], "First BBC post")
+ self.assertEquals(posts[4]["title"], "First Reuters post")
+ self.assertEquals(posts[5]["title"], "First Guardian post")
def test_only_posts_from_category_are_returned(self):
category = CategoryFactory.create(user=self.user)
diff --git a/src/newsreader/scss/components/body/_body.scss b/src/newsreader/scss/components/body/_body.scss
index 306ad7c..fed260b 100644
--- a/src/newsreader/scss/components/body/_body.scss
+++ b/src/newsreader/scss/components/body/_body.scss
@@ -1,10 +1,9 @@
.body {
margin: 0;
padding: 0;
- background-color: $gainsboro;
- font-family: $default-font;
- color: $default-font-color;
+ font-family: Rubik, sans-serif;
+ color: $font-color;
}
body {
diff --git a/src/newsreader/scss/components/body/index.scss b/src/newsreader/scss/components/body/index.scss
index 533e39e..62b72d4 100644
--- a/src/newsreader/scss/components/body/index.scss
+++ b/src/newsreader/scss/components/body/index.scss
@@ -1 +1 @@
-@import "body";
+@import './body';
diff --git a/src/newsreader/scss/components/card/index.scss b/src/newsreader/scss/components/card/index.scss
index 149efa0..8c358b8 100644
--- a/src/newsreader/scss/components/card/index.scss
+++ b/src/newsreader/scss/components/card/index.scss
@@ -1,2 +1,2 @@
-@import "card";
-@import "rule-card";
+@import './card';
+@import './rule-card';
diff --git a/src/newsreader/scss/components/category/_category.scss b/src/newsreader/scss/components/category/_category.scss
index 9d8451f..683ed0b 100644
--- a/src/newsreader/scss/components/category/_category.scss
+++ b/src/newsreader/scss/components/category/_category.scss
@@ -4,8 +4,6 @@
padding: 5px;
- border-radius: 5px;
-
&__info {
display: flex;
justify-content: space-between;
@@ -35,11 +33,7 @@
}
}
- &:hover {
- background-color: darken($azureish-white, +10%);
- }
-
- &--selected {
- background-color: darken($azureish-white, +10%);
+ &--selected, &:hover {
+ background-color: $border-gray;
}
}
diff --git a/src/newsreader/scss/components/category/index.scss b/src/newsreader/scss/components/category/index.scss
index 702bb58..d434e4f 100644
--- a/src/newsreader/scss/components/category/index.scss
+++ b/src/newsreader/scss/components/category/index.scss
@@ -1 +1 @@
-@import "category";
+@import './category';
diff --git a/src/newsreader/scss/components/errorlist/index.scss b/src/newsreader/scss/components/errorlist/index.scss
index bf0c9c9..0987360 100644
--- a/src/newsreader/scss/components/errorlist/index.scss
+++ b/src/newsreader/scss/components/errorlist/index.scss
@@ -1 +1 @@
-@import "errorlist";
+@import './errorlist';
diff --git a/src/newsreader/scss/components/fieldset/index.scss b/src/newsreader/scss/components/fieldset/index.scss
index be990a8..069cfdb 100644
--- a/src/newsreader/scss/components/fieldset/index.scss
+++ b/src/newsreader/scss/components/fieldset/index.scss
@@ -1 +1 @@
-@import "fieldset";
+@import './fieldset';
diff --git a/src/newsreader/scss/components/form/_form.scss b/src/newsreader/scss/components/form/_form.scss
index 19e9d4b..79d3e43 100644
--- a/src/newsreader/scss/components/form/_form.scss
+++ b/src/newsreader/scss/components/form/_form.scss
@@ -7,7 +7,6 @@
width: 70%;
border-radius: 5px;
- font-family: $form-font;
background-color: $white;
&__section {
@@ -47,6 +46,7 @@
&__actions {
display: flex;
flex-direction: row;
+ gap: 15px;
@include form-padding;
}
diff --git a/src/newsreader/scss/components/form/index.scss b/src/newsreader/scss/components/form/index.scss
index 8069223..fc89867 100644
--- a/src/newsreader/scss/components/form/index.scss
+++ b/src/newsreader/scss/components/form/index.scss
@@ -1,3 +1,2 @@
-@import "form";
-
-@import "rules-form";
+@import './form';
+@import './rules-form';
diff --git a/src/newsreader/scss/components/index.scss b/src/newsreader/scss/components/index.scss
index 53e0f71..cc9e717 100644
--- a/src/newsreader/scss/components/index.scss
+++ b/src/newsreader/scss/components/index.scss
@@ -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';
diff --git a/src/newsreader/scss/components/list/index.scss b/src/newsreader/scss/components/list/index.scss
index 0a92e49..8c42751 100644
--- a/src/newsreader/scss/components/list/index.scss
+++ b/src/newsreader/scss/components/list/index.scss
@@ -1 +1 @@
-@import "list";
+@import './list';
diff --git a/src/newsreader/scss/components/loading-indicator/index.scss b/src/newsreader/scss/components/loading-indicator/index.scss
index c3a3bc3..fc2ebd7 100644
--- a/src/newsreader/scss/components/loading-indicator/index.scss
+++ b/src/newsreader/scss/components/loading-indicator/index.scss
@@ -1 +1 @@
-@import "loading-indicator";
+@import './loading-indicator';
diff --git a/src/newsreader/scss/components/main/index.scss b/src/newsreader/scss/components/main/index.scss
index bdb4ce0..dd76080 100644
--- a/src/newsreader/scss/components/main/index.scss
+++ b/src/newsreader/scss/components/main/index.scss
@@ -1 +1 @@
-@import "main";
+@import './main';
diff --git a/src/newsreader/scss/components/messages/index.scss b/src/newsreader/scss/components/messages/index.scss
index 1e28703..890a555 100644
--- a/src/newsreader/scss/components/messages/index.scss
+++ b/src/newsreader/scss/components/messages/index.scss
@@ -1 +1 @@
-@import "messages";
+@import './messages';
diff --git a/src/newsreader/scss/components/modal/_modal.scss b/src/newsreader/scss/components/modal/_modal.scss
index 93fe54f..3ca246c 100644
--- a/src/newsreader/scss/components/modal/_modal.scss
+++ b/src/newsreader/scss/components/modal/_modal.scss
@@ -20,7 +20,6 @@
width: 60%;
- border-radius: 5px;
background-color: $white;
}
diff --git a/src/newsreader/scss/components/modal/index.scss b/src/newsreader/scss/components/modal/index.scss
index d84836a..e239d86 100644
--- a/src/newsreader/scss/components/modal/index.scss
+++ b/src/newsreader/scss/components/modal/index.scss
@@ -1,3 +1,2 @@
-@import "modal";
-
-@import "post-modal";
+@import './modal';
+@import './post-modal';
diff --git a/src/newsreader/scss/components/navbar/_navbar.scss b/src/newsreader/scss/components/navbar/_navbar.scss
index 0176265..60c9f48 100644
--- a/src/newsreader/scss/components/navbar/_navbar.scss
+++ b/src/newsreader/scss/components/navbar/_navbar.scss
@@ -6,8 +6,6 @@
padding: 10px 0;
width: 100%;
- background-color: $white;
-
ol {
display: flex;
justify-content: flex-start;
@@ -16,26 +14,14 @@
list-style-type: none;
}
- a {
- color: $nickel;
- text-decoration: none;
- }
-
&__item {
margin: 0px 10px;
- border: none;
- border-radius: 2px;
-
- background-color: darken($azureish-white, 20%);
-
- &:hover{
- background-color: lighten($azureish-white, +5%);
- }
-
& a {
@extend .button;
- color: $white;
+
+ font-size: 18px !important;
+ font-weight: 600;
}
}
diff --git a/src/newsreader/scss/components/navbar/index.scss b/src/newsreader/scss/components/navbar/index.scss
index b45a5a0..dd4098f 100644
--- a/src/newsreader/scss/components/navbar/index.scss
+++ b/src/newsreader/scss/components/navbar/index.scss
@@ -1 +1 @@
-@import "navbar";
+@import './navbar';
diff --git a/src/newsreader/scss/components/pagination/index.scss b/src/newsreader/scss/components/pagination/index.scss
index d92e61f..185e83e 100644
--- a/src/newsreader/scss/components/pagination/index.scss
+++ b/src/newsreader/scss/components/pagination/index.scss
@@ -1 +1 @@
-@import "pagination";
+@import './pagination';
diff --git a/src/newsreader/scss/components/post-block/_post-block.scss b/src/newsreader/scss/components/post-block/_post-block.scss
deleted file mode 100644
index c65352b..0000000
--- a/src/newsreader/scss/components/post-block/_post-block.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.post-block {
- display: flex;
- flex-direction: column;
- align-items: center;
-
- width: 70%;
- margin: 0 0 2% 0;
-
- font-family: $article-font;
-
- border-radius: 2px;
-}
diff --git a/src/newsreader/scss/components/post-block/index.scss b/src/newsreader/scss/components/post-block/index.scss
deleted file mode 100644
index e17b7a9..0000000
--- a/src/newsreader/scss/components/post-block/index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "post-block";
diff --git a/src/newsreader/scss/components/post-message/_post-message.scss b/src/newsreader/scss/components/post-message/_post-message.scss
index 03a1dc2..574d633 100644
--- a/src/newsreader/scss/components/post-message/_post-message.scss
+++ b/src/newsreader/scss/components/post-message/_post-message.scss
@@ -6,9 +6,7 @@
width: 60%;
height: 80vh;
- border-radius: 2px;
- font-family: $article-font;
background-color: $white;
&__message {
diff --git a/src/newsreader/scss/components/post-message/index.scss b/src/newsreader/scss/components/post-message/index.scss
index 03cf130..7114cb2 100644
--- a/src/newsreader/scss/components/post-message/index.scss
+++ b/src/newsreader/scss/components/post-message/index.scss
@@ -1 +1 @@
-@import "post-message";
+@import './post-message';
diff --git a/src/newsreader/scss/components/post/_post.scss b/src/newsreader/scss/components/post/_post.scss
index a7b5ed5..46d389d 100644
--- a/src/newsreader/scss/components/post/_post.scss
+++ b/src/newsreader/scss/components/post/_post.scss
@@ -9,8 +9,6 @@
margin: 2% auto 5% auto;
- border-radius: 5px;
-
overflow-y: auto;
background-color: $white;
@@ -22,13 +20,9 @@
flex-direction: column;
padding: 20px 0 10px 0;
width: 75%;
-
- font-family: $article-header-font;
}
&__title {
- line-height: 1;
-
&--read {
color: $gainsboro;
}
@@ -44,10 +38,21 @@
}
&__date {
- align-self: center;
font-size: small;
}
+ &__author {
+ font-size: small;
+ }
+
+ &__rule, &__category {
+ background-color: $light-orange !important;
+
+ & a {
+ color: $black;
+ }
+ }
+
&__body {
display:flex;
flex-direction: column;
@@ -55,10 +60,6 @@
padding: 10px 0 30px 0;
width: 75%;
- line-height: 1.5;
- font-family: $article-font;
- font-size: 18px;
-
& p {
padding: 10px 0;
}
@@ -82,9 +83,11 @@
position: relative;
margin: 1% 2% 0 0;
align-self: flex-end;
+ background-color: $button-blue;
+ color: $white;
&:hover {
- background-color: lighten($gainsboro, +1%);
+ background-color: lighten($button-blue, +1%);
}
}
@@ -94,39 +97,6 @@
align-items: center;
margin: 15px 0;
- }
-
- &__section-info {
- display: flex;
- flex-direction: column;
-
- align-self: flex-end;
- position: absolute;
- top: 25%;
- width: 10%;
-
- font-family: $button-font;
- color: lighten($default-font-color, +10%);
-
- & h5 {
- margin: 10px 0 0 0;
- padding: 5px 1px 5px 5px;
-
- border-radius: 5px 0 0 5px;
-
- background-color: aquamarine;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- text-align: center;
- }
-
- & h5:first-child {
- background-color: $light-orange;
- }
-
- & h5:last-child {
- background-color: $beige;
- }
+ gap: 5px;
}
}
diff --git a/src/newsreader/scss/components/post/index.scss b/src/newsreader/scss/components/post/index.scss
index b31e7bb..0ad3ea2 100644
--- a/src/newsreader/scss/components/post/index.scss
+++ b/src/newsreader/scss/components/post/index.scss
@@ -1 +1 @@
-@import "post";
+@import './post';
diff --git a/src/newsreader/scss/components/posts-header/_posts-header.scss b/src/newsreader/scss/components/posts-header/_posts-header.scss
deleted file mode 100644
index be0dac8..0000000
--- a/src/newsreader/scss/components/posts-header/_posts-header.scss
+++ /dev/null
@@ -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%);
- }
- }
-}
diff --git a/src/newsreader/scss/components/posts-header/index.scss b/src/newsreader/scss/components/posts-header/index.scss
deleted file mode 100644
index 451a453..0000000
--- a/src/newsreader/scss/components/posts-header/index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "posts-header";
diff --git a/src/newsreader/scss/components/posts-info/_posts-info.scss b/src/newsreader/scss/components/posts-info/_posts-info.scss
index 9f9bc6c..c199961 100644
--- a/src/newsreader/scss/components/posts-info/_posts-info.scss
+++ b/src/newsreader/scss/components/posts-info/_posts-info.scss
@@ -1,9 +1,9 @@
.posts-info {
display: flex;
- justify-content: space-around;
align-items: center;
- width: 20%;
+ margin: 10px 0;
+ gap: 15px;
&__date {
align-self: center;
@@ -12,4 +12,10 @@
&__link {
display: inline-flex;
}
+
+ & .badge {
+ & a {
+ color: $black;
+ }
+ }
}
diff --git a/src/newsreader/scss/components/posts-info/index.scss b/src/newsreader/scss/components/posts-info/index.scss
index 2a7a495..50a159b 100644
--- a/src/newsreader/scss/components/posts-info/index.scss
+++ b/src/newsreader/scss/components/posts-info/index.scss
@@ -1 +1 @@
-@import "posts-info";
+@import './posts-info';
diff --git a/src/newsreader/scss/components/posts-section/_post-section.scss b/src/newsreader/scss/components/posts-section/_post-section.scss
deleted file mode 100644
index 1c40bec..0000000
--- a/src/newsreader/scss/components/posts-section/_post-section.scss
+++ /dev/null
@@ -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: 20px 0 10px 0;
- }
-}
diff --git a/src/newsreader/scss/components/posts-section/index.scss b/src/newsreader/scss/components/posts-section/index.scss
deleted file mode 100644
index 945ed28..0000000
--- a/src/newsreader/scss/components/posts-section/index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "post-section";
diff --git a/src/newsreader/scss/components/posts/_posts.scss b/src/newsreader/scss/components/posts/_posts.scss
index 9a3525b..94223a6 100644
--- a/src/newsreader/scss/components/posts/_posts.scss
+++ b/src/newsreader/scss/components/posts/_posts.scss
@@ -1,23 +1,25 @@
.posts {
- display: flex;
- flex-direction: column;
+ width: 70%;
+ margin: 0 0 2% 20px;
- list-style: none;
+ &__list {
+ display: flex;
+ flex-direction: column;
- padding: 0;
+ list-style: none;
+
+ width: 95%;
+ padding: 0;
+ }
&__item {
display: flex;
- align-items: center;
+ flex-direction: column-reverse;
- padding: 10px 0 10px 0;
+ padding: 10px;
- border-radius: 2px;
- border-bottom: 2px solid $azureish-white;
-
- &:hover {
- cursor: pointer;
- background-color: $gainsboro;
+ &:first-child {
+ padding: 0 10px 10px 10px;
}
& span {
@@ -27,8 +29,29 @@
white-space: nowrap;
}
+ & .badge {
+ background-color: $light-orange;
+ }
+
&:last-child {
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;
+ }
+ }
}
diff --git a/src/newsreader/scss/components/posts/index.scss b/src/newsreader/scss/components/posts/index.scss
index 66f1811..b19500b 100644
--- a/src/newsreader/scss/components/posts/index.scss
+++ b/src/newsreader/scss/components/posts/index.scss
@@ -1 +1 @@
-@import "posts";
+@import './posts';
diff --git a/src/newsreader/scss/components/rules/_rules.scss b/src/newsreader/scss/components/rules/_rules.scss
index 92427da..b07d03d 100644
--- a/src/newsreader/scss/components/rules/_rules.scss
+++ b/src/newsreader/scss/components/rules/_rules.scss
@@ -8,19 +8,17 @@
padding: 5px 5px 5px 20px;
- border-radius: 5px;
-
& * {
padding: 0 2px 0 2px;
}
&:hover {
cursor: pointer;
- background-color: $focus-blue;
+ background-color: $border-gray;
}
&--selected {
- background-color: $focus-blue;
+ background-color: $border-gray;
}
}
diff --git a/src/newsreader/scss/components/rules/index.scss b/src/newsreader/scss/components/rules/index.scss
index e6a0ebf..1a0309e 100644
--- a/src/newsreader/scss/components/rules/index.scss
+++ b/src/newsreader/scss/components/rules/index.scss
@@ -1 +1 @@
-@import "rules";
+@import './rules';
diff --git a/src/newsreader/scss/components/section/index.scss b/src/newsreader/scss/components/section/index.scss
index 0e02686..0721e8d 100644
--- a/src/newsreader/scss/components/section/index.scss
+++ b/src/newsreader/scss/components/section/index.scss
@@ -1,2 +1,2 @@
-@import "section";
-@import "text-section";
+@import './section';
+@import './text-section';
diff --git a/src/newsreader/scss/components/sidebar/_sidebar.scss b/src/newsreader/scss/components/sidebar/_sidebar.scss
index feac44d..89df180 100644
--- a/src/newsreader/scss/components/sidebar/_sidebar.scss
+++ b/src/newsreader/scss/components/sidebar/_sidebar.scss
@@ -17,8 +17,6 @@
list-style: none;
border-radius: 5px;
- font-family: $sidebar-font;
-
&__item {
padding: 2px 10px 5px 10px;
}
diff --git a/src/newsreader/scss/components/sidebar/index.scss b/src/newsreader/scss/components/sidebar/index.scss
index 0abffa8..5e4494d 100644
--- a/src/newsreader/scss/components/sidebar/index.scss
+++ b/src/newsreader/scss/components/sidebar/index.scss
@@ -1 +1 @@
-@import "sidebar";
+@import './sidebar';
diff --git a/src/newsreader/scss/components/table/_table.scss b/src/newsreader/scss/components/table/_table.scss
index 60ab7e8..01f81a0 100644
--- a/src/newsreader/scss/components/table/_table.scss
+++ b/src/newsreader/scss/components/table/_table.scss
@@ -1,8 +1,6 @@
@import "../../lib/mixins";
.table {
- @include rounded;
-
table-layout: fixed;
background-color: $white;
width: 90%;
diff --git a/src/newsreader/scss/components/table/index.scss b/src/newsreader/scss/components/table/index.scss
index d175a21..d5f640e 100644
--- a/src/newsreader/scss/components/table/index.scss
+++ b/src/newsreader/scss/components/table/index.scss
@@ -1,2 +1,2 @@
-@import "table";
-@import "rules-table";
+@import './table';
+@import './rules-table';
diff --git a/src/newsreader/scss/elements/badge/_badge.scss b/src/newsreader/scss/elements/badge/_badge.scss
index 1e2db24..efdd1b7 100644
--- a/src/newsreader/scss/elements/badge/_badge.scss
+++ b/src/newsreader/scss/elements/badge/_badge.scss
@@ -3,12 +3,10 @@
padding-left: 8px;
padding-right: 8px;
- border-radius: 2px;
text-align: center;
- background-color: lighten($pewter-blue, +20%);
+ background-color: $gainsboro;
- font-family: $button-font;
font-size: small;
}
diff --git a/src/newsreader/scss/elements/badge/index.scss b/src/newsreader/scss/elements/badge/index.scss
index 87110f0..af0fda4 100644
--- a/src/newsreader/scss/elements/badge/index.scss
+++ b/src/newsreader/scss/elements/badge/index.scss
@@ -1 +1 @@
-@import "badge";
+@import './badge';
diff --git a/src/newsreader/scss/elements/button/_button.scss b/src/newsreader/scss/elements/button/_button.scss
index 3a06cd3..2e97d6b 100644
--- a/src/newsreader/scss/elements/button/_button.scss
+++ b/src/newsreader/scss/elements/button/_button.scss
@@ -9,9 +9,7 @@
@include button-padding;
border: none;
- border-radius: 2px;
- font-family: $button-font;
font-size: 16px;
&:hover {
@@ -39,10 +37,10 @@
&--primary {
color: $white !important;
- background-color: darken($azureish-white, +20%);
+ background-color: $button-blue;
&:hover {
- background-color: $azureish-white;
+ background-color: lighten($button-blue, 5%);
}
}
}
diff --git a/src/newsreader/scss/elements/button/index.scss b/src/newsreader/scss/elements/button/index.scss
index a9b2ec7..af09e59 100644
--- a/src/newsreader/scss/elements/button/index.scss
+++ b/src/newsreader/scss/elements/button/index.scss
@@ -1,2 +1,2 @@
-@import "button";
-@import "_read-button";
+@import './button';
+@import './read-button';
diff --git a/src/newsreader/scss/elements/checkbox/_checkbox.scss b/src/newsreader/scss/elements/checkbox/_checkbox.scss
new file mode 100644
index 0000000..f23a7c3
--- /dev/null
+++ b/src/newsreader/scss/elements/checkbox/_checkbox.scss
@@ -0,0 +1,35 @@
+.checkbox {
+ display: block;
+ height: 20px;
+ width: 20px;
+ margin: 0 0 0 20px;
+
+
+ & input[type=checkbox] {
+ position: absolute;
+ opacity: 0;
+
+ appearance: none;
+ -moz-appearance: none;
+
+ &:checked + .checkbox__label {
+ .checkbox__box {
+ background-color: $checkbox-blue;
+ }
+ }
+ }
+
+ &__label {
+ padding: 0;
+ }
+
+ &__box {
+ display: block;
+ position: relative;
+
+ height: 100%;
+ width: 100%;
+ border: 2px solid darken($gainsboro, 10%);
+ cursor: pointer;
+ }
+}
diff --git a/src/newsreader/scss/elements/checkbox/index.scss b/src/newsreader/scss/elements/checkbox/index.scss
new file mode 100644
index 0000000..b022713
--- /dev/null
+++ b/src/newsreader/scss/elements/checkbox/index.scss
@@ -0,0 +1 @@
+@import './checkbox';
diff --git a/src/newsreader/scss/elements/h1/_h1.scss b/src/newsreader/scss/elements/h1/_h1.scss
index d82b6eb..6ddee05 100644
--- a/src/newsreader/scss/elements/h1/_h1.scss
+++ b/src/newsreader/scss/elements/h1/_h1.scss
@@ -1,3 +1,8 @@
.h1 {
- font-family: $header-font;
+ color: $header-color;
+ font-size: 20px;
+}
+
+h1 {
+ @extend .h1;
}
diff --git a/src/newsreader/scss/elements/h1/index.scss b/src/newsreader/scss/elements/h1/index.scss
index 0fe45be..a04aefc 100644
--- a/src/newsreader/scss/elements/h1/index.scss
+++ b/src/newsreader/scss/elements/h1/index.scss
@@ -1 +1 @@
-@import "h1";
+@import './h1';
diff --git a/src/newsreader/scss/elements/h2/_h2.scss b/src/newsreader/scss/elements/h2/_h2.scss
index 18abeb4..9f77ad8 100644
--- a/src/newsreader/scss/elements/h2/_h2.scss
+++ b/src/newsreader/scss/elements/h2/_h2.scss
@@ -1,3 +1,7 @@
.h2 {
- font-family: $header-font;
+ color: $header-color;
+}
+
+h2 {
+ @extend .h2;
}
diff --git a/src/newsreader/scss/elements/h2/index.scss b/src/newsreader/scss/elements/h2/index.scss
index 6ca9eab..9e9be3d 100644
--- a/src/newsreader/scss/elements/h2/index.scss
+++ b/src/newsreader/scss/elements/h2/index.scss
@@ -1 +1 @@
-@import "h2";
+@import './h2';
diff --git a/src/newsreader/scss/elements/h3/_h3.scss b/src/newsreader/scss/elements/h3/_h3.scss
index 955967b..7394bd7 100644
--- a/src/newsreader/scss/elements/h3/_h3.scss
+++ b/src/newsreader/scss/elements/h3/_h3.scss
@@ -1,3 +1,7 @@
.h3 {
- font-family: $header-font;
+ color: $header-color;
+}
+
+h3 {
+ @extend .h3;
}
diff --git a/src/newsreader/scss/elements/h3/index.scss b/src/newsreader/scss/elements/h3/index.scss
index feb5951..c1aeae5 100644
--- a/src/newsreader/scss/elements/h3/index.scss
+++ b/src/newsreader/scss/elements/h3/index.scss
@@ -1 +1 @@
-@import "h3";
+@import './h3';
diff --git a/src/newsreader/scss/elements/h4/_h4.scss b/src/newsreader/scss/elements/h4/_h4.scss
new file mode 100644
index 0000000..ab24888
--- /dev/null
+++ b/src/newsreader/scss/elements/h4/_h4.scss
@@ -0,0 +1,7 @@
+.h4 {
+ color: $header-color;
+}
+
+h4 {
+ @extend .h4;
+}
diff --git a/src/newsreader/scss/elements/h4/index.scss b/src/newsreader/scss/elements/h4/index.scss
new file mode 100644
index 0000000..4c735ff
--- /dev/null
+++ b/src/newsreader/scss/elements/h4/index.scss
@@ -0,0 +1 @@
+@import './h4';
diff --git a/src/newsreader/scss/elements/h5/_h5.scss b/src/newsreader/scss/elements/h5/_h5.scss
new file mode 100644
index 0000000..5efa58e
--- /dev/null
+++ b/src/newsreader/scss/elements/h5/_h5.scss
@@ -0,0 +1,7 @@
+.h5 {
+ color: $header-color;
+}
+
+h5 {
+ @extend .h5;
+}
diff --git a/src/newsreader/scss/elements/h5/index.scss b/src/newsreader/scss/elements/h5/index.scss
new file mode 100644
index 0000000..2781c4f
--- /dev/null
+++ b/src/newsreader/scss/elements/h5/index.scss
@@ -0,0 +1 @@
+@import './h5';
diff --git a/src/newsreader/scss/elements/help-text/index.scss b/src/newsreader/scss/elements/help-text/index.scss
index f5f595f..1f8cde9 100644
--- a/src/newsreader/scss/elements/help-text/index.scss
+++ b/src/newsreader/scss/elements/help-text/index.scss
@@ -1 +1 @@
-@import "help-text";
+@import './help-text';
diff --git a/src/newsreader/scss/elements/index.scss b/src/newsreader/scss/elements/index.scss
index 3e2a01c..0c30aff 100644
--- a/src/newsreader/scss/elements/index.scss
+++ b/src/newsreader/scss/elements/index.scss
@@ -1,11 +1,14 @@
-@import "badge/index";
-@import "button/index";
-@import "help-text/index";
-@import "input/index";
-@import "label/index";
-@import "link/index";
-@import "h1/index";
-@import "h2/index";
-@import "h3/index";
-@import "small/index";
-@import "select/index";
+@import './badge/index';
+@import './button/index';
+@import './help-text/index';
+@import './input/index';
+@import './label/index';
+@import './link/index';
+@import './h1/index';
+@import './h2/index';
+@import './h3/index';
+@import './h4/index';
+@import './h5/index';
+@import './small/index';
+@import './select/index';
+@import './checkbox/index';
diff --git a/src/newsreader/scss/elements/input/_input.scss b/src/newsreader/scss/elements/input/_input.scss
index 897fbf9..8258020 100644
--- a/src/newsreader/scss/elements/input/_input.scss
+++ b/src/newsreader/scss/elements/input/_input.scss
@@ -1,9 +1,7 @@
.input {
padding: 10px;
- background-color: lighten($gainsboro, +4%);
border: 1px $border-gray solid;
- border-radius: 2px;
&:focus {
border: 1px $focus-blue solid;
diff --git a/src/newsreader/scss/elements/input/index.scss b/src/newsreader/scss/elements/input/index.scss
index 84e5ed8..d602311 100644
--- a/src/newsreader/scss/elements/input/index.scss
+++ b/src/newsreader/scss/elements/input/index.scss
@@ -1 +1 @@
-@import "input";
+@import './input';
diff --git a/src/newsreader/scss/elements/label/index.scss b/src/newsreader/scss/elements/label/index.scss
index 12e5523..d893279 100644
--- a/src/newsreader/scss/elements/label/index.scss
+++ b/src/newsreader/scss/elements/label/index.scss
@@ -1 +1 @@
-@import "label";
+@import './label';
diff --git a/src/newsreader/scss/elements/link/index.scss b/src/newsreader/scss/elements/link/index.scss
index bab69d1..1e73038 100644
--- a/src/newsreader/scss/elements/link/index.scss
+++ b/src/newsreader/scss/elements/link/index.scss
@@ -1 +1 @@
-@import "link";
+@import './link';
diff --git a/src/newsreader/scss/elements/select/index.scss b/src/newsreader/scss/elements/select/index.scss
index 8320088..192ab81 100644
--- a/src/newsreader/scss/elements/select/index.scss
+++ b/src/newsreader/scss/elements/select/index.scss
@@ -1 +1 @@
-@import "select";
+@import './select';
diff --git a/src/newsreader/scss/elements/small/index.scss b/src/newsreader/scss/elements/small/index.scss
index ea3d25f..c168f07 100644
--- a/src/newsreader/scss/elements/small/index.scss
+++ b/src/newsreader/scss/elements/small/index.scss
@@ -1 +1 @@
-@import "small";
+@import './small';
diff --git a/src/newsreader/scss/index.scss b/src/newsreader/scss/index.scss
index 2dbf46a..6bd9025 100644
--- a/src/newsreader/scss/index.scss
+++ b/src/newsreader/scss/index.scss
@@ -1,6 +1,6 @@
-@import "lib/index";
-@import "partials/index";
-@import "components/index";
-@import "elements/index";
+@import './lib/index';
+@import './partials/index';
+@import './components/index';
+@import './elements/index';
-@import "pages/index";
+@import './pages/index';
diff --git a/src/newsreader/scss/lib/_css.gg.scss b/src/newsreader/scss/lib/_css.gg.scss
index e7096d5..a1b1338 100644
--- a/src/newsreader/scss/lib/_css.gg.scss
+++ b/src/newsreader/scss/lib/_css.gg.scss
@@ -1,9 +1,10 @@
-@import "~css.gg/icons-scss/icons";
+@import '~css.gg/icons-scss/icons';
.gg-link {
color: initial;
}
.gg-pen {
+ transform: rotate(-45deg) scale(var(--ggs, 0.8));
color: initial;
}
diff --git a/src/newsreader/scss/lib/_mixins.scss b/src/newsreader/scss/lib/_mixins.scss
index e2d28aa..8b13789 100644
--- a/src/newsreader/scss/lib/_mixins.scss
+++ b/src/newsreader/scss/lib/_mixins.scss
@@ -1,3 +1 @@
-@mixin rounded {
- border-radius: 5px;
-}
+
diff --git a/src/newsreader/scss/lib/index.scss b/src/newsreader/scss/lib/index.scss
index 2aca0df..ec6885e 100644
--- a/src/newsreader/scss/lib/index.scss
+++ b/src/newsreader/scss/lib/index.scss
@@ -1 +1 @@
-@import "css.gg";
+@import 'css.gg';
diff --git a/src/newsreader/scss/pages/index.scss b/src/newsreader/scss/pages/index.scss
index ddfaf85..44ca8a7 100644
--- a/src/newsreader/scss/pages/index.scss
+++ b/src/newsreader/scss/pages/index.scss
@@ -1,14 +1,14 @@
-@import "categories/index";
-@import "category/index";
+@import './categories/index';
+@import './category/index';
-@import "import/index";
-@import "homepage/index";
+@import './import/index';
+@import './homepage/index';
-@import "login/index";
-@import "password-reset/index";
-@import "register/index";
+@import './login/index';
+@import './password-reset/index';
+@import './register/index';
-@import "rule/index";
-@import "rules/index";
+@import './rule/index';
+@import './rules/index';
-@import "settings/index";
+@import './settings/index';
diff --git a/src/newsreader/scss/partials/_colors.scss b/src/newsreader/scss/partials/_colors.scss
index 8e776a2..08c7169 100644
--- a/src/newsreader/scss/partials/_colors.scss
+++ b/src/newsreader/scss/partials/_colors.scss
@@ -19,10 +19,10 @@ $lavendal-pink: rgba(162, 155, 254, 1);
$beige: rgba(245, 245, 220, 1);
$light-green: rgba(230, 247, 185, 1);
-$light-orange: rgba(237, 212, 178, 1);
+$light-orange: rgba(255, 212, 153, 1);
$light-red: rgba(255, 118, 117, 1);
-$success-green: rgba(46,204,113, 1);
+$success-green: rgba(89, 181, 128, 1);
$error-red: lighten(rgba(231, 76, 60, 1), 10%);
$confirm-green: $success-green;
@@ -30,8 +30,11 @@ $cancel-red: $error-red;
$border-gray: rgba(227, 227, 227, 1);
+$button-blue: rgba(111, 164, 196, 1);
$focus-blue: darken($azureish-white, +10%);
-$default-font-color: rgba(48, 51, 53, 1);
+$checkbox-blue: rgba(34, 170, 253, 1);
+$font-color: rgba(48, 51, 53, 1);
+$header-color: rgba(100, 101, 102, 1);
$white: rgba(255, 255, 255, 1);
$black: rgba(0, 0, 0, 1);
diff --git a/src/newsreader/scss/partials/_fonts.scss b/src/newsreader/scss/partials/_fonts.scss
index 31c5d56..bcceb13 100644
--- a/src/newsreader/scss/partials/_fonts.scss
+++ b/src/newsreader/scss/partials/_fonts.scss
@@ -1,17 +1,10 @@
-@import url("https://fonts.googleapis.com/css?family=Barlow&display=swap");
-@import url("https://fonts.googleapis.com/css?family=Oswald&display=swap");
-@import url("https://fonts.googleapis.com/css?family=Nunito&display=swap");
-@import url("https://fonts.googleapis.com/css?family=Noto+Sans&display=swap");
-@import url("https://fonts.googleapis.com/css?family=Noto+Serif&display=swap");
-@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:600&display=swap");
+@font-face {
+ font-family: Rubik;
+ src: url('../assets/fonts/Rubik-Regular.ttf');
+}
-$default-font: "Noto Serif", serif;
-
-$button-font: "IBM Plex Sans", sans-serif;
-$form-font: "Barlow", sans-serif;
-
-$article-font: "Noto Serif", serif;
-$article-header-font: "Oswald", sans-serif;
-
-$header-font: "Noto Sans", sans-serif;
-$sidebar-font: "Nunito", sans-serif;
+@font-face {
+ font-family: Rubik;
+ src: url('../assets/fonts/Rubik-Bold.ttf');
+ font-weight: bold;
+}
diff --git a/src/newsreader/scss/partials/index.scss b/src/newsreader/scss/partials/index.scss
index 24bbbd0..ff28d1b 100644
--- a/src/newsreader/scss/partials/index.scss
+++ b/src/newsreader/scss/partials/index.scss
@@ -1,2 +1,2 @@
-@import "fonts";
-@import "colors";
+@import './colors';
+@import './fonts';
diff --git a/src/newsreader/templates/components/form/attrs.html b/src/newsreader/templates/components/form/attrs.html
new file mode 100644
index 0000000..50aec9b
--- /dev/null
+++ b/src/newsreader/templates/components/form/attrs.html
@@ -0,0 +1,18 @@
+{% spaceless %}
+ {% for name, value in widget.attrs.items %}
+ {% if value is not False %}
+ {{ name }}
+
+ {% if value is not True %}
+ ="{{ value|stringformat:'s' }}"
+ {% endif %}
+ {% endif %}
+ {% endfor %}
+
+ {% if id %} id="{{ id }}"{% endif %}
+ {% if type %} type="{{ type }}"{% endif %}
+ {% if value %} value="{{ value }}"{% endif %}
+ {% if name %} name="{{ name }}"{% endif %}
+ {% if data_input %} data-input="{{ data_input }}"{% endif %}
+ {% if checked %} checked {% endif %}
+{% endspaceless %}
diff --git a/src/newsreader/templates/components/form/checkbox.html b/src/newsreader/templates/components/form/checkbox.html
new file mode 100644
index 0000000..42ac691
--- /dev/null
+++ b/src/newsreader/templates/components/form/checkbox.html
@@ -0,0 +1,10 @@
+
- {ruleItems}
+ {
- this.props.selectPost(post);
- }}
- >
-
+
diff --git a/src/newsreader/js/pages/homepage/components/sidebar/RuleItem.js b/src/newsreader/js/pages/homepage/components/sidebar/RuleItem.js
index 879745f..df8da94 100644
--- a/src/newsreader/js/pages/homepage/components/sidebar/RuleItem.js
+++ b/src/newsreader/js/pages/homepage/components/sidebar/RuleItem.js
@@ -31,9 +31,9 @@ class RuleItem extends React.Component {
+
);
@@ -73,7 +73,7 @@ class FeedList extends React.Component {
const mapStateToProps = state => ({
isFetching: state.posts.isFetching,
- posts: filterPosts(state),
+ postsBySection: filterPosts(state),
next: state.selected.next,
lastReached: state.selected.lastReached,
selected: state.selected.item,
diff --git a/src/newsreader/js/pages/homepage/components/feedlist/PostItem.js b/src/newsreader/js/pages/homepage/components/feedlist/PostItem.js
index a24b9c0..a796916 100644
--- a/src/newsreader/js/pages/homepage/components/feedlist/PostItem.js
+++ b/src/newsreader/js/pages/homepage/components/feedlist/PostItem.js
@@ -1,33 +1,44 @@
import React from 'react';
import { connect } from 'react-redux';
+import { CATEGORY_TYPE, RULE_TYPE } from '../../constants.js';
import { selectPost } from '../../actions/posts.js';
-
import { formatDatetime } from '../../../../utils.js';
class PostItem extends React.Component {
render() {
- const post = this.props.post;
+ const rule = { ...this.props.post.rule };
+ 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 (
- - {postItems}
+
this.props.selectPost(post)} + > {post.title}
- {publicationDate}
+ {publicationDate} {post.author && `By ${post.author}`}
+ {this.props.selected.type == CATEGORY_TYPE && (
+
+
+ {rule.name}
+
+
+ )}
{
- return new Date(secondEl.publicationDate) - new Date(firstEl.publicationDate);
- });
-
- const postItems = posts.map(post => {
- return
-
- );
- }
-}
-
-export default RuleItem;
diff --git a/src/newsreader/js/pages/homepage/components/feedlist/filters.js b/src/newsreader/js/pages/homepage/components/feedlist/filters.js
index a3ee886..59fd665 100644
--- a/src/newsreader/js/pages/homepage/components/feedlist/filters.js
+++ b/src/newsreader/js/pages/homepage/components/feedlist/filters.js
@@ -9,7 +9,9 @@ export const filterPostsByRule = (rule = {}, posts = []) => {
return post.rule === rule.id;
});
- return filteredPosts.length > 0 ? [{ rule, posts: filteredPosts }] : [];
+ const filteredData = filteredPosts.map(post => ({ ...post, rule: { ...rule } }));
+
+ return filteredData.length > 0 ? [...filteredData] : [];
};
export const filterPostsByCategory = (category = {}, rules = [], posts = []) => {
@@ -22,13 +24,14 @@ export const filterPostsByCategory = (category = {}, rules = [], posts = []) =>
return post.rule === rule.id;
});
- return {
- rule: { ...rule },
- posts: filteredPosts,
- };
+ return filteredPosts.map(post => ({ ...post, rule: { ...rule } }));
});
- return filteredData.filter(rule => rule.posts.length > 0);
+ const sortedPosts = [...filteredData.flat()].sort((firstPost, secondPost) => {
+ return new Date(secondPost.publicationDate) - new Date(firstPost.publicationDate);
+ });
+
+ return sortedPosts;
};
export const filterPosts = state => {
diff --git a/src/newsreader/js/pages/homepage/components/sidebar/CategoryItem.js b/src/newsreader/js/pages/homepage/components/sidebar/CategoryItem.js
index d1a0c94..7c0268c 100644
--- a/src/newsreader/js/pages/homepage/components/sidebar/CategoryItem.js
+++ b/src/newsreader/js/pages/homepage/components/sidebar/CategoryItem.js
@@ -40,7 +40,7 @@ class CategoryItem extends React.Component {
{this.props.rule.name}
-- {postItems}
this.handleSelect()}>
-
{this.props.category.name}
+ {this.props.category.name} {this.props.category.unread}
{favicon}
-
{this.props.rule.unread}