Skip to content

Commit

Permalink
Split into two pages and more UI improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@lemeryfertitta
lemeryfertitta committed Dec 19, 2023
1 parent cdc2f52 commit 47c45af
Show file tree
Hide file tree
Showing 7 changed files with 762 additions and 673 deletions.
131 changes: 62 additions & 69 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
rel="stylesheet"
href="lib/bootstrap-5.3.2-dist/css/bootstrap.min.css"
/>
<link rel="icon" type="image/x-icon" href="media/icon/icon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.input-group-text {
Expand All @@ -19,15 +20,23 @@ <h1 class="display-1">Climbdex</h1>
<p>Search Engine for Interactive Climbing Training Boards</p>
<div class="row justify-content-md-center">
<div class="col-md-6">
<form class="card p-3 bg-light" id="form-search">
<form
class="card p-3 bg-light"
id="form-search"
action="results.html"
>
<div class="input-group mb-3">
<span class="input-group-text">Board</span>
<select class="form-select" id="select-board"></select>
<select
class="form-select"
id="select-board"
name="board"
></select>
</div>
<div class="input-group mb-3">
<span class="input-group-text">Angle</span>
<select class="form-select" id="select-angle">
<option value="Any" selected>Any</option>
<select class="form-select" id="select-angle" name="angle">
<option value="any" selected>Any</option>
</select>
</div>
<div class="input-group mb-3">
Expand All @@ -38,30 +47,52 @@ <h1 class="display-1">Climbdex</h1>
id="input-min-ascents"
value="5"
min="0"
name="minAscents"
/>
</div>
<div class="input-group mb-3">
<span class="input-group-text">Min Rating</span>
<input type="number", class="form-control" id="input-min-rating"
value="1.0" min="1.0" max="3.0" step="0.1""/>
<input
type="number"
,
class="form-control"
id="input-min-rating"
value="1.0"
min="1.0"
max="3.0"
step="0.1"
name="minRating"
/>
</div>
<div class="input-group mb-3">
<span class="input-group-text">Min Grade</span>
<select class="form-select" id="select-min-grade"></select>
<select
class="form-select"
id="select-min-grade"
name="minGrade"
></select>
</div>
<div class="input-group mb-3">
<span class="input-group-text">Max Grade</span>
<select class="form-select" id="select-max-grade"></select>
<select
class="form-select"
id="select-max-grade"
name="maxGrade"
></select>
</div>
<div class="input-group mb-3">
<span class="input-group-text">Sort By</span>
<select class="form-select" id="select-sort-by">
<select class="form-select" id="select-sort-by" name="sortBy">
<option value="ascents" selected>Ascents</option>
<option value="difficulty">Difficulty</option>
<option value="name">Name</option>
<option value="quality">Quality</option>
</select>
<select class="form-select" id="select-sort-order">
<select
class="form-select"
id="select-sort-order"
name="sortOrder"
>
<option value="desc" selected>Descending</option>
<option value="asc">Ascending</option>
</select>
Expand All @@ -76,73 +107,35 @@ <h1 class="display-1">Climbdex</h1>
>
Holds
</button>
</div>
<div class="collapse" id="div-hold-filter">
<svg
id="svg-hold-filter"
viewbox="0 0 0 0"
xmlns="http://www.w3.org/2000/svg"
></svg>
<input type="hidden" id="input-hold-filter" name="holds" />
<div class="collapse" id="div-hold-filter">
<svg
id="svg-hold-filter"
viewbox="0 0 0 0"
xmlns="http://www.w3.org/2000/svg"
></svg>
</div>
</div>
<div class="input-group mb-3 d-grid gap-2">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</form>
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-6 p-3">
<h4 id="header-results-count"></h4>
<h5 id="header-results-filters"></h5>
<div id="div-results-list" class="list-group"></div>
<div id="div-results-pagination" class="d-none">
<nav>
<ul class="pagination">
<li class="page-item" id="first-page">
<a class="page-link">|&lt;</a>
</li>
<li class="page-item" id="prev-page">
<a class="page-link">&lt;</a>
</li>
<li class="page-item disabled">
<a class="page-link" id="page-number">? of ?</a>
</li>
<li class="page-item" id="next-page">
<a class="page-link">&gt;</a>
</li>
<li class="page-item" id="last-page">
<a class="page-link">&gt;|</a>
</li>
</ul>
</nav>
</div>
<h4 id="header-climb-name"></h4>
<svg
id="svg-climb"
class="d-none"
viewbox="0 0 0 0"
xmlns="http://www.w3.org/2000/svg"
></svg>
<div class="d-none p-3" id="div-climb-stats">
<table
class="table table-striped table-bordered"
id="table-climb-stats"
>
<thead>
<tr>
<th scope="col">Angle</th>
<th scope="col">Difficulty</th>
<th scope="col">Ascents</th>
<th scope="col">Quality</th>
</tr>
</thead>
<tbody id="tbody-climb-stats"></tbody>
</table>
</div>
</div>
<footer>
<a
class="fs-6 fw-light"
href="https://github.com/lemeryfertitta/Climbdex"
><img
src="https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png"
width="32px"
height="32px"
/>Source Code</a
>
</footer>
</div>
</div>
<script src="lib/bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js"></script>
<script src="src/main.js"></script>
<script src="src/common.js"></script>
<script src="src/index.js"></script>
</body>
</html>
45 changes: 45 additions & 0 deletions media/icon/icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
83 changes: 83 additions & 0 deletions results.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html>
<head>
<title>Climbdex</title>
<link rel="icon" type="image/x-icon" href="media/icon/icon.svg" />
<link
rel="stylesheet"
href="lib/bootstrap-5.3.2-dist/css/bootstrap.min.css"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="container-sm text-center">
<h1 class="display-1">Climbdex</h1>
<p>Search Engine for Interactive Climbing Training Boards</p>
<div class="row justify-content-md-center">
<div class="col-md-5 card p-3 g-2">
<h5 id="header-results-count"></h5>
<p id="paragraph-filters"></p>
<div id="div-results-list" class="list-group"></div>
<div id="div-results-pagination"">
<nav class="nav justify-content-center">
<ul class="pagination">
<li class="page-item" id="first-page">
<a class="page-link">|&lt;</a>
</li>
<li class="page-item" id="prev-page">
<a class="page-link">&lt;</a>
</li>
<li class="page-item disabled">
<a class="page-link" id="page-number">? of ?</a>
</li>
<li class="page-item" id="next-page">
<a class="page-link">&gt;</a>
</li>
<li class="page-item" id="last-page">
<a class="page-link">&gt;|</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="col-md-5 card p-3 g-2">
<h4 id="header-climb-name"></h4>
<svg
id="svg-climb"
viewbox="0 0 0 0"
xmlns="http://www.w3.org/2000/svg"
></svg>
<div class="p-3" id="div-climb-stats">
<table
class="table table-striped table-bordered"
id="table-climb-stats"
>
<thead>
<tr>
<th scope="col">Angle</th>
<th scope="col">Difficulty</th>
<th scope="col">Ascents</th>
<th scope="col">Quality</th>
</tr>
</thead>
<tbody id="tbody-climb-stats"></tbody>
</table>
</div>
</div>
<footer>
<a
class="fs-6 fw-light"
href="https://github.com/lemeryfertitta/Climbdex"
><img
src="https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png"
width="32px"
height="32px"
/>Source Code</a
>
</footer>
</div>
</div>
</body>
<script src="src/common.js"></script>
<script src="src/results.js"></script>
</html>
Loading

0 comments on commit 47c45af

Please sign in to comment.