From fe9efa7128c88e2f0bdc850a12abc821edae565a Mon Sep 17 00:00:00 2001 From: taha12322 <66300435+taha12322@users.noreply.github.com> Date: Tue, 24 Aug 2021 15:04:57 +0430 Subject: [PATCH] setting header footer --- src/components/Setting/FontSize/fontsize.js | 18 ++++++++--- .../Setting/LineHeight/lineheight.js | 30 ++++++++++++------- src/components/footer/progressBar.js | 2 +- src/components/nav/BookInfo.tsx | 6 ++-- src/components/style/footerStyle.scss | 4 +++ src/components/style/slider.scss | 7 +++-- src/containers/Footer.tsx | 20 +++++++++---- src/containers/Header.tsx | 4 +-- src/containers/Reader.tsx | 20 +++++++------ src/containers/menu/Nav.tsx | 1 - src/containers/menu/Option.tsx | 4 +++ src/lib/styles/readerStyle.css | 7 +++++ src/types/book.ts | 1 + 13 files changed, 85 insertions(+), 39 deletions(-) diff --git a/src/components/Setting/FontSize/fontsize.js b/src/components/Setting/FontSize/fontsize.js index b953c64..6386c9d 100644 --- a/src/components/Setting/FontSize/fontsize.js +++ b/src/components/Setting/FontSize/fontsize.js @@ -34,11 +34,21 @@ function Display(props) { const Fontsize = (props) => { const { bookStyle, setBookStyle } = props; // const [countersize, setCounter ] = useState(1) - const incrementCounter = () => - setBookStyle({ ...bookStyle, fontSize: bookStyle.fontSize + 1 }); - let decrementCounter = () => - setBookStyle({ ...bookStyle, fontSize: bookStyle.fontSize - 1 }); + const incrementCounter = () => { + if (bookStyle.fontSize !== 20) { + setBookStyle({ ...bookStyle, fontSize: bookStyle.fontSize + 1 }); + } else { + return; + } + }; + let decrementCounter = () => { + if (bookStyle.fontSize !== 10) { + setBookStyle({ ...bookStyle, fontSize: bookStyle.fontSize - 1 }); + } else { + return; + } + }; return (
diff --git a/src/components/Setting/LineHeight/lineheight.js b/src/components/Setting/LineHeight/lineheight.js index 02f15cf..1748070 100644 --- a/src/components/Setting/LineHeight/lineheight.js +++ b/src/components/Setting/LineHeight/lineheight.js @@ -37,16 +37,26 @@ const Lineheight = (props) => { const { setBookStyle, bookStyle } = props; // const [counterline, setcounterline] = useState(1); - const incrementCounter = () => - setBookStyle({ - ...bookStyle, - lineHeight: Math.round(bookStyle.lineHeight * 5) / 5 + 0.2, - }); - let decrementCounter = () => - setBookStyle({ - ...bookStyle, - lineHeight: Math.round(bookStyle.lineHeight * 5) / 5 - 0.2, - }); + const incrementCounter = () => { + if (bookStyle.lineHeight !== 2) { + setBookStyle({ + ...bookStyle, + lineHeight: Math.round(bookStyle.lineHeight * 5) / 5 + 0.2, + }); + } else { + return; + } + }; + let decrementCounter = () => { + if (bookStyle.lineHeight !== 1) { + setBookStyle({ + ...bookStyle, + lineHeight: Math.round(bookStyle.lineHeight * 5) / 5 - 0.2, + }); + } else { + return; + } + }; // if (counterline <= 1) { // decrementCounter = () => setcounterline(1); diff --git a/src/components/footer/progressBar.js b/src/components/footer/progressBar.js index fe1e4f2..6eef1a9 100644 --- a/src/components/footer/progressBar.js +++ b/src/components/footer/progressBar.js @@ -50,7 +50,7 @@ export default function ProgressBar(props) { value={CountPage} max={100} min={1} - marks={true} + // marks={true} />
); diff --git a/src/components/nav/BookInfo.tsx b/src/components/nav/BookInfo.tsx index d76df9e..be6b0cb 100644 --- a/src/components/nav/BookInfo.tsx +++ b/src/components/nav/BookInfo.tsx @@ -1,9 +1,9 @@ import styled from 'styled-components' -const BookInfo = ({src="", title ,publisher, author}: Props) => { +const BookInfo = ({title ,publisher, author}: Props) => { return ( - + {/* */} {title} {publisher} @@ -41,7 +41,7 @@ const Info = styled.div` `; interface Props { - src: string; + // src: string; title: string; publisher: string; author: string; diff --git a/src/components/style/footerStyle.scss b/src/components/style/footerStyle.scss index 328b8f5..252acf0 100644 --- a/src/components/style/footerStyle.scss +++ b/src/components/style/footerStyle.scss @@ -21,6 +21,10 @@ } } +.nav-footer-item{ + margin-right: 1.5rem; +} + .active{ border-radius: 20%; width: 65px; diff --git a/src/components/style/slider.scss b/src/components/style/slider.scss index f3300a3..73a115c 100644 --- a/src/components/style/slider.scss +++ b/src/components/style/slider.scss @@ -1,3 +1,5 @@ +@import './colors'; + .root { width: 900px; } @@ -5,6 +7,7 @@ @media screen and (max-width: 1024px) { .root { width: 800px; + } } @@ -38,11 +41,9 @@ } } - - //1024 => 800 //768 => 600 //530 => 390 //425 => 285 //375 => 245 -//320 => 175 \ No newline at end of file +//320 => 175 diff --git a/src/containers/Footer.tsx b/src/containers/Footer.tsx index da20379..6ac306c 100644 --- a/src/containers/Footer.tsx +++ b/src/containers/Footer.tsx @@ -38,7 +38,6 @@ const Footer = ({ if (active === 1 || 2) { setActive(3); } - }; return ( <> @@ -58,10 +57,14 @@ const Footer = ({