Skip to content

Commit 7dd1c90

Browse files
faisalthaheemfaisalthaheem
committed
feat(ui): add simplified mobile pagination
Implements responsive pagination for mobile devices. Uses horizontal scrolling with custom scrollbar styling for page numbers and hides desktop pagination on screens narrower than 769px.
1 parent b40fca3 commit 7dd1c90

File tree

3 files changed

+214
-23
lines changed

3 files changed

+214
-23
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,3 +135,6 @@ model_files_cache/
135135

136136
# Metrics
137137
container-metrics/
138+
139+
#ai generated plans
140+
plans/*

‎templates/base.html‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -506,6 +506,126 @@
506506
[data-theme="dark"] .bg-light.rounded {
507507
background-color: var(--bg-tertiary) !important;
508508
}
509+
510+
/* Simplified Mobile Pagination */
511+
.pagination-container {
512+
display: flex;
513+
align-items: center;
514+
gap: 8px;
515+
overflow-x: auto;
516+
overflow-y: hidden;
517+
-webkit-overflow-scrolling: touch;
518+
padding: 8px 0;
519+
scrollbar-width: thin;
520+
scrollbar-color: var(--border-color) var(--bg-secondary);
521+
justify-content: center;
522+
}
523+
524+
.pagination-container::-webkit-scrollbar {
525+
height: 6px;
526+
}
527+
528+
.pagination-container::-webkit-scrollbar-track {
529+
background: var(--bg-secondary);
530+
border-radius: 3px;
531+
}
532+
533+
.pagination-container::-webkit-scrollbar-thumb {
534+
background: var(--border-color);
535+
border-radius: 3px;
536+
}
537+
538+
.pagination-container::-webkit-scrollbar-thumb:hover {
539+
background: var(--text-secondary);
540+
}
541+
542+
.pagination-numbers {
543+
display: flex;
544+
gap: 4px;
545+
flex-wrap: nowrap;
546+
}
547+
548+
.pagination-number {
549+
min-width: 44px;
550+
height: 44px;
551+
display: flex;
552+
align-items: center;
553+
justify-content: center;
554+
padding: 0 12px;
555+
border: 1px solid var(--border-color);
556+
border-radius: 8px;
557+
background: var(--card-bg);
558+
color: var(--text-primary);
559+
text-decoration: none;
560+
font-size: 0.9rem;
561+
font-weight: 500;
562+
transition: all 0.2s ease;
563+
}
564+
565+
.pagination-number:hover {
566+
background: var(--bg-tertiary);
567+
border-color: var(--header-gradient-start);
568+
color: var(--text-primary);
569+
}
570+
571+
.pagination-number.active {
572+
background: var(--header-gradient-start);
573+
border-color: var(--header-gradient-start);
574+
color: white;
575+
}
576+
577+
.pagination-btn {
578+
min-width: 44px;
579+
height: 44px;
580+
display: flex;
581+
align-items: center;
582+
justify-content: center;
583+
border: 1px solid var(--border-color);
584+
border-radius: 8px;
585+
background: var(--card-bg);
586+
color: var(--text-primary);
587+
text-decoration: none;
588+
font-size: 1.25rem;
589+
transition: all 0.2s ease;
590+
}
591+
592+
.pagination-btn:hover {
593+
background: var(--bg-tertiary);
594+
border-color: var(--header-gradient-start);
595+
color: var(--text-primary);
596+
}
597+
598+
/* Show simplified pagination on mobile */
599+
@media (max-width: 768px) {
600+
.pagination-numbers {
601+
display: flex;
602+
}
603+
604+
.pagination-btn {
605+
display: flex;
606+
}
607+
608+
/* Hide desktop pagination */
609+
.pagination-wrapper {
610+
display: none;
611+
}
612+
}
613+
614+
/* Hide simplified pagination on desktop */
615+
@media (min-width: 769px) {
616+
.pagination-numbers {
617+
display: none;
618+
}
619+
620+
.pagination-btn {
621+
display: none;
622+
}
623+
624+
/* Show desktop pagination */
625+
.pagination-wrapper {
626+
display: block;
627+
}
628+
}
509629
</style>
510630
{% block extra_css %}{% endblock %}
511631
</head>

‎templates/lpr_app/image_list.html‎

