vlad/salvagedb_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Vlad 2025-05-02 12:17:45 +03:00
parent d5b774cc7a
commit 03b3bf9f53
1 changed files with 42 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
templates/database.html
View File

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