chore(ui): a bunch of style updates (#235)

* chore(styles): typography updating started * page styles updated * page header nav fix, inline code style fix, table, navigator * use arrow-right icon instead of "»" in bread crumbs * a bunch of updates * make content and write page styles more consistent * rollback layout change * upd color text second * upd sidebar logo text color * resovle someone's ts errors * remove duplicated variables
codex-team · Sep 6, 2022 · 237db3e · 237db3e
1 parent 05f8f0d
commit 237db3e
Show file tree

Hide file tree

Showing 12 changed files with 349 additions and 1,174 deletions.
diff --git a/src/backend/routes/aliases.ts b/src/backend/routes/aliases.ts
@@ -1,10 +1,10 @@
 import express, { Request, Response } from 'express';
-import Aliases from '../controllers/aliases';
-import Pages from '../controllers/pages';
-import Alias from '../models/alias';
-import verifyToken from './middlewares/token';
-import PagesFlatArray from '../models/pagesFlatArray';
-import HttpException from '../exceptions/httpException';
+import Aliases from '../controllers/aliases.js';
+import Pages from '../controllers/pages.js';
+import Alias from '../models/alias.js';
+import verifyToken from './middlewares/token.js';
+import PagesFlatArray from '../models/pagesFlatArray.js';
+import HttpException from '../exceptions/httpException.js';
 
 
 const router = express.Router();
@@ -48,7 +48,7 @@ router.get('*', verifyToken, async (req: Request, res: Response) => {
       }
     }
   } catch (err) {
-    if (err instanceof HttpException && err.status === 404) {
+    if (err instanceof HttpException && (err as HttpException).status === 404) {
       res.status(404).render('error', {
         message: 'Page not found',
         status: 404,
@@ -62,4 +62,4 @@ router.get('*', verifyToken, async (req: Request, res: Response) => {
   }
 });
 
-export default router;
+export default router;
diff --git a/src/backend/views/pages/page.twig b/src/backend/views/pages/page.twig
@@ -3,19 +3,22 @@
 {% block body %}
   <article class="page" data-module="page">
     <header class="page__header">
-      <a href="/" class="page__header-nav">
-        Documentation
-      </a>
-      {% if page._parent %}
-        <a class="page__header-nav"
-          {% if pageParent.uri %}
-            href="/{{ pageParent.uri }}"
-          {% else %}
-            href="/page/{{ pageParent._id }}"
-          {% endif %}>
-          {{ pageParent.title }}
+      <div class="page__header-nav">
+        <a href="/" class="page__header-nav-item">
+          Documentation
         </a>
-      {% endif %}
+        {{ svg('arrow-right') }}
+        {% if page._parent %}
+          <a class="page__header-nav-item"
+            {% if pageParent.uri %}
+              href="/{{ pageParent.uri }}"
+            {% else %}
+              href="/page/{{ pageParent._id }}"
+            {% endif %}>
+            {{ pageParent.title }}
+          </a>
+        {% endif %}
+      </div>
       <time class="page__header-time">
         Last edit {{ (page.body.time / 1000)  | date("M d Y") }}
       </time>
@@ -34,7 +37,9 @@
         {# Skip first header, because it is already showed as a Title #}
         {% if not (loop.first and block.type == 'header') %}
           {% if block.type in ['paragraph', 'header', 'image', 'code', 'list', 'delimiter', 'table', 'warning', 'checklist', 'linkTool', 'raw', 'embed'] %}
-            {% include './blocks/' ~ block.type ~ '.twig' with block.data %}
+            <div class="page__content-block">
+              {% include './blocks/' ~ block.type ~ '.twig' with block.data %}
+            </div>
           {% endif %}
         {% endif %}
       {%  endfor %}

diff --git a/src/frontend/styles/components/header.pcss b/src/frontend/styles/components/header.pcss
@@ -10,15 +10,14 @@ html {
   border-bottom: 1px solid var(--color-line-gray);
   font-size: 18px;
   flex-wrap: wrap;
-  height: var(--layout-height-header);
   box-sizing: border-box;
   position: sticky;
   top: 0;
   background: white;
   z-index: 10;
 
-  @media (--mobile){
-    line-height: 40px;
+  @media (--not-mobile){
+    height: var(--layout-height-header);
   }
 
   &__menu-link,
@@ -36,11 +35,13 @@ html {
   }
 
   &__menu-link {
-    padding: 4px 10px;
     font-weight: 500;
     transition: background-color .13s;
 
-    @apply --squircle;
+    @media (--not-mobile) {
+      padding: 4px 10px;
+      @apply --squircle;
+    }
 
     &:hover {
       background-color: var(--color-link-hover);
@@ -55,8 +56,9 @@ html {
     font-size: 16px;
 
     @media (--mobile) {
+      margin-top: 6px;
       flex-basis: 100%;
-      font-size: 12px;
+      font-size: 14px;
     }
 
     li {
@@ -85,8 +87,8 @@ html {
         @media (--mobile) {
           display: block;
           position: absolute;
-          right: 15px;
-          top: 15px;
+          right: 0;
+          top: 13px;
           line-height: 1em;
         }
       }

diff --git a/src/frontend/styles/components/navigator.pcss b/src/frontend/styles/components/navigator.pcss
@@ -10,13 +10,13 @@
   flex-direction: column;
   justify-content: space-between;
   background-color: var(--color-link-hover);
-  border-radius: 10px;
   padding: 12px 16px 12px 16px;
   color: black;
   width: max-content;
-  font-weight: 500;
   font-size: 14px;
 
+  @apply --squircle;
+
   &--previous {
     align-items: flex-start;
     margin-left: 0;
@@ -29,13 +29,15 @@
 
   &-direction {
     text-transform: capitalize;
-    color: var(--color-direction-navigation);
+    color: var(--color-text-second);
     font-size: 12px;
-    font-weight: 400;
+    line-height: 140%;
+    margin-bottom: 2px;
   }
 
   &-label {
     width: 100%;
+    font-weight: 500;
   }
 }