nostr/iris-messenger
1
0
Fork 0
mirror of https://github.com/irislib/iris-messenger.git synced 2024-09-19 17:46:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Layout placement and overflow fixes

Browse Source
This commit is contained in:
lvlr 2023-07-30 05:51:22 +03:00
parent 6980f1bd4e
commit d8070b7d08
5 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/components/Header.tsx
View File

@ -195,7 +195,7 @@ export default class Header extends Component {
const pub = Key.getPubKey(); const pub = Key.getPubKey();
const loggedIn = !!pub; const loggedIn = !!pub;
return ( return (
<div className="sticky top-0 z-10 cursor-pointer"> <div className="sticky top-0 z-10 cursor-pointer flex flex-wrap">
<div className="w-full overflow-x-hidden bg-black md:bg-opacity-50 md:shadow-lg md:backdrop-blur-lg px-2"> <div className="w-full overflow-x-hidden bg-black md:bg-opacity-50 md:shadow-lg md:backdrop-blur-lg px-2">
<div className="flex items-center justify-between h-12"> <div className="flex items-center justify-between h-12">
{this.renderBackBtnOrLogo()} {this.renderBackBtnOrLogo()}

2
src/js/views/Profile.tsx
View File

@ -84,7 +84,7 @@ class Profile extends View {
path === href ? 'btn btn-sm btn-primary' : 'btn btn-sm btn-neutral'; path === href ? 'btn btn-sm btn-primary' : 'btn btn-sm btn-neutral';
return ( return (
<div className="flex mx-4 gap-2 mb-4 overflow-x-scroll"> <div className="flex mx-4 gap-2 mb-4 overflow-x-auto">
<Link className={linkClass('/' + currentProfileUrl)} href={'/' + currentProfileUrl}> <Link className={linkClass('/' + currentProfileUrl)} href={'/' + currentProfileUrl}>
{t('posts')} {t('posts')}
<Show when={this.state.noPosts}>{' (0)'}</Show> <Show when={this.state.noPosts}>{' (0)'}</Show>

6
src/js/views/View.tsx
View File

@ -26,10 +26,10 @@ abstract class View extends Component {
render() { render() {
return ( return (
<div className="flex flex-row w-full"> <div className="flex flex-row h-full w-full">
<div className={`flex flex-col w-full ${this.hideSideBar ? '' : 'lg:w-2/3'}`}> <div className={`flex flex-col w-full h-full ${this.hideSideBar ? '' : 'lg:w-2/3'}`}>
<Header /> <Header />
<div class={this.class} id={this.id}> <div class={this.class} id={this.id} className="h-full">
<ErrorBoundary>{this.renderView()}</ErrorBoundary> <ErrorBoundary>{this.renderView()}</ErrorBoundary>
</div> </div>
</div> </div>

2
src/js/views/chat/ChatList.tsx
View File

@ -121,7 +121,7 @@ class ChatList extends BaseComponent<ChatListProps, ChatListState> {
return ( return (
<section <section
className={`h-screen border-r border-neutral-800 overflow-x-hidden overflow-y-scroll px-4 md:px-0 w-full md:w-64 ${ className={`border-r border-neutral-800 overflow-x-hidden overflow-y-auto h-full px-4 md:px-0 w-full md:w-64 ${
this.props.className || '' this.props.className || ''
}`} }`}
> >

6
src/js/views/chat/ChatMessages.tsx
View File

@ -149,11 +149,11 @@ function ChatMessages({ id }) {
mainView = ( mainView = (
<div <div
className="main-view p-2 h-screen overflow-y-scroll overflow-x-hidden" className="main-view p-2 overflow-y-auto overflow-x-hidden"
id="message-view" id="message-view"
onScroll={() => onMessageViewScroll()} onScroll={() => onMessageViewScroll()}
> >
<div id="message-list"> <div id="message-list" className="w-full">
{msgListContent} {msgListContent}
<div className="italic my-2 text-neutral-500 w-full text-center"> <div className="italic my-2 text-neutral-500 w-full text-center">
<Show when={isGroup && keyPair}> <Show when={isGroup && keyPair}>
@ -308,7 +308,7 @@ function ChatMessages({ id }) {
<Helmet> <Helmet>
<title>{'Messages'}</title> <title>{'Messages'}</title>
</Helmet> </Helmet>
<div id="chat-main" ref={ref} className={`${id ? '' : 'hidden'} flex-1 pb-12`}> <div id="chat-main" ref={ref} className={`${id ? '' : 'hidden'} flex flex-1 flex-col`}>
{renderMainView()} {renderMainView()}
<Show when={id && id.length > 4}>{renderMsgForm()}</Show> <Show when={id && id.length > 4}>{renderMsgForm()}</Show>
</div> </div>