From 63240960981e53a6aedab2f3d39d40530e7ee5a1 Mon Sep 17 00:00:00 2001 From: JamesIntellijoint Date: Sun, 2 Jan 2022 12:16:45 -0500 Subject: [PATCH] Update nav, add about menu --- src/App.tsx | 45 ++++--- src/components/ChapterMenu/ChapterMenu.scss | 2 +- .../{Nav/icons => Icons}/ArrowDown.tsx | 0 .../{Nav/icons => Icons}/ArrowLeft.tsx | 0 .../{Nav/icons => Icons}/ArrowRight.tsx | 0 .../{Nav/icons => Icons}/ArrowUp.tsx | 0 .../icons/Apps.tsx => Icons/Chapters.tsx} | 6 +- src/components/Icons/Close.tsx | 21 +++ .../{ThemeMenu/icons => Icons}/Day.tsx | 0 src/components/{Nav/icons => Icons}/Menu.tsx | 0 .../{ThemeMenu/icons => Icons}/Night.tsx | 0 .../{ThemeMenu/icons => Icons}/Sans.tsx | 0 .../{ThemeMenu/icons => Icons}/Serif.tsx | 0 src/components/Icons/Translation.tsx | 23 ++++ src/components/MainMenu/MainMenu.scss | 92 +++++++++++++ src/components/MainMenu/MainMenu.tsx | 102 ++++++++++++++ src/components/Nav/Nav.scss | 126 ++++++++++-------- src/components/Nav/Nav.tsx | 63 ++++----- src/components/ThemeMenu/ThemeMenu.scss | 7 +- src/components/ThemeMenu/ThemeMenu.tsx | 8 +- .../TranslationMenu/TranslationMenu.scss | 4 +- src/css/styles.scss | 2 +- 22 files changed, 380 insertions(+), 121 deletions(-) rename src/components/{Nav/icons => Icons}/ArrowDown.tsx (100%) rename src/components/{Nav/icons => Icons}/ArrowLeft.tsx (100%) rename src/components/{Nav/icons => Icons}/ArrowRight.tsx (100%) rename src/components/{Nav/icons => Icons}/ArrowUp.tsx (100%) rename src/components/{Nav/icons/Apps.tsx => Icons/Chapters.tsx} (56%) create mode 100644 src/components/Icons/Close.tsx rename src/components/{ThemeMenu/icons => Icons}/Day.tsx (100%) rename src/components/{Nav/icons => Icons}/Menu.tsx (100%) rename src/components/{ThemeMenu/icons => Icons}/Night.tsx (100%) rename src/components/{ThemeMenu/icons => Icons}/Sans.tsx (100%) rename src/components/{ThemeMenu/icons => Icons}/Serif.tsx (100%) create mode 100644 src/components/Icons/Translation.tsx create mode 100644 src/components/MainMenu/MainMenu.scss create mode 100644 src/components/MainMenu/MainMenu.tsx diff --git a/src/App.tsx b/src/App.tsx index a644daf..6dc45ef 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,11 +4,13 @@ import Nav from "./components/Nav/Nav"; import ChapterMenu from "./components/ChapterMenu/ChapterMenu"; import TranslationMenu from "./components/TranslationMenu/TranslationMenu"; import ThemeMenu from "./components/ThemeMenu/ThemeMenu"; +import MainMenu from "./components/MainMenu/MainMenu"; import { Translations } from "./components/Translations/Translations"; function App() { const [chapter, setChapter] = useState(1); const [translation, setTranslation] = useState(0); + const [showMainMenu, setShowMainMenu] = useState(false); const [showChapterMenu, setShowChapterMenu] = useState(false); const [showTranslationMenu, setShowTranslationMenu] = useState(false); const [themeColor, setThemeColor] = useState("light"); @@ -47,12 +49,27 @@ function App() { } } + function handleBodyScroll() { + if (showChapterMenu || showTranslationMenu || showMainMenu) { + document.body.style.overflow = "unset"; + } else { + document.body.style.overflow = "hidden"; + } + } + function showChapters() { setShowChapterMenu(!showChapterMenu); + handleBodyScroll(); } function showTranslations() { - setShowTranslationMenu(!showChapterMenu); + setShowTranslationMenu(!showTranslationMenu); + handleBodyScroll(); + } + + function showMain() { + setShowMainMenu(!showMainMenu); + handleBodyScroll(); } function selectThemeColor(newTheme: string) { @@ -72,24 +89,14 @@ function App() { setShowTranslationMenu(false); } - function handleSpacebar() { - if (showTranslationMenu) { - setShowTranslationMenu(false); - } else if (showChapterMenu) { - setShowChapterMenu(false); - setShowTranslationMenu(true); - } else { - setShowChapterMenu(true); - } - } - useEffect(() => { function handleKeyPress(event: any) { - if (event.key === "ArrowLeft") chapterPrev(); - if (event.key === "ArrowRight") chapterNext(); - if (event.key === "ArrowDown") translationPrev(); - if (event.key === "ArrowUp") translationNext(); - if (event.key === " ") handleSpacebar(); + if (event.key === "a") chapterPrev(); + if (event.key === "d") chapterNext(); + if (event.key === "s") translationPrev(); + if (event.key === "w") translationNext(); + if (event.key === "c") showChapters(); + if (event.key === "t") showTranslations(); } document.addEventListener("keydown", handleKeyPress); @@ -101,7 +108,7 @@ function App() { return (
- {(showChapterMenu || showTranslationMenu) && ( + {(showChapterMenu || showTranslationMenu || showMainMenu) && (
{ @@ -110,6 +117,7 @@ function App() { }} /> )} + {showMainMenu && } {showChapterMenu && ( )} @@ -138,6 +146,7 @@ function App() { translationNext={translationNext} showChapters={showChapters} showTranslations={showTranslations} + showMain={showMain} />
); diff --git a/src/components/ChapterMenu/ChapterMenu.scss b/src/components/ChapterMenu/ChapterMenu.scss index 9db7fab..e23bd2b 100644 --- a/src/components/ChapterMenu/ChapterMenu.scss +++ b/src/components/ChapterMenu/ChapterMenu.scss @@ -1,6 +1,6 @@ .grid { position: fixed; - z-index: 2; + z-index: 10; top: 50%; left: 50%; width: 800px; diff --git a/src/components/Nav/icons/ArrowDown.tsx b/src/components/Icons/ArrowDown.tsx similarity index 100% rename from src/components/Nav/icons/ArrowDown.tsx rename to src/components/Icons/ArrowDown.tsx diff --git a/src/components/Nav/icons/ArrowLeft.tsx b/src/components/Icons/ArrowLeft.tsx similarity index 100% rename from src/components/Nav/icons/ArrowLeft.tsx rename to src/components/Icons/ArrowLeft.tsx diff --git a/src/components/Nav/icons/ArrowRight.tsx b/src/components/Icons/ArrowRight.tsx similarity index 100% rename from src/components/Nav/icons/ArrowRight.tsx rename to src/components/Icons/ArrowRight.tsx diff --git a/src/components/Nav/icons/ArrowUp.tsx b/src/components/Icons/ArrowUp.tsx similarity index 100% rename from src/components/Nav/icons/ArrowUp.tsx rename to src/components/Icons/ArrowUp.tsx diff --git a/src/components/Nav/icons/Apps.tsx b/src/components/Icons/Chapters.tsx similarity index 56% rename from src/components/Nav/icons/Apps.tsx rename to src/components/Icons/Chapters.tsx index d4e9aa7..cf8f100 100644 --- a/src/components/Nav/icons/Apps.tsx +++ b/src/components/Icons/Chapters.tsx @@ -1,6 +1,6 @@ import * as React from "react"; -function Apps(props: React.SVGProps) { +function Chapters(props: React.SVGProps) { return ( ) { ); } -export default Apps; +export default Chapters; diff --git a/src/components/Icons/Close.tsx b/src/components/Icons/Close.tsx new file mode 100644 index 0000000..945b5a0 --- /dev/null +++ b/src/components/Icons/Close.tsx @@ -0,0 +1,21 @@ +import * as React from "react"; + +function Close(props: React.SVGProps) { + return ( + + + + ); +} + +export default Close; diff --git a/src/components/ThemeMenu/icons/Day.tsx b/src/components/Icons/Day.tsx similarity index 100% rename from src/components/ThemeMenu/icons/Day.tsx rename to src/components/Icons/Day.tsx diff --git a/src/components/Nav/icons/Menu.tsx b/src/components/Icons/Menu.tsx similarity index 100% rename from src/components/Nav/icons/Menu.tsx rename to src/components/Icons/Menu.tsx diff --git a/src/components/ThemeMenu/icons/Night.tsx b/src/components/Icons/Night.tsx similarity index 100% rename from src/components/ThemeMenu/icons/Night.tsx rename to src/components/Icons/Night.tsx diff --git a/src/components/ThemeMenu/icons/Sans.tsx b/src/components/Icons/Sans.tsx similarity index 100% rename from src/components/ThemeMenu/icons/Sans.tsx rename to src/components/Icons/Sans.tsx diff --git a/src/components/ThemeMenu/icons/Serif.tsx b/src/components/Icons/Serif.tsx similarity index 100% rename from src/components/ThemeMenu/icons/Serif.tsx rename to src/components/Icons/Serif.tsx diff --git a/src/components/Icons/Translation.tsx b/src/components/Icons/Translation.tsx new file mode 100644 index 0000000..e6156c5 --- /dev/null +++ b/src/components/Icons/Translation.tsx @@ -0,0 +1,23 @@ +import * as React from "react"; + +function Translation(props: React.SVGProps) { + return ( + + + + ); +} + +export default Translation; diff --git a/src/components/MainMenu/MainMenu.scss b/src/components/MainMenu/MainMenu.scss new file mode 100644 index 0000000..e9f339d --- /dev/null +++ b/src/components/MainMenu/MainMenu.scss @@ -0,0 +1,92 @@ +.main-menu { + position: relative; + position: fixed; + z-index: 10; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow-y: scroll; + + .close-btn { + cursor: pointer; + position: fixed; + top: 0; + right: 0; + display: flex; + align-items: center; + justify-content: center; + padding: 14px; + + border-bottom-left-radius: 50%; + border: unset; + background: var(--theme-background); + box-shadow: 0 0 10px 10px var(--theme-background); + + svg { + width: 28px; + height: 28px; + + path { + fill: var(--K400); + } + } + + &:hover svg path { + fill: var(--accent); + } + } + + &__content { + display: flex; + justify-content: center; + + background: var(--theme-background); + + &__center { + max-width: 800px; + padding: 60px 30px; + } + + p + h3 { + margin-top: 50px; + } + + h3 { + margin-bottom: 20px; + + font-size: 18px; + font-weight: 700; + color: var(--theme-text-color); + } + + p { + margin-bottom: 20px; + font-size: 16px; + line-height: 1.6; + color: var(--theme-text-color); + } + + a { + color: var(--accent); + font-weight: 600; + text-decoration: none; + + &:hover { + color: var(--accent-hover); + } + } + + hr { + margin: 50px 0; + border: unset; + + .theme--light & { + border-top: 1px solid var(--K150); + } + .theme--dark & { + border-top: 1px solid var(--K800); + } + } + } +} diff --git a/src/components/MainMenu/MainMenu.tsx b/src/components/MainMenu/MainMenu.tsx new file mode 100644 index 0000000..be25844 --- /dev/null +++ b/src/components/MainMenu/MainMenu.tsx @@ -0,0 +1,102 @@ +import clsx from "clsx"; +import React from "react"; +import Close from "../Icons/Close"; +import "./MainMenu.scss"; + +interface Props { + showMainMenu: () => void; +} + +const MainMenu = ({ showMainMenu }: Props) => { + return ( +
+ + +
+
+

Navigation

+

+ Change chapter: Click the bookmark icon [C] to select a + chapter, and use the left/right arrow icons [A/D] to jump between + translations. +

+

+ Change translation: Click the translate icon [T] to select a + translation, and use the up/down arrow icons [W/S] to jump between + translations. +

+
+

Tao Te Ching

+

+ The Tao Te Ching is a Chinese classic text traditionally credited to + the 6th-century BC sage Laozi. The text's authorship, date of + composition and date of compilation are debated. The oldest + excavated portion dates back to the late 4th century BC, but modern + scholarship dates other parts of the text as having been written—or + at least compiled—later than the earliest portions of the Zhuangzi. +

+

+ The Tao Te Ching, along with the Zhuangzi, is a fundamental text for + both philosophical and religious Taoism. It also strongly influenced + other schools of Chinese philosophy and religion, including + Legalism, Confucianism, and Chinese Buddhism, which was largely + interpreted through the use of Taoist words and concepts when it was + originally introduced to China. Many artists, including poets, + painters, calligraphers, and gardeners, have used the Tao Te Ching + as a source of inspiration. Its influence has spread widely outside + East Asia and it is among the most translated works in world + literature. +

+

+ The Tao Te Ching has been translated into Western languages over 250 + times, mostly to English, German, and French. +

+

+ The Tao Te Ching is written in Classical Chinese, which poses a + number of challenges to complete comprehension. As Holmes Welch + notes, the written language "has no active or passive, no singular + or plural, no case, no person, no tense, no mood." Moreover, the + received text lacks many grammatical particles which are preserved + in the older Mawangdui and Beida texts, which permit the text to be + more precise. Lastly, many passages of the Tao Te Ching are + deliberately vague and ambiguous. +

+

+ Since there are no punctuation marks in Classical Chinese, it can be + difficult to conclusively determine where one sentence ends and the + next begins. Moving a full-stop a few words forward or back or + inserting a comma can profoundly alter the meaning of many passages, + and such divisions and meanings must be determined by the + translator. Some editors and translators argue that the received + text is so corrupted (from originally being written on one-line + bamboo strips linked with silk threads) that it is impossible to + understand some chapters without moving sequences of characters from + one place to another. +

+

+ More info on{" "} + + Wikipedia + +

+
+

About

+

+ This is a project by James Carmichael. +
+ + See on GitHub. + +

+
+
+
+ ); +}; + +export default MainMenu; diff --git a/src/components/Nav/Nav.scss b/src/components/Nav/Nav.scss index bf87861..156c5bb 100644 --- a/src/components/Nav/Nav.scss +++ b/src/components/Nav/Nav.scss @@ -1,15 +1,14 @@ @import "../../css/media.scss"; .nav { - pointer-events: none; + $border-radius: 8px; position: fixed; display: flex; justify-content: center; - gap: 30px; + gap: 20px; width: 100%; bottom: 0; left: 0; - padding-top: 80px; background: linear-gradient( to top, @@ -19,82 +18,93 @@ ); @media #{$query-min-md} { - padding-bottom: 30px; + padding: 30px 0; } @media #{$query-max-md} { - padding-bottom: 12px; + padding: 12px 0; } &__group { - pointer-events: all; display: flex; - flex-direction: column; align-items: center; - gap: 12px; + gap: 1px; - &__buttons { - display: flex; - gap: 12px; + border-radius: $border-radius; + box-shadow: 0 0 4px rgba(0, 0, 0, 0.05), 2px 4px 8px rgba(0, 0, 0, 0.05); + + .theme--light & { + background: var(--K150); } - - &__label { - font-size: 15px; - font-weight: 400; - color: var(--K600); - } - } -} - -.nav-btn { - transition: 0.25s ease background; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - width: 42px; - height: 42px; - - border: unset; - - border-radius: 50%; - box-shadow: 0 0 4px rgba(0, 0, 0, 0.05), 2px 4px 8px rgba(0, 0, 0, 0.05); - - svg { - width: 24px; - height: 24px; - - path { - transition: 0.25s ease fill; + .theme--dark & { + background: var(--black); } } - .theme--light & { - background: var(--white); + .nav-btn { + transition: 0.25s ease background; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + border: unset; - svg path { - fill: var(--K700); + @media (max-width: 420px) { + width: 36px; + height: 36px; } - &:hover { - background: var(--K100); + &:focus { + outline: none; + } - svg path { - fill: var(--accent); + &:first-child { + border-top-left-radius: $border-radius; + border-bottom-left-radius: $border-radius; + } + &:last-child { + border-top-right-radius: $border-radius; + border-bottom-right-radius: $border-radius; + } + + svg { + width: 24px; + height: 24px; + + path { + transition: 0.25s ease fill; } } - } - .theme--dark & { - background: var(--K900); - svg path { - fill: var(--K100); - } - - &:hover { - background: var(--K800); + .theme--light & { + background: var(--white); svg path { - fill: var(--accent); + fill: var(--K700); + } + + &:hover { + background: var(--K100); + + svg path { + fill: var(--accent); + } + } + } + .theme--dark & { + background: var(--K900); + + svg path { + fill: var(--K100); + } + + &:hover { + background: var(--K800); + + svg path { + fill: var(--accent); + } } } } diff --git a/src/components/Nav/Nav.tsx b/src/components/Nav/Nav.tsx index b122dad..c5963a1 100644 --- a/src/components/Nav/Nav.tsx +++ b/src/components/Nav/Nav.tsx @@ -1,10 +1,11 @@ import React from "react"; -import ArrowDown from "./icons/ArrowDown"; -import ArrowLeft from "./icons/ArrowLeft"; -import ArrowRight from "./icons/ArrowRight"; -import ArrowUp from "./icons/ArrowUp"; -import Apps from "./icons/Apps"; -import Menu from "./icons/Menu"; +import ArrowDown from "../Icons/ArrowDown"; +import ArrowLeft from "../Icons/ArrowLeft"; +import ArrowRight from "../Icons/ArrowRight"; +import ArrowUp from "../Icons/ArrowUp"; +import Chapters from "../Icons/Chapters"; +import Translation from "../Icons/Translation"; +import Menu from "../Icons/Menu"; import "./Nav.scss"; interface Props { @@ -14,6 +15,7 @@ interface Props { translationNext: () => void; showChapters: () => void; showTranslations: () => void; + showMain: () => void; } const Nav = ({ @@ -23,37 +25,38 @@ const Nav = ({ translationNext, showChapters, showTranslations, + showMain, }: Props) => { return (
- Chapters -
- - - -
+
- Translations -
- - - -
+ + + +
+ +
+ + +
); diff --git a/src/components/ThemeMenu/ThemeMenu.scss b/src/components/ThemeMenu/ThemeMenu.scss index 6d8c073..24cdd25 100644 --- a/src/components/ThemeMenu/ThemeMenu.scss +++ b/src/components/ThemeMenu/ThemeMenu.scss @@ -1,18 +1,17 @@ .theme-nav { position: absolute; + z-index: 1; top: 20px; - left: 50%; + right: 20px; display: flex; gap: 12px; - - transform: translateX(-50%); } .theme-toggle { $height: 28px; $width: 58px; $spacing: 10px; - $icon: 16px; + $icon: 14px; $toggle: $height - $spacing; $toggle-spacing: (($height - $toggle) / 2); diff --git a/src/components/ThemeMenu/ThemeMenu.tsx b/src/components/ThemeMenu/ThemeMenu.tsx index 0f926a3..f8d4ea4 100644 --- a/src/components/ThemeMenu/ThemeMenu.tsx +++ b/src/components/ThemeMenu/ThemeMenu.tsx @@ -1,8 +1,8 @@ import React from "react"; -import Day from "./icons/Day"; -import Night from "./icons/Night"; -import Sans from "./icons/Sans"; -import Serif from "./icons/Serif"; +import Day from "../Icons/Day"; +import Night from "../Icons/Night"; +import Sans from "../Icons/Sans"; +import Serif from "../Icons/Serif"; import "./ThemeMenu.scss"; interface Props { diff --git a/src/components/TranslationMenu/TranslationMenu.scss b/src/components/TranslationMenu/TranslationMenu.scss index fb68a83..402c2f5 100644 --- a/src/components/TranslationMenu/TranslationMenu.scss +++ b/src/components/TranslationMenu/TranslationMenu.scss @@ -1,6 +1,6 @@ .names { position: fixed; - z-index: 2; + z-index: 10; top: 50%; left: 50%; width: 800px; @@ -23,7 +23,7 @@ border-radius: 4px; background: transparent; - font-size: 16px; + font-size: 18px; font-weight: 600; color: var(--theme-text-color); line-height: 1.1; diff --git a/src/css/styles.scss b/src/css/styles.scss index 432781b..5dba50f 100644 --- a/src/css/styles.scss +++ b/src/css/styles.scss @@ -90,7 +90,7 @@ body { cursor: pointer; transition: 0.75s ease all; position: fixed; - z-index: 1; + z-index: 2; top: 0; left: 0; right: 0;