From 7dab98ef5acbbc9d75947e51ea706aeba5cf6ed5 Mon Sep 17 00:00:00 2001 From: sonny Date: Mon, 27 Jul 2020 21:10:35 +0200 Subject: [PATCH] Show error info in rule detail pages --- .../news/collection/views/rule-update.html | 9 ++- .../collection/views/subreddit-update.html | 7 ++- .../news/collection/views/reddit.py | 1 + .../scss/components/card/_card.scss | 4 +- .../scss/components/category/_category.scss | 2 +- .../scss/components/errorlist/_errorlist.scss | 4 +- .../scss/components/form/_form.scss | 8 +-- .../scss/components/form/_mixin.scss | 3 - .../scss/components/messages/_messages.scss | 7 ++- .../components/pagination/_pagination.scss | 2 - .../scss/components/post/_post.scss | 6 +- .../scss/components/posts/_posts.scss | 2 +- .../scss/components/rules/_rules.scss | 4 +- .../components/section/_text-section.scss | 9 ++- .../scss/components/table/_table.scss | 4 +- .../scss/elements/button/_button.scss | 14 ++--- .../scss/elements/button/_mixins.scss | 3 - .../scss/elements/button/_read-button.scss | 4 +- .../scss/elements/input/_input.scss | 4 +- .../scss/elements/label/_label.scss | 2 +- src/newsreader/scss/lib/_mixins.scss | 10 ++++ src/newsreader/scss/lib/index.scss | 1 + src/newsreader/scss/partials/_colors.scss | 59 +++++++------------ .../templates/components/form/form.html | 5 +- .../templates/components/textbox/textbox.html | 13 ++++ 25 files changed, 100 insertions(+), 87 deletions(-) delete mode 100644 src/newsreader/scss/components/form/_mixin.scss delete mode 100644 src/newsreader/scss/elements/button/_mixins.scss create mode 100644 src/newsreader/templates/components/textbox/textbox.html diff --git a/src/newsreader/news/collection/templates/news/collection/views/rule-update.html b/src/newsreader/news/collection/templates/news/collection/views/rule-update.html index 3f0a8fe..0a705b8 100644 --- a/src/newsreader/news/collection/templates/news/collection/views/rule-update.html +++ b/src/newsreader/news/collection/templates/news/collection/views/rule-update.html @@ -1,9 +1,14 @@ {% extends "base.html" %} -{% load static %} +{% load static i18n %} {% block content %}
+ {% 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 %} - {% 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 %}
{% endblock %} diff --git a/src/newsreader/news/collection/templates/news/collection/views/subreddit-update.html b/src/newsreader/news/collection/templates/news/collection/views/subreddit-update.html index 9ea7d05..0099e3b 100644 --- a/src/newsreader/news/collection/templates/news/collection/views/subreddit-update.html +++ b/src/newsreader/news/collection/templates/news/collection/views/subreddit-update.html @@ -1,8 +1,13 @@ {% extends "base.html" %} -{% load static %} +{% load static i18n %} {% block content %}
+ {% 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 %} {% include "components/form/form.html" with form=form title="Update subreddit" cancel_url=cancel_url confirm_text="Save subreddit" %}
diff --git a/src/newsreader/news/collection/views/reddit.py b/src/newsreader/news/collection/views/reddit.py index 533513b..62ec408 100644 --- a/src/newsreader/news/collection/views/reddit.py +++ b/src/newsreader/news/collection/views/reddit.py @@ -20,6 +20,7 @@ class SubRedditUpdateView( ): form_class = SubRedditRuleForm template_name = "news/collection/views/subreddit-update.html" + context_object_name = "subreddit" def get_queryset(self): queryset = super().get_queryset() diff --git a/src/newsreader/scss/components/card/_card.scss b/src/newsreader/scss/components/card/_card.scss index 9866d4d..b77522a 100644 --- a/src/newsreader/scss/components/card/_card.scss +++ b/src/newsreader/scss/components/card/_card.scss @@ -3,7 +3,7 @@ flex-direction: column; margin: 20px 0; - padding: 15px; + @include block-padding; width: 50%; @@ -16,7 +16,7 @@ padding: 15px 0; - border-bottom: 2px $border-gray solid; + border-bottom: 2px $gray solid; } &__content { diff --git a/src/newsreader/scss/components/category/_category.scss b/src/newsreader/scss/components/category/_category.scss index e8e1ba9..6710af2 100644 --- a/src/newsreader/scss/components/category/_category.scss +++ b/src/newsreader/scss/components/category/_category.scss @@ -36,6 +36,6 @@ } &--selected, &:hover { - background-color: $border-gray; + background-color: $gray; } } diff --git a/src/newsreader/scss/components/errorlist/_errorlist.scss b/src/newsreader/scss/components/errorlist/_errorlist.scss index 6dbc458..d9c592c 100644 --- a/src/newsreader/scss/components/errorlist/_errorlist.scss +++ b/src/newsreader/scss/components/errorlist/_errorlist.scss @@ -11,9 +11,9 @@ &__item { margin: 10px 0; - padding: 10px; + @include text-padding; - background-color: $error-red; + background-color: $transparant-red; } & li { diff --git a/src/newsreader/scss/components/form/_form.scss b/src/newsreader/scss/components/form/_form.scss index 089c4f1..9af3b12 100644 --- a/src/newsreader/scss/components/form/_form.scss +++ b/src/newsreader/scss/components/form/_form.scss @@ -1,5 +1,3 @@ -@import "mixin.scss"; - .form { display: flex; flex-direction: column; @@ -39,7 +37,7 @@ display: flex; flex-direction: row; - @include form-padding; + @include block-padding; } &__actions { @@ -47,7 +45,7 @@ flex-direction: row; gap: 15px; - @include form-padding; + @include block-padding; } &__title { @@ -55,7 +53,7 @@ } &__intro { - @include form-padding; + @include block-padding; } & .favicon { diff --git a/src/newsreader/scss/components/form/_mixin.scss b/src/newsreader/scss/components/form/_mixin.scss deleted file mode 100644 index 4f55a9e..0000000 --- a/src/newsreader/scss/components/form/_mixin.scss +++ /dev/null @@ -1,3 +0,0 @@ -@mixin form-padding { - padding: 15px; -} diff --git a/src/newsreader/scss/components/messages/_messages.scss b/src/newsreader/scss/components/messages/_messages.scss index b8ee6b5..74d88b5 100644 --- a/src/newsreader/scss/components/messages/_messages.scss +++ b/src/newsreader/scss/components/messages/_messages.scss @@ -20,15 +20,16 @@ background-color: $blue; &--error { - background-color: $error-red; + background-color: $transparant-red; } &--warning { - background-color: $light-orange; + background-color: $transparant-orange; } + // TODO check this color &--success { - background-color: $success-green; + background-color: $transparant-green; } & .gg-close { diff --git a/src/newsreader/scss/components/pagination/_pagination.scss b/src/newsreader/scss/components/pagination/_pagination.scss index d4ba4a9..31dca88 100644 --- a/src/newsreader/scss/components/pagination/_pagination.scss +++ b/src/newsreader/scss/components/pagination/_pagination.scss @@ -1,5 +1,3 @@ -@import "../../elements/button/mixins"; - .pagination { display: flex; justify-content: space-evenly; diff --git a/src/newsreader/scss/components/post/_post.scss b/src/newsreader/scss/components/post/_post.scss index 9374f39..e73dbd2 100644 --- a/src/newsreader/scss/components/post/_post.scss +++ b/src/newsreader/scss/components/post/_post.scss @@ -46,7 +46,7 @@ } &__rule, &__category { - background-color: $light-orange !important; + background-color: $orange !important; & a { color: $black; @@ -82,11 +82,11 @@ position: relative; margin: 1% 2% 0 0; align-self: flex-end; - background-color: $button-blue; + background-color: $blue; color: $white; &:hover { - background-color: lighten($button-blue, +1%); + background-color: lighten($blue, +1%); } } diff --git a/src/newsreader/scss/components/posts/_posts.scss b/src/newsreader/scss/components/posts/_posts.scss index 94223a6..8bb86e9 100644 --- a/src/newsreader/scss/components/posts/_posts.scss +++ b/src/newsreader/scss/components/posts/_posts.scss @@ -30,7 +30,7 @@ } & .badge { - background-color: $light-orange; + background-color: $orange; } &:last-child { diff --git a/src/newsreader/scss/components/rules/_rules.scss b/src/newsreader/scss/components/rules/_rules.scss index b07d03d..527d99a 100644 --- a/src/newsreader/scss/components/rules/_rules.scss +++ b/src/newsreader/scss/components/rules/_rules.scss @@ -14,11 +14,11 @@ &:hover { cursor: pointer; - background-color: $border-gray; + background-color: $gray; } &--selected { - background-color: $border-gray; + background-color: $gray; } } diff --git a/src/newsreader/scss/components/section/_text-section.scss b/src/newsreader/scss/components/section/_text-section.scss index bab9f6a..2efe0a4 100644 --- a/src/newsreader/scss/components/section/_text-section.scss +++ b/src/newsreader/scss/components/section/_text-section.scss @@ -1,9 +1,14 @@ .text-section { @extend .section; + @include block-padding; width: 70%; - padding: 10px; + &--error { + background-color: $transparant-red; + } - background-color: $white; + &__body { + @include text-padding; + } } diff --git a/src/newsreader/scss/components/table/_table.scss b/src/newsreader/scss/components/table/_table.scss index 69bb298..74d5d6e 100644 --- a/src/newsreader/scss/components/table/_table.scss +++ b/src/newsreader/scss/components/table/_table.scss @@ -1,5 +1,3 @@ -@import "../../lib/mixins"; - .table { table-layout: fixed; @@ -16,7 +14,7 @@ &__row { &--error { - background-color: transparentize($error-red, 0.8); + background-color: $transparant-red; } } diff --git a/src/newsreader/scss/elements/button/_button.scss b/src/newsreader/scss/elements/button/_button.scss index 50af49e..a8eb3bc 100644 --- a/src/newsreader/scss/elements/button/_button.scss +++ b/src/newsreader/scss/elements/button/_button.scss @@ -1,5 +1,3 @@ -@import "mixins"; - .button { display: flex; @@ -18,29 +16,29 @@ &--success, &--confirm { color: $white !important; - background-color: $confirm-green; + background-color: $green; &:hover { - background-color: lighten($confirm-green, +5%); + background-color: lighten($green, +5%); } } &--error, &--cancel { color: $white !important; - background-color: $error-red; + background-color: $red; &:hover { - background-color: lighten($error-red, +5%); + background-color: lighten($red, +5%); } } &--primary { color: $white !important; - background-color: $button-blue; + background-color: $blue; &:hover { - background-color: lighten($button-blue, 5%); + background-color: lighten($blue, 5%); } } diff --git a/src/newsreader/scss/elements/button/_mixins.scss b/src/newsreader/scss/elements/button/_mixins.scss deleted file mode 100644 index 75b70e3..0000000 --- a/src/newsreader/scss/elements/button/_mixins.scss +++ /dev/null @@ -1,3 +0,0 @@ -@mixin button-padding { - padding: 7px 40px; -} diff --git a/src/newsreader/scss/elements/button/_read-button.scss b/src/newsreader/scss/elements/button/_read-button.scss index 940d895..2c345b5 100644 --- a/src/newsreader/scss/elements/button/_read-button.scss +++ b/src/newsreader/scss/elements/button/_read-button.scss @@ -4,9 +4,9 @@ margin: 20px 0 0 0; color: $white; - background-color: $confirm-green; + background-color: $green; &:hover { - background-color: darken($confirm-green, 10%); + background-color: darken($green, 10%); } } diff --git a/src/newsreader/scss/elements/input/_input.scss b/src/newsreader/scss/elements/input/_input.scss index 8258020..16e6fad 100644 --- a/src/newsreader/scss/elements/input/_input.scss +++ b/src/newsreader/scss/elements/input/_input.scss @@ -1,7 +1,7 @@ .input { - padding: 10px; + @include text-padding; - border: 1px $border-gray solid; + border: 1px $gray solid; &:focus { border: 1px $focus-blue solid; diff --git a/src/newsreader/scss/elements/label/_label.scss b/src/newsreader/scss/elements/label/_label.scss index 5030a4c..6481b02 100644 --- a/src/newsreader/scss/elements/label/_label.scss +++ b/src/newsreader/scss/elements/label/_label.scss @@ -1,5 +1,5 @@ .label { - padding: 10px; + @include text-padding; } label { diff --git a/src/newsreader/scss/lib/_mixins.scss b/src/newsreader/scss/lib/_mixins.scss index 8b13789..72c9932 100644 --- a/src/newsreader/scss/lib/_mixins.scss +++ b/src/newsreader/scss/lib/_mixins.scss @@ -1 +1,11 @@ +@mixin text-padding { + padding: 10px; +} +@mixin block-padding { + padding: 15px; +} + +@mixin button-padding { + padding: 7px 40px; +} diff --git a/src/newsreader/scss/lib/index.scss b/src/newsreader/scss/lib/index.scss index ec6885e..026bf87 100644 --- a/src/newsreader/scss/lib/index.scss +++ b/src/newsreader/scss/lib/index.scss @@ -1 +1,2 @@ @import 'css.gg'; +@import 'mixins'; diff --git a/src/newsreader/scss/partials/_colors.scss b/src/newsreader/scss/partials/_colors.scss index aee33c2..b2f124d 100644 --- a/src/newsreader/scss/partials/_colors.scss +++ b/src/newsreader/scss/partials/_colors.scss @@ -1,44 +1,27 @@ -// light blue -$azureish-white: rgba(205, 230, 245, 1); - -// dark blue -$pewter-blue: rgba(141, 167, 190, 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); +$orange: rgba(255, 212, 153, 1); +$green: rgba(89, 181, 128, 1); +$red: lighten(rgba(231, 76, 60, 1), 10%); +$gray: rgba(227, 227, 227, 1); +$blue: rgba(111, 164, 196, 1); $white: rgba(255, 255, 255, 1); $black: rgba(0, 0, 0, 1); -$blue: darken($azureish-white, +50%); $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); + +$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); diff --git a/src/newsreader/templates/components/form/form.html b/src/newsreader/templates/components/form/form.html index d854eb1..e183c25 100644 --- a/src/newsreader/templates/components/form/form.html +++ b/src/newsreader/templates/components/form/form.html @@ -26,7 +26,10 @@ {{ field.errors }} {{ field }} - {% include "components/form/help-text.html" %} + + {% if field.help_text %} + {% include "components/form/help-text.html" %} + {% endif %} {% endfor %} diff --git a/src/newsreader/templates/components/textbox/textbox.html b/src/newsreader/templates/components/textbox/textbox.html new file mode 100644 index 0000000..425cf60 --- /dev/null +++ b/src/newsreader/templates/components/textbox/textbox.html @@ -0,0 +1,13 @@ +
+ {% if title %} +

{{ title }}

+ {% endif %} + + {% if body %} +

{{ body }}

+ {% endif %} + + {% if footer %} +

{{ footer }}

+ {% endif %} +