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.
71 lines
1.6 KiB
HTML
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>
|
|
|
|
|