From 2ccdda19c49bde47874ad59f26903b8c9df6261e Mon Sep 17 00:00:00 2001 From: kvakazyambra Date: Thu, 17 Aug 2023 23:28:24 +0300 Subject: [PATCH 1/4] Update main navigation --- src/components/Nav/Header.module.scss | 84 ++++++++- src/components/Nav/Header.tsx | 234 +++++++++++++++++++++++++- src/pages/about/guide.page.tsx | 20 +-- src/styles/app.scss | 7 +- 4 files changed, 326 insertions(+), 19 deletions(-) diff --git a/src/components/Nav/Header.module.scss b/src/components/Nav/Header.module.scss index 6c6c59bb..967ef756 100644 --- a/src/components/Nav/Header.module.scss +++ b/src/components/Nav/Header.module.scss @@ -124,11 +124,14 @@ font-size: 1.4rem !important; margin: 0 !important; opacity: 1; - text-transform: capitalize; transition: opacity 0.3s; li { margin-bottom: 0 !important; + + &:first-letter { + text-transform: capitalize; + } } @include media-breakpoint-down(md) { @@ -507,3 +510,82 @@ background-color: var(--link-hover-background) !important; } } + +.subnavigation { + background: #fff; + font-weight: 500; + left: 0; + position: absolute; + top: 100%; + width: 100%; + + ul { + display: flex; + flex-wrap: wrap; + height: 6rem; + line-height: 6rem; + padding: 0 150px 0 0; + position: relative; + overflow: hidden; + + @include media-breakpoint-up(xl) { + margin: 0 calc(0.5 * var(--bs-gutter-x)); + } + + li { + margin-right: 2.4rem; + white-space: nowrap; + } + + .rightItem { + margin-right: 0; + position: absolute; + right: 0; + top: 0; + } + } + + a:link, + a:visited { + border: none; + + &:hover { + .subnavigationItemName { + background: #000; + } + + .icon { + filter: invert(1); + } + } + } +} + +.subnavigationItemName { + align-items: center; + background: #fff; + display: flex; + transition: background-color 0.3s; + + .subnavigationFeed & { + line-height: 1.4; + } +} + +.subnavigationFeed { + li { + align-items: center; + display: flex; + } + + .icon { + margin-right: 0.3em; + } +} + +.rightItemIcon { + display: inline-block; + margin-left: 0.3em; + position: relative; + top: 0.15em; +} diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx index 614597da..be286e1d 100644 --- a/src/components/Nav/Header.tsx +++ b/src/components/Nav/Header.tsx @@ -49,6 +49,10 @@ export const Header = (props: Props) => { const [fixed, setFixed] = createSignal(false) const [isSharePopupVisible, setIsSharePopupVisible] = createSignal(false) const [isProfilePopupVisible, setIsProfilePopupVisible] = createSignal(false) + const [isKnowledgeBaseVisible, setIsKnowledgeBaseVisible] = createSignal(false) + const [isTopicsVisible, setIsTopicsVisible] = createSignal(false) + const [isZineVisible, setIsZineVisible] = createSignal(false) + const [isFeedVisible, setIsFeedVisible] = createSignal(false) const toggleFixed = () => setFixed((oldFixed) => !oldFixed) @@ -106,6 +110,14 @@ export const Header = (props: Props) => { }, 'create') } + const toggleSubnavigation = (isShow, signal) => { + setIsKnowledgeBaseVisible(false) + setIsTopicsVisible(false) + setIsZineVisible(false) + setIsFeedVisible(false) + signal(isShow) + } + return (
{ @@ -186,7 +221,200 @@ export const Header = (props: Props) => {
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
diff --git a/src/pages/about/guide.page.tsx b/src/pages/about/guide.page.tsx index 6381dc93..90a80f96 100644 --- a/src/pages/about/guide.page.tsx +++ b/src/pages/about/guide.page.tsx @@ -117,15 +117,13 @@ export const GuidePage = () => {

Материалы в Дискурсе объединяются по темам — ключевым словам, которые располагаются в конце материалов и связывают - материалы по жанрам (например, - интервью, репортажи,{' '} - эссе, ликбезы + материалы по жанрам (например, интервью,{' '} + репортажи, эссе,{' '} + ликбезы ), по тематике (кино,{' '} философия, история,{' '} абсурдизм, секс и т.д.) или - в серии (как « - Законы мира - » или « + в серии (как «Законы мира» или « За линией Маннергейма »). Темы объединяют сотни публикаций, помогают ориентироваться в журнале и следить за интересными материалами. @@ -136,11 +134,11 @@ export const GuidePage = () => {

Дискурс объединяет журналистов, активистов, музыкантов, художников, фотографов, режиссеров, философов, ученых и других замечательных людей. Каждый может{' '} - прислать - свой материал в журнал. Формат и тематика не имеют значения, единственное, - что важно — хороший ли материал. Если - сообщество поддержит вашу публикацию, она выйдет в журнале и станет доступна - тысячам наших читателей. + прислать свой материал в журнал. Формат и тематика + не имеют значения, единственное, что важно —{' '} + хороший ли материал. Если сообщество + поддержит вашу публикацию, она выйдет в журнале и станет доступна тысячам наших + читателей.

diff --git a/src/styles/app.scss b/src/styles/app.scss index 1b8d1620..cc2c43ae 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -337,7 +337,7 @@ button { @include media-breakpoint-up(md) { margin-top: -0.5rem; position: sticky; - top: 90px; + top: 135px; } @include media-breakpoint-up(sm) { @@ -776,7 +776,7 @@ figure { .main-content { flex: 1 100%; min-height: 90vh; - padding-top: 120px; + padding-top: 130px; position: relative; } @@ -855,13 +855,12 @@ figure { .content-index { @include font-size(1.4rem); - line-height: 1.4; margin: 0 3.6rem 2em 0; @include media-breakpoint-up(md) { position: sticky; - top: 10rem; + top: 14rem; } ul ul { From 442d8d4504de1a9d7b9495243ad14a4d937d098d Mon Sep 17 00:00:00 2001 From: kvakazyambra Date: Tue, 29 Aug 2023 01:15:31 +0300 Subject: [PATCH 2/4] Subnavigation fix --- src/components/Nav/Header.module.scss | 29 +++++++++----- src/components/Nav/Header.tsx | 57 ++++++++++++++++++++++----- src/components/Nav/HeaderAuth.tsx | 4 +- 3 files changed, 69 insertions(+), 21 deletions(-) diff --git a/src/components/Nav/Header.module.scss b/src/components/Nav/Header.module.scss index 967ef756..b84fd0b2 100644 --- a/src/components/Nav/Header.module.scss +++ b/src/components/Nav/Header.module.scss @@ -512,18 +512,25 @@ } .subnavigation { - background: #fff; + background: #000; + color: #fff; font-weight: 500; left: 0; position: absolute; top: 100%; + transform: translateY(-2px); width: 100%; + @include media-breakpoint-down(md) { + display: none; + } + ul { display: flex; flex-wrap: wrap; height: 6rem; line-height: 6rem; + margin-bottom: 0; padding: 0 150px 0 0; position: relative; overflow: hidden; @@ -548,31 +555,33 @@ a:link, a:visited { border: none; + color: #fff; + + .icon { + filter: invert(1); + } &:hover { - .subnavigationItemName { - background: #000; - } - - .icon { - filter: invert(1); - } + opacity: 0.5; } } } .subnavigationItemName { align-items: center; - background: #fff; display: flex; transition: background-color 0.3s; .subnavigationFeed & { - line-height: 1.4; + line-height: 60px; } } .subnavigationFeed { + ul { + padding-right: 0; + } + li { align-items: center; display: flex; diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx index be286e1d..07d1d460 100644 --- a/src/components/Nav/Header.tsx +++ b/src/components/Nav/Header.tsx @@ -111,11 +111,27 @@ export const Header = (props: Props) => { } const toggleSubnavigation = (isShow, signal) => { + clearTimer() setIsKnowledgeBaseVisible(false) setIsTopicsVisible(false) setIsZineVisible(false) setIsFeedVisible(false) - signal(isShow) + + if (signal) { + signal(isShow) + } + } + + let timer = 0 + + const clearTimer = () => { + clearTimeout(timer) + } + + const hideSubnavigation = () => { + timer = setTimeout(() => { + toggleSubnavigation(false) + }, 500) } return ( @@ -144,14 +160,15 @@ export const Header = (props: Props) => { {t('Discours')} -
+
{props.title}
-
+
  • Манифест @@ -257,7 +284,12 @@ export const Header = (props: Props) => {
-
+
-
+