Improve package grid

This commit is contained in:
rubenwardy 2018-12-22 20:39:34 +00:00
parent c551201f79
commit 8eedbf64a4
4 changed files with 23 additions and 27 deletions

@ -1,24 +1,17 @@
.packagegrid {
display: flex;
flex-wrap: wrap;
flex-direction: row;
flex-grow: 1;
flex-shrink: 1;
.packagetile {
list-style: none;
padding: 0;
margin: 0 -7px;
margin: 0 7px 7px 0;
min-width: 250px;
}
.packagegrid li {
flex: 1;
display: block;
min-width: 300px;
min-height: 200px;
max-width: 332px;
li.d-flex {
list-style: none;
padding: 0;
margin: 7px;
margin: 0;
}
.packagegrid a {
.packagetile a {
display: block;
padding-bottom: 66.66%;
border-radius: 7px;
@ -29,10 +22,6 @@
background-position: center;
}
.packagegrid a:hover {
// box-shadow: 0px 0px 16px 6px rgba(0,0,0,0.4);
}
.packagegridscrub {
position: absolute;
top: 50%;
@ -63,15 +52,15 @@
font-weight: normal;
}
.packagegrid a:hover .packagegridinfo {
.packagetile a:hover .packagegridinfo {
top: 0;
}
.packagegrid a:hover p {
.packagetile a:hover p {
display: block;
}
.packagegrid a:hover .packagegridscrub {
.packagetile a:hover .packagegridscrub {
top: 0;
background: rgba(0,0,0,0.8);
}

@ -1,5 +1,5 @@
{% macro render_pkgtile(package, show_author) -%}
<li><a href="{{ package.getDetailsURL() }}"
<li class="packagetile flex-fill"><a href="{{ package.getDetailsURL() }}"
style="background-image: url({{ package.getThumbnailURL() or '/static/placeholder.png' }});">
<div class="packagegridscrub"></div>
<div class="packagegridinfo">
@ -34,11 +34,18 @@
{% endmacro %}
{% macro render_pkggrid(packages, show_author=True) -%}
<ul class="packagegrid">
<ul class="d-flex p-0 flex-row flex-wrap justify-content-start align-content-start ">
{% for p in packages %}
{{ render_pkgtile(p, show_author) }}
{% else %}
<li><i>No packages available</i></ul>
{% endfor %}
{% set amt=packages|length %}
{% if amt > 4 %}
{% set amt=4 %}
{% endif %}
{% for i in range(amt) %}
<li class="packagetile flex-fill"></li>
{% endfor %}
</ul>
{% endmacro %}

@ -48,8 +48,8 @@ def send_upload(path):
def home_page():
query = Package.query.filter_by(approved=True, soft_deleted=False)
count = query.count()
new = query.order_by(db.desc(Package.created_at)).limit(15).all()
popular = query.order_by(db.desc(Package.score)).limit(6).all()
new = query.order_by(db.desc(Package.created_at)).limit(12).all()
popular = query.order_by(db.desc(Package.score)).limit(8).all()
return render_template("index.html", new=new, popular=popular, count=count)
from . import users, githublogin, packages, meta, threads, api

@ -114,7 +114,7 @@ def packages_page():
return redirect("https://forum.minetest.net/viewtopic.php?t=" + str(topic.topic_id))
page = int(request.args.get("page") or 1)
num = min(42, int(request.args.get("n") or 100))
num = min(40, int(request.args.get("n") or 100))
query = query.paginate(page, num, True)
search = request.args.get("q")