From 449aae4662d7e8bdebd72ee9d89e2c5713bcac9c Mon Sep 17 00:00:00 2001 From: Andromeda Yelton Date: Thu, 29 Mar 2012 14:46:06 -0400 Subject: [PATCH] notices page now has reasonably styled notices and there is a model for generating other notice types --- frontend/templates/home.html | 2 +- .../notification/active_campaign/full.txt | 1 + .../notification/active_campaign/notice.html | 24 +++++++++ .../notification/active_campaign/short.txt | 1 + .../coment_on_commented/notice.html | 51 ++++++++++--------- .../notification/notice_template.html | 31 +++++++++++ frontend/templates/notification/notices.html | 10 ++-- .../notification/wishlist_comment/notice.html | 51 ++++++++++--------- static/css/notices.css | 24 +++++++++ static/css/sitewide.css | 1 + static/less/notices.less | 29 +++++++++++ static/less/sitewide.less | 1 + 12 files changed, 172 insertions(+), 54 deletions(-) create mode 100644 frontend/templates/notification/active_campaign/full.txt create mode 100644 frontend/templates/notification/active_campaign/notice.html create mode 100644 frontend/templates/notification/active_campaign/short.txt create mode 100644 frontend/templates/notification/notice_template.html diff --git a/frontend/templates/home.html b/frontend/templates/home.html index f1e8bd05..b9cf2678 100755 --- a/frontend/templates/home.html +++ b/frontend/templates/home.html @@ -150,7 +150,7 @@

{{event.wishlist.user.username|truncatechars:20}} is Wishing For

{{ event.work.title }} -
Very Long Book Title
+
{{ event.work.title }}
{% endfor %} diff --git a/frontend/templates/notification/active_campaign/full.txt b/frontend/templates/notification/active_campaign/full.txt new file mode 100644 index 00000000..a73ce06d --- /dev/null +++ b/frontend/templates/notification/active_campaign/full.txt @@ -0,0 +1 @@ +Congratulations, you wished for it, and now there is an Active Campaign for **WORK** to be Unglued. \ No newline at end of file diff --git a/frontend/templates/notification/active_campaign/notice.html b/frontend/templates/notification/active_campaign/notice.html new file mode 100644 index 00000000..89792002 --- /dev/null +++ b/frontend/templates/notification/active_campaign/notice.html @@ -0,0 +1,24 @@ + {% with comment.content_object.id as id %} + {% with comment.user as user %} +
+
+
+ cover image +
+ {{ comment.user.username }} on {{ comment.content_object.title }}
+ + {{ comment.comment|linebreaksbr }} +
+ + +
+ {% endwith %} + {% endwith %} diff --git a/frontend/templates/notification/active_campaign/short.txt b/frontend/templates/notification/active_campaign/short.txt new file mode 100644 index 00000000..b3f8f5d0 --- /dev/null +++ b/frontend/templates/notification/active_campaign/short.txt @@ -0,0 +1 @@ +Campaign for {{ work }} now active at Unglue.It! \ No newline at end of file diff --git a/frontend/templates/notification/coment_on_commented/notice.html b/frontend/templates/notification/coment_on_commented/notice.html index 62d0d469..8a0c71bd 100644 --- a/frontend/templates/notification/coment_on_commented/notice.html +++ b/frontend/templates/notification/coment_on_commented/notice.html @@ -1,24 +1,27 @@ - {% with comment.content_object.id as id %} - {% with comment.user as user %} -
-
-
- cover image -
- {{ user.username }} on {{ comment.content_object.title }}
- - {{ comment.comment|linebreaksbr }} -
- - -
- {% endwith %} - {% endwith %} +{% with comment.content_object.id as id %} +{% with comment.user as user %} + +
+
+ cover image for {{ comment.content_object.title }} +
+ + +
+ +{% endwith %} +{% endwith %} diff --git a/frontend/templates/notification/notice_template.html b/frontend/templates/notification/notice_template.html new file mode 100644 index 00000000..c90be7d4 --- /dev/null +++ b/frontend/templates/notification/notice_template.html @@ -0,0 +1,31 @@ +{% comment %} +Note: this is NOT intended to render notices + +This is a model to use as a base for notice.html templates. +Copy/paste from here to your desired notice.html and fill in the specific content. +Using this template will allow notices.css to apply to all notices for a uniform style. +{% endcomment %} + +
+
+ {% comment %} + Your cover image goes here. + {% endcomment %} +
+ +
+
+ {% comment %} + This is where you put graphics-oriented header info for the notice. + Examples include user avatars and campaign status icons. + Some text is OK. + {% endcomment %} +
+
+ {% comment %} + This is where you put the textual part of your message. + Examples include the text of comments, details about credit card charges, etc. + {% endcomment %} +
+
+
\ No newline at end of file diff --git a/frontend/templates/notification/notices.html b/frontend/templates/notification/notices.html index 8a1eec5e..879930cf 100644 --- a/frontend/templates/notification/notices.html +++ b/frontend/templates/notification/notices.html @@ -19,8 +19,10 @@ {% if notices %} - {% trans "Mark all unseen notices seen." %} - +
+ {% trans "Mark all unseen notices seen" %} +
+

