gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(client): use picture and source to display correct logo (#35939)

Browse Source
This commit is contained in:
Oliver Eyton-Williams
2019-05-05 21:44:46 +02:00
committed by Valeriy
parent cc6f234228
commit a24ecfbd85
2 changed files with 9 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
client/src/components/Header/components/NavLogo.js
View File

@ -1,28 +1,19 @@
import React from 'react'; import React from 'react';
import Media from 'react-responsive';
const fCClogo = 'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg'; const fCClogo = 'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg';
const fCCglyph = 'https://s3.amazonaws.com/freecodecamp/FFCFire.png'; const fCCglyph = 'https://s3.amazonaws.com/freecodecamp/FFCFire.png';
function NavLogo() { function NavLogo() {
return ( return (
<Media query='(min-width: 735px)'> <picture>
{matches => <source media='(max-width: 734px)' srcSet={fCCglyph} />
matches ? ( <source media='(min-width: 735px)' srcSet={fCClogo} />
<img <img
alt='learn to code at freeCodeCamp logo' alt='learn to code at freeCodeCamp logo'
className='nav-logo logo' className='nav-logo'
src={fCClogo}
/>
) : (
<img
alt='learn to code at freeCodeCamp logo'
className='nav-logo logo-glyph'
src={fCCglyph} src={fCCglyph}
/> />
) </picture>
}
</Media>
); );
} }

17
client/src/components/Header/header.css
View File

@ -127,28 +127,11 @@ header {
/* Navbar logo */ /* Navbar logo */
.logo-glyph {
height: 30px;
width: auto;
}
.logo {
display: none;
}
.logoContainer { .logoContainer {
margin-right: 10px; margin-right: 10px;
} }
@media (min-width: 735px) { @media (min-width: 735px) {
.logo-glyph {
display: none;
}
.logo {
display: block;
}
.logoContainer { .logoContainer {
margin-right: 50px; margin-right: 50px;
width: 25%; width: 25%;