From 5a6470966f7468e10453d6a127960a567e8b4cc8 Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Wed, 29 Apr 2020 16:21:07 +0300 Subject: Layout changes from legacy site --- vnext/src/App.js | 130 +++++++++++++++++++++++------------------------ vnext/src/index.css | 57 ++++----------------- vnext/src/index.html | 18 +++---- vnext/src/ui/Message.css | 9 ++++ 4 files changed, 92 insertions(+), 122 deletions(-) diff --git a/vnext/src/App.js b/vnext/src/App.js index f8788972..f06d482f 100644 --- a/vnext/src/App.js +++ b/vnext/src/App.js @@ -149,72 +149,70 @@ export default function App() { <>
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- { - visitor.uid > 0 && - - } -
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ { + visitor.uid > 0 && + + } ); diff --git a/vnext/src/index.css b/vnext/src/index.css index 6ca33a13..78a094b1 100644 --- a/vnext/src/index.css +++ b/vnext/src/index.css @@ -113,17 +113,6 @@ hr { #app { height: 100%; width: 100%; - overflow: hidden; -} - -#wrapper { - display: grid; - grid-template-areas: "content" "footer"; - grid-template-columns: 100%; - grid-template-rows: 1fr auto; - height: 100%; - width: 100%; - overflow: hidden; } #header { @@ -131,7 +120,6 @@ hr { border-bottom: 1px solid var(--border-color); transition: transform 0.2s; z-index: 10; - overflow-x: hidden; position: fixed; width: 100%; top: 0; @@ -150,11 +138,14 @@ hr { } #sidebar { - grid-area: footer; display: flex; flex-direction: row; justify-content: space-around; border-top: 1px solid var(--border-color); + position: fixed; + bottom: 0; + left: 0; + width: 100%; } .nav_content { @@ -162,10 +153,9 @@ hr { } #content { - grid-area: content; margin-top: 0; - overflow: auto; transition: margin-top 0.4s; + padding-bottom: 64px; } .content--top { @@ -179,7 +169,6 @@ hr { color: var(--text-color); padding: 10px; transition: margin-left 0.4s; - overflow-x: hidden; } .desktop { @@ -335,25 +324,6 @@ hr { color: var(--dimmed-link-color); } -::-webkit-scrollbar { - width: 6px; -} /* this targets the default scrollbar (compulsory) */ -::-webkit-scrollbar-track { - background-color: var(--main-background-color); -} /* the new scrollbar will have a flat appearance with the set background color */ - -::-webkit-scrollbar-thumb { - background-color: #ff339a; -} /* this will style the thumb, ignoring the track */ - -::-webkit-scrollbar-button { - background-color: var(--border-color); -} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */ - -::-webkit-scrollbar-corner { - background-color: black; -} - @media (--viewport-mobile) { #content { margin-bottom: 12px; @@ -363,15 +333,7 @@ hr { } } -@media (--viewport-desktop) { - #app { - overflow: initial; - } - #wrapper { - grid-template-areas: ". footer content ."; - grid-template-columns: auto 240px 760px auto; - overflow: initial; - } +@media (--viewport-desktop) { #header_wrapper, .footer_container { margin: 0 auto; @@ -384,14 +346,17 @@ hr { display: none; } #content { + margin-left: 320px; margin-bottom: 12px; - overflow: initial; + padding-bottom: 12px; } #sidebar { + left: 0; + top: 64px; flex-direction: column; justify-content: initial; border-top: initial; - margin-top: 64px; + width: 320px; } #sidebar a, .l a { diff --git a/vnext/src/index.html b/vnext/src/index.html index 7c408656..e69e1429 100644 --- a/vnext/src/index.html +++ b/vnext/src/index.html @@ -38,16 +38,14 @@ -
-
- -
+
+