From fff349d478a0421a69534e80b227793da84f7834 Mon Sep 17 00:00:00 2001 From: kvakazyambra Date: Tue, 4 Oct 2022 00:31:11 +0300 Subject: [PATCH] Fixed header --- public/icons/comments-outline.svg | 3 + public/icons/pencil-outline.svg | 3 + public/icons/share-outline.svg | 3 + src/components/Nav/Header.module.scss | 152 +++++++++++++++++-------- src/components/Nav/Header.tsx | 21 +++- src/components/Nav/Private.module.scss | 100 ++++++++++++++++ src/components/Nav/Private.scss | 58 ---------- src/components/Nav/Private.tsx | 12 +- src/styles/FourOuFour.module.scss | 9 -- src/styles/app.scss | 1 + 10 files changed, 234 insertions(+), 128 deletions(-) create mode 100644 public/icons/comments-outline.svg create mode 100644 public/icons/pencil-outline.svg create mode 100644 public/icons/share-outline.svg create mode 100644 src/components/Nav/Private.module.scss delete mode 100644 src/components/Nav/Private.scss diff --git a/public/icons/comments-outline.svg b/public/icons/comments-outline.svg new file mode 100644 index 00000000..e79a474f --- /dev/null +++ b/public/icons/comments-outline.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/pencil-outline.svg b/public/icons/pencil-outline.svg new file mode 100644 index 00000000..25e1ded8 --- /dev/null +++ b/public/icons/pencil-outline.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/share-outline.svg b/public/icons/share-outline.svg new file mode 100644 index 00000000..a12b4c26 --- /dev/null +++ b/public/icons/share-outline.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Nav/Header.module.scss b/src/components/Nav/Header.module.scss index b11daeb9..c3251ecf 100644 --- a/src/components/Nav/Header.module.scss +++ b/src/components/Nav/Header.module.scss @@ -20,11 +20,9 @@ } } -.headerFixed { - position: fixed; - top: 0; - - .main-logo { +.headerFixed.headerScrolledBottom, +.headerFixed.headerScrolledTop { + .mainLogo { height: 56px; img { @@ -33,6 +31,11 @@ } } +.headerFixed { + position: fixed; + top: 0; +} + .headerInner { align-items: center; background: #fff; @@ -96,6 +99,7 @@ .usernav { display: inline-flex; padding-right: 0; + position: relative; width: auto; @include media-breakpoint-down(md) { @@ -105,48 +109,47 @@ } } -.mainNavigation { +.mainNavigationWrapper { + padding-left: 0; position: relative; @include font-size(1.7rem); +} - ul { - display: inline-flex; - list-style: none; - margin: 0; - opacity: 1; - padding: 0; - transition: opacity 0.3s; +.mainNavigation { + display: inline-flex; + list-style: none; + margin: 0; + opacity: 1; + padding: 0; + transition: opacity 0.3s; - @include media-breakpoint-down(md) { - background: #fff; - bottom: 0; - display: none; - font-size: 2.6rem; - font-weight: bold; - left: 0; - padding: $container-padding-x; - position: fixed; - top: 74px; - width: 100%; - z-index: 1; + @include media-breakpoint-down(md) { + background: #fff; + bottom: 0; + display: none; + font-size: 2.6rem; + font-weight: bold; + left: 0; + padding: $container-padding-x; + position: fixed; + top: 74px; + width: 100%; + z-index: 1; - li { - margin-bottom: 2.4rem; - } - } - - @include media-breakpoint-down(sm) { - padding: divide($container-padding-x, 2); + li { + margin-bottom: 2.4rem; } } - &.fixed { - ul { - display: inline-flex; + @include media-breakpoint-down(sm) { + padding: divide($container-padding-x, 2); + } - @include media-breakpoint-down(lg) { - display: block !important; - } + &.fixed { + display: inline-flex; + + @include media-breakpoint-down(lg) { + display: block !important; } } @@ -166,8 +169,11 @@ } } -.headerScrolledBottom .mainNavigation { - opacity: 0; +.headerScrolledBottom { + .mainNavigation, + .userControl { + opacity: 0; + } } .burgerContainer { @@ -247,25 +253,29 @@ } } +.articleHeader, +.articleControls { + opacity: 0; + transition: opacity 0.3s, z-index 0s 0.3s; + z-index: -1; + + .headerScrolledBottom & { + transition: opacity 0.3s; + opacity: 1; + z-index: 1; + } +} + .articleHeader { @include font-size(1.4rem); left: 0; margin: 0.2em; - opacity: 0; overflow: hidden; position: absolute; text-overflow: ellipsis; - transition: opacity 0.3s, z-index 0s 0.3s; white-space: nowrap; width: 100%; - z-index: -1; - - .header--scrolled-bottom & { - transition: opacity 0.3s; - opacity: 1; - z-index: 1; - } } .headerSearch { @@ -280,3 +290,47 @@ width: 1em; } } + +.userControl { + opacity: 1; + transition: opacity 0.3s; + z-index: 1; + + .headerScrolledBottom & { + transition: opacity 0.3s, z-index 0s 0.3s; + opacity: 0; + z-index: -1; + } +} + +.articleControls { + display: flex; + left: 0; + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 100%; + + .icon { + margin-left: 1.6rem; + opacity: 0.6; + transition: opacity 0.3s; + } + + img { + vertical-align: middle; + } + + a { + border: none; + + &:hover { + background: none; + + .icon { + filter: none; + opacity: 1; + } + } + } +} diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx index 9b7a1082..c5d33c15 100644 --- a/src/components/Nav/Header.tsx +++ b/src/components/Nav/Header.tsx @@ -10,6 +10,7 @@ import { useStore } from '@nanostores/solid' import { session as ssession } from '../../stores/auth' import { handleClientRouteLinkClick, router, Routes, useRouter } from '../../stores/router' import styles from './Header.module.scss' +import privateStyles from './Private.module.scss' import { getPagePath } from '@nanostores/router' import { getLogger } from '../../utils/logger' import { clsx } from 'clsx' @@ -102,7 +103,7 @@ export const Header = (props: Props) => { {t('Discours')} -
+
{props.title}
    {
-
-
+
+
@@ -137,7 +138,7 @@ export const Header = (props: Props) => {
-
+
@@ -145,9 +146,9 @@ export const Header = (props: Props) => { +
- {t('enter')} +
} @@ -155,6 +156,14 @@ export const Header = (props: Props) => {
+
+ + + + + + +
diff --git a/src/components/Nav/Private.module.scss b/src/components/Nav/Private.module.scss new file mode 100644 index 00000000..817935d1 --- /dev/null +++ b/src/components/Nav/Private.module.scss @@ -0,0 +1,100 @@ +.userControl { + align-items: baseline; + display: flex; + + @include font-size(1.7rem); + + justify-content: flex-end; + + @include media-breakpoint-down(md) { + padding: divide($container-padding-x, 2); + } + + .circlewrap { + margin-right: 0; + } +} + +.userControlItem { + align-items: center; + border: 2px solid #f6f6f6; + border-radius: 100%; + display: flex; + height: 2.4em; + justify-content: center; + margin-left: divide($container-padding-x, 2); + position: relative; + width: 2.4em; + + @include media-breakpoint-up(sm) { + margin-left: 1.2rem; + } + + .circlewrap { + height: 23px; + min-width: 23px; + width: 23px; + } + + a { + border: none; + + &:hover { + background: none; + + &::before { + background-color: #000; + } + + img { + filter: invert(1); + } + } + + img { + filter: invert(0); + transition: filter 0.3s; + } + + &::before { + background-color: #fff; + border-radius: 100%; + content: ''; + height: 100%; + left: 0; + position: absolute; + top: 0; + transition: background-color 0.3s; + width: 100%; + } + } + + img { + height: 20px; + vertical-align: middle; + width: auto; + } + + .text-label { + display: none; + } +} + +.userControlItemWritePost { + @include media-breakpoint-up(lg) { + .icon { + display: none; + } + + .text-label { + display: inline; + } + } +} + +.userControlItemInbox, +.userControlItemSearch { + @include media-breakpoint-down(sm) { + display: none; + } +} diff --git a/src/components/Nav/Private.scss b/src/components/Nav/Private.scss deleted file mode 100644 index b4f6e954..00000000 --- a/src/components/Nav/Private.scss +++ /dev/null @@ -1,58 +0,0 @@ -.usercontrol { - align-items: baseline; - display: flex; - @include font-size(1.7rem); - - justify-content: flex-end; - - @include media-breakpoint-down(md) { - padding: divide($container-padding-x, 2); - } - - .circlewrap { - margin-right: 0; - } -} - -.usercontrol__item { - margin-left: divide($container-padding-x, 2); - - @include media-breakpoint-up(sm) { - margin-left: 3.2rem; - } - - .circlewrap { - height: 23px; - min-width: 23px; - width: 23px; - } - - img { - height: 20px; - vertical-align: middle; - width: auto; - } - - .text-label { - display: none; - } -} - -.usercontrol__item--write-post { - @include media-breakpoint-up(lg) { - .icon { - display: none; - } - - .text-label { - display: inline; - } - } -} - -.usercontrol__item--inbox, -.usercontrol__item--search { - @include media-breakpoint-down(sm) { - display: none; - } -} diff --git a/src/components/Nav/Private.tsx b/src/components/Nav/Private.tsx index 3b4ec787..c9269883 100644 --- a/src/components/Nav/Private.tsx +++ b/src/components/Nav/Private.tsx @@ -1,7 +1,7 @@ import type { Author } from '../../graphql/types.gen' import Userpic from '../Author/Userpic' import { Icon } from './Icon' -import './Private.scss' +import './Private.module.scss' import { session as sesstore } from '../../stores/auth' import { useStore } from '@nanostores/solid' import { useRouter } from '../../stores/router' @@ -11,19 +11,19 @@ export default () => { const { getPage } = useRouter() return ( -
-
+
+
опубликовать материал
-
+
-
+
{/*FIXME: replace with route*/}
@@ -31,7 +31,7 @@ export default () => {
-
+
{/*FIXME: replace with route*/}
diff --git a/src/styles/FourOuFour.module.scss b/src/styles/FourOuFour.module.scss index 9fca1e57..b8a01d3e 100644 --- a/src/styles/FourOuFour.module.scss +++ b/src/styles/FourOuFour.module.scss @@ -1,12 +1,3 @@ -.main-logo { - height: 80px !important; -} - -.main-content { - padding-bottom: 0; - padding-top: 0 !important; -} - .errorPageWrapper { height: 100vh; padding-top: 100px; diff --git a/src/styles/app.scss b/src/styles/app.scss index 675bdd69..d02308f3 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -537,6 +537,7 @@ figcaption { } .main-content--no-padding { + padding-bottom: 0; padding-top: 0; }