notices page now has reasonably styled notices and there is a model for generating other notice types

pull/1/head
Andromeda Yelton 2012-03-29 14:46:06 -04:00
parent 17b8ad452a
commit 449aae4662
12 changed files with 172 additions and 54 deletions

View File

@ -150,7 +150,7 @@
<p class="user-book-info"><a href="{% url supporter event.wishlist.user.username %}">{{event.wishlist.user.username|truncatechars:20}}</a> is Wishing For</p>
<a class="user-book-name" href="{% url work event.work.id %}">{{ event.work.title }}</a>
</div>
<div class="user-book-thumb"><a class="user-book-name" href="{% url work event.work.id %}"><img src="{{ event.work.cover_image_thumbnail }}" width="29" height="43" title="{{ event.work.title }}" alt="Very Long Book Title" /></a></div>
<div class="user-book-thumb"><a class="user-book-name" href="{% url work event.work.id %}"><img src="{{ event.work.cover_image_thumbnail }}" width="29" height="43" title="{{ event.work.title }}" alt="{{ event.work.title }}" /></a></div>
</li>
{% endfor %}
</ul>

View File

@ -0,0 +1 @@
Congratulations, you wished for it, and now there is an Active Campaign for **WORK** to be Unglued.

View File

@ -0,0 +1,24 @@
{% with comment.content_object.id as id %}
{% with comment.user as user %}
<div class="comments {% cycle 'row1' 'row2' %}">
<div class="nonavatar">
<div class="image">
<a href="{% url work id %}?tab=2"><img src="{{ comment.content_object.cover_image_thumbnail }}" alt="cover image" /></a>
</div>
<span><a href="{% url supporter supporter_username=user %}">{{ comment.user.username }}</a> on <a href="{% url work id %}?tab=2">{{ comment.content_object.title }}</a></span><br />
<span class="text">{{ comment.comment|linebreaksbr }}</span>
</div>
<div class="avatar">
<a href="{% url supporter supporter_username=user %}">
{% if supporter.profile.pic_url %}
<img class="user-avatar" src="{{ comment.user.profile.pic_url }}" height="50" width="50" alt="Picture of {{ comment.user }}" title="{{ comment.user }}" />
{% else %}
<img class="user-avatar" src="/static/images/header/avatar.png" height="50" width="50" alt="Generic Ungluer Avatar" title="Ungluer" />
{% endif %}
</a>
</div>
</div>
{% endwith %}
{% endwith %}

View File

@ -0,0 +1 @@
Campaign for {{ work }} now active at Unglue.It!

View File

@ -1,16 +1,13 @@
{% with comment.content_object.id as id %}
{% with comment.user as user %}
<div class="comments {% cycle 'row1' 'row2' %}">
<div class="nonavatar">
<div class="image">
<a href="{% url work id %}?tab=2"><img src="{{ comment.content_object.cover_image_thumbnail }}" alt="cover image" /></a>
</div>
<span><a href="{% url supporter supporter_username=user %}">{{ user.username }}</a> on <a href="{% url work id %}?tab=2">{{ comment.content_object.title }}</a></span><br />
{% with comment.content_object.id as id %}
{% with comment.user as user %}
<span class="text">{{ comment.comment|linebreaksbr }}</span>
<div class="comments clearfix">
<div class="comments_book">
<a href="{% url work id %}?tab=2"><img src="{{ comment.content_object.cover_image_thumbnail }}" alt="cover image for {{ comment.content_object.title }}" /></a>
</div>
<div class="avatar">
<div class="comments_info">
<div class="comments_graphical">
<a href="{% url supporter supporter_username=user %}">
{% if supporter.profile.pic_url %}
<img class="user-avatar" src="{{ comment.user.profile.pic_url }}" height="50" width="50" alt="Picture of {{ comment.user }}" title="{{ comment.user }}" />
@ -18,7 +15,13 @@
<img class="user-avatar" src="/static/images/header/avatar.png" height="50" width="50" alt="Generic Ungluer Avatar" title="Ungluer" />
{% endif %}
</a>
<span><a href="{% url supporter supporter_username=user %}">{{ comment.user.username }}</a> on <a href="{% url work id %}?tab=2">{{ comment.content_object.title }}</a></span>
</div>
<div class="comments_textual">
{{ comment.comment|linebreaksbr }}
</div>
</div>
{% endwith %}
{% endwith %}
</div>
{% endwith %}
{% endwith %}

