merged

2022-09-24 03:00:04 +03:00 · 2022-09-24 03:00:04 +03:00 · 3ae82ecb59
commit 3ae82ecb59
parent 95cf7dfca4 4d3c4b1acc
9 changed files with 196 additions and 164 deletions
--- a/astro.config.ts
+++ b/astro.config.ts
@ -10,7 +10,7 @@ import type { CSSOptions } from 'vite'
 import defaultGenerateScopedName from 'postcss-modules/build/generateScopedName'
 import { isDev } from './src/utils/config'

-const PATH_PREFIX = '/src/components/'
+const PATH_PREFIX = '/src/'

 const getDevCssClassPrefix = (filename: string): string => {
  return filename
--- a/src/components/Layouts/MainLayout.tsx
+++ b/src/components/Layouts/MainLayout.tsx
@ -7,12 +7,15 @@ import '../../styles/app.scss'
 type Props = {
  headerTitle?: string
  children: JSX.Element
+  isHeaderFixed?: boolean
 }

 export const MainLayout = (props: Props) => {
+  const isHeaderFixed = props.isHeaderFixed !== undefined ? props.isHeaderFixed : true
+
  return (
    <>
-      <Header title={props.headerTitle} />
+      <Header title={props.headerTitle} isHeaderFixed={isHeaderFixed} />
      <main class="main-content">{props.children}</main>
      <Footer />
    </>
--- a/src/components/Nav/Header.scss
+++ b/src/components/Nav/Header.scss
@ -1,8 +1,6 @@
 header {
  background: #fff;
  margin-bottom: 2.2rem;
-  position: fixed;
-  top: 0;
  width: 100%;
  z-index: 10;

@ -15,8 +13,10 @@ header {
  }
 }

-.header--scrolled-bottom,
-.header--scrolled-top {
+.header--fixed {
+  position: fixed;
+  top: 0;
+
  .main-logo {
    height: 56px;

--- a/src/components/Nav/Header.tsx
+++ b/src/components/Nav/Header.tsx
@ -1,4 +1,4 @@
-import { For, Show, createSignal, createMemo, createEffect, onMount, onCleanup, Suspense } from 'solid-js'
+import { For, Show, createSignal, createMemo, createEffect, onMount, onCleanup } from 'solid-js'
 import Private from './Private'
 import Notifications from './Notifications'
 import { Icon } from './Icon'
@ -27,6 +27,7 @@ const handleEnterClick = () => {

 type Props = {
  title?: string
+  isHeaderFixed?: boolean
 }

 export const Header = (props: Props) => {
@ -82,82 +83,82 @@ export const Header = (props: Props) => {
  })

  return (
-    <Suspense>
-      <header
-        classList={{
-          ['header--scrolled-top']: !getIsScrollingBottom() && getIsScrolled(),
-          ['header--scrolled-bottom']: getIsScrollingBottom() && getIsScrolled()
-        }}
-      >
-        <Modal name="auth">
-          <AuthModal />
-        </Modal>
-        <div class="wide-container">
-          <nav class="row header__inner" classList={{ fixed: fixed() }}>
-            <div class="main-logo col-auto">
-              <a href={getPagePath(router, 'home')} onClick={handleClientRouteLinkClick}>
-                <img src="/logo.svg" alt={t('Discours')} />
-              </a>
-            </div>
-            <div class="col main-navigation">
-              <div class="article-header">{props.title}</div>
+    <header
+      class="main-header"
+      classList={{
+        ['header--fixed']: props.isHeaderFixed,
+        ['header--scrolled-top']: !getIsScrollingBottom() && getIsScrolled(),
+        ['header--scrolled-bottom']: getIsScrollingBottom() && getIsScrolled()
+      }}
+    >
+      <Modal name="auth">
+        <AuthModal />
+      </Modal>
+      <div class="wide-container">
+        <nav class="row header__inner" classList={{ fixed: fixed() }}>
+          <div class="main-logo col-auto">
+            <a href={getPagePath(router, 'home')} onClick={handleClientRouteLinkClick}>
+              <img src="/logo.svg" alt={t('Discours')} />
+            </a>
+          </div>
+          <div class="col main-navigation">
+            <div class="article-header">{props.title}</div>

-              <ul class="col main-navigation text-xl inline-flex" classList={{ fixed: fixed() }}>
-                <For each={resources}>
-                  {(r) => (
-                    <li classList={{ selected: r.route === getPage().route }}>
-                      <a href={getPagePath(router, r.route, null)} onClick={handleClientRouteLinkClick}>
-                        {r.name}
-                      </a>
-                    </li>
-                  )}
-                </For>
-                <li class="header__search">
-                  <a href="#">
-                    <Icon name="search" />
-                    {t('Search')}
-                  </a>
-                </li>
-              </ul>
-            </div>
-            <div class="usernav">
-              <div class="usercontrol col">
-                <div class="usercontrol__item">
-                  <a href="#auth" onClick={handleBellIconClick}>
-                    <div>
-                      <Icon name="bell-white" counter={authorized() ? getWarnings().length : 1} />
-                    </div>
-                  </a>
-                </div>
-
-                <Show when={visibleWarnings()}>
-                  <div class="usercontrol__item notifications">
-                    <Notifications />
+            <ul class="col main-navigation text-xl inline-flex" classList={{ fixed: fixed() }}>
+              <For each={resources}>
+                {(r) => (
+                  <li classList={{ selected: r.route === getPage().route }}>
+                    <a href={getPagePath(router, r.route, null)} onClick={handleClientRouteLinkClick}>
+                      {r.name}
+                    </a>
+                  </li>
+                )}
+              </For>
+              <li class="header__search">
+                <a href="#">
+                  <Icon name="search" />
+                  {t('Search')}
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div class="usernav">
+            <div class="usercontrol col">
+              <div class="usercontrol__item">
+                <a href="#auth" onClick={handleBellIconClick}>
+                  <div>
+                    <Icon name="bell-white" counter={authorized() ? getWarnings().length : 1} />
                  </div>
-                </Show>
+                </a>
+              </div>

-                <Show
-                  when={authorized()}
-                  fallback={
-                    <div class="usercontrol__item loginbtn">
-                      <a href="#auth" onClick={handleEnterClick}>
-                        {t('enter')}
-                      </a>
-                    </div>
-                  }
-                >
-                  <Private />
-                </Show>
-              </div>
+              <Show when={visibleWarnings()}>
+                <div class="usercontrol__item notifications">
+                  <Notifications />
+                </div>
+              </Show>
+
+              <Show
+                when={authorized()}
+                fallback={
+                  <div class="usercontrol__item loginbtn">
+                    <a href="#auth" onClick={handleEnterClick}>
+                      {t('enter')}
+                    </a>
+                  </div>
+                }
+              >
+                <Private />
+              </Show>
            </div>
-            <div class="burger-container">
-              <div class="burger" classList={{ fixed: fixed() }} onClick={toggleFixed}>
-                <div />
-              </div>
+          </div>
+          <div class="burger-container">
+            <div class="burger" classList={{ fixed: fixed() }} onClick={toggleFixed}>
+              <div />
            </div>
-          </nav>
-        </div>
-      </header>
-    </Suspense>
+          </div>
+        </nav>
+      </div>
+    </header>
  )
 }
--- a/src/components/Nav/Topics.scss
+++ b/src/components/Nav/Topics.scss
@ -17,6 +17,7 @@
    justify-content: space-between;
    list-style: none;
    margin-right: 2.2rem;
+    margin-top: 0;
    padding: 0;
  }

--- a/src/components/Pages/FourOuFourPage.tsx
+++ b/src/components/Pages/FourOuFourPage.tsx
@ -3,7 +3,7 @@ import { MainLayout } from '../Layouts/MainLayout'

 export const FourOuFourPage = () => {
  return (
-    <MainLayout>
+    <MainLayout isHeaderFixed={false}>
      <FourOuFourView />
    </MainLayout>
  )
--- a/src/components/Views/FourOuFour.tsx
+++ b/src/components/Views/FourOuFour.tsx
@ -1,40 +1,41 @@
 import { t } from '../../utils/intl'
 import { Icon } from '../Nav/Icon'
-import '../../styles/FourOuFour.scss'
+import styles from '../../styles/FourOuFour.module.scss'
+import clsx from 'clsx'

 export const FourOuFourView = (_props) => {
  return (
-    <div class="error-page-wrapper">
-      <div class="error-page">
+    <div class={styles.errorPageWrapper}>
+      <div class={styles.errorPage}>
        <div class="container">
          <div class="row">
-            <div class="col-sm-7 offset-sm-3">
+            <div class="col-md-7 offset-md-3">
              <a href="/" class="image-link">
-                <img class="error-image" src="/error.svg" alt="error" width="auto" height="auto" />
+                <img class={styles.errorImage} src="/error.svg" alt="error" width="auto" height="auto" />
              </a>
            </div>
          </div>
          <div class="row">
-            <div class="col-md-2 col-sm-3 offset-sm-2 error-text-container">
-              <div class="error-text">
+            <div class={clsx(styles.errorTextContainer, 'col-md-2 col-sm-3 offset-sm-1 offset-md-2')}>
+              <div class={styles.errorText}>
                <div>{t('Error')}</div>
-                <div class="big">404</div>
+                <div class={styles.big}>404</div>
              </div>
            </div>
-            <div class="col-sm-4 search-form-container">
-              <div class="error-explain">
+            <div class={clsx(styles.searchFormContainer, 'col-sm-5 col-md-4')}>
+              <div class={styles.errorExplain}>
                <p>{t(`You've reached a non-existed page`)}</p>
                <p>{t('Try to find another way')}:</p>
-                <form class="errorform pretty-form" action="/search" method="get">
-                  <div class="pretty-form__item">
+                <form class={clsx(styles.prettyForm, 'pretty-form')} action="/search" method="get">
+                  <div class={clsx(styles.prettyFormItem, 'pretty-form__item')}>
                    <input type="text" name="q" placeholder={t('Search')} id="search-field" />
                    <label for="search-field">{t('Search')}</label>
-                    <button type="submit" class="search-submit">
+                    <button type="submit" class={styles.searchSubmit}>
                      <Icon name="search" />
                    </button>
                  </div>
                </form>
-                <p class="text-center">
+                <p class={styles.textCenter}>
                  <a href="/">{t('Back to mainpage')}</a>
                </p>
              </div>
--- a/src/styles/FourOuFour.module.scss
+++ b/src/styles/FourOuFour.module.scss
@ -0,0 +1,96 @@
+header {
+  position: absolute;
+}
+
+footer {
+  display: none;
+}
+
+.main-logo {
+  height: 80px !important;
+}
+
+main {
+  padding-bottom: 0;
+  padding-top: 0 !important;
+}
+
+.errorPageWrapper {
+  height: 100vh;
+  padding-top: 100px;
+}
+
+.errorPage {
+  position: relative;
+  top: 35%;
+  transform: translateY(-43%);
+
+  .image-link:hover {
+    background: none;
+  }
+
+  .prettyForm {
+    margin-top: 0.5em;
+  }
+
+  .prettyFormItem input {
+    padding-right: 2.7em;
+  }
+
+  .textCenter {
+    text-align: center;
+  }
+}
+
+.searchSubmit {
+  height: 100%;
+  padding: 0 1em;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.errorImage {
+  display: block;
+  margin: auto;
+  width: 85%;
+}
+
+.errorText {
+  font-weight: 300;
+  left: 52px;
+  margin-bottom: 1em;
+  position: relative;
+  top: -2.25em;
+
+  @include font-size(3rem);
+
+  @include media-breakpoint-up(sm) {
+    left: 80px;
+    position: absolute;
+    text-align: center;
+  }
+
+  .big {
+    font-weight: 900;
+    letter-spacing: 4px;
+
+    @include font-size(7rem);
+  }
+}
+
+.errorExplain {
+  font-size: 16px;
+  position: absolute;
+  top: -3.4em;
+  left: 65px;
+
+  p {
+    margin: 0 0 0.3em;
+  }
+}
+
+.errorTextContainer,
+.searchFormContainer {
+  position: relative;
+}
--- a/src/styles/FourOuFour.scss
+++ b/src/styles/FourOuFour.scss
@ -1,70 +0,0 @@
-.error-page-wrapper {
-  height: 100vh;
-}
-
-.error-page {
-  position: relative;
-  top: 35%;
-  transform: translateY(-40%);
-
-  .error-image {
-    display: block;
-    margin: auto;
-    width: 85%;
-  }
-
-  .error-text {
-    font-weight: 300;
-    font-size: 28px;
-    left: 80px;
-    position: absolute;
-    text-align: center;
-    top: -2.25em;
-
-    .big {
-      font-weight: 900;
-      letter-spacing: 4px;
-      font-size: 60px;
-    }
-  }
-
-  .error-explain {
-    font-size: 16px;
-    position: absolute;
-    top: -3.4em;
-    left: 65px;
-
-    p {
-      margin: 0 0 0.3em;
-    }
-  }
-
-  .image-link:hover {
-    background: none;
-  }
-
-  .search-submit {
-    height: 100%;
-    padding: 0 1em;
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-
-  .pretty-form {
-    margin-top: 0.5em;
-  }
-
-  .pretty-form__item input {
-    padding-right: 2.7em;
-  }
-
-  .text-center {
-    text-align: center;
-  }
-}
-
-.error-text-container,
-.search-form-container {
-  position: relative;
-}