initial pass at pulling in stefan's book panel templates
Ed Summers
parent
2725205d35
commit
ca5af54134
|
|
@ -1,9 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>unglue.it: {% block title %}{% endblock %}</title>
|
||||
<link type="text/css" rel="stylesheet" href="/static/css/layout.css" />
|
||||
<title>unglue.it: {% block title %}{% endblock %}</title>
|
||||
<link type="text/css" rel="stylesheet" href="/static/css/layout.css" />
|
||||
<link type="text/css" rel="stylesheet" href="/static/css/book-panel.css" />
|
||||
<link href="/static/css/book-panel.css" rel="stylesheet" type="text/css" />
|
||||
<script type="text/javascript" src="/static/js/jquery-1.6.3.min.js"></script>
|
||||
<script type="text/javascript" src="/static/js/book-panel.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,44 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="book_panel">
|
||||
<div class="book_panel_interior">
|
||||
<img src="/static/images/book-panel/heming_way.jpg" width="120" height="182" />
|
||||
<b>Nineteen Eighty-Four</b>
|
||||
<p>George Orwell</p>
|
||||
<p><b>Genre:</b> Sci-Fi</p>
|
||||
<p class="status"><b>Status:</b> Unglued!</p>
|
||||
<div class="read">
|
||||
<img src="/static/images/book-panel/percent.png" />
|
||||
<p>100%</p>
|
||||
<p class="right_add">
|
||||
<img src="/static/images/book-panel/add_gray.png" border="0" />
|
||||
</p>
|
||||
</div>
|
||||
<span style="display: none;">
|
||||
<div class="book_panel_back">
|
||||
<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>
|
||||
<div id="add_towish">
|
||||
<a href="#">Add to Wishlist</a>
|
||||
</div>
|
||||
<div id="white_text">
|
||||
<b><a href="#">Nineteen Eighty-Four</a></b>
|
||||
<p><a href="#">George Orwell</a></p>
|
||||
<p><b>Genre:</b> Sci-Fi</p>
|
||||
<p><b>Status:</b> In Progress</p>
|
||||
</div>
|
||||
<div id="moreinfo">
|
||||
<a href="#">More Info</a>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -3,4 +3,5 @@ from django.conf.urls.defaults import *
|
|||
urlpatterns = patterns(
|
||||
"regluit.frontend.views",
|
||||
url(r"^$", "home", name="home"),
|
||||
url(r"^panel/$", "panel", name="panel"),
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,8 +1,17 @@
|
|||
from django.template import RequestContext
|
||||
from django.shortcuts import render_to_response
|
||||
|
||||
from regluit.core import models
|
||||
|
||||
def home(request):
|
||||
campaigns = models.Campaign.objects.all()
|
||||
return render_to_response('home.html',
|
||||
{"campaigns": campaigns},
|
||||
context_instance=RequestContext(request)
|
||||
)
|
||||
|
||||
def panel(request):
|
||||
return render_to_response('book-panel.html',
|
||||
{},
|
||||
context_instance=RequestContext(request)
|
||||
)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,255 @@
|
|||
.book_panel {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
margin: 20px auto;
|
||||
padding: 0px 5px 5px 5px;
|
||||
height: 300px;
|
||||
width: 120px;
|
||||
line-height:16px;
|
||||
background-color: #ffffff;
|
||||
color: #3d4e53;
|
||||
border: 5px solid #edf3f4;
|
||||
}
|
||||
|
||||
.book_panel p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.book_panel img {
|
||||
padding:5px 0px;
|
||||
margin:0px;
|
||||
}
|
||||
|
||||
.green {
|
||||
color: #8dc63f;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.book_panel a {
|
||||
font-size: 12pt;
|
||||
color: #73a334;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.book_panel a:hover {
|
||||
color: #8dc63f;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.book_panel:hover {
|
||||
color: #3d4e53;
|
||||
}
|
||||
|
||||
.book_panel_back {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
margin: 0px auto;
|
||||
padding: 10px;
|
||||
height: 295px;
|
||||
width: 120px;
|
||||
line-height:16px;
|
||||
background-color: #8dc63f;
|
||||
color: #ffffff;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.book_panel_back a {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.unglued_white {
|
||||
font-size: 12px;
|
||||
margin: 0px auto;
|
||||
margin-bottom:5px;
|
||||
padding: 10px 0px;
|
||||
}
|
||||
|
||||
.status {
|
||||
color: #8dc63f;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.read_itbutton {
|
||||
width:118px;
|
||||
height:35px;
|
||||
padding:0px 0px;
|
||||
background:#FFFFFF;
|
||||
margin:0px;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #81bb38;
|
||||
}
|
||||
|
||||
.read_itbutton a {
|
||||
line-height:40px;
|
||||
font-size:11px;
|
||||
background: url(/static/images/book-panel/book_icon.png) no-repeat left center;
|
||||
background-position: 10px center;
|
||||
padding:0px 0px 0px 30px;
|
||||
color:#73a334;
|
||||
text-decoration:none;
|
||||
font-weight:bold;
|
||||
text-transform: uppercase;
|
||||
|
||||
}
|
||||
|
||||
.read_itbutton a:hover {
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
#add_towish {
|
||||
width:125px;
|
||||
height:30px;
|
||||
padding:0px 0px;
|
||||
margin:15px auto;
|
||||
}
|
||||
|
||||
#add_towish a {
|
||||
line-height:40px;
|
||||
font-size:11px;
|
||||
background-image: url(/static/images/book-panel/add_wish_icon.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
padding:8px 5px 8px 21px;
|
||||
font-weight:bold;
|
||||
color:#FFFFFF;
|
||||
text-decoration:none;
|
||||
text-transform: uppercase;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-top-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-top-color: #FFFFFF;
|
||||
border-bottom-color: #FFFFFF;
|
||||
}
|
||||
|
||||
#add_towish a:hover {
|
||||
text-decoration:none;
|
||||
color:#3d4e53;
|
||||
}
|
||||
|
||||
#white_text {
|
||||
width:130px;
|
||||
height:40px;
|
||||
padding:17px 0px;
|
||||
margin:0px;
|
||||
}
|
||||
|
||||
#white_text a {
|
||||
color:#FFFFFF;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
#white_text a:hover {
|
||||
color:#3d4e53;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
#moreinfo {
|
||||
width:130px;
|
||||
height:30px;
|
||||
padding:0px;
|
||||
margin:15px 0 0;
|
||||
}
|
||||
|
||||
#moreinfo a {
|
||||
line-height:40px;
|
||||
font-size:11px;
|
||||
background-image: url(/static/images/book-panel/more_icon.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
padding:8px 42px 8px 20px;
|
||||
font-weight:bold;
|
||||
padding-left:20px;
|
||||
color:#FFFFFF;
|
||||
text-decoration:none;
|
||||
text-transform: uppercase;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-top-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-top-color: #FFFFFF;
|
||||
border-bottom-color: #FFFFFF;
|
||||
}
|
||||
|
||||
#moreinfo a:hover {
|
||||
text-decoration:none;
|
||||
color:#3d4e53;
|
||||
}
|
||||
|
||||
.green {
|
||||
color: #8dc63f;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#graypanel a {
|
||||
color: #3d4e53;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.read {
|
||||
margin: 15px auto;
|
||||
padding: 0px;
|
||||
width: 140px;
|
||||
color:#8dc63f;
|
||||
height:40px;
|
||||
line-height:25px;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.read p {
|
||||
margin: 0px;
|
||||
padding: 10px 3px;
|
||||
width: 50px;
|
||||
font-size:10pt;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.read img {
|
||||
padding:5px;
|
||||
margin:0px;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.right_add {
|
||||
padding:10px;
|
||||
margin:0px;
|
||||
float:right;
|
||||
}
|
||||
|
||||
p.right_add {
|
||||
float:right;
|
||||
padding:10px 10px 0 0;
|
||||
width:24px;
|
||||
}
|
||||
|
||||
.right_add {
|
||||
padding:10px;
|
||||
margin:0px;
|
||||
float:right;
|
||||
}
|
||||
|
||||
/* slideout hover state */
|
||||
|
||||
.book_panel_interior {
|
||||
float: left;
|
||||
position: relative;
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
left:0px;
|
||||
}
|
||||
|
||||
.book_panel_interior img {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.book_panel_interior span {
|
||||
position:absolute;
|
||||
bottom: 0;
|
||||
left:-10px;
|
||||
top:-5px;
|
||||
z-index: 1000;
|
||||
height:auto;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 926 B |
Binary file not shown.
|
After Width: | Height: | Size: 297 B |
Binary file not shown.
|
After Width: | Height: | Size: 283 B |
Binary file not shown.
|
After Width: | Height: | Size: 184 B |
Binary file not shown.
|
After Width: | Height: | Size: 417 B |
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 369 B |
Binary file not shown.
|
After Width: | Height: | Size: 368 B |
Binary file not shown.
|
After Width: | Height: | Size: 242 B |
Binary file not shown.
|
After Width: | Height: | Size: 668 B |
|
|
@ -0,0 +1,8 @@
|
|||
$(document).ready(function(){
|
||||
$('.book_panel_interior').bind("mouseenter", (function() {
|
||||
$(this).children('span').show();
|
||||
}));
|
||||
$('.book_panel_interior').bind("mouseleave", (function() {
|
||||
$(this).children('span').hide();
|
||||
}));
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue