treehouse
/
mastodon
22
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Change logo version in header based on screen size in web UI (#24707)

lolsob-rspec
Eugen Rochko 2023-04-28 10:00:33 +02:00 committed by GitHub
parent 4438c74c20
commit 4e6e4bcc4d
3 changed files with 29 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/javascript/mastodon/components/logo.jsx
View File

@ -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;

7
app/javascript/mastodon/features/ui/components/header.jsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import Logo from 'mastodon/components/logo'; import { WordmarkLogo, SymbolLogo } from 'mastodon/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 'mastodon/initial_state'; import { registrationsOpen, me } from 'mastodon/initial_state';
@ -73,7 +73,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}

19
app/javascript/styles/mastodon/components.scss
View File

@ -2396,10 +2396,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;
@ -2409,6 +2408,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 {
@ -5131,7 +5144,7 @@ a.status-card.compact:hover {
background: $ui-base-color; background: $ui-base-color;
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
z-index: 2; z-index: 99;
font-size: 13px; font-size: 13px;
padding: 15px 5px; padding: 15px 5px;