feat: add notice banner, header hiding, fix footer #212

Merged
enes merged 4 commits from 186-header-design into staging 2024-09-19 11:30:46 +00:00
7 changed files with 179 additions and 110 deletions

View File

@ -100,10 +100,10 @@ li {
// - first-child Header height, default body padding, and center content border (10px) and padding (10px) // - first-child Header height, default body padding, and center content border (10px) and padding (10px)
// - others We don't include border and padding and scroll to the top of the image // - others We don't include border and padding and scroll to the top of the image
&:first-child { &:first-child {
scroll-margin-top: $header-height + $body-vertical-padding + 20px; scroll-margin-top: $body-vertical-padding + 20px;
} }
&:not(:first-child) { &:not(:first-child) {
scroll-margin-top: $header-height + $body-vertical-padding; scroll-margin-top: $body-vertical-padding;
} }
} }
@ -148,7 +148,7 @@ li {
justify-content: start; justify-content: start;
align-items: start; align-items: start;
scroll-margin-top: $header-height + $body-vertical-padding; scroll-margin-top: $body-vertical-padding;
} }
[data-dev='true'] { [data-dev='true'] {

View File

@ -36,6 +36,9 @@ import styles from './style.module.scss'
import { setUserRobotImage } from '../../store/userRobotImage/action' import { setUserRobotImage } from '../../store/userRobotImage/action'
import { Container } from '../Container' import { Container } from '../Container'
import { ButtonIcon } from '../ButtonIcon' import { ButtonIcon } from '../ButtonIcon'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faClose } from '@fortawesome/free-solid-svg-icons'
import useMediaQuery from '@mui/material/useMediaQuery'
const metadataController = MetadataController.getInstance() const metadataController = MetadataController.getInstance()
@ -118,125 +121,150 @@ export const AppBar = () => {
} }
const isAuthenticated = authState?.loggedIn === true const isAuthenticated = authState?.loggedIn === true
const matches = useMediaQuery('(max-width:767px)')
const [isBannerVisible, setIsBannerVisible] = useState(true)
const handleBannerHide = () => {
setIsBannerVisible(false)
}
return ( return (
<AppBarMui <>
position="fixed" {isAuthenticated && isBannerVisible && (
className={styles.AppBar} <div className={styles.banner}>
sx={{ <Container>
boxShadow: 'none' <div className={styles.bannerInner}>
}} SIGit is currently Alpha software (available for internal
> testing), use at your own risk!
<Container>
<Toolbar className={styles.toolbar} disableGutters={true}>
<Box className={styles.logoWrapper}>
<img src="/logo.svg" alt="Logo" onClick={() => navigate('/')} />
</Box>
<Box className={styles.rightSideBox}>
{!isAuthenticated && (
<Button <Button
startIcon={<ButtonIcon />} aria-label={`close banner`}
onClick={() => { variant="text"
navigate(appPublicRoutes.nostr) onClick={handleBannerHide}
}}
variant="contained"
> >
LOGIN <FontAwesomeIcon icon={faClose} />
</Button> </Button>
)} </div>
</Container>
</div>
)}
<AppBarMui
position={matches ? 'sticky' : 'static'}
className={styles.AppBar}
sx={{
boxShadow: 'none'
}}
>
<Container>
<Toolbar className={styles.toolbar} disableGutters={true}>
<Box className={styles.logoWrapper}>
<img src="/logo.svg" alt="Logo" onClick={() => navigate('/')} />
</Box>
{isAuthenticated && ( <Box className={styles.rightSideBox}>
<> {!isAuthenticated && (
<Username <Button
username={username} startIcon={<ButtonIcon />}
avatarContent={userAvatar} onClick={() => {
handleClick={handleOpenUserMenu} navigate(appPublicRoutes.nostr)
/>
<Menu
id="menu-appbar"
anchorEl={anchorElUser}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center'
}} }}
keepMounted variant="contained"
transformOrigin={{
vertical: 'top',
horizontal: 'center'
}}
open={!!anchorElUser}
onClose={handleCloseUserMenu}
> >
<MenuItem LOGIN
sx={{ </Button>
justifyContent: 'center', )}
display: { md: 'none' },
fontWeight: 500,
fontSize: '14px',
color: 'var(--text-color)'
}}
>
<Typography variant="h6">{username}</Typography>
</MenuItem>
<MenuItem
onClick={handleProfile}
sx={{
justifyContent: 'center'
}}
>
Profile
</MenuItem>
<MenuItem
onClick={() => {
setAnchorElUser(null)
navigate(appPrivateRoutes.settings) {isAuthenticated && (
<>
<Username
username={username}
avatarContent={userAvatar}
handleClick={handleOpenUserMenu}
/>
<Menu
id="menu-appbar"
anchorEl={anchorElUser}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center'
}} }}
sx={{ keepMounted
justifyContent: 'center' transformOrigin={{
vertical: 'top',
horizontal: 'center'
}} }}
> open={!!anchorElUser}
Settings onClose={handleCloseUserMenu}
</MenuItem>
<MenuItem
onClick={() => {
setAnchorElUser(null)
navigate(appPublicRoutes.verify)
}}
sx={{
justifyContent: 'center'
}}
>
Verify
</MenuItem>
<Link
to={appPublicRoutes.source}
target="_blank"
style={{ color: 'inherit', textDecoration: 'inherit' }}
> >
<MenuItem <MenuItem
sx={{
justifyContent: 'center',
display: { md: 'none' },
fontWeight: 500,
fontSize: '14px',
color: 'var(--text-color)'
}}
>
<Typography variant="h6">{username}</Typography>
</MenuItem>
<MenuItem
onClick={handleProfile}
sx={{ sx={{
justifyContent: 'center' justifyContent: 'center'
}} }}
> >
Source Profile
</MenuItem> </MenuItem>
</Link> <MenuItem
<MenuItem onClick={() => {
onClick={handleLogout} setAnchorElUser(null)
sx={{
justifyContent: 'center' navigate(appPrivateRoutes.settings)
}} }}
> sx={{
Logout justifyContent: 'center'
</MenuItem> }}
</Menu> >
</> Settings
)} </MenuItem>
</Box> <MenuItem
</Toolbar> onClick={() => {
</Container> setAnchorElUser(null)
</AppBarMui>
navigate(appPublicRoutes.verify)
}}
sx={{
justifyContent: 'center'
}}
>
Verify
</MenuItem>
<Link
to={appPublicRoutes.source}
target="_blank"
style={{ color: 'inherit', textDecoration: 'inherit' }}
>
<MenuItem
sx={{
justifyContent: 'center'
}}
>
Source
</MenuItem>
</Link>
<MenuItem
onClick={handleLogout}
sx={{
justifyContent: 'center'
}}
>
Logout
</MenuItem>
</Menu>
</>
)}
</Box>
</Toolbar>
</Container>
</AppBarMui>
</>
) )
} }

