Skip to content

Commit 1fc3be3

Browse files
angraveangrave
authored
Merge pull request #195 from scribear/sankalpUI
mobile UI fixes
2 parents d8e20de + 4b14eae commit 1fc3be3

11 files changed

Lines changed: 87 additions & 11 deletions

File tree

‎build/favicon.ico‎

-3.78 KB
Binary file not shown.

‎src/components/navbars/appNavBar.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -62,27 +62,27 @@ export default function AppNavBar(props) {
6262
// if (typeof accent_color === 'undefined') {
6363
// accent_color = "#3f51bf";
6464
// dispatch({type: 'CHANGE_SECONDARY_THEME', payload: accent_color});
65-
// }
66-
// console.log("Accent Color: ", accent_color);
65+
// }<Toolbar style={{ backgroundColor: accent_color, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', padding: '0 10px', }}>
66+
// console.log("Accent Color: ", accent_color); <Toolbar style={{ backgroundColor: accent_color, width: '100%', maxHeight: '10vh', paddingLeft: '10px' }}>
6767

6868
return (
6969
<AppBar position="fixed" id="topbar-wrapper" onMouseOut={changeVisibility} onMouseOver={changeVisibilityOver} style={{ transition: '0.6s' }}>
7070
<Grid container spacing={2} alignItems="center" >
71-
<Toolbar style={{ backgroundColor: accent_color, width: '100%', maxHeight: '10vh', paddingLeft: '20px' }}>
71+
<Toolbar style={{ backgroundColor: accent_color, width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', padding: '10px' }}>
7272
<Grid item xs={6}>
73-
<Grid container spacing={1} alignItems="center" >
73+
<Grid container spacing={1} alignItems="center" wrap="wrap">
7474
<Grid item>
7575
<IconButton onClick={toggleDrawer(true)}>
7676
<ThemeProvider theme={myTheme}>
7777
<MenuIcon color="primary" fontSize="large"/>
7878
</ThemeProvider>
7979
</IconButton>
8080
<Drawer disableEnforceFocus open={state.isOpen} onClose={toggleDrawer(false)}>
81-
<SideBar isRecording={props.isRecording} />
81+
<SideBar isRecording={props.isRecording} onClose={toggleDrawer(false)}/>
8282
</Drawer>
8383
</Grid>
8484
<Grid item>
85-
<h2 style={{ textAlign: "left", paddingLeft: '20px' }}>ScribeAR</h2>
85+
<h3 style={{ textAlign: "left", paddingLeft: '10px' }}>ScribeAR</h3>
8686
</Grid>
8787
</Grid>
8888
</Grid>

‎src/components/navbars/sidebar/captions/displayRows.tsx‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Slider, { SliderThumb } from '@mui/material/Slider';
44
import { Grid, makeStyles, Typography } from '../../../../muiImports'
55
import { RootState, DisplayStatus } from '../../../../react-redux&middleware/redux/typesImports';
66
import { useDispatch, useSelector } from 'react-redux';
7-
const useStyles = makeStyles({
7+
/*const useStyles = makeStyles({
88
slider: {
99
width: '16vw',
1010
marginLeft: '2vw',
@@ -13,8 +13,32 @@ const useStyles = makeStyles({
1313
width: '2.5vw',
1414
marginLeft: '1vw'
1515
}
16+
});*/
17+
18+
const useStyles = makeStyles({
19+
slider: {
20+
width: '60%',
21+
margin: 'auto',
22+
/*
23+
// Responsive styles using media queries
24+
'@media (min-width: 600px)': { // Small screens
25+
width: '30vw',
26+
},
27+
'@media (min-width: 960px)': { // Medium screens
28+
width: '16vw',
29+
},
30+
'@media (min-width: 1280px)': { // Large screens
31+
width: '16vw',
32+
},*/
33+
},
34+
textBox: {
35+
width: '90%',
36+
margin: '0 auto',
37+
},
1638
});
1739

40+
41+
1842
export default function PlusMinus(props) {
1943
const dispatch = useDispatch()
2044
const lines = useSelector((state: RootState) => {

‎src/components/navbars/sidebar/captions/lineHeight.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Slider, { SliderThumb } from '@mui/material/Slider';
44
import { Grid, makeStyles, Typography } from '../../../../muiImports'
55
import { RootState, DisplayStatus } from '../../../../react-redux&middleware/redux/typesImports';
66
import { useDispatch, useSelector } from 'react-redux';
7+
/*
78
const useStyles = makeStyles({
89
slider: {
910
width: '16vw',
@@ -13,6 +14,17 @@ const useStyles = makeStyles({
1314
width: '2.5vw',
1415
marginLeft: '1vw'
1516
}
17+
});*/
18+
19+
const useStyles = makeStyles({
20+
slider: {
21+
width: '60%',
22+
margin: 'auto',
23+
},
24+
textBox: {
25+
width: '90%',
26+
margin: '0 auto',
27+
},
1628
});
1729

1830
export default function PlusMinus(props) {

‎src/components/navbars/sidebar/captions/position.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Slider, { SliderThumb } from '@mui/material/Slider';
44
import { Grid, makeStyles, Typography } from '../../../../muiImports'
55
import { RootState, DisplayStatus } from '../../../../react-redux&middleware/redux/typesImports';
66
import { useDispatch, useSelector } from 'react-redux';
7+
/*
78
const useStyles = makeStyles({
89
slider: {
910
width: '16vw',
@@ -13,6 +14,17 @@ const useStyles = makeStyles({
1314
width: '2.5vw',
1415
marginLeft: '1vw'
1516
}
17+
});*/
18+
19+
const useStyles = makeStyles({
20+
slider: {
21+
width: '60%',
22+
margin: 'auto',
23+
},
24+
textBox: {
25+
width: '90%',
26+
margin: '0 auto',
27+
},
1628
});
1729

1830
export default function PlusMinus(props) {

‎src/components/navbars/sidebar/captions/textSize.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Slider, { SliderThumb } from '@mui/material/Slider';
44
import { Grid, makeStyles, Typography } from '../../../../muiImports'
55
import { RootState, DisplayStatus } from '../../../../react-redux&middleware/redux/typesImports';
66
import { useDispatch, useSelector } from 'react-redux';
7+
/*
78
const useStyles = makeStyles({
89
slider: {
910
width: '16vw',
@@ -13,6 +14,17 @@ const useStyles = makeStyles({
1314
width: '2.5vw',
1415
marginLeft: '1vw'
1516
}
17+
});*/
18+
19+
const useStyles = makeStyles({
20+
slider: {
21+
width: '60%',
22+
margin: 'auto',
23+
},
24+
textBox: {
25+
width: '90%',
26+
margin: '0 auto',
27+
},
1628
});
1729

1830
export default function PlusMinus(props) {

‎src/components/navbars/sidebar/captions/wordSpacing.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Slider, { SliderThumb } from '@mui/material/Slider';
44
import { Grid, makeStyles, Typography } from '../../../../muiImports'
55
import { RootState, DisplayStatus } from '../../../../react-redux&middleware/redux/typesImports';
66
import { useDispatch, useSelector } from 'react-redux';
7+
/*
78
const useStyles = makeStyles({
89
slider: {
910
width: '16vw',
@@ -13,6 +14,17 @@ const useStyles = makeStyles({
1314
width: '2.5vw',
1415
marginLeft: '1vw'
1516
}
17+
});*/
18+
19+
const useStyles = makeStyles({
20+
slider: {
21+
width: '60%',
22+
margin: 'auto',
23+
},
24+
textBox: {
25+
width: '90%',
26+
margin: '0 auto',
27+
},
1628
});
1729

1830
export default function PlusMinus(props) {

‎src/components/navbars/sidebar/phrase/phraseListAdd.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -480,7 +480,7 @@ export default function CustomizedMenus() {
480480
return (
481481
<div>
482482
<List
483-
sx={{ width: '20vw', bgcolor: 'background.paper' }}
483+
sx={{ width: { xs: '90vw', sm: '50vw', md: '30vw', lg: '20vw' }, bgcolor: 'background.paper' }}
484484
component="div"
485485
aria-labelledby="nested-list-subheader"
486486
>

‎src/components/navbars/sidebar/sidebar.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as React from 'react';
22
import { IconButton, ListItemText, ListItem, ListItemIcon, ExpandMore, ExpandLess, List, EqualizerIcon, DetailsIcon, Divider, SubtitlesIcon } from '../../../muiImports'
3+
import CloseIcon from '@mui/icons-material/Close';
34
import DisplayMenu from './display/menu';
45
import LangMenu from './language/menu';
56
import PhraseMenu from './phrase/menu';
@@ -40,8 +41,11 @@ export default function SideBar(props) {
4041

4142
return (
4243
<div>
44+
<IconButton onClick={props.onClose} style={{position: "absolute", top: "10px", right: "10px", zIndex: 1000, }}>
45+
<CloseIcon />
46+
</IconButton>
4347
<h2 className="d-table-cell tar2" style={{textAlign: "left", paddingLeft: "20px", transition:'.6s'}}>Menu</h2>
44-
<List sx={{ width: '20vw', bgcolor: 'background.paper' }} component="nav" aria-labelledby="nested-list-subheader" >
48+
<List sx={{ width: { xs: '100vw', sm: '50vw', md: '40vw', lg: '30vw' }, bgcolor: 'background.paper' }} component="nav" aria-labelledby="nested-list-subheader" >
4549
<LangMenu open={state.lang} isRecording={props.isRecording} listItemHeader={listItemHeader} />
4650
<Divider/>
4751

‎src/components/navbars/topbar/apiDropdown.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export default function ApiDropdown(props) {
3535
PaperProps={{
3636
elevation: 0,
3737
sx: {
38-
width: '20vw',
38+
width: { xs: '80vw', sm: '40vw', md: '30vw' },
3939
overflow: 'invisible',
4040
filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
4141
mt: 1.5,

0 commit comments

Comments
 (0)