From 60413f5f75528148804ab7e66f83e5f126ad1908 Mon Sep 17 00:00:00 2001 From: saengel Date: Tue, 6 Aug 2024 13:32:34 -0400 Subject: [PATCH 01/10] feat(secondary nav): First pass at logged out menu --- static/js/Header.jsx | 55 +++++++++++++++++++++++++++++++++++++------- 1 file changed, 47 insertions(+), 8 deletions(-) diff --git a/static/js/Header.jsx b/static/js/Header.jsx index ce31a5e7fb..0b71076272 100644 --- a/static/js/Header.jsx +++ b/static/js/Header.jsx @@ -18,22 +18,61 @@ import {Autocomplete} from './Autocomplete' import { DropdownMenu, DropdownMenuSeparator, DropdownMenuItem, DropdownMenuItemWithIcon } from './common/DropdownMenu'; -const ModuleSwitcher = () => { +const LoggedOutMenu = () => { + const [isClient, setIsClient] = useState(false); + const [next, setNext] = useState("/"); + const [loginLink, setLoginLink] = useState("/login?next=/"); + const [registerLink, setRegisterLink] = useState("/register?next=/"); + useEffect(()=>{ + setIsClient(true); + }, []); + useEffect(()=> { + if(isClient){ + setNext(encodeURIComponent(Sefaria.util.currentPath())); + setLoginLink("/login?next="+next); + setRegisterLink("/register?next="+next); + } + }) return ( - + + + Log in + + + Sign up + + + Site language goes here - check with Mickey what the design is + + + + New additions + + + Help + + + ); +} + + +const ModuleSwitcher = () => { + return ( + + - + - + - + @@ -90,11 +129,11 @@ class Header extends Component { { Sefaria._uid ? - : + : } - { !Sefaria._uid && Sefaria._siteSettings.TORAH_SPECIFIC ? - : null} + + { !Sefaria._uid && Sefaria._siteSettings.TORAH_SPECIFIC ? Date: Tue, 6 Aug 2024 13:33:02 -0400 Subject: [PATCH 02/10] chore(secondary nav): Small tweaks to generic component to enable more flexibility upon implementation --- static/js/common/DropdownMenu.jsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/static/js/common/DropdownMenu.jsx b/static/js/common/DropdownMenu.jsx index 857b77fa9d..5f77f6a02c 100644 --- a/static/js/common/DropdownMenu.jsx +++ b/static/js/common/DropdownMenu.jsx @@ -14,10 +14,15 @@ const DropdownMenuSeparator = () => { } -const DropdownMenuItem = ({url, children}) => { +const DropdownMenuItem = ({url, children, newTab}) => { + + if (!newTab){ + newTab = false; + } + return ( - + {children} @@ -40,7 +45,7 @@ const DropdownMenuItemWithIcon = ({icon, textEn, textHe}) => { ); } -const DropdownMenu = ({children}) => { +const DropdownMenu = ({children, menu_icon}) => { const [isOpen, setIsOpen] = useState(false); const wrapperRef = useRef(null); @@ -73,7 +78,7 @@ const DropdownMenu = ({children}) => { return (
- {Sefaria._('Toggle + {Sefaria._('Dropdown
{children} @@ -87,6 +92,6 @@ const DropdownMenu = ({children}) => { export { DropdownMenu, DropdownMenuSeparator, - DropdownMenuItem, - DropdownMenuItemWithIcon + DropdownMenuItemWithIcon, + DropdownMenuItem }; \ No newline at end of file From 4382f098da4b9daa57e6246cebe67d6501d6650d Mon Sep 17 00:00:00 2001 From: saengel Date: Wed, 7 Aug 2024 09:01:00 -0400 Subject: [PATCH 03/10] feat(secondary nav): Additional functionality, placeholder for language toggle --- static/icons/logged_out.svg | 3 +++ static/js/Header.jsx | 31 ++++++++++++++++++------------- static/js/Misc.jsx | 2 +- 3 files changed, 22 insertions(+), 14 deletions(-) create mode 100644 static/icons/logged_out.svg diff --git a/static/icons/logged_out.svg b/static/icons/logged_out.svg new file mode 100644 index 0000000000..1102923890 --- /dev/null +++ b/static/icons/logged_out.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/js/Header.jsx b/static/js/Header.jsx index 0b71076272..bfdecfb7cf 100644 --- a/static/js/Header.jsx +++ b/static/js/Header.jsx @@ -18,7 +18,7 @@ import {Autocomplete} from './Autocomplete' import { DropdownMenu, DropdownMenuSeparator, DropdownMenuItem, DropdownMenuItemWithIcon } from './common/DropdownMenu'; -const LoggedOutMenu = () => { +const LoggedOutMenu = (curLang, transLangPreference, setTransLangPreference) => { const [isClient, setIsClient] = useState(false); const [next, setNext] = useState("/"); const [loginLink, setLoginLink] = useState("/login?next=/"); @@ -42,9 +42,13 @@ const LoggedOutMenu = () => { Sign up - - Site language goes here - check with Mickey what the design is + + Language toggle goes here + {/* */} New additions @@ -126,21 +130,22 @@ class Header extends Component { openURL={this.props.openURL} /> - - { Sefaria._uid ? - - : - } - - - - { !Sefaria._uid && Sefaria._siteSettings.TORAH_SPECIFIC ? : null} - + + + + + { Sefaria._uid ? + + : + } +
); diff --git a/static/js/Misc.jsx b/static/js/Misc.jsx index 6b9d179af9..aecaa37473 100644 --- a/static/js/Misc.jsx +++ b/static/js/Misc.jsx @@ -1426,7 +1426,7 @@ function InterfaceLanguageMenu({currentLang, translationLanguagePreference, setT Reset -
+
) : null} From d65cc3038ec7511d8f1ec09ee307cb849a9108ff Mon Sep 17 00:00:00 2001 From: saengel Date: Wed, 7 Aug 2024 14:34:55 -0400 Subject: [PATCH 04/10] feat(secondary nav): Working language toggle implementation, first pass through --- static/js/Header.jsx | 57 +++++++++++++++++++++++++------------------- 1 file changed, 32 insertions(+), 25 deletions(-) diff --git a/static/js/Header.jsx b/static/js/Header.jsx index bfdecfb7cf..e7013a9391 100644 --- a/static/js/Header.jsx +++ b/static/js/Header.jsx @@ -18,14 +18,16 @@ import {Autocomplete} from './Autocomplete' import { DropdownMenu, DropdownMenuSeparator, DropdownMenuItem, DropdownMenuItemWithIcon } from './common/DropdownMenu'; -const LoggedOutMenu = (curLang, transLangPreference, setTransLangPreference) => { +const LoggedOutMenu = (currentLang) => { const [isClient, setIsClient] = useState(false); const [next, setNext] = useState("/"); const [loginLink, setLoginLink] = useState("/login?next=/"); const [registerLink, setRegisterLink] = useState("/register?next=/"); + useEffect(()=>{ setIsClient(true); }, []); + useEffect(()=> { if(isClient){ setNext(encodeURIComponent(Sefaria.util.currentPath())); @@ -33,29 +35,36 @@ const LoggedOutMenu = (curLang, transLangPreference, setTransLangPreference) => setRegisterLink("/register?next="+next); } }) + + const getCurrentPage = () => { + return encodeURIComponent(Sefaria.util.currentPath()); + } return ( - - Log in - - - Sign up - - - - Language toggle goes here - - {/* */} - - - New additions - - - Help - + + Log in + + + Sign up + + +
+ Site Language +
+ + עברית + + + English + + + + New additions + + + Help + + ); } @@ -141,9 +150,7 @@ class Header extends Component { { Sefaria._uid ? - : + : } From 6cc6de139c5dabb97113b3a2c47b245cbad0d019 Mon Sep 17 00:00:00 2001 From: saengel Date: Wed, 7 Aug 2024 14:35:34 -0400 Subject: [PATCH 05/10] chore(secondary nav): Remove unused prop --- static/js/Header.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/js/Header.jsx b/static/js/Header.jsx index e7013a9391..1f91370c13 100644 --- a/static/js/Header.jsx +++ b/static/js/Header.jsx @@ -18,7 +18,7 @@ import {Autocomplete} from './Autocomplete' import { DropdownMenu, DropdownMenuSeparator, DropdownMenuItem, DropdownMenuItemWithIcon } from './common/DropdownMenu'; -const LoggedOutMenu = (currentLang) => { +const LoggedOutMenu = () => { const [isClient, setIsClient] = useState(false); const [next, setNext] = useState("/"); const [loginLink, setLoginLink] = useState("/login?next=/"); From 12baaba9acf5ea236555c7e1e3c6e42a6245136e Mon Sep 17 00:00:00 2001 From: saengel Date: Sun, 11 Aug 2024 14:05:14 -0400 Subject: [PATCH 06/10] feat(secondary nav): logged out language style fixes --- static/css/s2.css | 24 ++++++++++++++++++++++++ static/js/Header.jsx | 18 +++++++++++------- 2 files changed, 35 insertions(+), 7 deletions(-) diff --git a/static/css/s2.css b/static/css/s2.css index 8372a08939..107bb5e213 100644 --- a/static/css/s2.css +++ b/static/css/s2.css @@ -13349,6 +13349,30 @@ span.ref-link-color-3 {color: blue} color: #666666; } +.languageHeader { + padding-right: 10px; + padding-left: 10px; + padding-top: 4px; + padding-bottom: 2px; + font-size: 12px; + font-weight: 400; + line-height: 18px; + text-align: left; + color: var(--medium-grey); + +} + +.languageTogglerFlexContainer{ + display: flex; + flex-direction: row-reverse; + padding: 10px 0px; +} + +.languageDot{ + font-size: 25px; + padding: 10px 2px; +} + @-webkit-keyframes load5 { 0%,100%{box-shadow:0 -2.6em 0 0 #ffffff,1.8em -1.8em 0 0 rgba(0,0,0,0.2),2.5em 0 0 0 rgba(0,0,0,0.2),1.75em 1.75em 0 0 rgba(0,0,0,0.2),0 2.5em 0 0 rgba(0,0,0,0.2),-1.8em 1.8em 0 0 rgba(0,0,0,0.2),-2.6em 0 0 0 rgba(0,0,0,0.5),-1.8em -1.8em 0 0 rgba(0,0,0,0.7)} diff --git a/static/js/Header.jsx b/static/js/Header.jsx index 1f91370c13..5f3e67cdb3 100644 --- a/static/js/Header.jsx +++ b/static/js/Header.jsx @@ -48,15 +48,19 @@ const LoggedOutMenu = () => { Sign up -
+
Site Language
- - עברית - - - English - +
+ + English + + · + + עברית + + +
New additions From 04c1474e5a936729f0e4e9856469a6c0168d77dd Mon Sep 17 00:00:00 2001 From: saengel Date: Mon, 12 Aug 2024 11:18:06 -0400 Subject: [PATCH 07/10] feat(secondary nav): css clean up, dot via pseudoclass --- static/css/s2.css | 8 ++++++-- static/js/Header.jsx | 9 +++++---- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/static/css/s2.css b/static/css/s2.css index 107bb5e213..6608fe058f 100644 --- a/static/css/s2.css +++ b/static/css/s2.css @@ -13362,9 +13362,9 @@ span.ref-link-color-3 {color: blue} } -.languageTogglerFlexContainer{ +.languageToggleFlexContainer{ display: flex; - flex-direction: row-reverse; + flex-direction: row; padding: 10px 0px; } @@ -13373,6 +13373,10 @@ span.ref-link-color-3 {color: blue} padding: 10px 2px; } +.englishLanguageButton::after { + content: "•"; + padding: 0px 4px; +} @-webkit-keyframes load5 { 0%,100%{box-shadow:0 -2.6em 0 0 #ffffff,1.8em -1.8em 0 0 rgba(0,0,0,0.2),2.5em 0 0 0 rgba(0,0,0,0.2),1.75em 1.75em 0 0 rgba(0,0,0,0.2),0 2.5em 0 0 rgba(0,0,0,0.2),-1.8em 1.8em 0 0 rgba(0,0,0,0.2),-2.6em 0 0 0 rgba(0,0,0,0.5),-1.8em -1.8em 0 0 rgba(0,0,0,0.7)} diff --git a/static/js/Header.jsx b/static/js/Header.jsx index 5f3e67cdb3..2f2ddaf5bb 100644 --- a/static/js/Header.jsx +++ b/static/js/Header.jsx @@ -52,10 +52,11 @@ const LoggedOutMenu = () => { Site Language
- - English - - · +
+ + English + +
עברית From c05a1eaabb6aa083148579862fc9327bd1bb23fa Mon Sep 17 00:00:00 2001 From: saengel Date: Thu, 15 Aug 2024 12:20:40 -0700 Subject: [PATCH 08/10] feat(secondary nav): Align hebrew and english text --- static/css/s2.css | 6 +++++- static/js/Header.jsx | 4 ++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/static/css/s2.css b/static/css/s2.css index 6608fe058f..8a3565f477 100644 --- a/static/css/s2.css +++ b/static/css/s2.css @@ -13365,7 +13365,11 @@ span.ref-link-color-3 {color: blue} .languageToggleFlexContainer{ display: flex; flex-direction: row; - padding: 10px 0px; + /* padding: 10px 0px; */ + align-items: baseline; + line-height: 18px; + height: 23px; + padding-bottom: 15px; } .languageDot{ diff --git a/static/js/Header.jsx b/static/js/Header.jsx index 2f2ddaf5bb..872066013f 100644 --- a/static/js/Header.jsx +++ b/static/js/Header.jsx @@ -52,11 +52,11 @@ const LoggedOutMenu = () => { Site Language
-
+ English -
+ עברית From 1b1844955ae3249b2aa4a0ca78343e8bb32fa1da Mon Sep 17 00:00:00 2001 From: saengel Date: Thu, 15 Aug 2024 12:31:02 -0700 Subject: [PATCH 09/10] feat(secondary nav): fix spacing --- static/css/s2.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/static/css/s2.css b/static/css/s2.css index 8a3565f477..581b268ace 100644 --- a/static/css/s2.css +++ b/static/css/s2.css @@ -13264,8 +13264,9 @@ span.ref-link-color-3 {color: blue} } .dropdownItem { - padding: 10px 0px 5px 10px !important; + padding: 10px 5px !important; flex-direction: column; + margin-inline-start: 5px; } .dropdownSeparator { From f7725dd3fecc1d1f8ba3ab1257bb44bd700bf353 Mon Sep 17 00:00:00 2001 From: saengel Date: Sun, 18 Aug 2024 10:23:43 -0700 Subject: [PATCH 10/10] chore(secondary nav): revert accidental added space --- static/js/Misc.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/js/Misc.jsx b/static/js/Misc.jsx index aecaa37473..6b9d179af9 100644 --- a/static/js/Misc.jsx +++ b/static/js/Misc.jsx @@ -1426,7 +1426,7 @@ function InterfaceLanguageMenu({currentLang, translationLanguagePreference, setT Reset -
+ ) : null}