Improve package grid

app/scss/packagegrid.scss

@@ -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);
 }

app/templates/macros/packagegridtile.html

@@ -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 %}

app/views/__init__.py

@@ -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

app/views/packages/__init__.py

@@ -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")