{% for notice in notices %} @@ -29,9 +31,7 @@ {% else %}
{% endif %} - [{% trans notice.notice_type.display %}] - {{ notice.message|safe }} - {{ notice.added }} + {{ notice.message|safe }}

{% endfor %} diff --git a/frontend/templates/notification/wishlist_comment/notice.html b/frontend/templates/notification/wishlist_comment/notice.html index 89792002..8a0c71bd 100644 --- a/frontend/templates/notification/wishlist_comment/notice.html +++ b/frontend/templates/notification/wishlist_comment/notice.html @@ -1,24 +1,27 @@ - {% with comment.content_object.id as id %} - {% with comment.user as user %} -
-
-
- cover image -
- {{ comment.user.username }} on {{ comment.content_object.title }}
- - {{ comment.comment|linebreaksbr }} -
- - -
- {% endwith %} - {% endwith %} +{% with comment.content_object.id as id %} +{% with comment.user as user %} + +
+
+ cover image for {{ comment.content_object.title }} +
+ + +
+ +{% endwith %} +{% endwith %} diff --git a/static/css/notices.css b/static/css/notices.css index 18c94c41..abcfdc45 100644 --- a/static/css/notices.css +++ b/static/css/notices.css @@ -96,6 +96,7 @@ border-radius: 20px; background: #edf3f4; padding: 10px 20px; + margin: -15px auto 7px 7px; } .notices_menu a { font-size: 13px; @@ -123,6 +124,7 @@ list-style: none; border: none; } +/* notice_settings */ th { text-align: left; } @@ -143,3 +145,25 @@ input[type="submit"] { float: right; margin-right: 0; } +/* comment containers */ +.comments { + border: solid 3px #d6dde0; + margin: 3px auto; +} +.comments .comments_book { + padding: 5px; + border: solid 5px #EDF3F4; + float: left; + margin: 5px; +} +.comments .comments_info { + float: left; +} +.comments .comments_info .comments_graphical { + border-bottom: solid 1px #d6dde0; + margin: 5px; + padding-bottom: 5px; +} +.comments .comments_info .comments_textual { + margin: auto 5px; +} diff --git a/static/css/sitewide.css b/static/css/sitewide.css index 7955120b..48f25189 100644 --- a/static/css/sitewide.css +++ b/static/css/sitewide.css @@ -253,6 +253,7 @@ input[type="submit"] { color: white; font-weight: bold; padding: 0.5em 1em; + cursor: pointer; } .js-page-wrap { position: relative; diff --git a/static/less/notices.less b/static/less/notices.less index 4b1d6ebc..a7b3de21 100644 --- a/static/less/notices.less +++ b/static/less/notices.less @@ -5,6 +5,7 @@ .one-border-radius(20px); background: @pale-blue; padding: 10px 20px; + margin: -15px auto 7px 7px; a { font-size: 13px; @@ -22,6 +23,7 @@ height: auto; } +/* notice_settings */ th { text-align: left; } @@ -46,4 +48,31 @@ td { input[type="submit"] { float: right; margin-right: 0; +} + +/* comment containers */ + +.comments { + border: solid 3px @blue-grey; + margin: 3px auto; + + .comments_book { + .mediaborder; + float: left; + margin: 5px; + } + + .comments_info { + float: left; + + .comments_graphical { + border-bottom: solid 1px @blue-grey; + margin: 5px; + padding-bottom: 5px; + } + + .comments_textual { + margin: auto 5px; + } + } } \ No newline at end of file diff --git a/static/less/sitewide.less b/static/less/sitewide.less index 996c13d2..e2bb8c48 100644 --- a/static/less/sitewide.less +++ b/static/less/sitewide.less @@ -163,6 +163,7 @@ input[type="submit"] { color: white; font-weight: bold; padding: 0.5em 1em; + cursor: pointer; } .js-page-wrap {