jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui): session list country flag alignment, city trim

Browse source
This commit is contained in:
Shekar Siri 2023-06-22 15:36:01 +02:00
parent cad95b452f
commit 037366e9e7
3 changed files with 11 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/shared/SessionItem/SessionItem.tsx
View file

@ -222,7 +222,7 @@ function SessionItem(props: RouteComponentProps & Props) {
</div>
<div style={{ width: '30%' }} className="px-2 flex flex-col justify-between">
<div style={{ height: '21px' }}>
<CountryFlag userCity={userCity} userState={userState} country={userCountry} style={{ paddingTop: '4px' }} label />
<CountryFlag userCity={userCity} userState={userState} country={userCountry} label />
</div>
<div className="color-gray-medium flex items-center py-1">
<span className="capitalize" style={{ maxWidth: '70px' }}>

11
frontend/app/components/ui/CountryFlag/CountryFlag.js
View file

@ -1,6 +1,6 @@
import React from 'react';
import cn from 'classnames';
import { Icon } from 'UI';
import { Icon, TextEllipsis } from 'UI';
const CountryFlag = ({
userCity = '',
@ -28,7 +28,14 @@ const CountryFlag = ({
</div>
</div>
)}
{userCity && <span className="mx-1">{userCity}</span>}
{userCity && (
<span className="mx-1">
<TextEllipsis
text={userCity}
maxWidth="150px"
/>
</span>
)}
</div>
);
};

2
frontend/app/components/ui/TextEllipsis/TextEllipsis.js
View file

@ -1,7 +1,7 @@
import React from 'react';
import { useState, useRef, useEffect, forwardRef } from 'react';
import cn from 'classnames';
import { Tooltip } from 'UI';
import { Tooltip } from 'antd';
import styles from './textEllipsis.module.css';
/** calculates text width in pixels