311 lines
14 KiB
HTML
311 lines
14 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %} — {{ supporter.username }}{% endblock %}
|
|
|
|
{% block extra_head %}
|
|
<link type="text/css" rel="stylesheet" href="/static/css/supporter_layout.css" />
|
|
<link type="text/css" rel="stylesheet" href="/static/css/book_list.css" />
|
|
<link type="text/css" rel="stylesheet" href="/static/css/book_panel.css" />
|
|
|
|
<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>
|
|
<script type="text/javascript" src="static/js/jquery-1.6.3.min.js"></script>
|
|
<script type="text/javascript">
|
|
$(document).ready(function(){
|
|
$('.image span').hide().css("opacity", 0);
|
|
|
|
$('.image').bind("mouseenter", (function()
|
|
{
|
|
$(this).children('span').animate({height: "300px", opacity: 1},300);
|
|
}));
|
|
|
|
$('.image').bind("mouseleave", (function()
|
|
{
|
|
$(this).children('span').animate({height: "0px", opacity: 0},200);
|
|
}));
|
|
|
|
});
|
|
</script>
|
|
|
|
<link rel="stylesheet" href="/static/css/book-panel-unimported.css">
|
|
|
|
{% endblock %}
|
|
|
|
/*
|
|
To do:
|
|
tidy: remove unnecessary divs copy-pasted over from standalone version
|
|
decide how many panels go in a row & space appropriately (do we have guidance from stefan?)
|
|
I did 5 across by shaving one pixel off each (143-142) but don't like what it's done to white space
|
|
incorporate book panel css into other css & clean up
|
|
|
|
make this part of supporter page; figure out swap logic
|
|
remove unneeded view icon
|
|
|
|
make js work
|
|
|
|
how to handle overlong author/titles? Am using truncatewords; truncatechars is better but not available in my version of Django
|
|
really want to limit the number of lines. but css with hidden overflow might be weird. show on hover?
|
|
need these boxes to have fixed height anyway because it looks weird with status at different heights
|
|
*/
|
|
|
|
{% 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 %}
|
|
<div id="main-wrapper">
|
|
{% 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="item_wrapper">
|
|
<div class="panel_item">
|
|
<div class="greenpanel">
|
|
<div class="image">
|
|
<img src="{{ work.cover_image_thumbnail }}" width="120" height="182"/> <b>{{ work.title|truncatewords:5 }}</b>
|
|
<p>{{ work.author|truncatewords:3 }}</p>
|
|
<p class="green"><b>Status:</b> {{ work.last_campaign_status }}</p>
|
|
<div class="read">
|
|
<img src="/static/images/images/icon-book-37by25-{{ work.percent_unglued }}.png" title="book list status" alt="book list status" />
|
|
<p>100%</p>
|
|
<p class="right_add"><img src="/static/images/book-panel/add_gray.png" border="0" /></p>
|
|
</div>
|
|
<span style="display: none; opacity: 0;">
|
|
<div class="greenpanel2">
|
|
<div class="unglued_white"> <b>Unglued!</b>
|
|
<p>Sept 12 2011</p>
|
|
<p><b>Raised:</b> $12,000</p>
|
|
</div>
|
|
<div class="read_itbutton"> <a href="#">Read it Now</a> </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="add_towish"> <a href="#">Add to Wishlist</a> </div>
|
|
<div class="white_text"> <b><a href="#">{{ work.title }}</a></b>
|
|
<p><a href="#">{{ work.author }}</a></p>
|
|
<p><b>Status:</b> {{ work.last_campaign_status }}</p>
|
|
</div>
|
|
<div class="moreinfo"> <a href="#">More Info</a> </div>
|
|
</div>
|
|
</span> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% endifequal %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|