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

Merge pull request #69 from EbookFoundation/foundation/faq 

Responsive Faq page
foundation/signup
Nicholas Antonov 2018-05-01 18:54:10 -04:00 committed by GitHub
parent d78b5bf1b1 f64ee98f6a
commit 7f6c9cf0dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 134 additions and 255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/templates/basedocumentation.html
View File

@ -8,6 +8,7 @@
{% block extra_extra_head %}
<link type="text/css" rel="stylesheet" href="{% sass_src 'scss/landingpage4.scss' %}" />
<link type="text/css" rel="stylesheet" href="{% sass_src 'scss/book_panel2.scss' %}" />
<link type="text/css" rel="stylesheet" href="{% sass_src 'scss/faq.scss' %}" />
<script type="text/javascript" src="/static/js/greenpanel.js"></script>
{% endblock %}
@ -21,29 +22,16 @@
{% endblock %}
{% block content %}
<div id="main-container">
<div class="js-main">
<div id="js-leftcol">
{% include "faqmenu.html" %}
{% block subnav %}{% endblock %}
</div>
<div id="js-maincol-fr" class="have-right doc">
<div class="js-maincol-inner">
<div id="content-block">
<div id="js-main-container">
<div class="js-main-container-inner">
{% block doccontent %}
{% endblock %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="faq-container">
<div class="faq-menu">
{% include "faqmenu.html" %}
{% block subnav %}{% endblock %}
</div>
<div class="faq-main doc">
{% block doccontent %}
{% endblock %}
</div>
</div>
{% endblock %}

8
frontend/templates/faq_b2u.html
View File

@ -16,11 +16,11 @@ Read the ebook now, help to make if available to all in the future. The eBook wa
<dd>The ungluing date is the date a book gets released under a Creative Commons License. After the ungluing date, the ebook will be available for free at unglue.it, Internet Archive and any library, anywhere. You'll be able to make copies for all your friends, if that's what you want to do.</dd>
<dt>How does that work?</dt>
<dd>The rights holder for the book picks
<dd>The rights holder for the book picks
<ol>
<li>an initial ungluing date some time in the future, and </li>
<li>a revenue goal</li>
</ol> When an ebook license is purchased, the ungluing date is recalculated according to these formulae:<pre>
</ol> When an ebook license is purchased, the ungluing date is recalculated according to these formulae:<pre class="long-formula">
(days per dollar) = [(initial ungluing date) - (launch date)] / (campaign goal)
(current ungluing date) = (initial ungluing date) - (gross revenue)*(days per dollar)
@ -35,12 +35,12 @@ Here's a calculator you can use to see how this works:
{{ form.cc_date_initial.errors }}{{ form.cc_date_initial }}</p>
{% else %}
{% endif %}
<p>and a revenue goal of
<p>and a revenue goal of
{{ form.target.errors }}${{ form.target }},</p>
{% if form.instance.dollar_per_day %}
<p>If you launch today, when the Book has earned
<p>If you launch today, when the Book has earned
${{ form.revenue.errors }}{{ form.revenue }}, the new Ungluing Date will be <span class="call-to-action">{{ form.instance.cc_date }}</span> and every additional <span class="call-to-action">${{ form.instance.dollar_per_day|floatformat:2|intcomma }}</span> received will advance the Ungluing Date by one day.</p>
<p><input type="submit" value="Calculate" /> another Ungluing Date</p>

118
frontend/templates/faqmenu.html
View File

@ -1,62 +1,62 @@
<div class="jsmodule">
<h3 class="jsmod-title"><span>FAQs</span></h3>
<div class="jsmod-content">
<ul class="menu level1">
<li class="first parent">
<a href="/faq/"><span>All</span></a>
</li>
<div class="">
<h3 class="jsmod-title"><span>FAQs</span></h3>
<div class="jsmod-content">
<ul class="faq-toplevel-nav vertical menu">
<li class="parent {% if location != 'basics' %}collapse{% endif %}">
<a href="{% url 'faq_location' 'basics' %}"><span>About the site</span></a>
<ul class="menu level2">
<li class="first"><a href="{% url 'faq_sublocation' 'basics' 'howitworks' %}"><span>About Unglue.it</span></a></li>
<li><a href="{% url 'faq_sublocation' 'basics' 'account' %}"><span>Your Account</span></a></li>
<li class="last"><a href="{% url 'faq_sublocation' 'basics' 'company' %}"><span>The Organization</span></a></li>
</ul>
</li>
<li class="parent {% if location != 'unglued_ebooks' %}collapse{% endif %}">
<a href="{% url 'faq_location' 'unglued_ebooks' %}"><span>Unglued Ebooks</span></a>
<ul class="menu level2">
<li class="first"><a href="{% url 'faq_sublocation' 'unglued_ebooks' 'general' %}"><span>General Questions</span></a></li>
<li><a href="{% url 'faq_sublocation' 'unglued_ebooks' 'using' %}"><span>Using Your Unglued Ebook</span></a></li>
<li class="last"><a href="{% url 'faq_sublocation' 'unglued_ebooks' 'copyright' %}"><span>Ungluing and Copyright</span></a></li>
</ul>
</li>
<li class="first parent">
<a href="/faq/"><span>All</span></a>
</li>
<li class="parent {% if location != 'campaigns' %}collapse{% endif %}">
<a href="{% url 'faq_location' 'campaigns' %}"><span>Campaigns</span></a>
<ul class="menu level2">
<li class="first"><a href="{% url 'faq_sublocation' 'campaigns' 't4u' %}"><span>Thanks-for-Ungluing Campaigns</span></a></li>
<li><a href="{% url 'faq_sublocation' 'campaigns' 'b2u' %}"><span>Buy-to-Unglue Campaigns</span></a></li>
<li><a href="{% url 'faq_sublocation' 'campaigns' 'supporting' %}"><span>Pledge Campaigns</span></a></li>
<li class="last"><a href="{% url 'faq_sublocation' 'campaigns' 'premiums' %}"><span>Premiums</span></a></li>
</ul>
</li>
<li class="parent {% if location != 'basics' %}collapse{% endif %}">
<a href="{% url 'faq_location' 'basics' %}"><span>About the site</span></a>
<ul class="nested vertical menu">
<li class="first"><a href="{% url 'faq_sublocation' 'basics' 'howitworks' %}"><span>About Unglue.it</span></a></li>
<li><a href="{% url 'faq_sublocation' 'basics' 'account' %}"><span>Your Account</span></a></li>
<li class="last"><a href="{% url 'faq_sublocation' 'basics' 'company' %}"><span>The Organization</span></a></li>
</ul>
</li>
<li class="parent {% if location != 'rightsholders' and 'smashwords' not in request.path %}collapse{% endif %}">
<a href="{% url 'faq_location' 'rightsholders' %}"><span>For Rights Holders</span></a>
<ul class="menu level2">
<li class="first"><a href="{% url 'faq_sublocation' 'rightsholders' 'authorization' %}"><span>Becoming Authorized</span></a></li>
<li><a href="{% url 'faq_sublocation' 'rightsholders' 'claiming' %}"><span>Claiming Works</span></a></li>
<li><a href="{% url 'faq_sublocation' 'rightsholders' 'campaigns' %}"><span>Running Campaigns</span></a></li>
<li><a href="{% url 'faq_sublocation' 'rightsholders' 'addingmedia' %}"><span>Adding Media</span></a></li>
<li><a href="{% url 'faq_sublocation' 'rightsholders' 'publicity' %}"><span>Publicizing Campaigns</span></a></li>
<li><a href="{% url 'faq_sublocation' 'rightsholders' 'funding' %}"><span>Funding</span></a></li>
<li><a href="{% url 'faq_sublocation' 'rightsholders' 'conversion' %}"><span>Ebook Conversion</span></a></li>
<li><a href="{% url 'faq_sublocation' 'rightsholders' 'rights' %}"><span>Rights</span></a></li>
<li class="last"><a href="{% url 'about_specific' 'smashwords' %}"><span>Smashwords Authors</span></a></li>
</ul>
</li>
<li class="parent">
<a href="{% url 'libraries' %}"><span>For Libraries</span></a>
</li>
<li class="parent">
<a href="{% url 'landing' %}"><span>Start Exploring</span></a>
</li>
</ul>
</div>
</div>
<li class="parent {% if location != 'unglued_ebooks' %}collapse{% endif %}">
<a href="{% url 'faq_location' 'unglued_ebooks' %}"><span>Unglued Ebooks</span></a>
<ul class="nested vertical menu">
<li class="first"><a href="{% url 'faq_sublocation' 'unglued_ebooks' 'general' %}"><span>General Questions</span></a></li>
<li><a href="{% url 'faq_sublocation' 'unglued_ebooks' 'using' %}"><span>Using Your Unglued Ebook</span></a></li>
<li class="last"><a href="{% url 'faq_sublocation' 'unglued_ebooks' 'copyright' %}"><span>Ungluing and Copyright</span></a></li>
</ul>
</li>
<li class="parent {% if location != 'campaigns' %}collapse{% endif %}">
<a href="{% url 'faq_location' 'campaigns' %}"><span>Campaigns</span></a>
<ul class="nested vertical menu">
<li class="first"><a href="{% url 'faq_sublocation' 'campaigns' 't4u' %}"><span>Thanks-for-Ungluing Campaigns</span></a></li>
<li><a href="{% url 'faq_sublocation' 'campaigns' 'b2u' %}"><span>Buy-to-Unglue Campaigns</span></a></li>
<li><a href="{% url 'faq_sublocation' 'campaigns' 'supporting' %}"><span>Pledge Campaigns</span></a></li>
<li class="last"><a href="{% url 'faq_sublocation' 'campaigns' 'premiums' %}"><span>Premiums</span></a></li>
</ul>
</li>
<li class="parent {% if location != 'rightsholders' and 'smashwords' not in request.path %}collapse{% endif %}">
<a href="{% url 'faq_location' 'rightsholders' %}"><span>For Rights Holders</span></a>
<ul class="nested vertical menu">
<li class="first"><a href="{% url 'faq_sublocation' 'rightsholders' 'authorization' %}"><span>Becoming Authorized</span></a></li>
<li><a href="{% url 'faq_sublocation' 'rightsholders' 'claiming' %}"><span>Claiming Works</span></a></li>
<li><a href="{% url 'faq_sublocation' 'rightsholders' 'campaigns' %}"><span>Running Campaigns</span></a></li>
<li><a href="{% url 'faq_sublocation' 'rightsholders' 'addingmedia' %}"><span>Adding Media</span></a></li>
<li><a href="{% url 'faq_sublocation' 'rightsholders' 'publicity' %}"><span>Publicizing Campaigns</span></a></li>
<li><a href="{% url 'faq_sublocation' 'rightsholders' 'funding' %}"><span>Funding</span></a></li>
<li><a href="{% url 'faq_sublocation' 'rightsholders' 'conversion' %}"><span>Ebook Conversion</span></a></li>
<li><a href="{% url 'faq_sublocation' 'rightsholders' 'rights' %}"><span>Rights</span></a></li>
<li class="last"><a href="{% url 'about_specific' 'smashwords' %}"><span>Smashwords Authors</span></a></li>
</ul>
</li>
<li class="parent">
<a href="{% url 'libraries' %}"><span>For Libraries</span></a>
</li>
<li class="parent">
<a href="{% url 'landing' %}"><span>Start Exploring</span></a>
</li>
</ul>
</div>
</div>

54
static/js/sitewide1.js
View File

@ -11,57 +11,6 @@ $j(document).ready(function() {
var isDownload =$j(this).attr("href").indexOf("download");
var vars = $j(this).attr("href").split("next=");
$j("#lightbox").load($j(this).attr("href") + " #lightbox_content", function() {
// centering divs of dynamic width: shockingly hard. make sure lightbox is centered on load.
var hijaxWidth = $j('#about_expandable').width() + 28;
var windowWidth = $j(document).width();
var marginWidth = (windowWidth - hijaxWidth)/2;
$j('#about_expandable').css({'margin-left': marginWidth, 'margin-right': marginWidth});
// position div vertically relative to top of viewport, to ensure visibility
// regardless of where on the page the user clicked to activate it
var marginTop = window.pageYOffset;
$j('#about_expandable').css({'margin-top': marginTop});
if (isDownload !== -1) {
$j.getScript('/static/js/download_page.js');
if(typeof(Dropbox) != "undefined"){
Dropbox._dropinsjs_loaded=false;
}
$j.getScript('https://www.dropbox.com/static/api/2/dropins.js');
$j.cookie('next', work_page, {path: '/'});
}
else {
//need to push next cookie for sign-in links
if (vars.length>1){
next=vars[1];
if(next!='') {
next = next.replace(/[\x22\x27\x3c\x3e]/g,'');
$j.cookie('next', next, {path: '/'});
}
}
}
// fade-out rest of page elements on expand
$j('#feedback, #js-page-wrap, #footer').css({"opacity": "0.07"});
$j('#about_expandable').css({'position': 'absolute'});
$j('#about_expandable').fadeTo("slow", 1);
// if we're on a supporter page, personalize our about box
// by writing the supporter's name in
if ($j(location).attr('pathname').slice(0,11) == '/supporter/') {
var ungluer = $j(location).attr('pathname').slice(11, -1);
if (ungluer != null) {
// span.ungluer doesn't exist until the ajax call so we
// can't bind to the DOM on document ready; need to use
// the ajaxComplete event
$j('#lightbox').ajaxComplete(function() {
$j('#lightbox span.ungluer').replaceWith(ungluer);
});
}
}
});
});
// fade-in normal page elements on collapse
@ -99,8 +48,7 @@ $j(document).ready(function() {
new Foundation.DropdownMenu($j(element), {});
});
$j('[data-accordion]').each(function (index, element) {
// document.querySelectorAll('[data-accordion]').forEach(element => {
document.querySelectorAll('[data-accordion]').forEach(element => {
console.log(element);
new Foundation.Accordion($j(element), {'data-multi-expand': true});
});

4
static/scss/bookview.scss
View File

@ -38,6 +38,10 @@
display: none;
}
.bookRead {
flex: 100%;
}
.bookDownload {
flex: 100%;
}

3
static/scss/documentation2.scss
View File

@ -41,7 +41,6 @@ body {
.doc h2 {
margin:20px 0;
color:$text-blue;
font-size: $font-size-larger;
font-weight: bold;
}
@ -287,4 +286,4 @@ div.pledge-container {
.call-to-action {
color: $call-to-action;
}
}

44
static/scss/faq.scss Normal file
View File

@ -0,0 +1,44 @@
@import 'variables';
@import 'settings';
@import 'foundation';
.faq-container {
display: flex;
flex-direction: column;
margin: 0 auto;
max-width: 1024px;
}
.faq-menu {
min-width: 200px;
}
.faq-main {
padding: 0 25px;
}
.faq-toplevel-nav {
width: fit-content;
margin: 0 auto;
li {
width: fit-content;
}
}
.long-formula {
white-space: pre-wrap;
}
@include breakpoint (medium) {
.faq-container {
flex-direction: row;
}
.faq-toplevel-nav {
& > li > a, & > li > span {
border-bottom:1px solid $pale-blue;
}
}
}

35
static/scss/landingpage4.scss
View File

@ -5,36 +5,6 @@
display: none;
}
#main-container.main-container-fl .js-main {
width:968px;
background:#fff url("#{$image-base}landingpage/container-top.png") top center no-repeat;
}
#js-maincol-fl {
padding:30px 30px 0 30px;
overflow:hidden;
#content-block {
background:none;
padding:0;
}
#js-main-container {
float: left;
width:672px;
}
.js-main-container-inner {
padding-right:40px;
}
h2.page-heading {
margin:0 0 20px 0;
color:$text-blue;
font-size: $font-size-header;
font-weight: bold;
}
}
#user-block1, .user-block2 {
float:left;
}
@ -389,8 +359,3 @@ ul#as_seen_on {
}
}
}
#footer {
clear: both;
margin-top:30px;
}

