demo
Gorji 3 years ago
parent 18214bcf10
commit 42b3ae6602
  1. 2
      public/css/global.css
  2. 14
      src/components/footer/Slider.js
  3. 4
      src/components/footer/progressBar.js
  4. 1
      src/components/sideMenu/Wrapper.tsx
  5. 8
      src/components/style/footerStyle.scss
  6. 148
      src/containers/Footer.tsx
  7. 2
      src/containers/menu/Note.tsx
  8. 1
      src/lib/styles/readerStyle.css

@ -31,7 +31,7 @@ a {
font-weight: 400; font-weight: 400;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
font-size: 1rem; font-size: 1rem;
color: #333; color: #009aa8;
} }
#root { #root {

@ -1,17 +1,17 @@
import React from 'react'; import React from "react";
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from "@material-ui/core/styles";
import Slider from '@material-ui/core/Slider'; import Slider from "@material-ui/core/Slider";
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
root: { root: {
width: 825, width: "100%",
}, },
margin: { margin: {
height: theme.spacing(1), height: theme.spacing(1),
}, },
})); }));
export default function TrackInvertedSlider({CountPage}) { export default function TrackInvertedSlider({ value, max }) {
const classes = useStyles(); const classes = useStyles();
return ( return (
@ -22,8 +22,8 @@ export default function TrackInvertedSlider({CountPage}) {
// value={CountPage} // value={CountPage}
track="inverted" track="inverted"
aria-labelledby="track-inverted-range-slider" aria-labelledby="track-inverted-range-slider"
value={1 - CountPage} value={max - value}
max={100} max={max}
/> />
</div> </div>
); );

@ -3,10 +3,10 @@ import "components/style/slider.scss";
import Slider from "./Slider"; import Slider from "./Slider";
export default function ProgressBar(props) { export default function ProgressBar(props) {
const { CountPage } = props; const { value, max } = props;
return ( return (
<> <>
<Slider CountPage={CountPage} /> <Slider value={value} max={max} />
</> </>
); );
} }

@ -24,6 +24,7 @@ const Container = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: fixed; position: fixed;
padding:5px;
width: 340px; width: 340px;
max-width: 95vw; max-width: 95vw;
height: 100vh; height: 100vh;

@ -18,11 +18,17 @@
padding: 0 5px; padding: 0 5px;
align-items: center; align-items: center;
margin-bottom: 5px; margin-bottom: 5px;
.icon{
width: 25px;
margin-left: 1rem;
}
} }
} }
.nav-footer-item{ .nav-footer-item{
margin-right: 1.5rem; margin: auto;
min-width:80px;
} }
.active{ .active{

@ -62,28 +62,74 @@ const Footer = ({
// } // }
// setToggleIcon(false); // setToggleIcon(false);
// }; // };
let isMobile = window.innerWidth <= 768
return ( return (
<> <nav className="nav-footer"
<Wrapper> // style={{display: isMobile?"":"flex" }}
<nav
style={{
display: "flex",
justifyContent: "space-between",
padding: "0rem 2rem",
width: "100%",
}}
> >
<nav className="footer-item">
<>
<nav className="nav-footer-item" id="toggler"> <nav className="nav-footer-item" id="toggler">
<Item text={`${nowPage} / ${totalPage}`} /> <Item text={`${nowPage} / ${101}`} />
</nav>
<nav style={{ direction: "rtl", flex: 1 }}>
<ProgressBar value={nowPage} max={100} />
</nav>
{isMobile ? (
<>
<nav className="icon" >
<BookCloseIcon onClick={() => onBookOptionChange({
...bookOption,
flow: "scrolled-doc",
})
}
/>
</nav>
<nav className="icon" >
<ScrollVerticalIcon onClick={() => onBookOptionChange({
...bookOption,
flow: "paginated"
})
}
/>
</nav>
</>
) : (
<>
<nav className="icon" >
<BookOpenIcon onClick={() => onBookOptionChange({
...bookOption,
flow: "paginated"
})
}
/>
</nav> </nav>
<nav style={{ direction: "rtl" }}> <nav className="icon" >
<ProgressBar CountPage={CountPage} /> <BookCloseIcon onClick={() => onBookOptionChange({
...bookOption,
flow: "paginated"
})
}
/>
</nav>
<nav className="icon" >
<ScrollVerticalIcon onClick={() => onBookOptionChange({
...bookOption,
flow: "paginated"
})
}
/>
</nav> </nav>
{/* icons in desktop setting */} {/* <nav className="nav-icon">
<nav className="nav-icon">
{window.innerWidth > 768 ? (
<div className="display-icon" style={{ cursor: "pointer" }}> <div className="display-icon" style={{ cursor: "pointer" }}>
<nav <nav
style={{ width: "65px", marginLeft: "1rem", display: "flex" }} style={{ width: "65px", marginLeft: "1rem", display: "flex" }}
@ -94,7 +140,7 @@ const Footer = ({
}} }}
className={`${viewType.spread ? "active" : ''}`} className={`${viewType.spread ? "active" : ''}`}
> >
<BookOpenIcon onClick={() => !scrollToggle ? onClickViewType(true) : null } /> <BookOpenIcon onClick={() => !scrollToggle ? onClickViewType(true) : null} />
</nav> </nav>
<nav <nav
style={{ style={{
@ -104,7 +150,7 @@ const Footer = ({
> >
<BookCloseIcon onClick={() => onClickViewType(false)} /> <BookCloseIcon onClick={() => onClickViewType(false)} />
</nav> </nav>
{scrollToggle ? (
<nav <nav
style={{ width: "65px" }} style={{ width: "65px" }}
onClick={() => setScrollToggle(!scrollToggle)} onClick={() => setScrollToggle(!scrollToggle)}
@ -118,10 +164,10 @@ const Footer = ({
} }
/> />
</nav> </nav>
) : (
<nav <nav
style={{ width: "65px" }} style={{ width: "65px" }}
onClick={() => !viewType.spread ? setScrollToggle(!scrollToggle) :setScrollToggle(false) } onClick={() => !viewType.spread ? setScrollToggle(!scrollToggle) : setScrollToggle(false)}
> >
<ScrollHorizontalIcon <ScrollHorizontalIcon
onClick={() => onClick={() =>
@ -132,75 +178,23 @@ const Footer = ({
} }
/> />
</nav> </nav>
)}
</nav> </nav>
</div> </div>
) : (
""
)}
</nav>
</nav>
</Wrapper>
{/* mobile icon footer */}
{window.innerWidth <= 768 ? (
<>
<nav className="nav-footer">
<nav className="footer-item">
<nav className="nav-footer-item" id="toggler">
<Item text={`${nowPage} / ${100}`} />
</nav> </nav>
<ProgressBar CountPage={CountPage} /> */} </>
{/* icons in right of pages setting */}
<nav
style={{
width: "25px",
marginLeft: "1rem",
}}
>
<ScrollVerticalIcon
onClick={() =>
onBookOptionChange({
...bookOption,
flow: "paginated",
})
}
/>
</nav>
<nav style={{ width: "25px", marginLeft: "1rem" }}>
<ScrollHorizontalIcon
onClick={() =>
onBookOptionChange({
...bookOption,
flow: "scrolled-doc",
})
}
/>
</nav>
</nav>
<Button>خرید کتاب</Button>
</nav>
</>
) : (
""
)} )}
</> </>
</nav>
{isMobile ? <Button>خرید کتاب</Button> : null}
</nav>
); );
}; };
const Icon = styled.div`
width: 16px;
height: 16px;
& > div,
& > svg {
width: 16px;
height: 16px;
}
`;
const Button = styled.button` const Button = styled.button`
width: 100%; width: 100%;

@ -38,7 +38,7 @@ const Note = (
<> <>
{control.display && ( {control.display && (
<Wrapper <Wrapper
title="نشانه گذار" title="نشانه گذاری"
show={control.open} show={control.open}
onClose={onToggle} onClose={onToggle}
ref={ref} ref={ref}

@ -26,6 +26,7 @@ input {
} }
.nav-book{ .nav-book{
flex:1;
overflow: hidden; overflow: hidden;
color: red !important; color: red !important;
} }
Loading…
Cancel
Save