nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 14:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix gift tags

Browse Source
This commit is contained in:
Bill 2022-03-16 18:12:17 -04:00
parent cecac30562
commit 8b2d9dc098
2 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/common/index.scss
View File

@ -132,9 +132,6 @@
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;
max-width: 100%; max-width: 100%;
height: 90px;
min-height: 90px;
max-height: 90px;
border: none; border: none;
resize: none; resize: none;
outline: none; outline: none;

20
src/common/layout/LayoutGiftTagView.tsx
View File

@ -1,4 +1,5 @@
import { FC } from 'react'; import { FC } from 'react';
import { Column, Flex, Text } from '..';
import { LocalizeText } from '../../api'; import { LocalizeText } from '../../api';
import { LayoutAvatarImageView } from './LayoutAvatarImageView'; import { LayoutAvatarImageView } from './LayoutAvatarImageView';
@ -16,18 +17,23 @@ export const LayoutGiftTagView: FC<LayoutGiftTagViewProps> = props =>
const { figure = null, userName = null, message = null, editable = false, onChange = null } = props; const { figure = null, userName = null, message = null, editable = false, onChange = null } = props;
return ( return (
<div className="nitro-gift-card d-flex text-black"> <Flex overflow="hidden" className="nitro-gift-card text-black">
<div className="d-flex align-items-center justify-content-center gift-face flex-shrink-0"> <div className="d-flex align-items-center justify-content-center gift-face flex-shrink-0">
{ !userName && <div className="gift-incognito"></div> } { !userName && <div className="gift-incognito"></div> }
{ figure && <div className="gift-avatar"> { figure && <div className="gift-avatar">
<LayoutAvatarImageView figure={ figure } direction={ 2 } headOnly={ true } /> <LayoutAvatarImageView figure={ figure } direction={ 2 } headOnly={ true } />
</div> } </div> }
</div> </div>
<div className="d-flex flex-column w-100 pt-4 pb-4 pe-4 ps-3"> <Flex overflow="hidden" className="w-100 pt-4 pb-4 pe-4 ps-3">
{ !editable && <div className="gift-message">{ message }</div> } <Column grow overflow="auto" justifyContent="between">
{ editable && onChange && <textarea className="gift-message" maxLength={ 140 } value={ message } onChange={ (e) => onChange(e.target.value) } placeholder={ LocalizeText('catalog.gift_wrapping_new.message_hint') }></textarea> } { !editable &&
{ userName && <div className="mt-auto text-end fst-italic">{ LocalizeText('catalog.gift_wrapping_new.message_from', ['name'], [userName]) }</div> } <Text textBreak className="gift-message">{ message }</Text> }
</div> { editable && (onChange !== null) &&
</div> <textarea className="gift-message h-100" maxLength={ 140 } value={ message } onChange={ (e) => onChange(e.target.value) } placeholder={ LocalizeText('catalog.gift_wrapping_new.message_hint') }></textarea> }
{ userName &&
<Text italics textEnd className="pe-1">{ LocalizeText('catalog.gift_wrapping_new.message_from', ['name'], [userName]) }</Text> }
</Column>
</Flex>
</Flex>
); );
}; };