seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

UI style fixes in find friends page

This commit is contained in:
Nuwan 2024-10-29 09:04:58 +05:30
parent f2f6b978f8
commit b51207dd3e
4 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
jam-ui/cypress/e2e/friends/friends-page.cy.js
View File

@ -45,7 +45,8 @@ describe('Friends page without data', () => {
}).as("getPeople_empty");
});
it('from_location is unchecked', () => {
//from_location checkbox is hidden for now. so we skip this test for now
it.skip('from_location is unchecked', () => {
cy.visit('/friends');
//default api call with from_location parameter turned off
@ -206,7 +207,7 @@ describe('Friends page with data', () => {
});
describe('in mobile', () => {
describe.only('in mobile', () => {
beforeEach(() => {
cy.viewport('iphone-6');
});

4
jam-ui/src/components/page/JKPeopleFilter.js
View File

@ -345,7 +345,7 @@ function JKPeopleFilter() {
<div className="col-12 col-md-6">
<label className="form-label" htmlFor="instruments">
Instruments{' '}
<JKTooltip title="Use these checkboxes to search for other musicians who play particular instruments. If you do not select any instruments, we search for any/all instruments. If you select multiple instruments, we search for musicians who play any of these instruments." />
<JKTooltip title="Use these list to search for other musicians who play particular instruments. If you do not select any instruments, we search for any/all instruments. If you select multiple instruments, we search for musicians who play any of these instruments." />
</label>
<div className="choices">
<Controller
@ -364,7 +364,7 @@ function JKPeopleFilter() {
</div>
<label className="form-label" htmlFor="genres">
Genres{' '}
<JKTooltip title="Use these checkboxes to search for other musicians who enjoy playing particular musical genres/styles. If you do not select any genres, we search for any/all genres. If you select multiple genres, we search for musicians who play any of these genres." />
<JKTooltip title="Use these list to search for other musicians who enjoy playing particular musical genres/styles. If you do not select any genres, we search for any/all genres. If you select multiple genres, we search for musicians who play any of these genres." />
</label>
<div className="choices">
<Controller

21
jam-ui/src/components/page/JKPerson.js
View File

@ -132,7 +132,6 @@ const JKPerson = props => {
>
<FontAwesomeIcon icon="user" transform="shrink-4 down-1" className="mr-1" />
</JKEditProfileButton>
</td>
</tr>
) : (
@ -171,7 +170,10 @@ const JKPerson = props => {
</Row>
<br />
<Row data-testid="mobBiography">
<Col>{biography}</Col>
<Col>
<h5>{t('person_attributes.about', { ns: 'people' })}</h5>
<div>{biography}</div>
</Col>
</Row>
<br />
@ -198,14 +200,13 @@ const JKPerson = props => {
</a> */}
<JKEditProfileButton
onClick={toggleMoreDetails}
dataTestId="btnMore"
cssClasses="btn btn-primary fs--1 px-2 py-1"
title={t('view_profile', { ns: 'people' })}
>
<FontAwesomeIcon icon="user" transform="shrink-4 down-1" className="mr-1" />
</JKEditProfileButton>
onClick={toggleMoreDetails}
dataTestId="btnMore"
cssClasses="btn btn-primary fs--1 px-2 py-1"
title={t('view_profile', { ns: 'people' })}
>
<FontAwesomeIcon icon="user" transform="shrink-4 down-1" className="mr-1" />
</JKEditProfileButton>
</>
)}
<JKProfileSidePanel user={user} latencyData={latency_data} show={showSidePanel} setShow={setShowSidePanel} />

8
jam-ui/src/components/profile/JKProfileInstrumentsList.js
View File

@ -21,14 +21,14 @@ const JKPersonInstrumentsList = ({ instruments, showIcons, showAll, toggleMoreDe
}, [showAll]);
return (
<div data-testid="instrumentList">
<div data-testid="instrumentList" className='d-flex flex-column'>
{instrumentsToShow &&
instrumentsToShow.map(instrument => (
<div key={instrument.instrument_id} className="text-nowrap mb-1 d-flex align-items-center" data-testid="instrument">
<div className="mr-1">
<div key={instrument.instrument_id} className="mb-1 d-flex" data-testid="instrument">
<div className="mr-1" style={{ flexGrow: 1, flexBasis: '10%'}}>
<JKInstrumentIcon instrumentId={instrument.instrument_id} instrumentName={instrument.description} />
</div>
<div>
<div style={{ flexGrow: 1, flexBasis: '89%'}}>
<strong>{instrument.description}:</strong> {proficiencies[instrument.proficiency_level]}
</div>
</div>