rewiring to remove buttons

pull/1/head
Andromeda Yelton 2013-06-12 14:05:30 -04:00
parent e21b002b6a
commit 0819c77312
5 changed files with 75 additions and 77 deletions

View File

@ -74,52 +74,19 @@ $j(document).ready(function() {
{% if unglued_ebooks or other_ebooks %}
<div class="border">
<h3>Need instructions?</h3>
<div class="buttons clearfix">
<div class="btn_support">
<a id="trythis" class="active">Try this first</a>
</div>
{% if readmill_epub_url %}
<div class="btn_support modify">
<a id="readmill">Readmill</a>
</div>
{% endif %}
{% if kindle_ebook_id %}
<div class="btn_support modify">
<a id="kindle" class="{{ kindle_ebook_id }}{% if request.user.is_authenticated and request.user.profile.kindle_email %} authenticated{% endif %}">Send to Kindle</a>
</div>
{% endif %}
<div class="btn_support modify">
<a id="ios">iPhone/iPad</a>
</div>
<div class="btn_support modify">
<a id="android">Android</a>
</div>
<div class="btn_support modify">
<a id="desktop">Desktop (PC, Mac, Linux)</a>
</div>
<div class="btn_support modify">
<a id="ereader">Ereader</a>
</div>
</div>
<div class="instructions">
<div id="trythis_div">
<h4>Try this first</h4>
<p>You may already have an app which reads ebooks (most likely epub or pdf). If so, downloading it on your phone or tablet, or downloading and opening it on your desktop, will give you the option of reading it in that app. You're done!</p>
<div id="iOS_app_div"{% if iOS_app %} class="active"{% endif %}>
<p>
Looks like you're using an embedded browser in an iOS app (maybe you followed a link in Twitter or Facebook?).
</p>
<p>
Embedded browsers don't always know how to handle ebooks. We recommend downloading the epub file using Safari.
</p>
</div>
{% if readmill_epub_url %}
<div id="readmill_div">
<h4>Readmill users</h4>
<p>
If you're a <a href="http://readmill.com/">Readmill</a> member, you can send unglued ebooks to your iPad with one click. Here you go:
</p>
<div class="send-to-readmill" data-download-url="{{ readmill_epub_url }}" data-buy-url="{{ base_url }}{% url work work.id %}" data-display="small"></div>
<p>
If you're not, Readmill is a reading app designed for beauty, sharing, and conversation. You can <a href="https://readmill.com/">learn more and get Readmill here</a>.
</p>
<div id="android_div">
</div>
{% endif %}
{% if kindle_ebook_id %}
<div id="kindle_div">
<h4>Send to Kindle</h4>
@ -139,9 +106,14 @@ $j(document).ready(function() {
<p>If your Kindle email has changed, you can <a href="{% url kindle_config %}">add the new one to Unglue.it here</a>.</p>
</div>
{% else %}
<p>
Make sure you've added kindle@gluejar.com to your approved personal document list under Personal Document Settings at your <a href="http://amazon.com/myk" target="_blank">Amazon Manage Your Kindle page</a>. Then, enter your Kindle address below.
</p>
<ul>
<li>
Add kindle@gluejar.com to your approved personal document list under Personal Document Settings at your <a href="http://amazon.com/myk" target="_blank">Amazon Manage Your Kindle page</a>.
</li>
<li>
Then, enter your Kindle address below.
</li>
</ul>
<div class="yes_js">
<form method="POST" action="{% url send_to_kindle kindle_ebook_id 1 %}">
<label for="kindle_email">Your Kindle email address</label>
@ -165,40 +137,57 @@ $j(document).ready(function() {
{% endif %}
</div>
{% endif %}
<div id="ios_div">
<div id="ios_div"{% if iOS %}{% if not iOS_app %} class="active"{% endif %}{% endif %}>
<h4>iOS devices</h4>
<p>
You may already have an app which reads ebooks. Download the epub or pdf and see if you're offered an option for opening the file. If so, you're done! If not...
</p>
<p class="ebook_download logo"><img src="/static/images/ibooks_logo.jpeg" alt="iBooks Logo" />iBooks</p>
{% comment %}test{% endcomment %}
<ul>
<li><a href="http://itunes.apple.com/us/app/ibooks/id364709193?mt=8">Download the free iBooks app</a> from the App Store.</li>
<li>Download your book (epub or pdf format) from this page using your device's web browser.</li>
<li>Download your book (epub or pdf format)</li>
<li>You will be given the option of opening the file in iBooks.</li>
</ul>
<p>
Not on iOS? Try the instructions for <a href="#" id="android">Android</a>, <a href="#" id="desktop">desktop computers</a>, or <a href="#" id="ereader">ereaders (Kindle, Nook, Kobo, etc.)</a>.
</p>
</div>
<div id="android_div">
<div id="android_div"{% if android %}class="active"{% endif %}>
<h4>Android devices</h4>
<p>
You may already have an app which reads ebooks. Download the epub or pdf and see if you're offered an option for opening the file. If so, you're done! If not...
</p>
<p class="ebook_download logo"><img src="/static/images/aldiko_logo.png" alt="Aldiko Logo" />Aldiko</p>
<ul>
<li><a href="http://www.aldiko.com/download.html">Download the free Aldiko app.</a></li>
<li>Download your book (epub or pdf format) from this page using your device's web browser.</li>
<li>Download your book (epub or pdf format).</li>
<li>When the download is complete, tap it in your notifications menu. It will be added to Aldiko, ready to read next time you open the app.</li>
</ul>
<p>
Not on Android? Try the instructions for <a href="#" id="ios">iPhone/iPad</a>, <a href="#" id="desktop">desktop computers</a>, or <a href="#" id="ereader">ereaders (Kindle, Nook, Kobo, etc.)</a>.
</p>
</div>
<div id="desktop_div">
<div id="desktop_div"{% if desktop %}class="active"{% endif %}>
<h4>PC, Mac, or Linux</h4>
<p>
You may already have an app which reads ebooks. Download the pdf and see if you're offered an option for opening the file. If so, you're done! If not...
</p>
<p class="ebook_download logo"><img src="/static/images/calibre_logo.png" alt="Calibre Logo" />Calibre</p>
<ul>
<li><a href="http://calibre-ebook.com/download">Download the free Calibre app.</a></li>
<li>Download your book (any format) from this page using your device's web browser.</li>
<li>Download your book (any format).</li>
<li>Open the ebook file in Calibre.</li>
</ul>
<p>
Not on a desktop computer? Try the instructions for <a href="#" id="ios">iPhone/iPad</a>, <a href="#" id="android">Android</a>, or <a href="#" id="ereader">ereaders (Kindle, Nook, Kobo, etc.)</a>.
</p>
</div>
<div id="ereader_div">
<h4>Ereaders</h4>
<div id="ereader_div"{% if desktop %}class="active"{% endif %}>
<h4>Ereaders (Kindle, Nook, Kobo, etc.)</h4>
<ul>
<li><b>Kindle</b>: download the mobi or pdf format ebook to a laptop or desktop computer. <b>All other ereaders</b>: download the epub or pdf format ebook to a laptop or desktop computer.</li>
@ -207,9 +196,29 @@ $j(document).ready(function() {
<li>Eject your device from the Finder or Explorer and disconnect the USB.</li>
<li>You may need to reboot your device to see the new book.</li>
</ul>
<p>
Not using an ereader? Try the instructions for <a href="#" id="ios">iPhone/iPad</a>, <a href="#" id="android">Android</a>, or <a href="#" id="desktop">desktop computers</a>.
</p>
</div>
</div>
{% comment %}
will need to deal with readmill handling later
{% if readmill_epub_url %}
<div id="readmill_div">
<h4>Readmill users</h4>
<p>
If you're a <a href="http://readmill.com/">Readmill</a> member, you can send unglued ebooks to your iPad with one click. Here you go:
</p>
<div class="send-to-readmill" data-download-url="{{ readmill_epub_url }}" data-buy-url="{{ base_url }}{% url work work.id %}" data-display="small"></div>
<p>
If you're not, Readmill is a reading app designed for beauty, sharing, and conversation. You can <a href="https://readmill.com/">learn more and get Readmill here</a>.
</p>
</div>
{% endif %}
{% endcomment %}
{% comment %}
If we're going to be providing mobi as the norm, let's not bother with these instructions.
<div class="instructions">

View File

@ -26,5 +26,6 @@ $j(document).on('click', '#kindle.authenticated', function() {
kindle_ebook_id = classes[0];
$j.post('/send_to_kindle/' + kindle_ebook_id + '/1/', function(data) {
$j('#kindle_div').html(data);
return false;
});
});

View File

@ -2,7 +2,7 @@
display: inherit;
}
.instructions > div:not(#trythis_div), .instructions h4 {
.instructions > div:not(.active), .instructions h4 {
display: none;
}

View File

@ -15,6 +15,6 @@
}
/* the not selector doesn't work in IE <= 8 */
#trythis_div {
.active {
display: inherit;
}

View File

@ -902,23 +902,6 @@ li.checked {
}
/* download page */
.buttons {
display: none;
border-bottom: solid 2px @blue-grey;
margin-bottom: 10px;
.btn_support {
float: left;
width: auto;
a {
width: auto;
padding: 14.25px;
font-size: @font-size-larger;
}
}
}
.instructions {
h4 {
border-top: solid @blue-grey 1px;
@ -927,10 +910,15 @@ li.checked {
}
> div {
padding-left: 2em;
padding-right: 2em;
padding-left: 1%;
padding-right: 1%;
font-size: @font-size-larger;
line-height: @font-size-larger*1.5;
width: 98%;
&.active {
float: left;
}
}
}