EbookFoundation
/
regluit
mirror of https://github.com/EbookFoundation/regluit.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

now the text before the learn more button randomizes onload and onclick

pull/1/head
Andromeda Yelton 2012-01-02 16:20:07 -05:00
parent dfd20a7957
commit 4e23363a80
12 changed files with 315 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/templates/basedocumentation.html
View File

@ -1,6 +1,22 @@
{% extends "base.html" %}
{% block extra_head %}
<link href="/static/css/documentation.css" rel="stylesheet" type="text/css" />
{% block extra_js %}
<!-- expands/collapses the learn more section -->
<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("a.readon").toggleClass("down");
}
);
});
</script>
{% endblock %}
{% block extra_extra_head %}
<!-- extra head content in descendants goes in extra_extra_head, not extra_head, to avoid overwriting the documentation.css include -->
{% endblock %}
@ -9,31 +25,7 @@
{% block title %}{% endblock %}
{% block topsection %}
<div id="js-topsection">
<div class="js-main">
<div class="js-topnews">
<div class="user-block">
<div class="user-block1">
<div class="block-inner">
<div class="block-intro-text">With your help we raise money to buy book rights. The <span class="typo">unglued</span> books are free to download, here.</div>
<a class="my-setting readon"><span>Learn more</span></a>
</div>
</div>
<div class="user-block2">
<div class="block-inner">
<label class="title">Spread the Word</label>
<a href="https://www.facebook.com/sharer.php?u={{request.build_absolute_uri}}{{ request.path|urlencode:"" }}"><img src="/static/images/icons/facebook.png" alt="Facebook" title="Facebook" /></a>
<a href="https://twitter.com/intent/tweet?url={{request.build_absolute_uri}}{{ request.path|urlencode:"" }}&text=Unglue%ebooks%21"><img src="/static/images/icons/twitter.png" alt="Twitter" title="Twitter" /></a>
<a href="#"><img src="/static/images/icons/email.png" alt="email" title="email" /></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% include "learn_more.html" %}
{% endblock %}
{% block content %}

34
frontend/templates/home.html
View File

@ -25,14 +25,14 @@
});
</script>
<!-- toggle to panelview state instead of listview default -->
<script type="application/x-javascript">
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.listview').addClass("panelview").removeClass("listview");
});
</script>
<script type="text/javascript" src="/static/js/definitions.js"></script>
<script type="text/javascript" src="/static/js/greenpanel.js"></script>
<script src="/static/js/slides.min.jquery.js"></script>
@ -61,35 +61,7 @@ var $j = jQuery.noConflict();
{% endblock %}
{% block topsection %}
<div id="js-topsection">
<div class="js-main">
<div class="js-topnews">
<div class="user-block">
<div class="user-block1">
<div class="block-inner">
<div class="block-intro-text">With your help we raise money to buy book rights. The <span class="typo">unglued</span> books are free to download, here.</div>
<a class="my-setting readon"><span>Learn more</span></a>
</div>
</div>
<div class="user-block2">
<div class="block-inner">
<label class="title">Spread the Word</label>
<a href="https://www.facebook.com/sharer/sharer.php?src=bm&u={{request.build_absolute_uri}}"><img src="/static/images/supporter_icons/facebook_square.png" alt="Facebook" title="Facebook" /></a>
<a href="https://twitter.com/share"><img src="/static/images/supporter_icons/twitter_square.png" alt="tweeter" title="Twitter" /></a>
</div>
</div>
</div>
<div class="user-block-hide">
<div class="quicktour"><span class="highlight">We all have books we love so much, we'd like to give them to the world.</span> We want to share them, but also reward their creators. With digital books, it can be hard to do both.</div>
<div class="movingrightalong"></div>
<div class="quicktour"><span class="highlight">Unglue.it offers a win-win solution: Crowdfunding.</span> We run pledge campaigns for books; you chip in. When, together, we've reached the goal, we'll reward the book's creators and issue an unglued ebook.</div>
<div class="movingrightalong"></div>
<div class="quicktour last"><a href="https://creativecommons.org/">Creative Commons</a> licensing means everyone, everywhere can read and share the unglued book — freely and legally. <span class="highlight">You've given your favorite book to the world.</span></div>
</div>
</div>
</div>
</div>
{% include "learn_more.html" %}
{% endblock %}
{% block content %}

