Release to main #216

Merged
b merged 23 commits from staging into main 2024-10-01 20:19:09 +00:00
7 changed files with 179 additions and 110 deletions
Showing only changes of commit 9432e99b3b - Show all commits

View File

@ -100,10 +100,10 @@ li {
// - 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
&:first-child {
scroll-margin-top: $header-height + $body-vertical-padding + 20px;
scroll-margin-top: $body-vertical-padding + 20px;
}
&: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;
align-items: start;
scroll-margin-top: $header-height + $body-vertical-padding;
scroll-margin-top: $body-vertical-padding;
}
[data-dev='true'] {

View File

@ -36,6 +36,9 @@ import styles from './style.module.scss'
import { setUserRobotImage } from '../../store/userRobotImage/action'
import { Container } from '../Container'
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()
@ -118,9 +121,33 @@ export const AppBar = () => {
}
const isAuthenticated = authState?.loggedIn === true
const matches = useMediaQuery('(max-width:767px)')
const [isBannerVisible, setIsBannerVisible] = useState(true)
const handleBannerHide = () => {
setIsBannerVisible(false)
}
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
position="fixed"
position={matches ? 'sticky' : 'static'}
className={styles.AppBar}
sx={{
boxShadow: 'none'
@ -238,5 +265,6 @@ export const AppBar = () => {
</Toolbar>
</Container>
</AppBarMui>
</>
)
}

View File

@ -34,3 +34,36 @@
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(() => {
if (selectedMark !== null && !!markRefs.current[selectedMark.id]) {
markRefs.current[selectedMark.id]?.scrollIntoView({
behavior: 'smooth'
behavior: 'smooth',
block: 'center'
})
}
}, [selectedMark])

View File

@ -42,15 +42,22 @@
.sides {
@media only screen and (min-width: 768px) {
position: sticky;
top: $header-height + $body-vertical-padding;
top: $body-vertical-padding;
}
> :first-child {
// We want to keep header on smaller devices at all times
max-height: calc(
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 {
@media only screen and (max-width: 767px) {
max-height: calc(

View File

@ -3,5 +3,5 @@
.main {
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>
)}
<Footer />
</Container>
)
}
@ -428,7 +429,6 @@ const RelayItem = ({
)}
</List>
</Box>
<Footer />
</>
)
}