feat: update database.html to Bootstrap 5 - Update table classes for responsive design - Update pagination component - Add modern spacing utilities

This commit is contained in:
Vlad 2025-05-02 12:17:45 +03:00
parent d5b774cc7a
commit 03b3bf9f53

View File

@ -1,33 +1,32 @@
{% extends "head.html" %}
{% block content %}
<div class="container">
<div class="hero-unit">
<h1>Buying a Used Car? Check it!</h1>
<br>
<p><a href="https://www.salvagedb.com/" title="Salvagedb.com" rel="nofollow">Salvagedb.com</a> provides
<div class="container py-4">
<div class="p-5 mb-4 bg-light rounded-3">
<h1 class="display-4">Buying a Used Car? Check it!</h1>
<p class="lead">
<a href="https://www.salvagedb.com/" title="Salvagedb.com" rel="nofollow">Salvagedb.com</a> provides
information about salvage or junk vehicles; damage from hail, flood or fire; mileage discrepancies or
odometer rollback; and gray market vehicles. We do not claim that the car got in our databank has salvage
title, but the fact that it has been damaged for sure. Our site helps people avoid buying a damaged vehicle
in the past.
</p>
</div>
<br><br>
<div class="table-container" style="display: flex; justify-content: center;">
<table id="hor-minimalist-a" summary="Salvage cars;Database page 1">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>VIN</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
<th scope="col">VIN</th>
<th scope="col">Make</th>
<th scope="col">Model</th>
<th scope="col">Year</th>
</tr>
</thead>
<tbody>
{% for row in pg %}
<tr>
<td><a href="/detail/{{ row[1] }}.html">{{ row[1] }}</a></td>
<td><a href="/detail/{{ row[1] }}.html" class="text-decoration-none">{{ row[1] }}</a></td>
<td>{{ row[2] }}</td>
<td>{{ row[3] }}</td>
<td>{{ row[4] }}</td>
@ -37,16 +36,21 @@
</table>
</div>
<br><br>
<div class="pagination-container">
<div class="pagination">
<nav aria-label="Page navigation" class="my-4">
<ul class="pagination justify-content-center">
{% if cur_page > 1 %}
<a class="btn" href="/database/page1.html">First</a>
<a class="btn" href="/database/page{{cur_page-1}}.html">Prev</a>
<li class="page-item">
<a class="page-link" href="/database/page1.html">First</a>
</li>
<li class="page-item">
<a class="page-link" href="/database/page{{cur_page-1}}.html">Prev</a>
</li>
{% endif %}
{% if cur_page > 3 %}
<span class="btn disabled">...</span>
<li class="page-item disabled">
<span class="page-link">...</span>
</li>
{% endif %}
{% set start_page = cur_page - 2 %}
@ -60,25 +64,32 @@
{% endif %}
{% for page in range(start_page, end_page + 1) %}
<li class="page-item {% if page == cur_page %}active{% endif %}">
{% if page == cur_page %}
<button class="btn active">{{page}}</button>
<span class="page-link">{{page}}</span>
{% else %}
<a class="btn" href="/database/page{{page}}.html">{{page}}</a>
<a class="page-link" href="/database/page{{page}}.html">{{page}}</a>
{% endif %}
</li>
{% endfor %}
{% if cur_page < max_page-2 %}
<span class="btn disabled">...</span>
<li class="page-item disabled">
<span class="page-link">...</span>
</li>
{% endif %}
{% if cur_page < max_page %}
<a class="btn" href="/database/page{{cur_page+1}}.html">Next</a>
<a class="btn" href="/database/page{{max_page}}.html">Last</a>
<li class="page-item">
<a class="page-link" href="/database/page{{cur_page+1}}.html">Next</a>
</li>
<li class="page-item">
<a class="page-link" href="/database/page{{max_page}}.html">Last</a>
</li>
{% endif %}
</div>
</div>
</ul>
</nav>
</div>
<br>
<hr>
<hr class="my-4">
{% endblock %}