More responsive download layout changes
parent
7150ae812a
commit
2b2355e6b6
|
@ -38,7 +38,7 @@
|
||||||
{{ work.last_campaign.description|safe }}
|
{{ work.last_campaign.description|safe }}
|
||||||
<div class="clearfix"></div>
|
<div class="clearfix"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="askblock">
|
<div id="askblock" class="card">
|
||||||
<div>Say thank you for making <a href="{% url 'work' work.id %}">{{ work.title }}</a> free.</div>
|
<div>Say thank you for making <a href="{% url 'work' work.id %}">{{ work.title }}</a> free.</div>
|
||||||
<form class="askform" method="POST" action="{% url 'thank' work.id %}#">
|
<form class="askform" method="POST" action="{% url 'thank' work.id %}#">
|
||||||
{% csrf_token %}
|
{% csrf_token %}
|
||||||
|
@ -120,7 +120,7 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<div class="ebook_download">
|
<div class="ebook_download">
|
||||||
{% for ebook in other_ebooks %}
|
{% for ebook in other_ebooks %}
|
||||||
<div class="download_option">
|
<div class="download_option flexible card">
|
||||||
<span class="ebook_format_label h4">{{ebook.format}}: </span>
|
<span class="ebook_format_label h4">{{ebook.format}}: </span>
|
||||||
<a href="{% url 'download_ebook' ebook.id %}">
|
<a href="{% url 'download_ebook' ebook.id %}">
|
||||||
<i class="fa fa-download fa-2x" title="Download {{ebook.format}}"></i>
|
<i class="fa fa-download fa-2x" title="Download {{ebook.format}}"></i>
|
||||||
|
@ -149,7 +149,7 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% else %}
|
{% else %}
|
||||||
<div class="border">
|
<div class="card">
|
||||||
<p id="content-block">There are no freely available downloads of <I>{{ work.title }}</I> right now. {% if not work in request.user.wishlist.works.all %}Would you like there to be? <a class="add-wishlist"><span class="work_id" id="w{{ work.id }}">Add this book to your wishlist.</span></a>{% else %}Ask your friends to add it to their favorites!{% endif %}</p>
|
<p id="content-block">There are no freely available downloads of <I>{{ work.title }}</I> right now. {% if not work in request.user.wishlist.works.all %}Would you like there to be? <a class="add-wishlist"><span class="work_id" id="w{{ work.id }}">Add this book to your wishlist.</span></a>{% else %}Ask your friends to add it to their favorites!{% endif %}</p>
|
||||||
|
|
||||||
<p>If you know of a Creative-Commons-licensed or US public domain edition of this book, you can add it through the <a href="{% url 'work' work.id %}?tab=4">More... tab of the book page</a>.</p>
|
<p>If you know of a Creative-Commons-licensed or US public domain edition of this book, you can add it through the <a href="{% url 'work' work.id %}?tab=4">More... tab of the book page</a>.</p>
|
||||||
|
@ -416,11 +416,7 @@
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="border">
|
<div class="download_footer card">
|
||||||
<div class="instructions">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<br />
|
|
||||||
<h4>Need more help?</h4>
|
<h4>Need more help?</h4>
|
||||||
<p><a href="{% url 'feedback' %}?page={{request.build_absolute_uri|urlencode:""}}">Ask us a question!</a></p>
|
<p><a href="{% url 'feedback' %}?page={{request.build_absolute_uri|urlencode:""}}">Ask us a question!</a></p>
|
||||||
|
|
||||||
|
|
|
@ -3,11 +3,6 @@
|
||||||
@import 'settings';
|
@import 'settings';
|
||||||
@import 'foundation';
|
@import 'foundation';
|
||||||
|
|
||||||
.download_container {
|
|
||||||
width: 75%;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#lightbox_content a {
|
#lightbox_content a {
|
||||||
color: $medium-blue;
|
color: $medium-blue;
|
||||||
}
|
}
|
||||||
|
@ -137,9 +132,11 @@
|
||||||
|
|
||||||
//
|
//
|
||||||
|
|
||||||
.download_option {
|
.download_option.flexible {
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
@ -168,15 +165,45 @@
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.download_footer {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download_container {
|
||||||
|
margin: 0px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
@supports (grid-template-rows: auto) {
|
@supports (grid-template-rows: auto) {
|
||||||
@include breakpoint (medium) {
|
@include breakpoint (medium) {
|
||||||
.ebook_download {
|
.download_container {
|
||||||
flex-direction: row;
|
width: 75%;
|
||||||
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.download_option {
|
#download_content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.rh_ask, #askblock {
|
||||||
|
padding: 15px;
|
||||||
|
flex: 1 0 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.ebook_download {
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download_option.flexible {
|
||||||
flex: 1 0 40%;
|
flex: 1 0 40%;
|
||||||
|
flex-direction: column;;
|
||||||
|
|
||||||
|
i {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue