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

fix instrument icon size in mobile view

This commit is contained in:
Nuwan 2023-12-27 18:15:50 +05:30
parent 8e792d1658
commit 06e085fd13
3 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -127,7 +127,7 @@ describe('Friends page with data', () => {
cy.get('[data-testid=paginate-next-page]').should('not.exist');
});
it('show profiles', () => {
it.only('show profiles', () => {
cy.contains('Find New Friends').should('exist');
cy.contains('Update Search').should('exist');
cy.contains('Reset Filters').should('exist');

2
jam-ui/src/components/profile/JKInstrumentIcon.js
View File

@ -6,7 +6,7 @@ function JKInstrumentIcon({instrumentId, instrumentName}) {
() => {
try {
const file = require(`../../icons/instruments/icon_instrument_${instrumentId.replace(/\s+/g, '_')}.svg`);
return <img width="25" src={file} alt={instrumentName} />
return <img width={25} height={25} src={file} alt={instrumentName} />
} catch (error) {
return <FontAwesomeIcon icon="music" size="sm" />
}

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

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { useResponsive, useIsMobile } from '@farfetch/react-context-responsive';
import { useResponsive } from '@farfetch/react-context-responsive';
import JKInstrumentIcon from './JKInstrumentIcon';
const JKPersonInstrumentsList = ({ instruments, showAll, toggleMoreDetails }) => {
@ -15,7 +15,6 @@ const JKPersonInstrumentsList = ({ instruments, showAll, toggleMoreDetails }) =>
const [instrumentsToShow, setInstrumentsToShow] = useState([]);
const { greaterThan } = useResponsive();
const { isMobile } = useIsMobile();
useEffect(() => {
showAll || !greaterThan.xs ? setInstrumentsToShow(instruments) : setInstrumentsToShow(instruments.slice(0, LIMIT));
@ -25,11 +24,13 @@ const JKPersonInstrumentsList = ({ instruments, showAll, toggleMoreDetails }) =>
<div data-testid="instrumentList">
{instrumentsToShow &&
instrumentsToShow.map(instrument => (
<div key={instrument.instrument_id} className="text-nowrap mb-1">
<span className='mr-1'>
<JKInstrumentIcon instrumentId={instrument.instrument_id} instrumentName={instrument.description} />
</span>
<strong>{instrument.description}:</strong> {proficiencies[instrument.proficiency_level]}
<div key={instrument.instrument_id} className="text-nowrap mb-1 d-flex align-items-center">
<div className="mr-1" style={{ width: "15%"}}>
<JKInstrumentIcon instrumentId={instrument.instrument_id} instrumentName={instrument.description} />
</div>
<div>
<strong>{instrument.description}:</strong> {proficiencies[instrument.proficiency_level]}
</div>
</div>
))}
{((!showAll && greaterThan.xs) || (showAll && !greaterThan.xs)) && instruments.length > LIMIT && (