From e9f4a48efd06d539eaaebd75880d569d6d093d58 Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Thu, 3 Nov 2022 16:59:20 +0300 Subject: Switch back to grid layout --- vnext/src/App.js | 143 ++++++++++++++++++++++++++++++------------------- vnext/src/index.css | 93 ++++++++++++++------------------ vnext/src/index.js | 1 - vnext/src/ui/Header.js | 63 +++------------------- 4 files changed, 134 insertions(+), 166 deletions(-) (limited to 'vnext/src') diff --git a/vnext/src/App.js b/vnext/src/App.js index 15e29017..fab438bc 100644 --- a/vnext/src/App.js +++ b/vnext/src/App.js @@ -19,6 +19,7 @@ import { useCookies } from 'react-cookie'; import { me, trends } from './api'; import { useVisitor } from './ui/VisitorContext'; +import Avatar from './ui/Avatar'; /** * @@ -91,8 +92,8 @@ export default function App({ footer }) { }, [hash]); useEffect(() => { - const getTrends = async () => { - setAllTrends(await trends()); + const getTrends = async () => { + setAllTrends(await trends()); }; getTrends(); }, []); @@ -111,66 +112,96 @@ export default function App({ footer }) { return ( <>
-
- { -
+ + } +
+ + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + +
); } diff --git a/vnext/src/index.css b/vnext/src/index.css index 14810bc2..1d9292a2 100644 --- a/vnext/src/index.css +++ b/vnext/src/index.css @@ -48,7 +48,7 @@ html, body { width: 100%; height: 100%; - overscroll-behavior-y: none; + overscroll-behavior: none; } body { @@ -124,12 +124,21 @@ hr { border: none; } +#app { + display: grid; + grid-template-columns: auto; + grid-template-rows: auto 1fr auto; + grid-template-areas: + "header" + "content" + "footer"; +} + #header { + grid-area: header; background: var(--text-background-color); border-bottom: 1px solid var(--border-color); - z-index: 10; - position: fixed; - width: 100%; + position: sticky; top: 0; } @@ -142,17 +151,16 @@ hr { } #sidebar { - position: fixed; + grid-area: footer; + position: sticky; bottom: 0; - left: 0; - width: 100%; + background: var(--text-background-color); z-index: 10; } #sidebar_wrapper { - display: flex; - flex-direction: row; - justify-content: space-around; + display: inline-block; + width: 100%; } .nav_content { @@ -160,8 +168,7 @@ hr { } #content { - margin-top: 64px !important; - padding-bottom: 64px; + grid-area: content; } .desktop { @@ -190,20 +197,14 @@ hr { } #ctitle { - display: flex; - flex: 1; - white-space: nowrap; - overflow: hidden; -} - -#ctitle a { - border-bottom: 2px solid transparent; - text-overflow: ellipsis; - overflow: hidden; + padding: 24px; } #global { display: flex; + flex-direction: row; + justify-content: space-around; + width: 100%; } .l { @@ -211,13 +212,9 @@ hr { flex-flow: row wrap; } -#global a, -#ctitle a { +#global > a { display: flex; align-items: center; -} - -#global a { color: var(--dimmed-link-color); padding: 14px 16px; } @@ -231,7 +228,7 @@ hr { vertical-align: middle; } -#sidebar_wrapper > a:hover { +#global > a:hover { background-color: var(--background-color); border-top: 2px solid #ff339a; cursor: pointer; @@ -250,15 +247,11 @@ hr { font-weight: 400; } -#global a, -#ctitle a, .l a, .msg-button { border-bottom: 2px solid transparent; } -#global a:hover, -#ctitle a:hover, .l a:hover, .msg-button:hover { background-color: var(--background-color); @@ -763,19 +756,18 @@ blockquote { display: none; } - #content { - width: 640px; - margin-bottom: 12px; - padding-bottom: 12px; + #app { + grid-template-rows: auto 1fr; + grid-template-columns: 300px auto; + grid-template-areas: + "sidebar header header" + "sidebar content content" + "sidebar content content"; } #sidebar { - position: sticky; - padding: 12px; - margin-top: 66px; + grid-area: sidebar; height: 100%; - z-index: auto; - overflow-y: auto; } article, @@ -785,28 +777,23 @@ blockquote { } #sidebar_wrapper { - width: 300px; - overflow-y: auto; - height: 100%; - position: fixed; - flex-direction: column; - justify-content: start; + padding: 12px; + display: inline-block; + position: sticky; + top: 0; } - #sidebar_wrapper a, .l a { border-right: 2px solid transparent; } - #sidebar_wrapper > a:hover { + #global > a:hover { border-top: initial; border-right: 2px solid #ff339a; } - #header_wrapper, - #content_wrapper { - width: 1000px; - margin: 0 auto; + #global { + flex-direction: column; } #content_wrapper { diff --git a/vnext/src/index.js b/vnext/src/index.js index 3c354826..6c557ae7 100644 --- a/vnext/src/index.js +++ b/vnext/src/index.js @@ -3,7 +3,6 @@ import { hydrateRoot } from 'react-dom/client'; import { BrowserRouter } from 'react-router-dom'; import { CookiesProvider } from 'react-cookie'; -import './index.css'; import { VisitorProvider } from './ui/VisitorContext'; const Juick = lazy(() => import('./App')); diff --git a/vnext/src/ui/Header.js b/vnext/src/ui/Header.js index db8959ea..4a665605 100644 --- a/vnext/src/ui/Header.js +++ b/vnext/src/ui/Header.js @@ -1,10 +1,9 @@ import { memo, useCallback } from 'react'; import { Link, useNavigate } from 'react-router-dom'; -import Icon from './Icon'; -import { UserLink } from './UserInfo'; import SearchBox from './SearchBox'; import { useVisitor } from './VisitorContext'; +import Avatar from './Avatar'; function Header() { const [visitor] = useVisitor(); @@ -21,60 +20,12 @@ function Header() { return ( ); -- cgit v1.2.3