mirror of
https://github.com/morpheus65535/bazarr.git
synced 2024-09-20 15:35:58 +08:00
Fix header display issues in mobile device
This commit is contained in:
parent
e5414a4b89
commit
67fe455140
|
@ -23,7 +23,7 @@ import { useIsOffline } from "../@redux/hooks/site";
|
|||
import logo from "../@static/logo64.png";
|
||||
import { SystemApi } from "../apis";
|
||||
import { ActionButton, SearchBar, SearchResult } from "../components";
|
||||
import { useGotoHomepage } from "../utilites";
|
||||
import { useGotoHomepage, useIsMobile } from "../utilites";
|
||||
import "./header.scss";
|
||||
import NotificationCenter from "./Notification";
|
||||
|
||||
|
@ -59,6 +59,8 @@ const Header: FunctionComponent<Props> = () => {
|
|||
|
||||
const offline = useIsOffline();
|
||||
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
const serverActions = useMemo(
|
||||
() => (
|
||||
<Dropdown alignRight>
|
||||
|
@ -114,7 +116,7 @@ const Header: FunctionComponent<Props> = () => {
|
|||
</Button>
|
||||
<Container fluid>
|
||||
<Row noGutters className="flex-grow-1">
|
||||
<Col xs={6} sm={4} className="d-flex align-items-center">
|
||||
<Col xs={4} sm={6} className="d-flex align-items-center">
|
||||
<SearchBar onSearch={SearchItem}></SearchBar>
|
||||
</Col>
|
||||
<Col className="d-flex flex-row align-items-center justify-content-end pr-2">
|
||||
|
@ -133,7 +135,7 @@ const Header: FunctionComponent<Props> = () => {
|
|||
variant="warning"
|
||||
icon={faNetworkWired}
|
||||
>
|
||||
Connecting...
|
||||
{isMobile ? "" : "Connecting..."}
|
||||
</ActionButton>
|
||||
) : (
|
||||
serverActions
|
||||
|
|
|
@ -20,12 +20,11 @@
|
|||
}
|
||||
|
||||
.dropdown-menu {
|
||||
max-width: 20rem;
|
||||
max-height: 85vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
$content-width: 16rem;
|
||||
$content-width: 14rem;
|
||||
|
||||
.notification-center-progress {
|
||||
width: $content-width;
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { useCallback, useMemo, useState } from "react";
|
||||
import { useHistory } from "react-router";
|
||||
import { useDidUpdate } from "rooks";
|
||||
import { useDidUpdate, useMediaMatch } from "rooks";
|
||||
import { getBaseUrl } from ".";
|
||||
|
||||
export function useBaseUrl(slash: boolean = false) {
|
||||
|
@ -28,6 +28,10 @@ export function useHasUpdateInject() {
|
|||
}
|
||||
}
|
||||
|
||||
export function useIsMobile() {
|
||||
return useMediaMatch("(max-width: 576px)");
|
||||
}
|
||||
|
||||
export function useIsArrayExtended(arr: any[]) {
|
||||
const [size, setSize] = useState(arr.length);
|
||||
const [isExtended, setExtended] = useState(arr.length !== 0);
|
||||
|
|
Loading…
Reference in a new issue