antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-02 02:43:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Improve responsive styles for playerbar

Browse source
This commit is contained in:
jeffvli 2023-06-04 16:02:40 -07:00 • committed by Jeff
parent cf43bf360e
commit f380eccc68
5 changed files with 62 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/renderer/features/player/components/center-controls.tsx
View file

@ -43,13 +43,6 @@ interface CenterControlsProps {
playersRef: any;
}
const ControlsContainer = styled.div`
display: flex;
align-items: center;
justify-content: center;
height: 35px;
`;
const ButtonsContainer = styled.div`
display: flex;
gap: 0.5rem;
@ -58,14 +51,20 @@ const ButtonsContainer = styled.div`
const SliderContainer = styled.div`
display: flex;
width: 95%;
height: 20px;
`;
const SliderValueWrapper = styled.div<{ position: 'left' | 'right' }>`
display: flex;
flex: 1;
align-self: center;
align-self: flex-end;
justify-content: center;
max-width: 50px;
text-align: center;
@media (max-width: 768px) {
display: none;
}
`;
const SliderWrapper = styled.div`
@ -75,6 +74,23 @@ const SliderWrapper = styled.div`
height: 100%;
`;
const ControlsContainer = styled.div`
display: flex;
align-items: center;
justify-content: center;
height: 35px;
@media (max-width: 768px) {
${ButtonsContainer} {
gap: 0;
}
${SliderValueWrapper} {
display: none;
}
}
`;
export const CenterControls = ({ playersRef }: CenterControlsProps) => {
const queryClient = useQueryClient();
const [isSeeking, setIsSeeking] = useState(false);