Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-17 17:00:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

fix: mobile view for sibling switch

Browse source
This commit is contained in:
Daniel Avila 2023-03-15 19:05:17 -04:00
parent d052d221dc
commit c91ce36227
3 changed files with 72 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

11
client/src/components/Messages/Message.jsx
View file

@ -154,12 +154,14 @@ export default function Message({
) : ( ) : (
icon icon
)} )}
<div className="sibling-switch invisible absolute left-0 top-2 -ml-4 flex -translate-x-full items-center justify-center gap-1 text-xs group-hover:visible">
<SiblingSwitch <SiblingSwitch
siblingIdx={siblingIdx} siblingIdx={siblingIdx}
siblingCount={siblingCount} siblingCount={siblingCount}
setSiblingIdx={setSiblingIdx} setSiblingIdx={setSiblingIdx}
/> />
</div> </div>
</div>
<div className="relative flex w-[calc(100%-50px)] flex-col gap-1 whitespace-pre-wrap md:gap-3 lg:w-[calc(100%-115px)]"> <div className="relative flex w-[calc(100%-50px)] flex-col gap-1 whitespace-pre-wrap md:gap-3 lg:w-[calc(100%-115px)]">
<div className="flex flex-grow flex-col gap-3"> <div className="flex flex-grow flex-col gap-3">
{error ? ( {error ? (
@ -217,6 +219,15 @@ export default function Message({
visible={!error && isCreatedByUser && !edit} visible={!error && isCreatedByUser && !edit}
onClick={() => enterEdit()} onClick={() => enterEdit()}
/> />
<div className="sibling-switch-container flex justify-between">
<div className="flex items-center justify-center gap-1 self-center pt-2 text-xs">
<SiblingSwitch
siblingIdx={siblingIdx}
siblingCount={siblingCount}
setSiblingIdx={setSiblingIdx}
/>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

4
client/src/components/Messages/SiblingSwitch.jsx
View file

@ -13,7 +13,7 @@ export default function SiblingSwitch({
setSiblingIdx(siblingIdx + 1); setSiblingIdx(siblingIdx + 1);
} }
return siblingCount > 1 ? ( return siblingCount > 1 ? (
<div className="sibling-switch text-xs flex items-center justify-center gap-1 invisible absolute left-0 top-2 -ml-4 -translate-x-full group-hover:visible"> <>
<button className="dark:text-white disabled:text-gray-300 dark:disabled:text-gray-400" onClick={previous} disabled={siblingIdx==0}> <button className="dark:text-white disabled:text-gray-300 dark:disabled:text-gray-400" onClick={previous} disabled={siblingIdx==0}>
<svg stroke="currentColor" fill="none" strokeWidth="1.5" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" className="h-3 w-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="15 18 9 12 15 6"></polyline></svg> <svg stroke="currentColor" fill="none" strokeWidth="1.5" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" className="h-3 w-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="15 18 9 12 15 6"></polyline></svg>
</button> </button>
@ -21,6 +21,6 @@ export default function SiblingSwitch({
<button className="dark:text-white disabled:text-gray-300 dark:disabled:text-gray-400" onClick={next} disabled={siblingIdx==siblingCount-1}> <button className="dark:text-white disabled:text-gray-300 dark:disabled:text-gray-400" onClick={next} disabled={siblingIdx==siblingCount-1}>
<svg stroke="currentColor" fill="none" strokeWidth="1.5" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" className="h-3 w-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="9 18 15 12 9 6"></polyline></svg> <svg stroke="currentColor" fill="none" strokeWidth="1.5" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" className="h-3 w-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="9 18 15 12 9 6"></polyline></svg>
</button> </button>
</div> </>
):null; ):null;
} }

21
client/src/mobile.css
View file

@ -5,29 +5,38 @@
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
background-color: rgba(86, 88, 105, .75); background-color: rgba(86, 88, 105, 0.75);
padding-left: 420px; padding-left: 420px;
padding-top: 12px; padding-top: 12px;
opacity: 0; opacity: 0;
transition: all .5s; transition: all 0.5s;
pointer-events: none; pointer-events: none;
} }
.nav { .nav {
transition: all .5s; transition: all 0.5s;
} }
.nav-close-button { .nav-close-button {
display: none; display: none;
} }
@media (min-width: 1024px) {
.sibling-switch-container {
display: none;
}
}
@media (max-width: 1024px) { @media (max-width: 1024px) {
.sibling-switch { /* .sibling-switch {
left: 114px; left: 114px;
top: unset; top: unset;
bottom: 4px; bottom: 4px;
visibility: visible; visibility: visible;
z-index: 2; z-index: 2;
} */
.sibling-switch {
display: none;
} }
.resubmit-edit-button { .resubmit-edit-button {
@ -48,7 +57,7 @@
.nav { .nav {
position: fixed; position: fixed;
z-index: 999; z-index: 999;
left: calc(-100%);; left: calc(-100%);
top: 0; top: 0;
bottom: 0; bottom: 0;
max-width: 320px; max-width: 320px;
@ -66,5 +75,3 @@
pointer-events: auto; pointer-events: auto;
} }
} }