diff options
| -rw-r--r-- | vnext/src/App.js | 4 | ||||
| -rw-r--r-- | vnext/src/index.css | 46 | ||||
| -rw-r--r-- | vnext/src/index.js | 2 | ||||
| -rw-r--r-- | vnext/src/ui/Header.js | 1 | ||||
| -rw-r--r-- | vnext/src/ui/Message.css | 1 |
5 files changed, 18 insertions, 36 deletions
diff --git a/vnext/src/App.js b/vnext/src/App.js index 1f7e715e..51c255a6 100644 --- a/vnext/src/App.js +++ b/vnext/src/App.js @@ -79,7 +79,7 @@ export default function App() { return ( <Router> <> - <Header> + <div id="header"> <div id="header_wrapper"> { visitor.uid > 0 ? @@ -121,7 +121,7 @@ export default function App() { } </nav> </div> - </Header> + </div> <section id="content"> <Switch> <Route exact path="/" render={(props) => <Discussions visitor={visitor} {...props} />} /> diff --git a/vnext/src/index.css b/vnext/src/index.css index 83a9a0e6..505298cc 100644 --- a/vnext/src/index.css +++ b/vnext/src/index.css @@ -3,6 +3,10 @@ --main-width: 1000px; } +* { + box-sizing: border-box; +} + html, body, div, @@ -89,7 +93,6 @@ hr { grid-template-areas: "header" "content" "footer"; grid-template-columns: 100%; grid-template-rows: auto 1fr auto; - transition: margin-left 0.2s; min-height: 100%; max-height: 100%; } @@ -101,6 +104,7 @@ hr { transition: transform 0.2s; overflow-x: hidden; } + .header--hidden { transform: translateY(-100%); } @@ -114,25 +118,25 @@ hr { } #sidebar { - display: none; + grid-area: footer; + display: flex; + flex-direction: row; } .nav_content { padding: 10px; } -#wrapper { +#content { background: #fefdfe; grid-area: content; margin-top: 12px; - overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; - transition: margin-left 0.4s; } #footer { - grid-area: footer; + display: none; background: #f8f8f8; border-top: 1px solid #ccc; color: #363636; @@ -287,42 +291,22 @@ hr { @media (--viewport-desktop) { #app { - grid-template-areas: "header header" "content content" "footer footer"; - grid-template-columns: 1fr 1fr; - grid-template-rows: min-content minmax(min-content, 1fr) min-content; + grid-template-areas: "header header header header""moo footer content zoo"; + grid-template-columns: auto 240px 760px auto; + grid-template-rows: auto 1fr; } #header_wrapper, .footer_container { margin: 0 auto; width: var(--main-width); } - #wrapper { - justify-self: center; - width: var(--main-width); - display: grid; - grid-template-columns: 240px minmax(1fr, max-content); - grid-template-rows: auto; - grid-template-areas: "nav feed"; - } .desktop { display: block; } .mobile { display: none; } - #content { - grid-area: feed; - width: 758px; - min-height: 100vh; - } #sidebar { - border: 0; - display: block; - grid-area: nav; - top: inherit; - left: inherit; - z-index: inherit; - overflow-x: inherit; - width: 240px; + flex-direction: column; } -} +}
\ No newline at end of file diff --git a/vnext/src/index.js b/vnext/src/index.js index 26cf26f6..e48d004c 100644 --- a/vnext/src/index.js +++ b/vnext/src/index.js @@ -21,4 +21,4 @@ const JuickApp = () => ( </React.StrictMode> ); -ReactDOM.render(<JuickApp />, document.getElementById('wrapper')); +ReactDOM.render(<JuickApp />, document.getElementById('app')); diff --git a/vnext/src/ui/Header.js b/vnext/src/ui/Header.js index 48f89360..b25879d4 100644 --- a/vnext/src/ui/Header.js +++ b/vnext/src/ui/Header.js @@ -5,7 +5,6 @@ import PropTypes from 'prop-types'; const elClassHidden = 'header--hidden'; const header = document.getElementById('header'); -header.removeChild(document.getElementById('header_wrapper')); export default function Header({ children }) { let dHeight = useRef(0); diff --git a/vnext/src/ui/Message.css b/vnext/src/ui/Message.css index 18d3d0d5..58829336 100644 --- a/vnext/src/ui/Message.css +++ b/vnext/src/ui/Message.css @@ -165,7 +165,6 @@ blockquote { align-items: center; justify-content: center; padding: 12px; - margin: 30px -3px 15px -3px; } .embedContainer > * { box-sizing: border-box; |