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;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
font-size: 1rem;
color: #333;
color: #009aa8;
}
#root {

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

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

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

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

@ -62,28 +62,74 @@ const Footer = ({
// }
// setToggleIcon(false);
// };
let isMobile = window.innerWidth <= 768
return (
<>
<Wrapper>
<nav
style={{
display: "flex",
justifyContent: "space-between",
padding: "0rem 2rem",
width: "100%",
}}
<nav className="nav-footer"
// style={{display: isMobile?"":"flex" }}
>
<nav className="footer-item">
<>
<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 style={{ direction: "rtl" }}>
<ProgressBar CountPage={CountPage} />
<nav className="icon" >
<BookCloseIcon onClick={() => onBookOptionChange({
...bookOption,
flow: "paginated"
})
}
/>
</nav>
<nav className="icon" >
<ScrollVerticalIcon onClick={() => onBookOptionChange({
...bookOption,
flow: "paginated"
})
}
/>
</nav>
{/* icons in desktop setting */}
{/* <nav className="nav-icon">
<nav className="nav-icon">
{window.innerWidth > 768 ? (
<div className="display-icon" style={{ cursor: "pointer" }}>
<nav
style={{ width: "65px", marginLeft: "1rem", display: "flex" }}
@ -94,7 +140,7 @@ const Footer = ({
}}
className={`${viewType.spread ? "active" : ''}`}
>
<BookOpenIcon onClick={() => !scrollToggle ? onClickViewType(true) : null } />
<BookOpenIcon onClick={() => !scrollToggle ? onClickViewType(true) : null} />
</nav>
<nav
style={{
@ -104,7 +150,7 @@ const Footer = ({
>
<BookCloseIcon onClick={() => onClickViewType(false)} />
</nav>
{scrollToggle ? (
<nav
style={{ width: "65px" }}
onClick={() => setScrollToggle(!scrollToggle)}
@ -118,10 +164,10 @@ const Footer = ({
}
/>
</nav>
) : (
<nav
style={{ width: "65px" }}
onClick={() => !viewType.spread ? setScrollToggle(!scrollToggle) :setScrollToggle(false) }
onClick={() => !viewType.spread ? setScrollToggle(!scrollToggle) : setScrollToggle(false)}
>
<ScrollHorizontalIcon
onClick={() =>
@ -132,75 +178,23 @@ const Footer = ({
}
/>
</nav>
)}
</nav>
</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>
<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`
width: 100%;

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

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