regluit/frontend/templates/supporter.html

294 lines
14 KiB
HTML

{% extends "base.html" %}
{% block title %} — {{ supporter.username }}{% endblock %}
{% block extra_head %}
<script type="text/javascript" src="/static/js/wishlist.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/static/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('.user-block-hide').hide();
$j('.user-block1 a').click(
function() {
$j(this).toggleClass("active");
$j(".user-block-hide").slideToggle(300);
}
);
$j('.tabs1').click(function(){
$j('.tabs').find('.active').removeClass('active');
$j(this).addClass('active');
$j('.content-block-content').find('.active').removeClass('active');
$j('.tabs-1').addClass('active').show(300);
$j('.tabs-2').hide(200);
$j('.tabs-3').hide(200);
});
$j('.tabs2').click(function(){
$j('.tabs').find('.active').removeClass('active');
$j(this).addClass('active');
$j('.content-block-content').find('.active').removeClass('active');
$j('.tabs-2').addClass('active').show(300);
$j('.tabs-1').hide(200);
$j('.tabs-3').hide(200);
});
$j('.tabs3').click(function(){
$j('.tabs').find('.active').removeClass('active');
$j(this).addClass('active');
$j('.content-block-content').find('.active').removeClass('active');
$j('.tabs-3').addClass('active').show(300);
$j('.tabs-2').hide(200);
$j('.tabs-1').hide(200);
});
$j('.empty-wishlist span.bounce-search').click(function(){
$j('div.js-search-inner').effect("bounce", 500, function() {
$j('div.js-search-inner input[type="text"]').focus();
});
});
});
</script>
<link rel="stylesheet" href="/static/css/book_list.css">
{% endblock %}
/*
To do:
create topsection file for inclusion in multiple contexts, if needed
figure out how to configure date display
decide if we're even including date joined in profile
add support for userpics
crop/resize? other infrastructure we need? can we pull from twitter/fb?
add support for twitter/fb/other links?
part of user profile? can I just add to db model?
loosely coupled vs actually integrated with signin
canonicalize -- user enters cut/paste link vs username
Goodreads & Librarything support
If people lack homepage, etc., do we have greyed-out icons or no icons?
if greyed-out, can they add in place by clicking on them?
make sure we have the profile settings we need
resurrect add/remove functionality
be sure words display correctly
do I need both add-wishlist and remove-wishlist classes? do they differ?
better alignment on I am ungluing & badges
make sure backed/backing/wishlist is the order we want the badges to be in
test code with other campaign statuses -- random_campaigns needs to set a variety of statuses!
why is there a status in regluit.payment.models.Transaction? does it duplicate the status in regluit.core.models.Campaign?
there's no tab for seeing ALL my books, only the filters! huh.
Values I need:
how do I integrate the your wishlist thing with the tabs thing?
*/
{% block topsection %}
<div id="js-topsection">
<div class="js-main">
<div class="js-topnews">
<div class="js-topnews1">
<div class="js-topnews2">
<div class="js-topnews3">
<div class="user-block">
{% ifequal supporter request.user %}
<div class="user-block1">
<div class="block-inner">
<a class="my-setting" href="#">My Settings</a>
</div>
</div>
{% endifequal %}
<div class="user-block2">
<img class="user-avatar" src="/static/images/header/avatar.png" height="50" width="50" alt="User avatar" title="User avatar" />
<span class="user-name"><a href="#">{{ supporter.username }}</a></span>
<span class="user-date">{{ date }}</span>
<span class="user-short-info">{{ supporter.profile.tagline }}</span>
</div>
<div class="user-block4">
<div class="social">
{% if supporter.profile.home_url %}
<a href="{{ supporter.profile.home_url }}">
<img src="/static/images/header/icon-home.png" alt="{{ supporter }}'s Homepage" title="{{ supporter }}'s Homepage" />
</a>
{% endif %}
<a href="#"><img src="/static/images/header/icon-facebook.png" alt="{{ supporter }}'s Facebook" title="{{ supporter }}'s Facebook" /></a>
{% if supporter.profile.twitter_id %}
<a href="https://twitter.com/#!/{{ supporter.profile.twitter_id }}">
<img src="/static/images/header/icon-twitter.png" alt="{{ supporter }}'s Twitter" title="{{ supporter }}'s Twitter" />
</a>
{% endif %}
<a href="#"><img src="/static/images/header/icon-google.png" alt="google" title="google" /></a>
<a href="#"><img src="/static/images/header/icon-group.png" alt="group" title="group" /></a></div>
</div>
<div class="user-block3">
<div class="user-block">
<span class="rounded"><span class="blue">{{ backed }}</span></span>
<span class="rounded"><span class="orange">{{ backing }}</span></span>
<span class="rounded"><span class="grey">{{ wished }}</span></span>
</div>
<span class="user-status-title">I am ungluing</span>
</div>
</div>
{% ifequal supporter request.user %}
<div class="user-block-hide">
<form method="POST" action="">
{% csrf_token %}
<div class="block block1">
<div class="block-inner">
<h3><a class="profile-edit" href="#">Your Tagline</a></h3>
{{ profile_form.tagline }}
<input class="profile-save" type="submit" name="submit" value="Update" id="submit">
</div>
</div>
<div class="block block2">
<h3 class="title">Links</h3>
<div class="check-list">
<label>Your homepage URL:</label>
{{ profile_form.home_url }}
</div>
<div class="check-list">
<label>Your Twitter handle:</label>
{{ profile_form.twitter_id }}
</div>
</div>
<div class="block block3">
<h3 class="title">Other Stuff</h3>
<div class="check-list">
<label>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</label>
</div>
<div class="check-list">
<input type="checkbox" />
<label>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</label>
</div>
</div>
</form>
</div>
{% endifequal %}
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div id="main-container">
<div class="js-main">
{% include "explore.html" %}
<div id="js-maincol-fr">
<div class="js-maincol-inner">
<div class="content-block">
<div class="content-block-heading" id="tabs">
<ul class="tabs">
<li class="tabs1"><a href="#">Unglued</a></li>
<li class="tabs2"><a href="#">Being Unglued</a></li>
<li class="tabs3 active"><a href="#">Want to Unglue</a></li>
</ul>
<ul class="book-list-view">
<li>View As:</li>
<li class="view-list">
<a href="#view-list">
<img src="/static/images/booklist/view-list.png" align="view list" title="view list" height="21" width="24" />
</a>
</li>
<li class="view-list">
<a href="#view-icon">
<img src="/static/images/booklist/view-icon.png" align="view icon" title="view icon" height="22" width="22" />
</a>
</li>
<li class="view-list">
<a href="#view-icon-small">
<img src="/static/images/booklist/view-small-icon.png" align="view icon small" title="view icon small" height="22" width="22" />
</a>
</li>
</ul>
</div>
<div class="content-block-content">
{% ifequal wishlist.works.all.count 0 %}
{% ifequal request.user supporter %}
<div class="empty-wishlist">
Your wishlist is currently empty.<br><br>
Go ahead and <span class="bounce-search">find</span> some books to give to the world, and add them to your Wishlist!<br><br>
We double dog dare you...
</div>
{% else %}
<div class="empty-wishlist">
It looks like {{ supporter.username }} is just
getting started, and hasn't added anything to their
wishlist just yet.<br><br>
Nudge, nudge, say no more.
{% endifequal %}
{% else %}
{% for work in wishlist.works.all %}
<!-- classify which tab depending on work.last_campaign_status -->
{% if work.last_campaign_status == 'SUCCESSFUL' %}
<div class="tabs tabs-1">
{% else %}{% if work.last_campaign_status == 'ACTIVE' %}
<div class="tabs tabs-2">
{% else %}
<div class="tabs tabs-3">
{% endif %}{% endif %}
<div class="book-list {% cycle 'row1' 'row2' %}">
<div class="book-thumb">
<a href="#"><img src="{{ work.cover_image_small }}" alt="Book name" title="book name" /></a>
</div>
<div class="book-name">
<span>
<a href="{% url work work.id %}">{{ work.title }}</a>
</span>
</div>
{% ifequal supporter request.user %}
<div class="remove-wishlist">
<span id="{{ work.id }}">Remove from Wishlist</span>
</div>
{% else %}{% if work in shared_works %}
<div>
<span>On Your Wishlist!</span>
</div>
{% else %}{% if request.user.is_anonymous %}
<div class="create-account">
<span>Add to Wishlist</span>
</div>
{% else %}
<div class="add-wishlist">
<span id="{{ work.editions.all.0.googlebooks_id }}">Add to Wishlist</span>
</div>
{% endif %}{% endif %}{% endifequal %}
<div class="booklist-status">
<span class="booklist-status-text">{{ work.last_campaign_status }}</span>
<span class="booklist-status-img">
<img src="/static/images/icon-book{{ work.percent_unglued }}.png" title="book list status" alt="book list status" />
</span>
</div>
<div class="unglue-this none">
<div class="unglue-this-inner1">
<div class="unglue-this-inner2">
</div>
</div>
</div>
</div>
</div>
{% endfor %}
{% endifequal %}
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}