Lines changed: 91 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -151,35 +151,103 @@ <h6 class="card-title">{{ image.filename|truncatechars:25 }}</h6>
151151
<!-- Pagination -->
152152
{% if page_obj.has_other_pages %}
153153
<nav aria-label="Image pagination" class="mt-4">
154-
<ul class="pagination justify-content-center">
154+
<!-- Desktop Pagination -->
155+
<div class="pagination-wrapper">
156+
<ul class="pagination justify-content-center">
157+
{% if page_obj.has_previous %}
158+
<li class="page-item">
159+
<a class="page-link" href="?page={{ page_obj.previous_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}">
160+
<i class="bi bi-chevron-left"></i> Previous
161+
</a>
162+
</li>
163+
{% endif %}
164+
165+
{% for num in page_obj.paginator.page_range %}
166+
{% if page_obj.number == num %}
167+
<li class="page-item active">
168+
<span class="page-link">{{ num }}</span>
169+
</li>
170+
{% elif num == 1 %}
171+
<li class="page-item">
172+
<a class="page-link" href="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}">{{ num }}</a>
173+
</li>
174+
{% elif num == page_obj.number|add:1 %}
175+
<li class="page-item">
176+
<a class="page-link" href="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}">{{ num }}</a>
177+
</li>
178+
{% elif num == page_obj.number|add:2 %}
179+
<li class="page-item">
180+
<a class="page-link" href="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}">{{ num }}</a>
181+
</li>
182+
{% elif num == page_obj.number|add:3 %}
183+
<li class="page-item">
184+
<a class="page-link" href="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}">{{ num }}</a>
185+
</li>
186+
{% elif num == page_obj.number|add:4 %}
187+
<li class="page-item">
188+
<a class="page-link" href="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}">{{ num }}</a>
189+
</li>
190+
{% elif num == page_obj.number|add:5 %}
191+
<li class="page-item">
192+
<a class="page-link" href="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}">{{ num }}</a>
193+
</li>
194+
{% elif num == page_obj.number|add:6 %}
195+
<li class="page-item">
196+
<a class="page-link" href="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}">{{ num }}</a>
197+
</li>
198+
{% elif num == page_obj.number|add:7 %}
199+
<li class="page-item">
200+
<a class="page-link" href="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}">{{ num }}</a>
201+
</li>
202+
{% elif num == page_obj.number|add:8 %}
203+
<li class="page-item">
204+
<a class="page-link" href="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}">{{ num }}</a>
205+
</li>
206+
{% elif num == page_obj.number|add:9 %}
207+
<li class="page-item">
208+
<a class="page-link" href="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}">{{ num }}</a>
209+
</li>
210+
{% elif num == page_obj.number|add:10 %}
211+
<li class="page-item">
212+
<a class="page-link" href="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}">{{ num }}</a>
213+
</li>
214+
{% endif %}
215+
{% endfor %}
216+
217+
{% if page_obj.has_next %}
218+
<li class="page-item">
219+
<a class="page-link" href="?page={{ page_obj.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}">
220+
Next <i class="bi bi-chevron-right"></i>
221+
</a>
222+
</li>
223+
{% endif %}
224+
</ul>
225+
</div>
226+
227+
<!-- Mobile Pagination -->
228+
<div class="pagination-container">
155229
{% if page_obj.has_previous %}
156-
<li class="page-item">
157-
<a class="page-link" href="?page={{ page_obj.previous_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}">
158-
<i class="bi bi-chevron-left"></i> Previous
159-
</a>
160-
</li>
230+
<a class="pagination-btn mobile-only" href="?page={{ page_obj.previous_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}">
231+
<i class="bi bi-chevron-left"></i>
232+
</a>
161233
{% endif %}
162234

163-
{% for num in page_obj.paginator.page_range %}
164-
{% if page_obj.number == num %}
165-
<li class="page-item active" aria-current="page">
166-
<span class="page-link">{{ num }}</span>
167-
</li>
168-
{% else %}
169-
<li class="page-item">
170-
<a class="page-link" href="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}">{{ num }}</a>
171-
</li>
172-
{% endif %}
173-
{% endfor %}
235+
<div class="pagination-numbers">
236+
{% for num in page_obj.paginator.page_range %}
237+
{% if page_obj.number == num %}
238+
<span class="pagination-number active">{{ num }}</span>
239+
{% else %}
240+
<a class="pagination-number" href="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}">{{ num }}</a>
241+
{% endif %}
242+
{% endfor %}
243+
</div>
174244

175245
{% if page_obj.has_next %}
176-
<li class="page-item">
177-
<a class="page-link" href="?page={{ page_obj.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}">
178-
Next <i class="bi bi-chevron-right"></i>
179-
</a>
180-
</li>
246+
<a class="pagination-btn mobile-only" href="?page={{ page_obj.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}">
247+
<i class="bi bi-chevron-right"></i>
248+
</a>
181249
{% endif %}
182-
</ul>
250+
</div>
183251
</nav>
184252
{% endif %}
185253

0 commit comments

Comments
 (0)