me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[Glitch] Change logo version in header based on screen size in web UI

Browse source 
Port 6028d047b9 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko 2023-04-28 10:00:33 +02:00 committed by Claire
parent 1033598416
commit 38eeed6cbf
3 changed files with 28 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/javascript/flavours/glitch/components/logo.jsx
View file

@ -1,10 +1,15 @@
import React from 'react';
import logo from 'mastodon/../images/logo.svg';
const Logo = () => (
<svg viewBox='0 0 261 66' className='logo' role='img'>
export const WordmarkLogo = () => (
<svg viewBox='0 0 261 66' className='logo logo--wordmark' role='img'>
<title>Mastodon</title>
<use xlinkHref='#logo-symbol-wordmark' />
</svg>
);
export default Logo;
export const SymbolLogo = () => (
<img src={logo} alt='Mastodon' className='logo logo--icon' />
);
export default WordmarkLogo;

7
app/javascript/flavours/glitch/features/ui/components/header.jsx
View file

@ -1,5 +1,5 @@
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 { FormattedMessage } from 'react-intl';
import { registrationsOpen, me } from 'flavours/glitch/initial_state';
@ -74,7 +74,10 @@ class Header extends React.PureComponent {
return (
<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'>
{content}

17
app/javascript/flavours/glitch/styles/components/columns.scss
View file

@ -62,10 +62,9 @@ $ui-header-height: 55px;
height: $ui-header-height;
position: sticky;
top: 0;
z-index: 2;
z-index: 3;
justify-content: space-between;
align-items: center;
overflow: hidden;
&__logo {
display: inline-flex;
@ -75,6 +74,20 @@ $ui-header-height: 55px;
height: $ui-header-height - 30px;
width: auto;
}
.logo--wordmark {
display: none;
}
@media screen and (min-width: 320px) {
.logo--wordmark {
display: block;
}
.logo--icon {
display: none;
}
}
}
&__links {