footer finished (responsive)

background color of the iftram finished
color of the book (not finished)
demo
taha12322 3 years ago
parent 741b12261b
commit 78f4b96430
  1. 6
      src/components/Setting/FontColor/Colors/chosecolor.js
  2. 4
      src/components/Setting/FontColor/colors.js
  3. 2
      src/components/Setting/setting.js
  4. 54
      src/components/footer/progressBar.js
  5. 30
      src/components/style/footerStyle.scss
  6. 48
      src/components/style/slider.scss
  7. 99
      src/containers/Footer.tsx
  8. 30
      src/containers/Header.tsx
  9. 44
      src/containers/Reader.tsx

@ -4,15 +4,11 @@ import '../../../style/chosecolor.scss';
const Chosecolor = (props) => {
const {setcolor} = props;
const {setcolor , isChecked} = props;
const changeColorHandler = (value) => {
setcolor(value)
}
const {isChecked} = props;
return (
<>
{isChecked ?

@ -7,10 +7,12 @@ import { Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap';
const Colors = (props) => {
const { setcolor, color} = props;
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen(prevState => !prevState);
const {setIsChecked, isChecked , setcolor , color } = props;
const [isChecked, setIsChecked] = useState(false)
const [Icon, seticon] = useState(PalletColorOutline);
const changeIcone = () => {

@ -30,9 +30,9 @@ const Setting = (props) => {
<nav className="nav-content">
<nav className="nav-items">
<Colors
setcolor={setcolor}
setIsChecked={setIsChecked}
isChecked={isChecked}
setcolor={setcolor}
color={color}
/>
</nav>

@ -1,52 +1,50 @@
import React from 'react'
import { withStyles, makeStyles } from '@material-ui/core/styles'
import Slider from '@material-ui/core/Slider'
import React from "react";
import { withStyles, makeStyles } from "@material-ui/core/styles";
import Slider from "@material-ui/core/Slider";
import "components/style/slider.scss";
const useStyles = makeStyles((theme) => ({
root: {
width: 900 + theme.spacing(0),
},
margin: {
height: theme.spacing(3),
height: theme.spacing(0),
},
}))
}));
const PrettoSlider = withStyles({
root: {
color: '#009AA8',
height: '5px',
color: "#009AA8",
height: "5px",
padding: 0,
direction: 'rtl !important',
direction: "rtl !important",
},
thumb: {
height: '15px',
width: '15px',
backgroundColor: '#fff',
border: '1.5px solid currentColor',
marginTop: '-6px',
marginLeft: '-11px',
direction: 'rtl !important',
'&:focus, &:hover, &$active': {
boxShadow: 'inherit',
direction: 'rtl !important',
height: "15px",
width: "15px",
backgroundColor: "#fff",
border: "1.5px solid currentColor",
marginTop: "-6px",
marginLeft: "-11px",
direction: "rtl !important",
"&:focus, &:hover, &$active": {
boxShadow: "inherit",
direction: "rtl !important",
},
},
active: {},
track: {
height: '5px',
height: "5px",
borderRadius: 4,
direction: 'rtl !important',
direction: "rtl !important",
},
rail: {
height: '5px',
height: "5px",
borderRadius: 4,
},
})(Slider)
})(Slider);
export default function ProgressBar(props) {
const classes = useStyles()
const classes = useStyles();
const { CountPage } = props;
return (
<div className={classes.root}>
<div className={(classes.root, "root")}>
<PrettoSlider
track="inverted"
value={CountPage}
@ -55,5 +53,5 @@ export default function ProgressBar(props) {
marks={true}
/>
</div>
)
);
}

@ -1,4 +1,34 @@
@import './colors';
.icons-disable {
opacity: 0.3;
cursor: auto;
}
.nav-footer {
background-color: #fff;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
.footer-item {
display: flex;
justify-content: space-evenly;
padding: 0 5px;
align-items: center;
margin-bottom: 5px;
}
}
.active{
border-radius: 20%;
width: 65px;
background-color: #009aa873;
}
.icon{
width: 65px;
}

@ -0,0 +1,48 @@
.root {
width: 900px;
}
@media screen and (max-width: 1024px) {
.root {
width: 800px;
}
}
@media screen and (max-width: 768px) {
.root {
width: 600px;
}
}
@media screen and (max-width: 530px) {
.root {
width: 280px;
}
}
@media screen and (max-width: 425px) {
.root {
width: 295px;
}
}
@media screen and (max-width: 375px) {
.root {
width: 230px;
}
}
@media screen and (max-width: 320px) {
.root {
width: 175px;
}
}
//1024 => 800
//768 => 600
//530 => 390
//425 => 285
//375 => 245
//320 => 175

@ -31,9 +31,15 @@ const Footer = ({
const changeIcone = () => {
setIcon(!Icon);
};
const [active, setActive] = useState(1);
const [toggleIcon, setToggleIcon] = useState(false);
const onToggle = () => {
setToggleIcon(false);
if (active === 1 || 2) {
setActive(3);
}
const [toggleIcon, setToggleIcon] = useState(true);
};
return (
<>
<Wrapper>
@ -49,23 +55,30 @@ const Footer = ({
<Item text={`${nowPage} / ${totalPage}`} />
</nav>
<ProgressBar CountPage={CountPage} />
<nav onClick={() => changeIcone()} className="nav-icon ">
<nav onClick={() => changeIcone()} className="nav-icon">
{window.innerWidth > 768 ? (
<div className="display-icon" style={{ cursor: "pointer" }}>
<nav style={{ width: "65px", display: "flex" }}>
<BookOpenIcon
className={`${toggleIcon ? "icons-disable" : ""}`}
onClick={() => onClickViewType(true)}
/>
<BookCloseIcon
className={`${toggleIcon ? "icons-disable" : ""}`}
onClick={() => onClickViewType(false)}
/>
<nav
className={`${active === 1 ? "active" : null} icon`}
onClick={toggleIcon ? () => setActive(3): () => setActive(1)}
>
<BookOpenIcon
className={`${toggleIcon ? "icons-disable" : ""}`}
onClick={toggleIcon ? null : () => onClickViewType(true)}
/>
</nav>
<nav
className={`${active === 2 ? "active" : null} icon`}
onClick={toggleIcon ? () => setActive(3): () => setActive(2)}
>
<BookCloseIcon
className={`${toggleIcon ? "icons-disable" : ""}`}
onClick={toggleIcon ? null : () => onClickViewType(false)}
/>
</nav>
{toggleIcon === true ? (
<nav
style={{ width: "65px" }}
onClick={() => setToggleIcon(false)}
>
<nav style={{ width: "65px" }} onClick={onToggle}>
<ScrollVerticalIcon
onClick={() =>
onBookOptionChange({
@ -92,11 +105,56 @@ const Footer = ({
)}
</nav>
</div>
) : null}
) : (
""
)}
</nav>
</nav>
</Wrapper>
{window.innerWidth < 768 ? <Button>خرید کتاب</Button> : null}
{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} />
{toggleIcon === true ? (
<nav
style={{ width: "25px" }}
onClick={() => setToggleIcon(false)}
>
<ScrollVerticalIcon
onClick={() =>
onBookOptionChange({
...bookOption,
flow: "paginated",
})
}
/>
</nav>
) : (
<nav
style={{ width: "25px" }}
onClick={() => setToggleIcon(true)}
>
<ScrollHorizontalIcon
onClick={() =>
onBookOptionChange({
...bookOption,
flow: "scrolled-doc",
})
}
/>
</nav>
)}
</nav>
<Button>خرید کتاب</Button>
</nav>
</>
) : (
""
)}
</>
);
};
@ -114,11 +172,10 @@ const Icon = styled.div`
const Button = styled.button`
width: 100%;
justify-content: center;
position: fixed;
bottom: 0;
display: flex;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
padding: 2px 2rem;
color: #fff;
font-family: inherit;

@ -5,6 +5,7 @@ import Wrapper from "components/header/Wrapper";
import Layout, { AutoLayout } from "components/header/Layout";
import Logo from "components/header/Logo";
import Item from "components/footer/Item";
import BookInfo from "components/nav/BookInfo";
// import { Collapse, Button, CardBody, Card } from "reactstrap";
const Header = ({
@ -14,30 +15,29 @@ const Header = ({
// onOptionToggle,
onLearningToggle,
title,
nameBook,
}: Props) => {
return (
<>
<Wrapper>
<Layout>
<AutoLayout style={{ backgroundColor: "#009AA8" }}>
<nav style={{ display: "flex", marginLeft: "16px" }}>
<nav onClick={() => setIsOpen(!isOpen)} style={{ display: "flex" }} id="toggler">
<Img
src="/react-epub-viewer/images/Setting.svg"
// onClick={onOptionToggle as any}
alt="Logo"
/>
<nav
onClick={() => setIsOpen(!isOpen)}
style={{ display: "flex" }}
id="toggler"
>
<Img src="/react-epub-viewer/images/Setting.svg" alt="Logo" />
</nav>
<Img
src="/react-epub-viewer/images/Edit.svg"
alt="Logo"
onClick={onLearningToggle as any}
/>
</nav>
<nav>
{window.innerWidth > 768 ? <ButtonB>خرید کتاب</ButtonB> : null}
<nav>
{window.innerWidth > 768 ? <ButtonB>خرید کتاب</ButtonB> : null}
</nav>
</nav>
<nav
style={{
@ -48,7 +48,10 @@ const Header = ({
>
<Item text={title as any} />
<span style={{ color: "#fff", marginRight: "10px" }}>|</span>
<p style={{ margin: "0", color: "#fff" }}></p>
{/* <BookInfo/> */}
<div>
<p style={{ margin: "0", color: "#fff" , width: '85px' }}>{nameBook}</p>
</div>
<Logo />
<Img
src="/react-epub-viewer/images/menu.svg"
@ -86,11 +89,12 @@ const Img = styled.img`
`;
interface Props {
title: String;
nameBook: string;
onNavToggle: (value?: boolean) => void;
onOptionToggle: (value?: boolean) => void;
onLearningToggle: (value?: boolean) => void;
isOpen: any;
setIsOpen:any;
setIsOpen: any;
// setsettingicon: (value?: boolean) => void;
}

@ -181,7 +181,7 @@ const Reader = ({ url, loadingView }: Props) => {
});
}
};
console.log(isScrollHorizontal)
console.log(isScrollHorizontal);
const [viewType, setViewType] = useState({
spread: true,
@ -202,13 +202,41 @@ const Reader = ({ url, loadingView }: Props) => {
}
};
const book = useSelector<RootState, Book>((state) => state.book.book);
const [CountPage, setCountPage] = useState(0);
const [isOpen, setIsOpen] = useState(false);
const [color, setcolor] = useState("light-white");
// const Colors = [
// { name: "dark-white", value: "#fff" },
// { name: "dark-blue", value: "#fff" },
// { name: "dark-brown", value: "#fff4e1" },
// { name: "light-white", value: "#121212" },
// { name: "light-brown", value: "#af622e" },
// { name: "light-blue", value: "#5858df" },
// ];
const readyColors = [
{ name: "dark-white", value: "#121212" },
{ name: "light-white", value: "#fff" },
{ name: "dark-blue", value: "#5858d3" },
{ name: "dark-brown", value: "#af622e" },
{ name: "light-brown", value: "#fff4e1" },
{ name: "light-blue", value: "#C3DDFF" },
];
const colorHandler = (color: any) => {
let myColor = readyColors.filter((item) => item.name === color);
return myColor[0].value;
};
return (
<>
<ViewerWrapper>
<Header
nameBook={book.title}
title={currentLocation.chapterName}
onNavToggle={onNavToggle}
onOptionToggle={onOptionToggle}
@ -217,6 +245,7 @@ const Reader = ({ url, loadingView }: Props) => {
setIsOpen={setIsOpen}
/>
<Setting
setcolor={setcolor}
setBookStyle={setBookStyle}
bookStyle={bookStyle}
bookOption={bookOption}
@ -226,9 +255,10 @@ const Reader = ({ url, loadingView }: Props) => {
<nav
style={{
backgroundColor: colorHandler(color),
display: "flex",
justifyContent: "center",
marginTop: "1rem",
paddingTop: "1rem",
}}
>
{window.innerWidth < 768 ? (
@ -364,23 +394,29 @@ const Reader = ({ url, loadingView }: Props) => {
);
};
const ReaderWrapper = ({ url, loadingView }: Props) => {
const ReaderWrapper = ({ url, loadingView, colorHandler }: Props) => {
return (
<>
<Provider store={store}>
<Reader url={url} loadingView={loadingView} />
<Reader
colorHandler={colorHandler}
url={url}
loadingView={loadingView}
/>
</Provider>
</>
);
};
interface Props {
colorHandler?: () => void;
viewerStyle?: BookStyle;
url: string;
loadingView?: React.ReactNode;
isOpen?: any;
setIsOpen?: any;
setIsScrollHorizontal?: any;
color?: any;
}
export default ReaderWrapper;

Loading…
Cancel
Save