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

feat(ui): remove city from the list and show only in player

Browse source
This commit is contained in:
Shekar Siri 2023-06-08 10:56:07 +02:00
parent 1addb43cb6
commit 00d14c20bb
3 changed files with 7 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js
View file

@ -21,6 +21,7 @@ function UserCard({ className, request, session, width, height, similarSessions,
userDevice,
userCountry,
userCity,
userState,
userBrowserVersion,
userOs,
userOsVersion,
@ -71,7 +72,10 @@ function UserCard({ className, request, session, width, height, similarSessions,
</span>
<span className="mx-1 font-bold text-xl">&#183;</span>
{userCity && (
<span className="mr-2">{userCity},</span>
<span className="mr-1">{userCity},</span>
)}
{userState && (
<span className="mr-1">{userState},</span>
)}
<span>{countries[userCountry]}</span>
<span className="mx-1 font-bold text-xl">&#183;</span>

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

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

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

@ -4,7 +4,7 @@ import { countries } from 'App/constants';
import { Icon } from 'UI';
import stl from './countryFlag.module.css';
const CountryFlag = ({ city = '', country = '', className = '', style = {}, label = false, width = 22, height = 15}) => {
const CountryFlag = ({ country = '', className = '', style = {}, label = false, width = 22, height = 15}) => {
const knownCountry = !!country && country !== 'UN';
const countryFlag = knownCountry ? country.toLowerCase() : '';
const countryName = knownCountry ? countries[ country ] : 'Unknown Country';
@ -19,7 +19,6 @@ const CountryFlag = ({ city = '', country = '', className = '', style = {}, labe
<div className="ml-2 leading-none" style={{ whiteSpace: 'nowrap'}}>Unknown Country</div>
</div>
)}
{ city && <div className={ cn(stl.label, 'ml-2') }>{ city }, </div> }
{ knownCountry && label && <div className={ cn(stl.label, 'ml-1') }>{ countryName }</div> }
</div>
);