mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-11 17:15:48 +00:00
Merge pull request #831 from Stremio/fix/user-panel-behind-server-warning
Some checks are pending
Build / build (push) Waiting to run
Some checks are pending
Build / build (push) Waiting to run
Board: Ensure user panel is visible correctly when the server warning is not dismissed
This commit is contained in:
commit
180de13e26
2 changed files with 22 additions and 3 deletions
|
|
@ -12,15 +12,23 @@ const useProfile = require('stremio/common/useProfile');
|
|||
const usePWA = require('stremio/common/usePWA');
|
||||
const useTorrent = require('stremio/common/useTorrent');
|
||||
const { withCoreSuspender } = require('stremio/common/CoreSuspender');
|
||||
const useStreamingServer = require('stremio/common/useStreamingServer');
|
||||
const styles = require('./styles');
|
||||
|
||||
const NavMenuContent = ({ onClick }) => {
|
||||
const { t } = useTranslation();
|
||||
const { core } = useServices();
|
||||
const profile = useProfile();
|
||||
const streamingServer = useStreamingServer();
|
||||
const { createTorrentFromMagnet } = useTorrent();
|
||||
const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
|
||||
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(() => {
|
||||
core.transport.dispatch({
|
||||
action: 'Ctx',
|
||||
|
|
@ -38,7 +46,7 @@ const NavMenuContent = ({ onClick }) => {
|
|||
}
|
||||
}, []);
|
||||
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['avatar-container']}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,9 @@
|
|||
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 {
|
||||
.popup-menu-container {
|
||||
margin-top: 1rem;
|
||||
|
|
@ -14,11 +17,15 @@
|
|||
}
|
||||
.nav-menu-container {
|
||||
width: 22rem;
|
||||
max-height: calc(100vh - var(--horizontal-nav-bar-size) - 1rem);
|
||||
max-height: calc(@height - 1rem);
|
||||
overflow-y: auto;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--modal-background-color);
|
||||
|
||||
&.with-warning {
|
||||
max-height: calc(@height - 6rem);
|
||||
}
|
||||
|
||||
.user-info-container {
|
||||
display: flex;
|
||||
padding: 1.5rem 1rem;
|
||||
|
|
@ -108,6 +115,10 @@
|
|||
|
||||
@media only screen and (max-width: @minimum) {
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue