nostr/blowater
1
0
Fork 0
mirror of https://github.com/BlowaterNostr/blowater.git synced 2024-10-18 15:43:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

minor changes to UI (#278)

Browse Source
This commit is contained in:
Bullish Bear 2023-11-13 14:20:13 +08:00 committed by GitHub
parent 52cc82864d
commit c729a2cc4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 24 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
UI/app.tsx
View File

@ -455,7 +455,7 @@ export function AppComponent(props: {
</div>
<div
class={tw`h-full px-[3rem] bg-[${SecondaryBackgroundColor}] flex-1 overflow-auto${
class={tw`h-full px-[3rem] mobile:px-4 bg-[${SecondaryBackgroundColor}] flex-1 overflow-auto${
model.navigationModel.activeNav == "Profile" ? " block" : " hidden"
}`}
>

8
UI/dm.tsx
View File

@ -154,7 +154,7 @@ export function DirectMessageContainer(props: DirectMessageContainerProps) {
? (
<div class={tw`flex-1 overflow-hidden flex-col flex`}>
<div
class={tw`h-14 border-l border-b border-[#36393F] flex items-center justify-between px-5 bg-[#2F3136]`}
class={tw`h-14 mobile:h-12 border-l border-b border-[#36393F] flex items-center justify-between px- mobile:px-2 bg-[#2F3136]`}
>
<div class={tw`flex items-center`}>
<button
@ -163,7 +163,7 @@ export function DirectMessageContainer(props: DirectMessageContainerProps) {
type: "BackToContactList",
});
}}
class={tw`w-6 h-6 mr-4 desktop:hidden ${IconButtonClass}`}
class={tw`w-6 h-6 mr-4 mobile:mr-2 desktop:hidden ${IconButtonClass}`}
>
<LeftArrowIcon
class={tw`w-4 h-4`}
@ -172,7 +172,9 @@ export function DirectMessageContainer(props: DirectMessageContainerProps) {
}}
/>
</button>
<span class={tw`text-[#F3F4EA] text-[1.2rem] whitespace-nowrap truncate`}>
<span
class={tw`text-[#F3F4EA] text-[1.2rem] mobile:text-base whitespace-nowrap truncate`}
>
{props.profileGetter.getProfilesByPublicKey(props.currentEditor.pubkey)
?.profile.name ||
props.currentEditor.pubkey.bech32()}

16
UI/editor.tsx
View File

@ -94,9 +94,9 @@ export class Editor extends Component<EditorProps> {
};
return (
<div class={tw`flex mb-4 mx-5 items-end`}>
<div class={tw`flex mb-4 mx-5 mobile:mx-2 mobile:mb-2 items-end`}>
<button
class={tw`min-w-[3rem] w-[3rem] h-[3rem] hover:bg-[${DividerBackgroundColor}] group ${CenterClass} rounded-[50%] ${NoOutlineClass}`}
class={tw`min-w-[3rem] mobile:min-w-[2rem] w-[3rem] mobile:w-8 h-[3rem] mobile:h-8 hover:bg-[${DividerBackgroundColor}] group ${CenterClass} rounded-[50%] ${NoOutlineClass}`}
onClick={() => {
if (uploadFileInput.current) {
uploadFileInput.current.click();
@ -104,7 +104,7 @@ export class Editor extends Component<EditorProps> {
}}
>
<ImageIcon
class={tw`h-[2rem] w-[2rem] stroke-current text-[${PrimaryTextColor}4D] group-hover:text-[${PrimaryTextColor}]`}
class={tw`h-[2rem] w-[2rem] mobile:w-6 mobile:h-6 stroke-current text-[${PrimaryTextColor}4D] group-hover:text-[${PrimaryTextColor}]`}
style={{
fill: "none",
}}
@ -138,7 +138,7 @@ export class Editor extends Component<EditorProps> {
class={tw`hidden`}
/>
<div
class={tw`mx-2 p-[0.75rem] bg-[${DividerBackgroundColor}] rounded-lg flex flex-col flex-1 overflow-hidden`}
class={tw`mx-2 p-[0.75rem] mobile:p-2 mobile:text-sm bg-[${DividerBackgroundColor}] rounded-lg flex flex-col flex-1 overflow-hidden`}
>
{props.files.length > 0
? (
@ -231,16 +231,18 @@ export class Editor extends Component<EditorProps> {
</textarea>
</div>
<div class={tw`w-[5rem] h-[2.5rem] rounded-lg ${LinearGradientsClass} ${CenterClass}`}>
<div
class={tw`w-[5rem] h-[2.5rem] mobile:w-12 mobile:h-8 rounded-lg ${LinearGradientsClass} ${CenterClass}`}
>
<button
class={tw`w-[4.8rem] h-[2.3rem] text-[${PrimaryTextColor}] rounded-lg ${CenterClass} bg-[#36393F] hover:bg-transparent font-bold`}
class={tw`w-[4.8rem] h-[2.3rem] mobile:w-[2.9rem] mobile:h-[1.9rem] mobile:text-sm text-[${PrimaryTextColor}] rounded-lg ${CenterClass} bg-[#36393F] hover:bg-transparent font-bold`}
onClick={async () => {
await sendMessage();
textareaElement.current?.focus();
}}
>
<SendIcon
class={tw`h-[1.25rem] w-[1.25rem] mr-[0.1rem]`}
class={tw`h-[1.25rem] w-[1.25rem] mr-[0.1rem] mobile:hidden`}
style={{
stroke: PrimaryTextColor,
fill: "none",

16
UI/message-panel.tsx
View File

@ -143,7 +143,7 @@ export class MessagePanel extends Component<DirectMessagePanelProps> {
{!props.rightPanelModel.show
? (
<button
class={tw`absolute z-10 w-6 h-6 transition-transform duration-100 ease-in-out right-4 top-4${
class={tw`absolute z-10 w-6 h-6 transition-transform duration-100 ease-in-out right-4 mobile:right-0 top-4${
props.rightPanelModel.show ? " rotate-180" : ""
} ${IconButtonClass}`}
onClick={() => {
@ -266,7 +266,7 @@ export class MessageList extends Component<MessageListProps, MessageListState> {
});
}
}}
class={tw`${IconButtonClass} fixed z-10 bottom-8 right-4 h-10 w-10 rotate-[-90deg] bg-[#42464D] hover:bg-[#2F3136]`}
class={tw`${IconButtonClass} mobile:hidden fixed z-10 bottom-8 right-4 h-10 w-10 rotate-[-90deg] bg-[#42464D] hover:bg-[#2F3136]`}
>
<LeftArrowIcon
class={tw`w-6 h-6`}
@ -276,7 +276,7 @@ export class MessageList extends Component<MessageListProps, MessageListState> {
/>
</button>
<ul
class={tw`w-full h-full overflow-y-auto overflow-x-hidden py-9 px-2 flex flex-col-reverse`}
class={tw`w-full h-full overflow-y-auto overflow-x-hidden py-9 mobile:py-2 px-2 mobile:px-0 flex flex-col-reverse`}
ref={this.messagesULElement}
onScroll={this.onScroll}
>
@ -306,7 +306,7 @@ function MessageBoxGroup(props: {
const rows = [];
rows.push(
<li
class={tw`px-4 hover:bg-[#32353B] w-full max-w-full flex items-start pr-8 group relative`}
class={tw`px-4 hover:bg-[#32353B] w-full max-w-full flex items-start pr-8 mobile:pr-4 group relative`}
>
{MessageActions(first_group, props.emit)}
<Avatar
@ -333,7 +333,7 @@ function MessageBoxGroup(props: {
first_group.created_at,
)}
<pre
class={tw`text-[#DCDDDE] whitespace-pre-wrap break-words font-roboto`}
class={tw`text-[#DCDDDE] whitespace-pre-wrap break-words font-roboto mobile:text-sm`}
>
{ParseMessageContent(
first_group,
@ -363,7 +363,7 @@ function MessageBoxGroup(props: {
}}
>
<pre
class={tw`text-[#DCDDDE] whitespace-pre-wrap break-words font-roboto`}
class={tw`text-[#DCDDDE] whitespace-pre-wrap break-words font-roboto mobile:text-sm`}
>
{ParseMessageContent(
msg,
@ -447,10 +447,10 @@ export function NameAndTime(
return (
<p class={tw`overflow-hidden flex`}>
<p class={tw`text-[#FFFFFF] text-[0.9rem] truncate`}>
<p class={tw`text-[#FFFFFF] text-[0.9rem] truncate mobile:hidden`}>
{show}
</p>
<p class={tw`text-[#A3A6AA] ml-4 text-[0.8rem] whitespace-nowrap`}>
<p class={tw`text-[#A3A6AA] ml-4 text-[0.8rem] whitespace-nowrap mobile:ml-0 mobile:text-xs`}>
{created_at.toLocaleString()}
</p>
</p>

2
UI/nav.tsx
View File

@ -61,7 +61,7 @@ export class NavBar extends Component<Props, State> {
tw`rounded-lg w-10 h-10 ${
active ? `bg-[${SecondaryBackgroundColor}]` : ""
} hover:bg-[${SecondaryBackgroundColor}] ${CenterClass} ${NoOutlineClass}`,
mobileContainer: tw`h-16 flex justify-evenly bg-[${PrimaryBackgroundColor}] items-center`,
mobileContainer: tw`h-[4.5rem] flex justify-evenly bg-[${PrimaryBackgroundColor}] items-start pt-2`,
};
myProfile: ProfileData | undefined;