Skip to content

Commit 59b810d

Browse files
ItsiWItsiW
committed
Add pagination to unweildy pages
1 parent b78cd81 commit 59b810d

File tree

4 files changed

+173
-26
lines changed

4 files changed

+173
-26
lines changed

‎html/best.html‎

Lines changed: 57 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,28 @@
11
{% extends "base.html" %}
22

33
{% block extra_head %}
4+
<style>
5+
.content .subtitle {
6+
color: #4b4b4b;
7+
}
8+
#load-more {
9+
margin: 2rem auto;
10+
display: block;
11+
padding: 1rem 2rem;
12+
background: #750395;
13+
color: white;
14+
border: none;
15+
border-radius: 5px;
16+
font-size: 1.1em;
17+
cursor: pointer;
18+
}
19+
#load-more:hover {
20+
background: #8a0aab;
21+
}
22+
#remaining-restaurants {
23+
display: none;
24+
}
25+
</style>
426
<script type="application/ld+json">
527
{
628
"@context": "https://schema.org",
@@ -50,11 +72,40 @@
5072
{% block content %}
5173
<section class="content">
5274
<h1 class="page-header">The Official V.I.L.F List</h1>
53-
{% for place in places %}
54-
<h2 class="name first-element"><a href="{{ place["url"] }}">{{ place["name"] }}</a></h2>
55-
<p class="list-info address">{{ place["address"] }}, {{ place["area"] }}</p>
56-
<p class="list-info"><b style="color: {{ place["taste_color"] }}">{{ place["taste_label"] }}</b> taste. <b style="color: {{ place["value_color"] }}">{{ place["value_label"] }}</b> value.</p>
57-
<p class="list-info cuisine"><a href="/cuisines/{{ place["cuisine"].lower().replace(' ','-') }}/">{{ place["cuisine"] }} food</a></p>
58-
{% endfor %}
75+
<p class="subtitle">The best {{ places|length }} spots for vegan food in the San Francisco Bay Area</p>
76+
<div id="restaurant-list">
77+
{% for place in places[:20] %}
78+
<div class="restaurant-item">
79+
<h2 class="name first-element"><a href="{{ place["url"] }}">{{ place["name"] }}</a></h2>
80+
<p class="list-info address">{{ place["address"] }}, {{ place["area"] }}</p>
81+
<p class="list-info"><b style="color: {{ place["taste_color"] }}">{{ place["taste_label"] }}</b> taste. <b style="color: {{ place["value_color"] }}">{{ place["value_label"] }}</b> value.</p>
82+
<p class="list-info cuisine"><a href="/cuisines/{{ place["cuisine"].lower().replace(' ','-') }}/">{{ place["cuisine"] }} food</a></p>
83+
</div>
84+
{% endfor %}
85+
</div>
86+
87+
{% if places|length > 20 %}
88+
<button id="load-more" onclick="loadMoreRestaurants()">
89+
Show More Restaurants ({{ places|length - 20 }} remaining)
90+
</button>
91+
92+
<div id="remaining-restaurants">
93+
{% for place in places[20:] %}
94+
<div class="restaurant-item">
95+
<h2 class="name first-element"><a href="{{ place["url"] }}">{{ place["name"] }}</a></h2>
96+
<p class="list-info address">{{ place["address"] }}, {{ place["area"] }}</p>
97+
<p class="list-info"><b style="color: {{ place["taste_color"] }}">{{ place["taste_label"] }}</b> taste. <b style="color: {{ place["value_color"] }}">{{ place["value_label"] }}</b> value.</p>
98+
<p class="list-info cuisine"><a href="/cuisines/{{ place["cuisine"].lower().replace(' ','-') }}/">{{ place["cuisine"] }} food</a></p>
99+
</div>
100+
{% endfor %}
101+
</div>
102+
103+
<script>
104+
function loadMoreRestaurants() {
105+
document.getElementById('remaining-restaurants').style.display = 'block';
106+
document.getElementById('load-more').style.display = 'none';
107+
}
108+
</script>
109+
{% endif %}
59110
</section>
60111
{% endblock %}

‎html/latest.html‎

Lines changed: 57 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,25 @@
11
{% extends "base.html" %}
22

33
{% block extra_head %}
4+
<style>
5+
#load-more {
6+
margin: 2rem auto;
7+
display: block;
8+
padding: 1rem 2rem;
9+
background: #750395;
10+
color: white;
11+
border: none;
12+
border-radius: 5px;
13+
font-size: 1.1em;
14+
cursor: pointer;
15+
}
16+
#load-more:hover {
17+
background: #8a0aab;
18+
}
19+
#remaining-restaurants {
20+
display: none;
21+
}
22+
</style>
423
<script type="application/ld+json">
524
{
625
"@context": "https://schema.org",
@@ -58,13 +77,43 @@
5877
{% block content %}
5978
<section class="content">
6079
<h1 class="page-header">Latest Reviews</h1>
61-
{% for place in places %}
62-
<p class="list-info small-date first-element">{{ place["visited_display"] }}</p>
63-
<h2 class="name"><a href="{{ place["url"] }}">{{ place["name"] }}</a></h2>
64-
<p class="list-info address">{{ place["address"] }}, {{ place["area"] }}</p>
65-
<p class="list-info"><b style="color: {{ place["taste_color"] }}">{{ place["taste_label"] }}</b> taste. <b style="color: {{ place["value_color"] }}">{{ place["value_label"] }}</b> value.</p>
66-
<p class="list-info cuisine"><a href="/cuisines/{{ place["cuisine"].lower().replace(' ','-') }}/">{{ place["cuisine"] }} food</a></p>
67-
<p class="blurb">{{ place["blurb"] }}</p>
68-
{% endfor %}
80+
<div id="restaurant-list">
81+
{% for place in places[:20] %}
82+
<div class="restaurant-item">
83+
<p class="list-info small-date first-element">{{ place["visited_display"] }}</p>
84+
<h2 class="name"><a href="{{ place["url"] }}">{{ place["name"] }}</a></h2>
85+
<p class="list-info address">{{ place["address"] }}, {{ place["area"] }}</p>
86+
<p class="list-info"><b style="color: {{ place["taste_color"] }}">{{ place["taste_label"] }}</b> taste. <b style="color: {{ place["value_color"] }}">{{ place["value_label"] }}</b> value.</p>
87+
<p class="list-info cuisine"><a href="/cuisines/{{ place["cuisine"].lower().replace(' ','-') }}/">{{ place["cuisine"] }} food</a></p>
88+
<p class="blurb">{{ place["blurb"] }}</p>
89+
</div>
90+
{% endfor %}
91+
</div>
92+
93+
{% if places|length > 20 %}
94+
<button id="load-more" onclick="loadMoreRestaurants()">
95+
Show More Reviews ({{ places|length - 20 }} remaining)
96+
</button>
97+
98+
<div id="remaining-restaurants">
99+
{% for place in places[20:] %}
100+
<div class="restaurant-item">
101+
<p class="list-info small-date first-element">{{ place["visited_display"] }}</p>
102+
<h2 class="name"><a href="{{ place["url"] }}">{{ place["name"] }}</a></h2>
103+
<p class="list-info address">{{ place["address"] }}, {{ place["area"] }}</p>
104+
<p class="list-info"><b style="color: {{ place["taste_color"] }}">{{ place["taste_label"] }}</b> taste. <b style="color: {{ place["value_color"] }}">{{ place["value_label"] }}</b> value.</p>
105+
<p class="list-info cuisine"><a href="/cuisines/{{ place["cuisine"].lower().replace(' ','-') }}/">{{ place["cuisine"] }} food</a></p>
106+
<p class="blurb">{{ place["blurb"] }}</p>
107+
</div>
108+
{% endfor %}
109+
</div>
110+
111+
<script>
112+
function loadMoreRestaurants() {
113+
document.getElementById('remaining-restaurants').style.display = 'block';
114+
document.getElementById('load-more').style.display = 'none';
115+
}
116+
</script>
117+
{% endif %}
69118
</section>
70119
{% endblock %}

‎html/neighborhood.html‎

Lines changed: 53 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,25 @@
11
{% extends "base.html" %}
22

33
{% block extra_head %}
4+
<style>
5+
#load-more {
6+
margin: 2rem auto;
7+
display: block;
8+
padding: 1rem 2rem;
9+
background: #750395;
10+
color: white;
11+
border: none;
12+
border-radius: 5px;
13+
font-size: 1.1em;
14+
cursor: pointer;
15+
}
16+
#load-more:hover {
17+
background: #8a0aab;
18+
}
19+
#remaining-restaurants {
20+
display: none;
21+
}
22+
</style>
423
<script type="application/ld+json">
524
{
625
"@context": "https://schema.org",
@@ -73,11 +92,39 @@
7392
<section class="content">
7493
<h1>{% if places|length == 1 %}Best restaurant{% else %}Best {{ places|length }} restaurants{% endif %} with vegan food in {{ neighborhood }}</h1>
7594

76-
{% for place in places %}
77-
<h2 class="name first-element"><a href="{{ place.url }}">{{ place.name }}</a></h2>
78-
<p class="list-info address">{{ place.address }}, {{ place.area }}</p>
79-
<p class="list-info"><a href="/cuisines/{{ place.cuisine.lower().replace(' ','-') }}/">{{ place.cuisine }} food</a></p>
80-
<p class="list-info"><b style="color: {{ place.taste_color }}">{{ place.taste_label }}</b> taste. <b style="color: {{ place.value_color }}">{{ place.value_label }}</b> value.</p>
81-
{% endfor %}
95+
<div id="restaurant-list">
96+
{% for place in places[:20] %}
97+
<div class="restaurant-item">
98+
<h2 class="name first-element"><a href="{{ place.url }}">{{ place.name }}</a></h2>
99+
<p class="list-info address">{{ place.address }}, {{ place.area }}</p>
100+
<p class="list-info"><a href="/cuisines/{{ place.cuisine.lower().replace(' ','-') }}/">{{ place.cuisine }} food</a></p>
101+
<p class="list-info"><b style="color: {{ place.taste_color }}">{{ place.taste_label }}</b> taste. <b style="color: {{ place.value_color }}">{{ place.value_label }}</b> value.</p>
102+
</div>
103+
{% endfor %}
104+
</div>
105+
106+
{% if places|length > 20 %}
107+
<button id="load-more" onclick="loadMoreRestaurants()">
108+
Show More Restaurants ({{ places|length - 20 }} remaining)
109+
</button>
110+
111+
<div id="remaining-restaurants">
112+
{% for place in places[20:] %}
113+
<div class="restaurant-item">
114+
<h2 class="name first-element"><a href="{{ place.url }}">{{ place.name }}</a></h2>
115+
<p class="list-info address">{{ place.address }}, {{ place.area }}</p>
116+
<p class="list-info"><a href="/cuisines/{{ place.cuisine.lower().replace(' ','-') }}/">{{ place.cuisine }} food</a></p>
117+
<p class="list-info"><b style="color: {{ place.taste_color }}">{{ place.taste_label }}</b> taste. <b style="color: {{ place.value_color }}">{{ place.value_label }}</b> value.</p>
118+
</div>
119+
{% endfor %}
120+
</div>
121+
122+
<script>
123+
function loadMoreRestaurants() {
124+
document.getElementById('remaining-restaurants').style.display = 'block';
125+
document.getElementById('load-more').style.display = 'none';
126+
}
127+
</script>
128+
{% endif %}
82129
</section>
83130
{% endblock %}

‎scripts/build.py‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -359,16 +359,16 @@ def get_fp_food_thumb(slug):
359359
best_dir = build_dir / "best"
360360
best_dir.mkdir(exist_ok=True, parents=True)
361361
with open(best_dir / "index.html", "w") as o:
362+
sorted_places = sorted(
363+
places,
364+
key=lambda item: (-item["taste"], -item["value"], item["slug"]),
365+
)
362366
o.write(
363367
env.get_template("best.html").render(
364368
title="Vegans In Love with Food",
365-
description="Find tasty vegan food around the San Francisco Bay Area with V.I.L.F!",
369+
description=f"The best {len(sorted_places)} restaurants for vegan food in the San Francisco Bay Area with V.I.L.F!",
366370
url="/best/",
367-
# sort by taste desc, then value desc, then alphabetical by name
368-
places=sorted(
369-
places,
370-
key=lambda item: (-item["taste"], -item["value"], item["slug"]),
371-
),
371+
places=sorted_places,
372372
)
373373
)
374374
sitemap.insert(

0 commit comments

Comments
 (0)