6
static/scss/libraries.scss
View File

@ -5,12 +5,6 @@
text-align: center;
}
.doc h3 {
text-align: center;
font-style: italic;
margin-bottom: $font-size-larger*2.5;
}
#widgetcode {
display: none;
}

83
static/scss/sitewide4.scss
View File

@ -4,7 +4,16 @@
@import "mixins.scss";
@import "buttons.scss";
@import "bootstrap-social.scss";
@import "font-awesome.min.css";
/* old */
#widgetcode {
display: none;
}
/* endold */
@mixin preview()
{
@ -236,12 +245,6 @@ input[type="submit"], a.fakeinput {
font-size: $font-size-larger;
}
ul.menu{
list-style:none;
padding:0;
margin:0;
}
.errorlist {
@include errors;
}
@ -568,67 +571,6 @@ a#readon {
margin-left:5px;
}
/* Explore column */
#js-leftcol {
float:left;
width:235px;
margin-bottom: 20px;
a {
font-weight:normal;
&:hover{
text-decoration:underline;
}
}
.jsmod-content {
border: solid 1px $pale-blue;
@include border-radius(0, 0, 10px, 10px);
}
ul {
&.level1 > li > a, &.level1 > li > span {
border-bottom:1px solid $pale-blue;
border-top:1px solid $pale-blue;
@include utilityheaders;
padding:10px;
}
&.level2 li {
@include utilitylinks(5px, 20px, $font-size-larger);
img {
vertical-align: middle;
@include one-border-radius(5px);
}
.ungluer-name {
@include height(30px);
}
&.first {
font-size: $font-size-larger;
color:$text-blue;
padding-left:10px;
}
}
&.level3 li {
@include utilitylinks(0px, 20px, $font-size-default);
a img.thumbnail {
margin-right: 2px;
height: 50px;
width: 32px;
}
a span.thumbnail-caption {
font-size: $font-size-small;
display: inline-block;
width: 154px;
overflow-y: scroll;
}
}
}
}
/* Main content area: top */
#js-topsection {
padding:15px 0 0 0;
@ -659,11 +601,6 @@ a#readon {
margin: 15px 0 0 0;
}
#js-maincol-fr {
float:right;
width:725px;
}
div#content-block {
overflow:hidden;
background:url($background-header) 100% -223px no-repeat;