Flex display to fix columns issue

This commit is contained in:
cbartondock 2020-10-16 13:41:48 -04:00
parent 1d83a6a898
commit 1be07a42df
8 changed files with 18 additions and 9 deletions

View File

@ -107,6 +107,11 @@ a, .danger,.book-remove, .editable-empty, .editable-empty:hover { color: #45b29d
text-decoration: none;
}
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.container-fluid img {
display: block;
max-width: 100%;
@ -116,7 +121,11 @@ a, .danger,.book-remove, .editable-empty, .editable-empty:hover { color: #45b29d
.container-fluid .discover{ margin-bottom: 50px; }
.container-fluid .new-books { border-top: 1px solid #ccc; }
.container-fluid .new-books h2 { margin: 50px 0 0 0; }
.container-fluid .book { margin-top: 20px; }
.container-fluid .book {
margin-top: 20px;
display: flex;
flex-direction: column;
}
.container-fluid .book .cover {
height: 225px;

View File

@ -34,7 +34,7 @@
<div id="all" class="btn btn-primary">{{_('All')}}</div>
</div-->
</div>
<div class="row">
<div class="row display-flex">
{% if entries[0] %}
{% for entry in entries %}
<div id="books" class="col-sm-3 col-lg-2 col-xs-6 book">

View File

@ -2,7 +2,7 @@
{% block body %}
<div class="discover load-more">
<h2>{{title}}</h2>
<div class="row">
<div class="row display-flex">
{% for entry in entries %}
<div class="col-sm-3 col-lg-2 col-xs-6 book">
<div class="cover">

View File

@ -23,7 +23,7 @@
</div>
{% if entries[0] %}
<div id="list" class="row">
<div id="list" class="row display-flex">
{% for entry in entries %}
<div class="col-sm-3 col-lg-2 col-xs-6 book sortable" {% if entry[0].sort %}data-name="{{entry[0].series[0].name}}"{% endif %} data-id="{% if entry[0].series[0].name %}{{entry[0].series[0].name}}{% endif %}">
<div class="cover">

View File

@ -3,7 +3,7 @@
{% if g.user.show_detail_random() %}
<div class="discover random-books">
<h2 class="random-books">{{_('Discover (Random Books)')}}</h2>
<div class="row">
<div class="row display-flex">
{% for entry in random %}
<div class="col-sm-3 col-lg-2 col-xs-6 book" id="books_rand">
<div class="cover">
@ -73,7 +73,7 @@
</div-->
</div>
<div class="row">
<div class="row display-flex">
{% if entries[0] %}
{% for entry in entries %}
<div class="col-sm-3 col-lg-2 col-xs-6 book" id="books">

View File

@ -35,7 +35,7 @@
</div>
{% endif %}
<div class="row">
<div class="row display-flex">
{% for entry in entries %}
<div class="col-sm-3 col-lg-2 col-xs-6 book">
<div class="cover">

View File

@ -12,7 +12,7 @@
<a id="order_shelf" href="{{ url_for('shelf.order_shelf', shelf_id=shelf.id) }}" class="btn btn-primary">{{ _('Change order') }} </a>
{% endif %}
{% endif %}
<div class="row">
<div class="row display-flex">
{% for entry in entries %}
<div class="col-sm-3 col-lg-2 col-xs-6 book">

View File

@ -29,7 +29,7 @@
{% block body %}
<div class="discover">
<h2>{{title}}</h2>
<div class="row">
<div class="row display-flex">
{% for entry in entries %}
<div class="col-sm-3 col-lg-2 col-xs-6 book">