[Glitch] Change logo version in header based on screen size in web UI
Port 6028d047b9
to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
parent
1033598416
commit
38eeed6cbf
|
@ -1,10 +1,15 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import logo from 'mastodon/../images/logo.svg';
|
||||||
|
|
||||||
const Logo = () => (
|
export const WordmarkLogo = () => (
|
||||||
<svg viewBox='0 0 261 66' className='logo' role='img'>
|
<svg viewBox='0 0 261 66' className='logo logo--wordmark' role='img'>
|
||||||
<title>Mastodon</title>
|
<title>Mastodon</title>
|
||||||
<use xlinkHref='#logo-symbol-wordmark' />
|
<use xlinkHref='#logo-symbol-wordmark' />
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
|
|
||||||
export default Logo;
|
export const SymbolLogo = () => (
|
||||||
|
<img src={logo} alt='Mastodon' className='logo logo--icon' />
|
||||||
|
);
|
||||||
|
|
||||||
|
export default WordmarkLogo;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Logo from 'flavours/glitch/components/logo';
|
import { WordmarkLogo, SymbolLogo } from 'flavours/glitch/components/logo';
|
||||||
import { Link, withRouter } from 'react-router-dom';
|
import { Link, withRouter } from 'react-router-dom';
|
||||||
import { FormattedMessage } from 'react-intl';
|
import { FormattedMessage } from 'react-intl';
|
||||||
import { registrationsOpen, me } from 'flavours/glitch/initial_state';
|
import { registrationsOpen, me } from 'flavours/glitch/initial_state';
|
||||||
|
@ -74,7 +74,10 @@ class Header extends React.PureComponent {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='ui__header'>
|
<div className='ui__header'>
|
||||||
<Link to='/' className='ui__header__logo'><Logo /></Link>
|
<Link to='/' className='ui__header__logo'>
|
||||||
|
<WordmarkLogo />
|
||||||
|
<SymbolLogo />
|
||||||
|
</Link>
|
||||||
|
|
||||||
<div className='ui__header__links'>
|
<div className='ui__header__links'>
|
||||||
{content}
|
{content}
|
||||||
|
|
|
@ -62,10 +62,9 @@ $ui-header-height: 55px;
|
||||||
height: $ui-header-height;
|
height: $ui-header-height;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 2;
|
z-index: 3;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&__logo {
|
&__logo {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
@ -75,6 +74,20 @@ $ui-header-height: 55px;
|
||||||
height: $ui-header-height - 30px;
|
height: $ui-header-height - 30px;
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.logo--wordmark {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 320px) {
|
||||||
|
.logo--wordmark {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo--icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__links {
|
&__links {
|
||||||
|
|
Loading…
Reference in New Issue