aboutsummaryrefslogtreecommitdiff
path: root/vnext/src
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2019-05-08 16:44:10 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:54 +0300
commitffaed83e11abcfdad86e0d952b1ac8c506b48f48 (patch)
tree4ebe936906b4e11b7f584ea656e43bd94cf0c94e /vnext/src
parente1733e62f1e0daaead2882cd13b6379908b53658 (diff)
New layout WIP
Diffstat (limited to 'vnext/src')
-rw-r--r--vnext/src/App.js4
-rw-r--r--vnext/src/index.css46
-rw-r--r--vnext/src/index.js2
-rw-r--r--vnext/src/ui/Header.js1
-rw-r--r--vnext/src/ui/Message.css1
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;