29
frontend/templates/learn_more.html Normal file
View File

@ -0,0 +1,29 @@
<div id="js-topsection">
<div class="js-main">
<div class="js-topnews">
<div class="user-block">
<div class="user-block1">
<div class="block-inner">
<div class="block-intro-text"><div>With your help we raise money to buy book rights. The <span class="typo">unglued</span> books are free to download, here.</div><div>Alternatively, we don't.</div></div>
<a class="my-setting readon"><span>Learn more</span></a>
</div>
</div>
<div class="user-block2">
<div class="block-inner">
<label class="title">Spread the Word</label>
<a href="https://www.facebook.com/sharer/sharer.php?src=bm&u={{request.build_absolute_uri}}"><img src="/static/images/supporter_icons/facebook_square.png" alt="Facebook" title="Facebook" /></a>
<a href="https://twitter.com/share"><img src="/static/images/supporter_icons/twitter_square.png" alt="tweeter" title="Twitter" /></a>
</div>
</div>
</div>
<div class="user-block-hide">
<div class="quicktour"><span class="highlight">We all have books we love so much, we'd like to give them to the world.</span> We want to share them, but also reward their creators. With digital books, it can be hard to do both.</div>
<div class="movingrightalong"></div>
<div class="quicktour"><span class="highlight">Unglue.it offers a win-win solution: Crowdfunding.</span> We run pledge campaigns for books; you chip in. When, together, we've reached the goal, we'll reward the book's creators and issue an unglued ebook.</div>
<div class="movingrightalong"></div>
<div class="quicktour last"><a href="https://creativecommons.org/">Creative Commons</a> licensing means everyone, everywhere can read and share the unglued book — freely and legally. <span class="highlight">You've given your favorite book to the world.</span></div>
</div>
</div>
</div>
</div>

66
static/css/documentation.css
View File

@ -13,14 +13,62 @@
border-style: solid none;
border-color: #FFFFFF;
}
.user-block {
width: 100%;
clear: both;
/* variables and mixins used in multiple less files go here */
.header-text {
height: 36px;
line-height: 36px;
display: block;
text-decoration: none;
font-weight: bold;
font-size: 13px;
letter-spacing: -0.05em;
}
.panelborders {
border-width: 1px 0px;
border-style: solid none;
border-color: #FFFFFF;
}
.user-block-hide {
float: left;
width: 100%;
clear: both;
border-top: solid 1px #8ac3d7;
margin-top: 20px;
}
.user-block-hide .quicktour {
width: 270px;
float: left;
font-style: italic;
line-height: 20px;
font-size: 13px;
margin-top: 20px;
}
.user-block-hide .quicktour .highlight {
font-weight: bold;
}
.user-block-hide .quicktour.last {
padding-right: 0px;
width: 270px;
background: url("/static/images/landingpage/signmeup-arrow.png") no-repeat center bottom;
padding-bottom: 42px;
}
.user-block-hide .movingrightalong {
background: url("/static/images/landingpage/quicktour-arrow.png") no-repeat center;
height: 100px;
width: 75px;
float: left;
margin-top: 20px;
}
.block-intro-text div {
display: none;
}
.block-intro-text div#active {
display: inherit;
}
/* Learn More area (not already styles by learnmore.less) */
.user-block {
width: 100%;
clear: both;
}
.user-block1, .user-block2 {
float: left;
@ -69,6 +117,9 @@
-moz-border-radius: 12px 12px 12px 12px;
-webkit-border-radius: 12px 12px 12px 12px;
border-radius: 12px 12px 12px 12px;
-moz-border-radius: 12px 12px 12px 12px;
-webkit-border-radius: 12px 12px 12px 12px;
border-radius: 12px 12px 12px 12px;
}
.have-right #js-rightcol .jsmodule {
border-bottom: 1px solid #3c4e52;
@ -102,6 +153,9 @@
-moz-border-radius: 14px 14px 14px 14px;
-webkit-border-radius: 14px 14px 14px 14px;
border-radius: 14px 14px 14px 14px;
-moz-border-radius: 14px 14px 14px 14px;
-webkit-border-radius: 14px 14px 14px 14px;
border-radius: 14px 14px 14px 14px;
padding: 10px;
background: #edf3f4;
}
@ -110,6 +164,9 @@
-moz-border-radius: 12px 12px 12px 12px;
-webkit-border-radius: 12px 12px 12px 12px;
border-radius: 12px 12px 12px 12px;
-moz-border-radius: 12px 12px 12px 12px;
-webkit-border-radius: 12px 12px 12px 12px;
border-radius: 12px 12px 12px 12px;
padding: 10px;
font-style: italic;
}
@ -118,6 +175,9 @@ dt {
-moz-border-radius: 14px 14px 14px 14px;
-webkit-border-radius: 14px 14px 14px 14px;
border-radius: 14px 14px 14px 14px;
-moz-border-radius: 14px 14px 14px 14px;
-webkit-border-radius: 14px 14px 14px 14px;
border-radius: 14px 14px 14px 14px;
padding: 10px 0px 10px 7px;
background: #edf3f4;
}

