Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 15:52:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #831 from Stremio/fix/user-panel-behind-server-warning
Some checks are pending
Build / build (push) Waiting to run
Details

Browse source 
Board: Ensure user panel is visible correctly when the server warning is not dismissed
This commit is contained in:
Tim 2025-02-18 12:09:15 +01:00 committed by GitHub
commit 180de13e26
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 22 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js
View file

@ -12,15 +12,23 @@ const useProfile = require('stremio/common/useProfile');
const usePWA = require('stremio/common/usePWA'); const usePWA = require('stremio/common/usePWA');
const useTorrent = require('stremio/common/useTorrent'); const useTorrent = require('stremio/common/useTorrent');
const { withCoreSuspender } = require('stremio/common/CoreSuspender'); const { withCoreSuspender } = require('stremio/common/CoreSuspender');
const useStreamingServer = require('stremio/common/useStreamingServer');
const styles = require('./styles'); const styles = require('./styles');
const NavMenuContent = ({ onClick }) => { const NavMenuContent = ({ onClick }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { core } = useServices(); const { core } = useServices();
const profile = useProfile(); const profile = useProfile();
const streamingServer = useStreamingServer();
const { createTorrentFromMagnet } = useTorrent(); const { createTorrentFromMagnet } = useTorrent();
const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen(); const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
const [isIOSPWA, isAndroidPWA] = usePWA(); const [isIOSPWA, isAndroidPWA] = usePWA();
const streamingServerWarningDismissed = React.useMemo(() => {
return streamingServer.settings !== null && streamingServer.settings.type === 'Ready' || (
!isNaN(profile.settings.streamingServerWarningDismissed.getTime()) &&
profile.settings.streamingServerWarningDismissed.getTime() > Date.now()
);
}, [profile.settings, streamingServer.settings]);
const logoutButtonOnClick = React.useCallback(() => { const logoutButtonOnClick = React.useCallback(() => {
core.transport.dispatch({ core.transport.dispatch({
action: 'Ctx', action: 'Ctx',
@ -38,7 +46,7 @@ const NavMenuContent = ({ onClick }) => {
} }
}, []); }, []);
return ( return (
<div className={classnames(styles['nav-menu-container'], 'animation-fade-in')} onClick={onClick}> <div className={classnames(styles['nav-menu-container'], 'animation-fade-in', { [styles['with-warning']]: !streamingServerWarningDismissed } )} onClick={onClick}>
<div className={styles['user-info-container']}> <div className={styles['user-info-container']}>
<div <div
className={styles['avatar-container']} className={styles['avatar-container']}

15
src/components/NavBar/HorizontalNavBar/NavMenu/styles.less
View file

@ -7,6 +7,9 @@
popup-menu-container: menu-container; popup-menu-container: menu-container;
} }
@mobile-height: calc(var(--small-viewport-height) - var(--horizontal-nav-bar-size) - var(--vertical-nav-bar-size));
@height: calc(var(--small-viewport-height) - var(--horizontal-nav-bar-size));
.nav-menu-popup-label { .nav-menu-popup-label {
.popup-menu-container { .popup-menu-container {
margin-top: 1rem; margin-top: 1rem;
@ -14,11 +17,15 @@
} }
.nav-menu-container { .nav-menu-container {
width: 22rem; width: 22rem;
max-height: calc(100vh - var(--horizontal-nav-bar-size) - 1rem); max-height: calc(@height - 1rem);
overflow-y: auto; overflow-y: auto;
border-radius: var(--border-radius); border-radius: var(--border-radius);
background-color: var(--modal-background-color); background-color: var(--modal-background-color);
&.with-warning {
max-height: calc(@height - 6rem);
}
.user-info-container { .user-info-container {
display: flex; display: flex;
padding: 1.5rem 1rem; padding: 1.5rem 1rem;
@ -108,6 +115,10 @@
@media only screen and (max-width: @minimum) { @media only screen and (max-width: @minimum) {
.nav-menu-container { .nav-menu-container {
max-height: calc(100vh - var(--horizontal-nav-bar-size) - var(--vertical-nav-bar-size) - 1rem); max-height: calc(@mobile-height - 1rem);
&.with-warning {
max-height: calc(@mobile-height - 8.5rem);
}
} }
} }