feat: add notice banner, header hiding, fix footer #212
@ -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'] {
|
||||||
|
@ -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,9 +121,33 @@ 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 (
|
||||||
|
<>
|
||||||
|
{isAuthenticated && isBannerVisible && (
|
||||||
|
<div className={styles.banner}>
|
||||||
|
<Container>
|
||||||
|
<div className={styles.bannerInner}>
|
||||||
|
SIGit is currently Alpha software (available for internal
|
||||||
|
testing), use at your own risk!
|
||||||
|
<Button
|
||||||
|
aria-label={`close banner`}
|
||||||
|
variant="text"
|
||||||
|
onClick={handleBannerHide}
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={faClose} />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<AppBarMui
|
<AppBarMui
|
||||||
position="fixed"
|
position={matches ? 'sticky' : 'static'}
|
||||||
className={styles.AppBar}
|
className={styles.AppBar}
|
||||||
sx={{
|
sx={{
|
||||||
boxShadow: 'none'
|
boxShadow: 'none'
|
||||||
@ -238,5 +265,6 @@ export const AppBar = () => {
|
|||||||
</Toolbar>
|
</Toolbar>
|
||||||
</Container>
|
</Container>
|
||||||
</AppBarMui>
|
</AppBarMui>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -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])
|
||||||
|
@ -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(
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -233,6 +233,7 @@ export const RelaysPage = () => {
|
|||||||
))}
|
))}
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
)}
|
||||||
|
<Footer />
|
||||||
</Container>
|
</Container>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -428,7 +429,6 @@ const RelayItem = ({
|
|||||||
)}
|
)}
|
||||||
</List>
|
</List>
|
||||||
</Box>
|
</Box>
|
||||||
<Footer />
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user