View File

@ -34,3 +34,36 @@
justify-content: flex-end; justify-content: flex-end;
} }
} }
.banner {
color: #ffffff;
background-color: $primary-main;
}
.bannerInner {
display: flex;
gap: 10px;
padding-block: 10px;
z-index: 1;
width: 100%;
justify-content: space-between;
flex-direction: row;
button {
min-width: 44px;
color: inherit;
}
&:hover,
&.active,
&:focus-within {
background: $primary-main;
color: inherit;
button {
color: inherit;
}
}
}

View File

@ -33,7 +33,8 @@ const PdfPageItem = ({
useEffect(() => { useEffect(() => {
if (selectedMark !== null && !!markRefs.current[selectedMark.id]) { if (selectedMark !== null && !!markRefs.current[selectedMark.id]) {
markRefs.current[selectedMark.id]?.scrollIntoView({ markRefs.current[selectedMark.id]?.scrollIntoView({
behavior: 'smooth' behavior: 'smooth',
block: 'center'
}) })
} }
}, [selectedMark]) }, [selectedMark])

View File

@ -42,15 +42,22 @@
.sides { .sides {
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
position: sticky; position: sticky;
top: $header-height + $body-vertical-padding; top: $body-vertical-padding;
} }
> :first-child { > :first-child {
// We want to keep header on smaller devices at all times
max-height: calc( max-height: calc(
100dvh - $header-height - $body-vertical-padding * 2 - $tabs-height 100dvh - $header-height - $body-vertical-padding * 2 - $tabs-height
); );
@media only screen and (min-width: 768px) {
max-height: calc(100dvh - $body-vertical-padding * 2);
}
} }
} }
// Adjust the content scroll on smaller screens
// Make sure only the inner tab is scrolling
.scrollAdjust { .scrollAdjust {
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
max-height: calc( max-height: calc(

View File

@ -3,5 +3,5 @@
.main { .main {
flex-grow: 1; flex-grow: 1;
padding: $header-height + $body-vertical-padding 0 $body-vertical-padding 0; padding: $body-vertical-padding 0 $body-vertical-padding 0;
} }

View File

@ -233,6 +233,7 @@ export const RelaysPage = () => {
))} ))}
</Box> </Box>
)} )}
<Footer />
</Container> </Container>
) )
} }
@ -428,7 +429,6 @@ const RelayItem = ({
)} )}
</List> </List>
</Box> </Box>
<Footer />
</> </>
) )
} }