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:
parent
d5b774cc7a
commit
03b3bf9f53
@ -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 %}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<hr>
|
||||
<hr class="my-4">
|
||||
|
||||
{% endblock %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user