yul/bookwyrm-mastodon
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Directory: Homogenize cards heights

Browse Source 
When the content of a profile card stretches it in height, the grid is not homogenous. This PR adds a CSS class that'll display cards as stretchable columns. The card content will be able to grow, which should always place the card footer at the bottom of the card.
This commit is contained in:
Joachim
2021-04-25 20:05:31 +02:00
parent 2fd8e12b96
commit e92166c7f7
2 changed files with 13 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
bookwyrm/static/css/bookwyrm.css
View File

@ -53,6 +53,16 @@ body {
background-color: transparent;
}
.card.is-stretchable {
display: flex;
flex-direction: column;
height: 100%;
}
.card.is-stretchable .card-content {
flex-grow: 1;
}
/** Shelving
******************************************************************************/

6
bookwyrm/templates/directory/directory.html
View File

@ -41,7 +41,7 @@
<div class="columns is-multiline">
{% for user in users %}
<div class="column is-one-third">
<div class="card block">
<div class="card is-stretchable">
<div class="card-content">
<div class="media">
<a href="{{ user.local_path }}" class="media-left">
@ -56,13 +56,13 @@
</div>
</div>
<div class="content">
<div>
{% if user.summary %}
{{ user.summary | to_markdown | safe | truncatechars_html:40 }}
{% else %}&nbsp;{% endif %}
</div>
</div>
<footer class="card-footer content">
<footer class="card-footer">
{% if user != request.user %}
{% if user.mutuals %}
<div class="card-footer-item">