Add an explanation banner on switching to single column mode (#26019)
This commit is contained in:
parent
cb9f96036c
commit
40b69cc1cd
4 changed files with 29 additions and 5 deletions
|
@ -31,6 +31,7 @@ const messages = defineMessages({
|
|||
about: { id: 'navigation_bar.about', defaultMessage: 'About' },
|
||||
search: { id: 'navigation_bar.search', defaultMessage: 'Search' },
|
||||
advancedInterface: { id: 'navigation_bar.advanced_interface', defaultMessage: 'Open in advanced web interface' },
|
||||
openedInClassicInterface: { id: 'navigation_bar.opened_in_classic_interface', defaultMessage: 'Posts, accounts, and other specific pages are opened by default in the classic web interface.' },
|
||||
});
|
||||
|
||||
class NavigationPanel extends Component {
|
||||
|
@ -57,12 +58,17 @@ class NavigationPanel extends Component {
|
|||
<div className='navigation-panel__logo'>
|
||||
<Link to='/' className='column-link column-link--logo'><WordmarkLogo /></Link>
|
||||
|
||||
{transientSingleColumn && (
|
||||
<a href={`/deck${location.pathname}`} className='button button--block'>
|
||||
{transientSingleColumn ? (
|
||||
<div class='switch-to-advanced'>
|
||||
{intl.formatMessage(messages.openedInClassicInterface)}
|
||||
{" "}
|
||||
<a href={`/deck${location.pathname}`} class='switch-to-advanced__toggle'>
|
||||
{intl.formatMessage(messages.advancedInterface)}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<hr />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{signedIn && (
|
||||
|
|
|
@ -411,6 +411,7 @@
|
|||
"navigation_bar.lists": "Lists",
|
||||
"navigation_bar.logout": "Logout",
|
||||
"navigation_bar.mutes": "Muted users",
|
||||
"navigation_bar.opened_in_classic_interface": "Posts, accounts, and other specific pages are opened by default in the classic web interface.",
|
||||
"navigation_bar.personal": "Personal",
|
||||
"navigation_bar.pins": "Pinned posts",
|
||||
"navigation_bar.preferences": "Preferences",
|
||||
|
|
|
@ -409,6 +409,7 @@
|
|||
"navigation_bar.lists": "Listes",
|
||||
"navigation_bar.logout": "Déconnexion",
|
||||
"navigation_bar.mutes": "Comptes masqués",
|
||||
"navigation_bar.opened_in_classic_interface": "Les messages, les comptes et les pages spécifiques sont ouvertes dans l’interface classique.",
|
||||
"navigation_bar.personal": "Personnel",
|
||||
"navigation_bar.pins": "Messages épinglés",
|
||||
"navigation_bar.preferences": "Préférences",
|
||||
|
|
|
@ -3270,6 +3270,22 @@ $ui-header-height: 55px;
|
|||
border-color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
.switch-to-advanced {
|
||||
color: $classic-primary-color;
|
||||
background-color: $classic-base-color;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
|
||||
.switch-to-advanced__toggle {
|
||||
color: $ui-button-tertiary-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.column-link {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
color: $primary-text-color;
|
||||
|
|
Loading…
Reference in a new issue