View File

@ -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 %}
<div class="comments clearfix">
<div class="comments_book">
{% comment %}
Your cover image goes here.
{% endcomment %}
</div>
<div class="comments_info">
<div class="comments_graphical">
{% 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 %}
</div>
<div class="comments_textual">
{% 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 %}
</div>
</div>
</div>

View File

@ -19,8 +19,10 @@
</a>
{% if notices %}
<a href="{% url notification_mark_all_seen %}">{% trans "Mark all unseen notices seen." %}</a>
<div class="notices_menu">
<a href="{% url notification_mark_all_seen %}">{% trans "Mark all unseen notices seen" %}</a>
</div>
<div class="comments"></div>
<br />
{% for notice in notices %}
@ -29,9 +31,7 @@
{% else %}
<div class="notice">
{% endif %}
<span class="notice_type">[{% trans notice.notice_type.display %}]</span>
<span class="notice_message">{{ notice.message|safe }}</span>
<span class="notice_time">{{ notice.added }}</span>
{{ notice.message|safe }}
</div>
<br />
{% endfor %}

View File

@ -1,16 +1,13 @@
{% with comment.content_object.id as id %}
{% with comment.user as user %}
<div class="comments {% cycle 'row1' 'row2' %}">
<div class="nonavatar">
<div class="image">
<a href="{% url work id %}?tab=2"><img src="{{ comment.content_object.cover_image_thumbnail }}" alt="cover image" /></a>
</div>
<span><a href="{% url supporter supporter_username=user %}">{{ comment.user.username }}</a> on <a href="{% url work id %}?tab=2">{{ comment.content_object.title }}</a></span><br />
{% with comment.content_object.id as id %}
{% with comment.user as user %}
<span class="text">{{ comment.comment|linebreaksbr }}</span>
<div class="comments clearfix">
<div class="comments_book">
<a href="{% url work id %}?tab=2"><img src="{{ comment.content_object.cover_image_thumbnail }}" alt="cover image for {{ comment.content_object.title }}" /></a>
</div>
<div class="avatar">
<div class="comments_info">
<div class="comments_graphical">
<a href="{% url supporter supporter_username=user %}">
{% if supporter.profile.pic_url %}
<img class="user-avatar" src="{{ comment.user.profile.pic_url }}" height="50" width="50" alt="Picture of {{ comment.user }}" title="{{ comment.user }}" />
@ -18,7 +15,13 @@
<img class="user-avatar" src="/static/images/header/avatar.png" height="50" width="50" alt="Generic Ungluer Avatar" title="Ungluer" />
{% endif %}
</a>
<span><a href="{% url supporter supporter_username=user %}">{{ comment.user.username }}</a> on <a href="{% url work id %}?tab=2">{{ comment.content_object.title }}</a></span>
</div>
<div class="comments_textual">
{{ comment.comment|linebreaksbr }}
</div>
</div>
{% endwith %}
{% endwith %}
</div>
{% endwith %}
{% endwith %}

View File

@ -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;
}

View File

@ -253,6 +253,7 @@ input[type="submit"] {
color: white;
font-weight: bold;
padding: 0.5em 1em;
cursor: pointer;
}
.js-page-wrap {
position: relative;

View File

@ -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;
}
@ -47,3 +49,30 @@ 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;
}
}
}

View File

@ -163,6 +163,7 @@ input[type="submit"] {
color: white;
font-weight: bold;
padding: 0.5em 1em;
cursor: pointer;
}
.js-page-wrap {