113
static/css/landingpage.css
View File

@ -13,6 +13,58 @@
border-style: solid none;
border-color: #FFFFFF;
}
/* variables and mixins used in multiple less files go here */
.header-text {
height: 36px;
line-height: 36px;
display: block;
text-decoration: none;
font-weight: bold;
font-size: 13px;
letter-spacing: -0.05em;
}
.panelborders {
border-width: 1px 0px;
border-style: solid none;
border-color: #FFFFFF;
}
.user-block-hide {
float: left;
width: 100%;
clear: both;
border-top: solid 1px #8ac3d7;
margin-top: 20px;
}
.user-block-hide .quicktour {
width: 270px;
float: left;
font-style: italic;
line-height: 20px;
font-size: 13px;
margin-top: 20px;
}
.user-block-hide .quicktour .highlight {
font-weight: bold;
}
.user-block-hide .quicktour.last {
padding-right: 0px;
width: 270px;
background: url("/static/images/landingpage/signmeup-arrow.png") no-repeat center bottom;
padding-bottom: 42px;
}
.user-block-hide .movingrightalong {
background: url("/static/images/landingpage/quicktour-arrow.png") no-repeat center;
height: 100px;
width: 75px;
float: left;
margin-top: 20px;
}
.block-intro-text div {
display: none;
}
.block-intro-text div#active {
display: inherit;
}
#expandable {
display: none;
}
@ -45,37 +97,6 @@
width: 100%;
clear: both;
}
.user-block-hide {
float: left;
width: 100%;
clear: both;
border-top: solid 1px #8ac3d7;
margin-top: 20px;
}
.user-block-hide .quicktour {
width: 270px;
float: left;
font-style: italic;
line-height: 20px;
font-size: 13px;
margin-top: 20px;
}
.user-block-hide .quicktour .highlight {
font-weight: bold;
}
.user-block-hide .quicktour.last {
padding-right: 0px;
width: 270px;
background: url("/static/images/landingpage/signmeup-arrow.png") no-repeat center bottom;
padding-bottom: 42px;
}
.user-block-hide .movingrightalong {
background: url("/static/images/landingpage/quicktour-arrow.png") no-repeat center;
height: 100px;
width: 75px;
float: left;
margin-top: 20px;
}
.user-block1, .user-block2 {
float: left;
}
@ -106,6 +127,8 @@
font-size: 20px;
height: 30px;
line-height: 30px;
height: 30px;
line-height: 30px;
color: #3d4e53;
padding-right: 15px;
}
@ -113,10 +136,15 @@
float: right;
height: 24px;
line-height: 24px;
height: 24px;
line-height: 24px;
width: 24px;
-moz-border-radius: 12px 12px 12px 12px;
-webkit-border-radius: 12px 12px 12px 12px;
border-radius: 12px 12px 12px 12px;
-moz-border-radius: 12px 12px 12px 12px;
-webkit-border-radius: 12px 12px 12px 12px;
border-radius: 12px 12px 12px 12px;
border: solid 4px #3d4e53;
text-align: center;
font-size: 17px;
@ -136,6 +164,9 @@
-moz-border-radius: 12px 12px 12px 12px;
-webkit-border-radius: 12px 12px 12px 12px;
border-radius: 12px 12px 12px 12px;
-moz-border-radius: 12px 12px 12px 12px;
-webkit-border-radius: 12px 12px 12px 12px;
border-radius: 12px 12px 12px 12px;
margin-bottom: 10px;
padding: 0 10px 10px 10px;
}
@ -144,12 +175,17 @@
padding-bottom: 10px;
}
#js-rightcol .jsmodule input, #js-rightcol2 .jsmodule input {
-moz-border-radius: 32px 32px 32px 32px;
-webkit-border-radius: 32px 32px 32px 32px;
border-radius: 32px 32px 32px 32px;
-moz-border-radius: 32px 32px 32px 32px;
-webkit-border-radius: 32px 32px 32px 32px;
border-radius: 32px 32px 32px 32px;
border: none;
height: 36px;
line-height: 36px;
height: 36px;
line-height: 36px;
width: 90%;
outline: none;
padding-left: 16px;
@ -227,6 +263,9 @@ div.typo2 {
-moz-border-radius: 12px 12px 12px 12px;
-webkit-border-radius: 12px 12px 12px 12px;
border-radius: 12px 12px 12px 12px;
-moz-border-radius: 12px 12px 12px 12px;
-webkit-border-radius: 12px 12px 12px 12px;
border-radius: 12px 12px 12px 12px;
padding: 10px;
font-style: italic;
}
@ -242,6 +281,8 @@ div.signup_btn a {
font-weight: bold;
height: 36px;
line-height: 36px;
height: 36px;
line-height: 36px;
letter-spacing: 1px;
text-decoration: none;
text-transform: capitalize;
@ -295,6 +336,9 @@ h2.page-heading {
margin-top: 55px;
}
#js-maincontainer-bot-block #js-search {
-moz-border-radius: 64px 64px 64px 64px;
-webkit-border-radius: 64px 64px 64px 64px;
border-radius: 64px 64px 64px 64px;
-moz-border-radius: 64px 64px 64px 64px;
-webkit-border-radius: 64px 64px 64px 64px;
border-radius: 64px 64px 64px 64px;
@ -327,6 +371,8 @@ h2.page-heading {
color: #66942e;
height: 26px;
line-height: 26px;
height: 26px;
line-height: 26px;
font-size: 13px;
float: left;
padding: 0;
@ -375,6 +421,9 @@ h2.page-heading {
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
font-size: 18px;
overflow: hidden;
display: inline-block;
@ -389,6 +438,8 @@ h3.module-title {
padding: 14px 0;
}
.google_signup div {
height: 32px;
line-height: 32px;
height: 32px;
line-height: 32px;
float: left;

52
static/css/learnmore.css Normal file
View File

@ -0,0 +1,52 @@
/* variables and mixins used in multiple less files go here */
.header-text {
height: 36px;
line-height: 36px;
display: block;
text-decoration: none;
font-weight: bold;
font-size: 13px;
letter-spacing: -0.05em;
}
.panelborders {
border-width: 1px 0px;
border-style: solid none;
border-color: #FFFFFF;
}
.user-block-hide {
float: left;
width: 100%;
clear: both;
border-top: solid 1px #8ac3d7;
margin-top: 20px;
}
.user-block-hide .quicktour {
width: 270px;
float: left;
font-style: italic;
line-height: 20px;
font-size: 13px;
margin-top: 20px;
}
.user-block-hide .quicktour .highlight {
font-weight: bold;
}
.user-block-hide .quicktour.last {
padding-right: 0px;
width: 270px;
background: url("/static/images/landingpage/signmeup-arrow.png") no-repeat center bottom;
padding-bottom: 42px;
}
.user-block-hide .movingrightalong {
background: url("/static/images/landingpage/quicktour-arrow.png") no-repeat center;
height: 100px;
width: 75px;
float: left;
margin-top: 20px;
}
.block-intro-text div {
display: none;
}
.block-intro-text div#active {
display: inherit;
}

1
static/css/sitewide.css
View File

@ -88,6 +88,7 @@ ul.menu {
padding: 0;
margin: 0;
}
/* Learn More menu */
a.readon {
background: url("/static/images/learnmore-downarrow.png") right center no-repeat;
color: #fff;

19
static/js/definitions.js Normal file
View File

@ -0,0 +1,19 @@
// make a random ungluing definition active onload
var $j = jQuery.noConflict();
$j(document).ready(function() {
var length = $j(".block-intro-text").length;
var ran = Math.floor(Math.random()*length)+1;
$j(".block-intro-text div:nth-child(" + ran + ")").attr('id', 'active');
});
// change the ungluing def onclick
var $j = jQuery.noConflict();
$j(document).delegate(".block-intro-text", "click", function() {
var length = $j(".block-intro-text").length;
// :eq is 1-indexed so there is no minus one after this random number
var ran = Math.floor(Math.random()*length);
// make sure our next active div is not the current one!
$j(this).children("#active").siblings(':eq('+ran+')').attr('id', 'foo');
$j(this).children("#active").removeAttr('id');
$j(this).children("#foo").attr('id', 'active');
});

9
static/less/documentation.less
View File

@ -1,17 +1,12 @@
// Styles basedocumentation.html and its descendants.
@import "variables.less";
@import "learnmore.less";
// Learn More area
/* Learn More area (not already styles by learnmore.less) */
.user-block {
width:100%; clear:both;
}
.user-block-hide {
float: left;
width:100%;
clear:both;
}
.user-block1, .user-block2 {
float:left;
}

37
static/less/landingpage.less
View File

@ -1,4 +1,5 @@
@import "variables.less";
@import "learnmore.less";
.clickyarrows() {
text-indent:-10000px;
@ -48,42 +49,6 @@
clear:both;
}
.user-block-hide {
float: left;
width:100%;
clear:both;
border-top: solid 1px @bright-blue;
margin-top: 20px;
.quicktour {
width: 270px;
float: left;
font-style: italic;
line-height:20px;
font-size:13px;
margin-top: 20px;
.highlight {
font-weight: bold;
}
&.last {
padding-right:0px;
width:270px;
background: url("@{image-base}landingpage/signmeup-arrow.png") no-repeat center bottom;
padding-bottom: 42px;
}
}
.movingrightalong {
background: url("@{image-base}landingpage/quicktour-arrow.png") no-repeat center;
height: 100px;
width: 75px;
float: left;
margin-top: 20px;
}
}
.user-block1, .user-block2 {
float:left;
}

45
static/less/learnmore.less Normal file
View File

@ -0,0 +1,45 @@
@import "variables.less";
.user-block-hide {
float: left;
width:100%;
clear:both;
border-top: solid 1px @bright-blue;
margin-top: 20px;
.quicktour {
width: 270px;
float: left;
font-style: italic;
line-height:20px;
font-size:13px;
margin-top: 20px;
.highlight {
font-weight: bold;
}
&.last {
padding-right:0px;
width:270px;
background: url("@{image-base}landingpage/signmeup-arrow.png") no-repeat center bottom;
padding-bottom: 42px;
}
}
.movingrightalong {
background: url("@{image-base}landingpage/quicktour-arrow.png") no-repeat center;
height: 100px;
width: 75px;
float: left;
margin-top: 20px;
}
}
.block-intro-text div {
display: none;
&#active {
display: inherit;
}
}

1
static/less/sitewide.less
View File

@ -96,6 +96,7 @@ ul.menu{
margin:0;
}
/* Learn More menu */
a.readon {
background:url("@{image-base}learnmore-downarrow.png") right center no-repeat;
color:#fff;