Merge branch 'dev' of github.com:Discours/discoursio-webapp into dev

src/components/Nav/Header.scss

@@ -1,13 +1,31 @@
 header {
+  background: #fff;
   margin-bottom: 2.2rem;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 10;
 
   .wide-container {
+    background: #fff;
+
     @include media-breakpoint-down(sm) {
       padding: 0 divide($container-padding-x, 2);
     }
   }
 }
 
+.header--scrolled-bottom,
+.header--scrolled-top {
+  .main-logo {
+    height: 56px;
+
+    img {
+      height: 20px;
+    }
+  }
+}
+
 .header__inner {
   background: #fff;
   border-bottom: 4px solid #000;
@@ -35,8 +53,9 @@ header {
   display: inline-flex;
   height: 70px;
   padding: 0 $container-padding-x 0 0;
-  text-align: center;
   position: relative;
+  transition: height 0.2s;
+  text-align: center;
   z-index: 9;
 
   @include media-breakpoint-up(lg) {
@@ -44,6 +63,10 @@ header {
   }
 
   img {
+    height: 32px;
+    object-fit: contain;
+    object-position: left;
+    transition: height 0.2s;
     vertical-align: middle;
     width: 100px;
 
@@ -79,40 +102,51 @@ nav {
 }
 
 .main-navigation {
-  display: inline-flex;
+  position: relative;
   @include font-size(1.7rem);
 
-  list-style: none;
+  ul {
-  margin: 0;
+    display: inline-flex;
-  padding: 0;
+    list-style: none;
+    margin: 0;
+    opacity: 1;
+    padding: 0;
+    transition: opacity 0.3s;
 
-  @include media-breakpoint-down(md) {
+    @include media-breakpoint-down(md) {
-    background: #fff;
+      background: #fff;
-    bottom: 0;
+      bottom: 0;
-    display: none;
+      display: none;
-    font-size: 2.6rem;
+      font-size: 2.6rem;
-    font-weight: bold;
+      font-weight: bold;
-    left: 0;
+      left: 0;
-    padding: $container-padding-x;
+      padding: $container-padding-x;
-    position: fixed;
+      position: fixed;
-    top: 74px;
+      top: 74px;
-    width: 100%;
+      width: 100%;
-    z-index: 1;
+      z-index: 1;
 
-    li {
+      li {
-      margin-bottom: 2.4rem;
+        margin-bottom: 2.4rem;
+      }
+    }
+
+    @include media-breakpoint-down(sm) {
+      padding: divide($container-padding-x, 2);
+    }
+
+    .header--scrolled-bottom & {
+      opacity: 0;
     }
   }
 
-  @include media-breakpoint-down(sm) {
-    padding: divide($container-padding-x, 2);
-  }
-
   &.fixed {
-    display: inline-flex;
+    ul {
+      display: inline-flex;
 
-    @include media-breakpoint-down(lg) {
+      @include media-breakpoint-down(lg) {
-      display: block !important;
+        display: block !important;
+      }
     }
   }
 
@@ -127,8 +161,8 @@ nav {
   .selected a {
     border-bottom: 2px solid;
     color: #000;
-    pointer-events: none;
     cursor: default;
+    pointer-events: none;
   }
 }
 
@@ -208,3 +242,24 @@ nav {
     }
   }
 }
+
+.article-header {
+  @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;
+  }
+}

src/components/Nav/Header.tsx

@@ -1,4 +1,4 @@
-import { For, Show, createSignal, createMemo, createEffect } 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'
@@ -20,6 +20,8 @@ const resources = [
 
 export const Header = () => {
   // signals
+  const [getIsScrollingBottom, setIsScrollingBottom] = createSignal(false)
+  const [getIsScrolled, setIsScrolled] = createSignal(false)
   const [fixed, setFixed] = createSignal(false)
   const [visibleWarnings, setVisibleWarnings] = createSignal(false)
   // stores
@@ -58,8 +60,28 @@ export const Header = () => {
     handleClientRouteLinkClick(ev)
   }
 
+  onMount(() => {
+    let scrollTop = window.scrollY
+
+    const handleScroll = () => {
+      setIsScrollingBottom(window.scrollY > scrollTop)
+      setIsScrolled(window.scrollY > 0)
+      scrollTop = window.scrollY
+    }
+
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    onCleanup(() => {
+      window.removeEventListener('scroll', handleScroll)
+    })
+  })
+
   return (
-    <header>
+    <header
+      classList={{
+        ['header--scrolled-top']: !getIsScrollingBottom() && getIsScrolled(),
+        ['header--scrolled-bottom']: getIsScrollingBottom() && getIsScrolled()
+      }}
+    >
       <Modal name="auth">
         <AuthModal />
       </Modal>
@@ -70,17 +92,25 @@ export const Header = () => {
               <img src="/logo.svg" alt={t('Discours')} />
             </a>
           </div>
-          <ul class="col main-navigation text-xl inline-flex" classList={{ fixed: fixed() }}>
+          <div class="col main-navigation">
-            <For each={resources}>
+            {/*FIXME article header*/}
-              {(r: { href: string; name: string }) => (
+            <div class="article-header">
-                <li classList={{ selected: r.href === subpath() }}>
+              Дискурс — независимый художественно-аналитический журнал с горизонтальной редакцией,
-                  <a href={r.href} onClick={handleClientRouteLinkClick}>
+              основанный на принципах свободы слова, прямой демократии и совместного редактирования.
-                    {r.name}
+            </div>
-                  </a>
+
-                </li>
+            <ul class="text-xl inline-flex" classList={{ fixed: fixed() }}>
-              )}
+              <For each={resources}>
-            </For>
+                {(r: { href: string; name: string }) => (
-          </ul>
+                  <li classList={{ selected: r.href === subpath() }}>
+                    <a href={r.href} onClick={handleClientRouteLinkClick}>
+                      {r.name}
+                    </a>
+                  </li>
+                )}
+              </For>
+            </ul>
+          </div>
           <div class="usernav">
             <div class="usercontrol col">
               <div class="usercontrol__item">

src/components/Nav/Topics.scss

@@ -1,7 +1,11 @@
 .subnavigation {
   @include font-size(1.5rem);
 
-  margin-bottom: 2.4rem;
+  height: 3em;
+  line-height: 3em;
+  margin-bottom: 1.2rem !important;
+  overflow: hidden;
+  position: relative;
 
   @include media-breakpoint-down(sm) {
     padding: 0 divide($container-padding-x, 2);
@@ -10,6 +14,7 @@
   .topics {
     display: flex;
     flex-wrap: wrap;
+    justify-content: space-between;
     list-style: none;
     margin-right: 2.2rem;
     padding: 0;

src/components/Views/FourOuFour.tsx

@@ -1,5 +1,6 @@
 import { t } from '../../utils/intl'
 import Icon from '../Nav/Icon'
+import '../../styles/FourOuFour.scss'
 
 export const FourOuFour = (_props) => {
   return (
@@ -7,34 +8,34 @@ export const FourOuFour = (_props) => {
       <div class="error-page">
         <div class="container">
           <div class="row">
-            <a href="/">
+            <div class="col-sm-7 offset-sm-3">
-              <img class="error-image" src="/error.svg" alt="error" width="auto" height="auto" />
+              <a href="/" class="image-link">
-            </a>
+                <img class="error-image" src="/error.svg" alt="error" width="auto" height="auto" />
+              </a>
+            </div>
           </div>
           <div class="row">
-            <div class="col-md-2 col-sm-3 col-sm-offset-2">
+            <div class="col-md-2 col-sm-3 offset-sm-2 error-text-container">
               <div class="error-text">
-                <div>{t('Empty')}</div>
+                <div>{t('Error')}</div>
-                <div class="big ng-binding">404</div>
+                <div class="big">404</div>
               </div>
             </div>
-            <div class="col-sm-4">
+            <div class="col-sm-4 search-form-container">
               <div class="error-explain">
-                <p class="text-left">{t(`You've reached a non-existed page`)}</p>
+                <p>{t(`You've reached a non-existed page`)}</p>
-                <p class="text-left">{t('Try to find another way')}:</p>
+                <p>{t('Try to find another way')}:</p>
-                <form class="errorform ng-pristine ng-valid" action="/search" method="get">
+                <form class="errorform pretty-form" action="/search" method="get">
-                  <div class="discours-form">
+                  <div class="pretty-form__item">
-                    <div class="form-group">
+                    <input type="text" name="q" placeholder={t('Search')} id="search-field" />
-                      <a class="col-sm-2">
+                    <label for="search-field">{t('Search')}</label>
-                        <Icon name="search" />
+                    <button type="submit" class="search-submit">
-                      </a>
+                      <Icon name="search" />
-                    </div>
+                    </button>
                   </div>
                 </form>
                 <p class="text-center">
-                  <a class="black-link" href="/">
+                  <a href="/">{t('Back to mainpage')}</a>
-                    {t('Back to mainpage')}
-                  </a>
                 </p>
               </div>
             </div>

src/layouts/zine.astro

@@ -23,7 +23,7 @@ const locale = useStore(langstore)
       <title>{t('Discours')}</title>
     </head>
     <body>
-      <Header />
+      <Header client:load />
       <main class="main-content">
         <Suspense>
           <slot />

src/locales/ru.json

@@ -5,6 +5,7 @@
   "All posts": "Все публикации",
   "All topics": "Все темы",
   "Authors": "Авторы",
+  "Back to mainpage": "Вернуться на главную",
   "Become an author": "Стать автором",
   "Bookmarked": "Сохранено",
   "By alphabet": "По алфавиту",

src/styles/FourOuFour.scss

@@ -0,0 +1,70 @@
+.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;
+}

src/styles/app.scss

@@ -33,7 +33,7 @@ body {
   font-family: Muller, Arial, Helvetica, sans-serif;
   font-size: 2rem;
   line-height: 1.4;
-  height: 100%;
+  min-height: 100%;
   text-size-adjust: 100%;
 
   &.fixed {
@@ -533,6 +533,7 @@ figcaption {
 
 .main-content {
   flex: 1 100%;
+  padding-top: 100px;
   transition: all 1s ease;
 }