mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
cb278c762d
* Add segmented control component and update related files * Implement segmented navigation component and update related styles * Create grumpy-flowers-act.md * Refactor .gitignore and move playground pages to preview directory * Enhance segmented navigation with hover state and class support * Refactor segmented control layout for improved responsiveness and alignment
55 lines
2.1 KiB
HTML
55 lines
2.1 KiB
HTML
---
|
|
title: Chat
|
|
page-header: Chat
|
|
page-menu: extra.chat
|
|
layout: default
|
|
permalink: chat.html
|
|
page-container-class: flex-fill d-flex flex-column
|
|
---
|
|
|
|
{% assign person = people[4] %}
|
|
|
|
<div class="card flex-fill">
|
|
<div class="row g-0 flex-fill">
|
|
<div class="col-12 col-lg-5 col-xl-3 border-end d-flex flex-column">
|
|
<div class="card-header d-none d-md-block">
|
|
<div class="input-icon">
|
|
<span class="input-icon-addon"> {% include "ui/icon.html" icon="search" %} </span>
|
|
<input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search" />
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-0 scrollable flex-fill">
|
|
<div class="nav flex-column nav-pills" role="tablist">
|
|
{% for person in people limit: 10 %}
|
|
<a href="#chat-1" class="nav-link text-start mw-100 p-3{% if forloop.index == 1 %} active{% endif %}" id="chat-1-tab" data-bs-toggle="pill" role="tab" aria-selected="true">
|
|
<div class="row align-items-center flex-fill">
|
|
<div class="col-auto">{% include "ui/avatar.html" person=person %}</div>
|
|
<div class="col text-body">
|
|
<div>{{ person.full_name }}</div>
|
|
<div class="text-secondary text-truncate w-100">{{ chats[forloop.index].message }}</div>
|
|
</div>
|
|
{% if forloop.index == 7 %}
|
|
<div class="col-auto">🌴</div>
|
|
{% endif %}
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-lg-7 col-xl-9 d-flex flex-column">
|
|
<div class="card-body scrollable">{% include "ui/chat.html" wide=true %}</div>
|
|
<div class="card-footer">
|
|
<div class="input-group input-group-flat">
|
|
<input type="text" class="form-control" autocomplete="off" placeholder="Type message" />
|
|
|
|
<span class="input-group-text">
|
|
<a href="#" class="link-secondary" data-bs-toggle="tooltip" aria-label="Clear search" title="Clear search"> {% include "ui/icon.html" icon="mood-smile" %} </a>
|
|
|
|
<a href="#" class="link-secondary ms-2" data-bs-toggle="tooltip" aria-label="Add notification" title="Add notification"> {% include "ui/icon.html" icon="paperclip" %} </a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |