klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-02 21:19:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve styling of chat session side panel

Browse Source 
- Make collapse, expand toggle arrow point in the direction the action
  will expand the side panel in
- Make the collapsed side panel reduce to a 1px sliver
This commit is contained in:
Debanjum Singh Solanky
2024-02-22 20:04:26 +05:30
parent 6283d9fe83
commit 102f5c3f53
2 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/interface/desktop/chat.html
View File

@@ -1015,6 +1015,7 @@
document.getElementById('side-panel').classList.toggle('collapsed');
document.getElementById('new-conversation').classList.toggle('collapsed');
document.getElementById('existing-conversations').classList.toggle('collapsed');
document.getElementById('side-panel-collapse').style.transform = document.getElementById('side-panel').classList.contains('collapsed') ? 'rotate(0deg)' : 'rotate(180deg)';
document.getElementById('chat-section-wrapper').classList.toggle('mobile-friendly');
}
@@ -1059,7 +1060,7 @@
id="collapse-side-panel-button"
onclick="handleCollapseSidePanel()"
>
<svg class="side-panel-collapse" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg id="side-panel-collapse" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.82054 20.7313C8.21107 21.1218 8.84423 21.1218 9.23476 20.7313L15.8792 14.0868C17.0505 12.9155 17.0508 11.0167 15.88 9.84497L9.3097 3.26958C8.91918 2.87905 8.28601 2.87905 7.89549 3.26958C7.50497 3.6601 7.50497 4.29327 7.89549 4.68379L14.4675 11.2558C14.8581 11.6464 14.8581 12.2795 14.4675 12.67L7.82054 19.317C7.43002 19.7076 7.43002 20.3407 7.82054 20.7313Z" fill="#0F0F0F"/>
</svg>
</button>
@@ -1162,6 +1163,7 @@
}
#side-panel {
width: 250px;
padding: 10px;
background: var(--background-color);
border-radius: 5px;
@@ -1169,11 +1171,11 @@
overflow-y: scroll;
text-align: left;
transition: width 0.3s ease-in-out;
width: 250px;
}
div#side-panel.collapsed {
width: 1px;
width: 0;
padding: 0;
display: block;
overflow: hidden;
}
@@ -1361,7 +1363,7 @@
font-size: large;
}
svg.side-panel-collapse {
svg#side-panel-collapse {
width: 30px;
height: 30px;
}
@@ -1615,7 +1617,7 @@
padding: 0;
}
svg.side-panel-collapse {
svg#side-panel-collapse {
width: 24px;
height: 24px;
}