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

Show error info in rule detail pages

Browse source
This commit is contained in:
sonny 2020-07-27 21:10:35 +02:00
parent fd432a87d1
commit 7dab98ef5a
25 changed files with 100 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/newsreader/news/collection/templates/news/collection/views/rule-update.html
View file

@ -1,9 +1,14 @@
{% extends "base.html" %} {% extends "base.html" %}
{% load static %} {% load static i18n %}
{% block content %} {% block content %}
<main id="rule--page" class="main"> <main id="rule--page" class="main">
{% if rule.error %}
{% trans "Failed to retrieve posts" as title %}
{% include "components/textbox/textbox.html" with title=title body=rule.error class="text-section--error" only %}
{% endif %}
{% url "news:collection:rules" as cancel_url %} {% url "news:collection:rules" as cancel_url %}
{% include "components/form/form.html" with form=form title="Update rule" cancel_url=cancel_url confirm_text="Save rule" %} {% include "components/form/form.html" with form=form title="Update rule" cancel_url=cancel_url confirm_text="Save rule" only %}
</main> </main>
{% endblock %} {% endblock %}

7
src/newsreader/news/collection/templates/news/collection/views/subreddit-update.html
View file

@ -1,8 +1,13 @@
{% extends "base.html" %} {% extends "base.html" %}
{% load static %} {% load static i18n %}
{% block content %} {% block content %}
<main id="subreddit--page" class="main"> <main id="subreddit--page" class="main">
{% if subreddit.error %}
{% trans "Failed to retrieve posts" as title %}
{% include "components/textbox/textbox.html" with title=title body=subreddit.error class="text-section--error" only %}
{% endif %}
{% url "news:collection:rules" as cancel_url %} {% url "news:collection:rules" as cancel_url %}
{% include "components/form/form.html" with form=form title="Update subreddit" cancel_url=cancel_url confirm_text="Save subreddit" %} {% include "components/form/form.html" with form=form title="Update subreddit" cancel_url=cancel_url confirm_text="Save subreddit" %}
</main> </main>

1
src/newsreader/news/collection/views/reddit.py
View file

@ -20,6 +20,7 @@ class SubRedditUpdateView(
): ):
form_class = SubRedditRuleForm form_class = SubRedditRuleForm
template_name = "news/collection/views/subreddit-update.html" template_name = "news/collection/views/subreddit-update.html"
context_object_name = "subreddit"
def get_queryset(self): def get_queryset(self):
queryset = super().get_queryset() queryset = super().get_queryset()

4
src/newsreader/scss/components/card/_card.scss
View file

@ -3,7 +3,7 @@
flex-direction: column; flex-direction: column;
margin: 20px 0; margin: 20px 0;
padding: 15px; @include block-padding;
width: 50%; width: 50%;
@ -16,7 +16,7 @@
padding: 15px 0; padding: 15px 0;
border-bottom: 2px $border-gray solid; border-bottom: 2px $gray solid;
} }
&__content { &__content {

2
src/newsreader/scss/components/category/_category.scss
View file

@ -36,6 +36,6 @@
} }
&--selected, &:hover { &--selected, &:hover {
background-color: $border-gray; background-color: $gray;
} }
} }

4
src/newsreader/scss/components/errorlist/_errorlist.scss
View file

