pass in page title, fit in mobile

This commit is contained in:
Víctor Losada Hernández
2026-10-10 21:58:54 +02:00
parent da069426e0
commit ef161b1232
11 changed files with 43 additions and 33 deletions
+2 -2
View File
@@ -81,8 +81,8 @@ const Homebrew = (props)=>{
<Route path='/user/:username' element={<WithRoute el={UserPage} brews={brews} />} />
<Route path='/vault' element={<WithRoute el={VaultPage}/>}/>
<Route path='/changelog' element={<WithRoute el={SharePage} brew={brew} pageName={'changelog'} title={'Changelog: version ' + version} disableMeta={true} />} />
<Route path='/faq' element={<WithRoute el={SharePage} brew={brew} disableMeta={true} />} />
<Route path='/migrate' element={<WithRoute el={SharePage} brew={brew} disableMeta={true} />} />
<Route path='/faq' element={<WithRoute el={SharePage} brew={brew} pageName={'faq'} title={'Frequent Asked Questions'} disableMeta={true} />} />
<Route path='/migrate' element={<WithRoute el={SharePage} brew={brew} pageName={'migrate'} title={'Converting Documents'} disableMeta={true} />} />
<Route path='/account' element={<WithRoute el={AccountPage} brew={brew} accountDetails={brew.accountDetails} />} />
<Route path='/legacy' element={<WithRoute el={HomePage} brew={brew} />} />
<Route path='/error' element={<WithRoute el={ErrorPage} brew={brew} />} />
+2 -2
View File
@@ -44,9 +44,9 @@ const Nav = {
}
},
header: ({span, className, children, ...props})=>{
return <li className={cx([`navItem header`, className])} no-dismiss='true'>
return <span className={cx([`navItem header`, className])} no-dismiss='true'>
{children}
</li>;
</span>;
},
};
+1 -2
View File
@@ -18,7 +18,6 @@ const Navbar = ({ children, brew, pageName, editor, title, currentPage, props })
const mod = isMac ? '⌘' : 'Ctrl';
const isBrew = !!brew && (brew.shareId || pageName === 'homePage' || pageName === 'newPage');
const account = global.account;
const generalPage = pageName === 'vaultPage' || pageName === 'changelog' || pageName === 'faq' || pageName === 'migrate';
const navSlots = React.Children.toArray(children).reduce((slots, child) => {
if (!React.isValidElement(child)) return slots;
@@ -162,7 +161,7 @@ const Navbar = ({ children, brew, pageName, editor, title, currentPage, props })
</Dropdown>
{navSlots.menu}
</ul>
{generalPage && <Nav.item className='brewTitle'>{title}</Nav.item>}
{pageName !== 'sharePage' && <Nav.header className='brewTitle'>{title}</Nav.header>}
<MetadataNavItem brew={brew} pageName={pageName}></MetadataNavItem>
<ul>
<Dropdown groupName={account.username} customTrigger={<>{account.username}</>} icon={null} key={account.username}>
+27 -20
View File
@@ -31,17 +31,19 @@
padding: 0;
}
&.brewTitle {
display: block;
width: 100%;
max-width: none;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
font-weight: 800;
color: white;
text-align: center;
text-transform: initial;
white-space: nowrap;
background-color: transparent;
letter-spacing: 1px;
@media screen and (max-width: 800px) {
display: none;
}
}
&.metadata {
position: relative;
@@ -184,6 +186,10 @@
height: 100%;
width: 100%;
padding: 5px 10px;
@media screen and (max-width: 800px) {
padding: 5px;
}
}
a {
color: inherit;
@@ -204,7 +210,7 @@
&:has(ul):not(:has(ul :is(button, a):not(:disabled))) {
color: grey; //faux disabled if all buttons are disabled
}
&:hover {
&:not(.header):hover {
background: #484848;
}
&:has(> i, > kbd, > img) {
@@ -221,6 +227,9 @@
padding: 2px 5px;
border-radius: 5px;
}
&.header {
cursor: default;
}
&.recent ul {
position: relative;
@@ -230,6 +239,19 @@
gap: 5px;
height: 2.7em;
isolation: isolate;
&.header {
display: block;
padding: 5px 0;
color: #bbbbbb;
border-top: 1px solid #888888;
&:nth-of-type(1) {
background-color: darken(@teal, 20%);
}
&:nth-of-type(2) {
background-color: darken(@purple, 30%);
}
}
.clear {
width: 55px;
padding: 0;
@@ -253,21 +275,6 @@
color: #888888;
z-index: -1;
}
&.header {
box-sizing: border-box;
display: block;
padding: 5px 0;
color: #bbbbbb;
text-align: center;
background-color: #333333;
border-top: 1px solid #888888;
&:nth-of-type(1) {
background-color: darken(@teal, 20%);
}
&:nth-of-type(2) {
background-color: darken(@purple, 30%);
}
}
}
}
@@ -39,6 +39,7 @@ const EditorPage = (props)=>{
save,
onSaveSuccess,
pageName,
pageTitle,
showEditorButtons,
userThemes = {}
} = props;
@@ -375,7 +376,7 @@ const EditorPage = (props)=>{
<div className= {`${pageName} sitePage`}>
<Meta name='google-site-verification' content='NwnAQSSJZzAT7N-p5MY6ydQ7Njm67dtbu73ZSyE5Fy4' />
{(pageName == 'editPage') && <Meta name='robots' content='noindex, nofollow' />}
<Navbar brew={currentBrew} editor={editorRef.current} pageName={pageName} account={global.account} currentPage={currentBrewRendererPageNum}>
<Navbar brew={currentBrew} editor={editorRef.current} pageName={pageName} title={pageTitle} account={global.account} currentPage={currentBrewRendererPageNum}>
<Navbar.File>
<Nav.item
className='save'
@@ -8,7 +8,7 @@ const UIPage = createReactClass({
render : function(){
return <div className='uiPage sitePage'>
<Navbar pageName={this.props.pageName} />
<Navbar pageName={this.props.pageName} title={this.props.title} />
<div className='content'>
{this.props.children}
</div>
+2 -1
View File
@@ -1,7 +1,7 @@
import React from 'react';
import request from '../../utils/request-middleware.js';
import _ from 'lodash';
import EditorPage from '../basePages/editPage/editorPage.jsx';
import EditorPage from '../basePages/editorPage/editorPage.jsx';
import { DEFAULT_BREW_LOAD } from '../../../../server/brewDefaults.js';
// Page specific imports
@@ -49,6 +49,7 @@ const EditPage = (props)=>{
showFloatingButtons = {false}
showEditorButtons = {true}
pageName = {'editPage'}
pageTitle = {props.brew.title}
brew = {props.brew}
userThemes = {props.userThemes}
save = {save}
@@ -9,7 +9,7 @@ const ErrorPage = ({ brew })=>{
const errorText = ErrorIndex({ brew })[brew.HBErrorCode.toString()] || '';
return (
<UIPage brew={{ title: 'Crit Fail!' }} pageName='errorPage'>
<UIPage brew={{ title: 'Crit Fail!' }} pageName='errorPage' title={`Error ${brew?.status || '000'}`}>
<div className='dataGroup'>
<div className='errorTitle'>
<h1>{`Error ${brew?.status || '000'}`}</h1>
+2 -1
View File
@@ -3,7 +3,7 @@ import './homePage.less';
import React from 'react';
import request from '../../utils/request-middleware.js';
import _ from 'lodash';
import EditorPage from '../basePages/editPage/editorPage.jsx';
import EditorPage from '../basePages/editorPage/editorPage.jsx';
import { DEFAULT_BREW } from '../../../../server/brewDefaults.js';
const HomePage =(props)=>{
@@ -32,6 +32,7 @@ const HomePage =(props)=>{
showFloatingButtons = {true}
showEditorButtons = {false}
pageName = {'homePage'}
pageTitle = {'The Homebrewery'}
brew = {props.brew}
userThemes = {{}}
save = {save}
+2 -1
View File
@@ -1,7 +1,7 @@
import React from 'react';
import request from '../../utils/request-middleware.js';
import _ from 'lodash';
import EditorPage from '../basePages/editPage/editorPage.jsx';
import EditorPage from '../basePages/editorPage/editorPage.jsx';
import { DEFAULT_BREW } from '../../../../server/brewDefaults.js';
const NewPage = (props)=>{
@@ -30,6 +30,7 @@ const NewPage = (props)=>{
showFloatingButtons = {false}
showEditorButtons = {true}
pageName = {'newPage'}
pageTitle = {'Sandbox'}
brew = {props.brew}
userThemes = {props.userThemes}
save = {save}
+1 -1
View File
@@ -34,7 +34,7 @@ const UserPage = (props)=>{
};
return (
<ListPage pageName={pageName} brewCollection={brewCollection} query={props.query} reportError={(err)=>setError(err)} />
<ListPage pageName={'userPage'} brewCollection={brewCollection} query={props.query} reportError={(err)=>setError(err)} />
);
};