1
0
Fork 0
timelinize/frontend/pages/timeline.html
Matthew Holt 932831db47
Refactor data sources to make them dynamic
Also change the checkbox dropdown to a more interactive tomselect (type-to-search dropdown with chips) with pictures.

This makes it so data sources can be added to a timeline dynamically.

In the future, data sources can be implemented externally and push data to the timeline, so these need to not be rigidly hard-coded into the app and assumed to never change.

This essentially adds all their info (name, title, description, image, etc) into each timeline DB.
2025-02-11 16:49:20 -07:00

71 lines
1.6 KiB
HTML

<title>Timeline</title>
<link rel="stylesheet" href="/resources/css/timeline.css">
<!-- Page header -->
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="me-5">
<div class="page-pretitle">
Explore
</div>
<h2 class="page-title">
<svg xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-timeline me-1" width="24" height="24"
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 16l6 -7l5 5l5 -6"></path>
<circle cx="15" cy="14" r="1"></circle>
<circle cx="10" cy="9" r="1"></circle>
<circle cx="4" cy="16" r="1"></circle>
<circle cx="20" cy="8" r="1"></circle>
</svg>
Timeline
</h2>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl">
<div class="row g-4">
<div class="filter col-3">
<form class="filter">
<!-- Date picker goes here -->
<label class="form-label">Person</label>
<div class="mb-4">
<select type="text" class="entity-input form-select" placeholder="Name or contact info">
</select>
</div>
<div class="tl-item-class-dropdown static-menu mb-3">
</div>
<select multiple class="tl-data-source form-select mb-3" placeholder="Data sources" autocomplete="off">
</select>
</form>
</div>
<div class="col-9">
<div class="filter-results">
</div>
</div>
</div>
</div>
</div>