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

switch to always use a row layout

foundation/download
nicholas antonov 2018-04-28 17:46:59 -04:00
parent bf43e17762
commit f222648722
2 changed files with 22 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/templates/download.html
View File

@ -130,14 +130,16 @@
{{ ebook.format }} {% if ebook.version_label %} ({{ ebook.version_label }}) {% endif %} at {{ ebook.provider }} {{ ebook.format }} {% if ebook.version_label %} ({{ ebook.version_label }}) {% endif %} at {{ ebook.provider }}
</span> </span>
</a> </a>
<a href="{% url 'download_ebook' ebook.id %}" class="hide-for-medium"> <a href="{% url 'download_ebook' ebook.id %}" class="download-centered hide-for-medium">
<i class="fa fa-download fa-2x" title="Download {{ebook.format}}"></i> <i class="fa fa-download fa-2x" title="Download {{ebook.format}}"></i>
</a> </a>
{% if ebook.is_direct %} {% if ebook.is_direct %}
<span class="dropbox_download_option" > <span class="dropbox_download_option download-centered" >
<a class="dropbox-saver" href="{{ ebook.download_url }}" data-filename="unglueit-{{ work.id }}.{{ ebook.format }}"></a> <a class="dropbox-saver download-centered" href="{{ ebook.download_url }}" data-filename="unglueit-{{ work.id }}.{{ ebook.format }}"></a>
</span>
<span class="download-centered hide-for-small-only">
<img src="{{ ebook.rights_badge }}" class="" alt="{{ ebook.rights}}" title="{{ ebook.rights}}" />
</span> </span>
<img src="{{ ebook.rights_badge }}" class="hide-for-small-only" alt="{{ ebook.rights}}" title="{{ ebook.rights}}" />
{% endif %} {% endif %}
</div> </div>
{% endfor %} {% endfor %}
@ -241,18 +243,18 @@
<p> <p>
You may already have an app which reads ebooks. Download the <a href="{{ formats.epub }}">epub file</a> and see if you're offered an option for opening the file. If so, you're done! If not... You may already have an app which reads ebooks. Download the <a href="{{ formats.epub }}">epub file</a> and see if you're offered an option for opening the file. If so, you're done! If not...
</p> </p>
<p class="ebook_download logo"><img src="/static/images/ibooks_logo.jpg" alt="iBooks Logo" />iBooks</p> <p class="logo"><img src="/static/images/ibooks_logo.jpg" alt="iBooks Logo" />iBooks</p>
<ul> <ul>
<li><a href="https://itunes.apple.com/us/app/ibooks/id364709193?mt=8">Download the free iBooks app</a> from the App Store.</li> <li><a href="https://itunes.apple.com/us/app/ibooks/id364709193?mt=8">Download the free iBooks app</a> from the App Store.</li>
<li>Download the <a href="{{ formats.epub }}">epub file</a>.</li> <li>Download the <a href="{{ formats.epub }}">epub file</a>.</li>
<li>You will be given the option of opening the file in iBooks.</li> <li>You will be given the option of opening the file in iBooks.</li>
</ul> </ul>
<p class="ebook_download logo"><img src="/static/images/marvin_logo.jpg" alt="Marvin Logo" />Marvin is a great way to read ebooks. </p> <p class="logo"><img src="/static/images/marvin_logo.jpg" alt="Marvin Logo" />Marvin is a great way to read ebooks. </p>
<ul> <ul>
<li><a href="https://itunes.apple.com/us/app/marvin-ebook-reader-for-epub/id667361209?ls=1&mt=8">Install Marvin</a> from the App Store.</li> <li><a href="https://itunes.apple.com/us/app/marvin-ebook-reader-for-epub/id667361209?ls=1&mt=8">Install Marvin</a> from the App Store.</li>
<li>Click the "Load to Marvin" button above.</li> <li>Click the "Load to Marvin" button above.</li>
</ul> </ul>
<p class="ebook_download logo"><img src="/static/images/aldiko_logo.png" alt="Aldiko Logo" />So is Aldiko.</p> <p class="logo"><img src="/static/images/aldiko_logo.png" alt="Aldiko Logo" />So is Aldiko.</p>
<ul> <ul>
<li><a href="http://www.aldiko.com/">Download the free Aldiko app.</a></li> <li><a href="http://www.aldiko.com/">Download the free Aldiko app.</a></li>
@ -264,7 +266,7 @@
<p> <p>
You may already have an app which reads ebooks. Download the <a href="{{ formats.pdf }}">pdf file</a> and see if you're offered an option for opening the file. If so, you're done! If not... You may already have an app which reads ebooks. Download the <a href="{{ formats.pdf }}">pdf file</a> and see if you're offered an option for opening the file. If so, you're done! If not...
</p> </p>
<p class="ebook_download logo"><img src="/static/images/ibooks_logo.jpg" alt="iBooks Logo" />iBooks</p> <p class="logo"><img src="/static/images/ibooks_logo.jpg" alt="iBooks Logo" />iBooks</p>
<ul> <ul>
<li><a href="https://itunes.apple.com/us/app/ibooks/id364709193?mt=8">Download the free iBooks app</a> from the App Store.</li> <li><a href="https://itunes.apple.com/us/app/ibooks/id364709193?mt=8">Download the free iBooks app</a> from the App Store.</li>
<li>Download the <a href="{{ formats.pdf }}">pdf file</a>.</li> <li>Download the <a href="{{ formats.pdf }}">pdf file</a>.</li>
@ -296,7 +298,7 @@
<p> <p>
You may already have an app which reads ebooks. Download the <a href="{{ formats.epub }}">epub file</a> and see if you're offered an option for opening the file. If so, you're done! If not... You may already have an app which reads ebooks. Download the <a href="{{ formats.epub }}">epub file</a> and see if you're offered an option for opening the file. If so, you're done! If not...
</p> </p>
<p class="ebook_download logo"><img src="/static/images/aldiko_logo.png" alt="Aldiko Logo" />Aldiko</p> <p class="logo"><img src="/static/images/aldiko_logo.png" alt="Aldiko Logo" />Aldiko</p>
<ul> <ul>
<li><a href="http://www.aldiko.com/">Download the free Aldiko app.</a></li> <li><a href="http://www.aldiko.com/">Download the free Aldiko app.</a></li>
@ -307,7 +309,7 @@
<p> <p>
You may already have an app which reads ebooks. Download the <a href="{{ formats.pdf }}">pdf file</a> and see if you're offered an option for opening the file. If so, you're done! If not... You may already have an app which reads ebooks. Download the <a href="{{ formats.pdf }}">pdf file</a> and see if you're offered an option for opening the file. If so, you're done! If not...
</p> </p>
<p class="ebook_download logo"><img src="/static/images/aldiko_logo.png" alt="Aldiko Logo" />Aldiko</p> <p class="logo"><img src="/static/images/aldiko_logo.png" alt="Aldiko Logo" />Aldiko</p>
<ul> <ul>
<li><a href="http://www.aldiko.com/">Download the free Aldiko app.</a></li> <li><a href="http://www.aldiko.com/">Download the free Aldiko app.</a></li>
@ -342,13 +344,13 @@
</p> </p>
{% elif formats.epub %} {% elif formats.epub %}
{% if mac_ibooks %} {% if mac_ibooks %}
<p class="ebook_download logo"><img src="/static/images/ibooks_logo.jpg" alt="iBooks Logo" />iBooks</p> <p class="logo"><img src="/static/images/ibooks_logo.jpg" alt="iBooks Logo" />iBooks</p>
<ul> <ul>
<li>The iBooks app is pre-installed with your system software.</li> <li>The iBooks app is pre-installed with your system software.</li>
<li>Download the <a href="{{ formats.epub }}">epub file</a>. You should be offered the choice to open it in iBooks</li> <li>Download the <a href="{{ formats.epub }}">epub file</a>. You should be offered the choice to open it in iBooks</li>
</ul> </ul>
{% endif %} {% endif %}
<p class="ebook_download logo"><img src="/static/images/calibre_logo.png" alt="Calibre Logo" />Calibre</p> <p class="logo"><img src="/static/images/calibre_logo.png" alt="Calibre Logo" />Calibre</p>
<ul> <ul>
<li><a href="http://calibre-ebook.com/download">Download the free Calibre app.</a></li> <li><a href="http://calibre-ebook.com/download">Download the free Calibre app.</a></li>
<li>Download the <a href="{{ formats.epub }}">epub file</a>.</li> <li>Download the <a href="{{ formats.epub }}">epub file</a>.</li>
@ -356,7 +358,7 @@
<li>You can <a href="http://blog.marvinapp.com/post/53438723356">use a Calibre plugin</a> to manage files on reader apps. <li>You can <a href="http://blog.marvinapp.com/post/53438723356">use a Calibre plugin</a> to manage files on reader apps.
</ul> </ul>
{% elif formats.mobi %} {% elif formats.mobi %}
<p class="ebook_download logo"><img src="/static/images/calibre_logo.png" alt="Calibre Logo" />Calibre</p> <p class="logo"><img src="/static/images/calibre_logo.png" alt="Calibre Logo" />Calibre</p>
<ul> <ul>
<li><a href="http://calibre-ebook.com/download">Download the free Calibre app.</a></li> <li><a href="http://calibre-ebook.com/download">Download the free Calibre app.</a></li>
<li>Download the <a href="{{ formats.mobi }}">mobi file</a>.</li> <li>Download the <a href="{{ formats.mobi }}">mobi file</a>.</li>

32
static/scss/download.scss
View File

@ -106,12 +106,13 @@
min-width: 122px; min-width: 122px;
} }
@include breakpoint (small down) { .download_option > * {
.download_option > * { flex: 1;
flex: 1 1 0; }
display: flex;
justify-content: center; .download-centered {
} display: flex;
justify-content: center;
} }
@include breakpoint (medium) { @include breakpoint (medium) {
@ -132,25 +133,6 @@
} }
.ebook_download {
flex-direction: row;
flex-wrap: wrap;
}
.download_option.flexible {
flex: 1 0 40%;
flex-direction: column;
& > * {
margin: 0px;
padding: 6px 0px;
}
i {
padding: 10px;
}
}
.download-label { .download-label {
display: flex; display: flex;
flex-direction: row; flex-direction: row;