Skip to content

Stick the scrollbar to the end #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RomainMazB wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Stick the scrollbar to the end #9

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
242 changes: 105 additions & 137 deletions content/ui/chat-box.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,11 @@ alt: Chat Box

<template v-slot:preview>
<!-- chat box -->
<div class="w-80 h-96 flex flex-col border shadow-md bg-white">
<div class="flex h-96 w-80 flex-col border bg-white shadow-md">
<div class="flex items-center justify-between border-b p-2">
<!-- user info -->
<div class="flex items-center">
<img class="rounded-full w-10 h-10"
src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
<div class="pl-2">
<div class="font-semibold">
<a class="hover:underline" href="#">John Doe</a>
Expand All @@ -26,91 +25,83 @@ alt: Chat Box
<!-- end user info -->
<!-- chat box action -->
<div>
<a class="inline-flex hover:bg-indigo-50 rounded-full p-2" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
<a class="inline-flex rounded-full p-2 hover:bg-indigo-50" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
</svg>
</a>
<button class="inline-flex hover:bg-indigo-50 rounded-full p-2" type="button">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<button class="inline-flex rounded-full p-2 hover:bg-indigo-50" type="button">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- end chat box action -->
</div>
<div class="flex-1 px-4 py-4 overflow-y-auto">
<!-- chat message -->
<div class="flex items-center mb-4">
<div class="flex-none flex flex-col items-center space-y-1 mr-4">
<img class="rounded-full w-10 h-10"
src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
<a href="#" class="block text-xs hover:underline">John Doe</a>
</div>
<div class="flex-1 bg-indigo-400 text-white p-2 rounded-lg mb-2 relative">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<!-- arrow -->
<div class="absolute left-0 top-1/2 transform -translate-x-1/2 rotate-45 w-2 h-2 bg-indigo-400"></div>
<!-- end arrow -->
</div>
</div>
<!-- end chat message -->
<!-- chat message -->
<div class="flex items-center flex-row-reverse mb-4">
<div class="flex-none flex flex-col items-center space-y-1 ml-4">
<img class="rounded-full w-10 h-10"
src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
<a href="#" class="block text-xs hover:underline">Jesse</a>
</div>
<div class="flex-1 bg-indigo-100 text-gray-800 p-2 rounded-lg mb-2 relative">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur
adipisicing elit.</div>
<!-- arrow -->
<div class="absolute right-0 top-1/2 transform translate-x-1/2 rotate-45 w-2 h-2 bg-indigo-100"></div>
<!-- end arrow -->
<div class="flex flex-col-reverse overflow-y-auto px-4 py-4">
<div class="flex-1">
<!-- chat message -->
<div class="mb-4 flex items-center">
<div class="mr-4 flex flex-none flex-col items-center space-y-1">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
<a href="#" class="block text-xs hover:underline">John Doe</a>
</div>
<div class="relative mb-2 flex-1 rounded-lg bg-indigo-400 p-2 text-white">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<!-- arrow -->
<div class="absolute left-0 top-1/2 h-2 w-2 -translate-x-1/2 rotate-45 transform bg-indigo-400"></div>
<!-- end arrow -->
</div>
</div>
</div>
<!-- end chat message -->
<!-- chat message -->
<div class="flex items-center mb-4">
<div class="flex-none flex flex-col items-center space-y-1 mr-4">
<img class="rounded-full w-10 h-10"
src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
<a href="#" class="block text-xs hover:underline">John Doe</a>
<!-- end chat message -->
<!-- chat message -->
<div class="mb-4 flex flex-row-reverse items-center">
<div class="ml-4 flex flex-none flex-col items-center space-y-1">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
<a href="#" class="block text-xs hover:underline">Jesse</a>
</div>
<div class="relative mb-2 flex-1 rounded-lg bg-indigo-100 p-2 text-gray-800">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<!-- arrow -->
<div class="absolute right-0 top-1/2 h-2 w-2 translate-x-1/2 rotate-45 transform bg-indigo-100"></div>
<!-- end arrow -->
</div>
</div>
<div class="flex-1 bg-indigo-400 text-white p-2 rounded-lg mb-2 relative">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<!-- arrow -->
<div class="absolute left-0 top-1/2 transform -translate-x-1/2 rotate-45 w-2 h-2 bg-indigo-400"></div>
<!-- end arrow -->
<!-- end chat message -->
<!-- chat message -->
<div class="mb-4 flex items-center">
<div class="mr-4 flex flex-none flex-col items-center space-y-1">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
<a href="#" class="block text-xs hover:underline">John Doe</a>
</div>
<div class="relative mb-2 flex-1 rounded-lg bg-indigo-400 p-2 text-white">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<!-- arrow -->
<div class="absolute left-0 top-1/2 h-2 w-2 -translate-x-1/2 rotate-45 transform bg-indigo-400"></div>
<!-- end arrow -->
</div>
</div>
<!-- end chat message -->
</div>
<!-- end chat message -->
</div>
<div class="flex items-center border-t p-2">
<!-- chat input action -->
<div>
<button class="inline-flex hover:bg-indigo-50 rounded-full p-2" type="button">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<button class="inline-flex rounded-full p-2 hover:bg-indigo-50" type="button">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
</button>
</div>
<!-- end chat input action -->
<div class="w-full mx-2">
<div class="mx-2 w-full">
<input class="w-full rounded-full border border-gray-200" type="text" value="" placeholder="Aa" />
</div>
<!-- chat send action -->
<div>
<button class="inline-flex hover:bg-indigo-50 rounded-full p-2" type="button">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
<button class="inline-flex rounded-full p-2 hover:bg-indigo-50" type="button">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</button>
</div>
Expand All @@ -123,12 +114,11 @@ alt: Chat Box
```html
<!-- chat box -->

<div class="w-80 h-96 flex flex-col border shadow-md bg-white">
<div class="flex h-96 w-80 flex-col border bg-white shadow-md">
<div class="flex items-center justify-between border-b p-2">
<!-- user info -->
<div class="flex items-center">
<img class="rounded-full w-10 h-10"
src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
<div class="pl-2">
<div class="font-semibold">
<a class="hover:underline" href="#">John Doe</a>
Expand All @@ -139,108 +129,86 @@ alt: Chat Box
<!-- end user info -->
<!-- chat box action -->
<div>
<a class="inline-flex hover:bg-indigo-50 rounded-full p-2" href="#">
<a class="inline-flex rounded-full p-2 hover:bg-indigo-50" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
</svg>
</a>

<button class="inline-flex hover:bg-indigo-50 rounded-full p-2" type="button">
<button class="inline-flex rounded-full p-2 hover:bg-indigo-50" type="button">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- end chat box action -->
</div>

<div class="flex-1 px-4 py-4 overflow-y-auto">
<!-- chat message -->

<div class="flex items-center mb-4">
<div class="flex-none flex flex-col items-center space-y-1 mr-4">
<img class="rounded-full w-10 h-10"
src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
<a href="#" class="block text-xs hover:underline">John Doe</a>
</div>
<div class="flex-1 bg-indigo-400 text-white p-2 rounded-lg mb-2 relative">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>

<!-- arrow -->
<div class="absolute left-0 top-1/2 transform -translate-x-1/2 rotate-45 w-2 h-2 bg-indigo-400"></div>
<!-- end arrow -->
</div>
</div>

<!-- end chat message -->

<!-- chat message -->

<div class="flex items-center flex-row-reverse mb-4">
<div class="flex-none flex flex-col items-center space-y-1 ml-4">
<img class="rounded-full w-10 h-10"
src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
<a href="#" class="block text-xs hover:underline">Jesse</a>
</div>
<div class="flex-1 bg-indigo-100 text-gray-800 p-2 rounded-lg mb-2 relative">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur
adipisicing elit.</div>

<!-- arrow -->
<div class="absolute right-0 top-1/2 transform translate-x-1/2 rotate-45 w-2 h-2 bg-indigo-100"></div>
<!-- end arrow -->
<div class="flex flex-col-reverse overflow-y-auto px-4 py-4">
<div class="flex-1">
<!-- chat message -->
<div class="mb-4 flex items-center">
<div class="mr-4 flex flex-none flex-col items-center space-y-1">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
<a href="#" class="block text-xs hover:underline">John Doe</a>
</div>
<div class="relative mb-2 flex-1 rounded-lg bg-indigo-400 p-2 text-white">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<!-- arrow -->
<div class="absolute left-0 top-1/2 h-2 w-2 -translate-x-1/2 rotate-45 transform bg-indigo-400"></div>
<!-- end arrow -->
</div>
</div>
</div>

<!-- end chat message -->

<!-- chat message -->

<div class="flex items-center mb-4">
<div class="flex-none flex flex-col items-center space-y-1 mr-4">
<img class="rounded-full w-10 h-10"
src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
<a href="#" class="block text-xs hover:underline">John Doe</a>
<!-- end chat message -->
<!-- chat message -->
<div class="mb-4 flex flex-row-reverse items-center">
<div class="ml-4 flex flex-none flex-col items-center space-y-1">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
<a href="#" class="block text-xs hover:underline">Jesse</a>
</div>
<div class="relative mb-2 flex-1 rounded-lg bg-indigo-100 p-2 text-gray-800">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<!-- arrow -->
<div class="absolute right-0 top-1/2 h-2 w-2 translate-x-1/2 rotate-45 transform bg-indigo-100"></div>
<!-- end arrow -->
</div>
</div>
<div class="flex-1 bg-indigo-400 text-white p-2 rounded-lg mb-2 relative">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>

<!-- arrow -->
<div class="absolute left-0 top-1/2 transform -translate-x-1/2 rotate-45 w-2 h-2 bg-indigo-400"></div>
<!-- end arrow -->
<!-- end chat message -->
<!-- chat message -->
<div class="mb-4 flex items-center">
<div class="mr-4 flex flex-none flex-col items-center space-y-1">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
<a href="#" class="block text-xs hover:underline">John Doe</a>
</div>
<div class="relative mb-2 flex-1 rounded-lg bg-indigo-400 p-2 text-white">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<!-- arrow -->
<div class="absolute left-0 top-1/2 h-2 w-2 -translate-x-1/2 rotate-45 transform bg-indigo-400"></div>
<!-- end arrow -->
</div>
</div>
<!-- end chat message -->
</div>

<!-- end chat message -->
</div>

<div class="flex items-center border-t p-2">
<!-- chat input action -->
<div>
<button class="inline-flex hover:bg-indigo-50 rounded-full p-2" type="button">
<button class="inline-flex rounded-full p-2 hover:bg-indigo-50" type="button">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
</button>
</div>
<!-- end chat input action -->

<div class="w-full mx-2">
<input class="w-full rounded-full border border-gray-200" type="text" value="" placeholder="Aa" autofocus />
<div class="mx-2 w-full">
<input class="w-full rounded-full border border-gray-200" type="text" value="" placeholder="Aa" />
</div>

<!-- chat send action -->

<div>
<button class="inline-flex hover:bg-indigo-50 rounded-full p-2" type="button">
<button class="inline-flex rounded-full p-2 hover:bg-indigo-50" type="button">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</button>
</div>

<!-- end chat send action -->
</div>
</div>
Expand Down