@ -11,9 +11,9 @@
&__item { &__item {
margin: 10px 0; margin: 10px 0;
padding: 10px; @include text-padding;
background-color: $error-red; background-color: $transparant-red;
} }
& li { & li {

8
src/newsreader/scss/components/form/_form.scss
View file

@ -1,5 +1,3 @@
@import "mixin.scss";
.form { .form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -39,7 +37,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@include form-padding; @include block-padding;
} }
&__actions { &__actions {
@ -47,7 +45,7 @@
flex-direction: row; flex-direction: row;
gap: 15px; gap: 15px;
@include form-padding; @include block-padding;
} }
&__title { &__title {
@ -55,7 +53,7 @@
} }
&__intro { &__intro {
@include form-padding; @include block-padding;
} }
& .favicon { & .favicon {

3
src/newsreader/scss/components/form/_mixin.scss
View file

@ -1,3 +0,0 @@
@mixin form-padding {
padding: 15px;
}

7
src/newsreader/scss/components/messages/_messages.scss
View file

@ -20,15 +20,16 @@
background-color: $blue; background-color: $blue;
&--error { &--error {
background-color: $error-red; background-color: $transparant-red;
} }
&--warning { &--warning {
background-color: $light-orange; background-color: $transparant-orange;
} }
// TODO check this color
&--success { &--success {
background-color: $success-green; background-color: $transparant-green;
} }
& .gg-close { & .gg-close {

2
src/newsreader/scss/components/pagination/_pagination.scss
View file

@ -1,5 +1,3 @@
@import "../../elements/button/mixins";
.pagination { .pagination {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;

6
src/newsreader/scss/components/post/_post.scss
View file

@ -46,7 +46,7 @@
} }
&__rule, &__category { &__rule, &__category {
background-color: $light-orange !important; background-color: $orange !important;
& a { & a {
color: $black; color: $black;
@ -82,11 +82,11 @@
position: relative; position: relative;
margin: 1% 2% 0 0; margin: 1% 2% 0 0;
align-self: flex-end; align-self: flex-end;
background-color: $button-blue; background-color: $blue;
color: $white; color: $white;
&:hover { &:hover {
background-color: lighten($button-blue, +1%); background-color: lighten($blue, +1%);
} }
} }

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

@ -30,7 +30,7 @@
} }
& .badge { & .badge {
background-color: $light-orange; background-color: $orange;
} }
&:last-child { &:last-child {

4
src/newsreader/scss/components/rules/_rules.scss
View file

@ -14,11 +14,11 @@
&:hover { &:hover {
cursor: pointer; cursor: pointer;
background-color: $border-gray; background-color: $gray;
} }
&--selected { &--selected {
background-color: $border-gray; background-color: $gray;
} }
} }

9
src/newsreader/scss/components/section/_text-section.scss
View file

@ -1,9 +1,14 @@
.text-section { .text-section {
@extend .section; @extend .section;
@include block-padding;
width: 70%; width: 70%;
padding: 10px; &--error {
background-color: $transparant-red;
}
background-color: $white; &__body {
@include text-padding;
}
} }

4
src/newsreader/scss/components/table/_table.scss
View file

@ -1,5 +1,3 @@
@import "../../lib/mixins";
.table { .table {
table-layout: fixed; table-layout: fixed;
@ -16,7 +14,7 @@
&__row { &__row {
&--error { &--error {
background-color: transparentize($error-red, 0.8); background-color: $transparant-red;
} }
} }

14
src/newsreader/scss/elements/button/_button.scss
View file

@ -1,5 +1,3 @@
@import "mixins";
.button { .button {
display: flex; display: flex;
@ -18,29 +16,29 @@
&--success, &--confirm { &--success, &--confirm {
color: $white !important; color: $white !important;
background-color: $confirm-green; background-color: $green;
&:hover { &:hover {
background-color: lighten($confirm-green, +5%); background-color: lighten($green, +5%);
} }
} }
&--error, &--cancel { &--error, &--cancel {
color: $white !important; color: $white !important;
background-color: $error-red; background-color: $red;
&:hover { &:hover {
background-color: lighten($error-red, +5%); background-color: lighten($red, +5%);
} }
} }
&--primary { &--primary {
color: $white !important; color: $white !important;
background-color: $button-blue; background-color: $blue;
&:hover { &:hover {
background-color: lighten($button-blue, 5%); background-color: lighten($blue, 5%);
} }
} }

3
src/newsreader/scss/elements/button/_mixins.scss
View file

@ -1,3 +0,0 @@
@mixin button-padding {
padding: 7px 40px;
}

4
src/newsreader/scss/elements/button/_read-button.scss
View file

@ -4,9 +4,9 @@
margin: 20px 0 0 0; margin: 20px 0 0 0;
color: $white; color: $white;
background-color: $confirm-green; background-color: $green;
&:hover { &:hover {
background-color: darken($confirm-green, 10%); background-color: darken($green, 10%);
} }
} }

4
src/newsreader/scss/elements/input/_input.scss
View file

@ -1,7 +1,7 @@
.input { .input {
padding: 10px; @include text-padding;
border: 1px $border-gray solid; border: 1px $gray solid;
&:focus { &:focus {
border: 1px $focus-blue solid; border: 1px $focus-blue solid;

2
src/newsreader/scss/elements/label/_label.scss
View file

@ -1,5 +1,5 @@
.label { .label {
padding: 10px; @include text-padding;
} }
label { label {

10
src/newsreader/scss/lib/_mixins.scss
View file

@ -1 +1,11 @@
@mixin text-padding {
padding: 10px;
}
@mixin block-padding {
padding: 15px;
}
@mixin button-padding {
padding: 7px 40px;
}

1
src/newsreader/scss/lib/index.scss
View file

@ -1 +1,2 @@
@import 'css.gg'; @import 'css.gg';
@import 'mixins';

59
src/newsreader/scss/partials/_colors.scss
View file

@ -1,44 +1,27 @@
// light blue $orange: rgba(255, 212, 153, 1);
$azureish-white: rgba(205, 230, 245, 1); $green: rgba(89, 181, 128, 1);
$red: lighten(rgba(231, 76, 60, 1), 10%);
// dark blue $gray: rgba(227, 227, 227, 1);
$pewter-blue: rgba(141, 167, 190, 1); $blue: rgba(111, 164, 196, 1);
// light gray
$gainsboro: rgba(238, 238, 238, 1);
// medium gray
$roman-silver: rgba(135, 145, 158, 1);
//dark gray
$nickel: rgba(112, 112, 120, 1);
$pink: rgba(235, 229, 229, 1);
$lavendal-pink: rgba(162, 155, 254, 1);
$beige: rgba(245, 245, 220, 1);
$light-green: rgba(230, 247, 185, 1);
$light-orange: rgba(255, 212, 153, 1);
$light-red: rgba(255, 118, 117, 1);
$success-green: rgba(89, 181, 128, 1);
$error-red: lighten(rgba(231, 76, 60, 1), 10%);
$confirm-green: $success-green;
$cancel-red: $error-red;
$border-gray: rgba(227, 227, 227, 1);
$button-blue: rgba(111, 164, 196, 1);
$focus-blue: darken($azureish-white, +10%);
$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); $white: rgba(255, 255, 255, 1);
$black: rgba(0, 0, 0, 1); $black: rgba(0, 0, 0, 1);
$blue: darken($azureish-white, +50%);
$dark: rgba(0, 0, 0, 0.4); $dark: rgba(0, 0, 0, 0.4);
$font-color: rgba(48, 51, 53, 1);
$header-color: rgba(100, 101, 102, 1);
$reddit-orange: rgba(255, 69, 0, 1); $reddit-orange: rgba(255, 69, 0, 1);
$transparant-red: transparentize($red, 0.8);
$transparant-blue: transparentize($blue, 0.8);
$transparant-orange: transparentize($orange, 0.4);
$transparant-green: transparentize($green, 0.4);
$azureish-white: rgba(205, 230, 245, 1);
$gainsboro: rgba(238, 238, 238, 1);
$nickel: rgba(112, 112, 120, 1);
$lavendal-pink: rgba(162, 155, 254, 1);
$focus-blue: darken($azureish-white, +10%);
$checkbox-blue: rgba(34, 170, 253, 1);

3
src/newsreader/templates/components/form/form.html
View file

@ -26,7 +26,10 @@
{{ field.errors }} {{ field.errors }}
{{ field }} {{ field }}
{% if field.help_text %}
{% include "components/form/help-text.html" %} {% include "components/form/help-text.html" %}
{% endif %}
</fieldset> </fieldset>
{% endfor %} {% endfor %}
</section> </section>

13
src/newsreader/templates/components/textbox/textbox.html Normal file
View file

@ -0,0 +1,13 @@
<section class="section text-section{% if class %} {{ class }}{% endif %}">
{% if title %}
<h1 class="h1 section__title text-section__title">{{ title }}</h1>
{% endif %}
{% if body %}
<p class="section__title text-section__body">{{ body }}</p>
{% endif %}
{% if footer %}
<p class="section__footer text-section__footer">{{ footer }}</p>
{% endif %}
</section>