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

Fix book layout for mobile

foundation/home
jonahmania 2018-05-01 23:43:05 -04:00
parent 9075d69cbd
commit 076721ac79
2 changed files with 100 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
frontend/templates/home.html
View File

@ -97,74 +97,92 @@ function put_un_in_cookie2(){
<div class="spacer"></div>
<h3 class="featured_books">Your Recent Faves</h3>
<div>
{% for work in faves %}
{% with work.googlebooks_id as googlebooks_id %}
{% include "book_panel.html" %}
{% endwith %}
{% endfor %}
<a class="more_featured_books" href="{% url 'supporter' request.user %}"><i class="fa fa-arrow-circle-o-right fa-3x"></i></a>
<div>
{% for work in faves %}
{% with work.googlebooks_id as googlebooks_id %}
{% include "book_panel.html" %}
{% endwith %}
{% endfor %}
<a class="more_featured_books" href="{% url 'supporter' request.user %}"><i class="fa fa-arrow-circle-o-right fa-3x"></i></a>
</div>
<a class="more_featured_books_mobile button success" href="{% url 'supporter' request.user %}">See More</a>
</div>
{% endif %}
{% if top_pledge %}
<div class="spacer"></div>
<h3 class="featured_books">Pledge to Make These eBooks Free</h3>
<div>
{% for campaign in top_pledge %}
{% with campaign.work as work %}
{% with work.googlebooks_id as googlebooks_id %}
{% include "book_panel.html" %}
{% endwith %}{% endwith %}
{% endfor %}
<a class="more_featured_books" href="{% url 'campaign_list' 'pledge' %}"><i class="fa fa-arrow-circle-o-right fa-3x"></i></a>
<div class="book-list">
<div>
{% for campaign in top_pledge %}
{% with campaign.work as work %}
{% with work.googlebooks_id as googlebooks_id %}
{% include "book_panel.html" %}
{% endwith %}{% endwith %}
{% endfor %}
<a class="more_featured_books" href="{% url 'campaign_list' 'pledge' %}"><i class="fa fa-arrow-circle-o-right fa-3x"></i></a>
</div>
</div>
<a class="more_featured_books_mobile button success" href="{% url 'campaign_list' 'pledge' %}">See More</a>
{% endif %}
<div class="spacer"></div>
<h3 class="featured_books">Read These Free Licensed eBooks</h3>
<div>
{% for work in cc_books %}
{% with work.googlebooks_id as googlebooks_id %}
{% include "book_panel.html" %}
{% endwith %}
{% endfor %}
<a class="more_featured_books" href="{% url 'cc_list' %}"><i class="fa fa-arrow-circle-o-right fa-3x"></i></a>
<div class="book-list">
<div>
{% for work in cc_books %}
{% with work.googlebooks_id as googlebooks_id %}
{% include "book_panel.html" %}
{% endwith %}
{% endfor %}
<a class="more_featured_books" href="{% url 'cc_list' %}"><i class="fa fa-arrow-circle-o-right fa-3x"></i></a>
</div>
<a class="button success more_featured_books_mobile" href="{% url 'cc_list' %}">See More</a>
</div>
<div class="spacer"></div>
{% if top_b2u %}
<h3 class="featured_books">Buy and Read These eBooks to Make Them Free</h3>
<div>
{% for campaign in top_b2u %}
{% with campaign.work as work %}
{% with work.googlebooks_id as googlebooks_id %}
{% include "book_panel.html" %}
{% endwith %}{% endwith %}
{% endfor %}
<a class="more_featured_books" href="{% url 'campaign_list' 'b2u' %}"><i class="fa fa-arrow-circle-o-right fa-3x"></i></a>
<div class="book-list">
<div>
{% for campaign in top_b2u %}
{% with campaign.work as work %}
{% with work.googlebooks_id as googlebooks_id %}
{% include "book_panel.html" %}
{% endwith %}{% endwith %}
{% endfor %}
<a class="more_featured_books" href="{% url 'campaign_list' 'b2u' %}"><i class="fa fa-arrow-circle-o-right fa-3x"></i></a>
</div>
</div>
<a class="more_featured_books_mobile button success" href="{% url 'campaign_list' 'b2u' %}">See More</a>
{% endif %}
<div class="spacer"></div>
{% if top_t4u %}
<h3 class="featured_books">Read These Free eBooks and Thank the Creators</h3>
<div>
{% for campaign in top_t4u %}
{% with campaign.work as work %}
{% with work.googlebooks_id as googlebooks_id %}
{% include "book_panel.html" %}
{% endwith %}{% endwith %}
{% endfor %}
<a class="more_featured_books" href="{% url 'campaign_list' 't4u' %}"><i class="fa fa-arrow-circle-o-right fa-3x"></i></a>
<div class="book-list">
<div>
{% for campaign in top_t4u %}
{% with campaign.work as work %}
{% with work.googlebooks_id as googlebooks_id %}
{% include "book_panel.html" %}
{% endwith %}{% endwith %}
{% endfor %}
<a class="more_featured_books" href="{% url 'campaign_list' 't4u' %}"><i class="fa fa-arrow-circle-o-right fa-3x"></i></a>
</div>
</div>
<a class="more_featured_books_mobile button success" href="{% url 'campaign_list' 't4u' %}">See More</a>
{% endif %}
<div class="spacer"></div>
<h3 class="featured_books">Read These Unglued eBooks - You've Made Them Free</h3>
<div>
{% for work in unglued_books %}
{% with work.googlebooks_id as googlebooks_id %}
{% include "book_panel.html" %}
{% endwith %}
{% endfor %}
<a class="more_featured_books" href="{% url 'campaign_list' 'unglued' %}"><i class="fa fa-arrow-circle-o-right fa-3x"></i></a>
<div class="book-list">
<div>
{% for work in unglued_books %}
{% with work.googlebooks_id as googlebooks_id %}
{% include "book_panel.html" %}
{% endwith %}
{% endfor %}
<a class="more_featured_books" href="{% url 'campaign_list' 'unglued' %}"><i class="fa fa-arrow-circle-o-right fa-3x"></i></a>
</div>
</div>
<a class="more_featured_books_mobile button success" href="{% url 'campaign_list' 'unglued' %}">See More</a>
<div class="spacer"></div>
</div>

44
static/scss/home.scss
View File

@ -6,10 +6,6 @@
margin-left: auto;
margin-right: auto;
max-width: 960px;
div {
box-sizing: content-box;
}
}
#user-block1 {
@ -34,6 +30,21 @@
visibility: hidden;
height: 0px;
}
.book-list > div{
justify-content: center;
}
.more_featured_books {
display:none;
}
.more_featured_books_mobile {
width:100%;
> a {
width: 100%;
}
}
}
@include breakpoint(medium up) {
@ -47,6 +58,21 @@
flex: 1 16%;
}
}
.book-list > div {
}
.more_featured_books {
padding-left:14px;
> i {
margin-top:150px;
font-size: 26px;
}
}
.more_featured_books_mobile{
display: none !important;
}
}
#js-main-container {
@ -107,6 +133,12 @@
}
.thewholebook {
border: none !important;
.book-list > div{
display: flex;
flex-wrap: wrap;
box-sizing: content-box;
}
.thewholebook {
border: none !important;
}