From 762826ed8501eda57d90535f3c51d2e39fed133e Mon Sep 17 00:00:00 2001 From: Sonny Bakker Date: Thu, 17 Jun 2021 09:21:37 +0200 Subject: [PATCH 001/150] Initial commit --- src/newsreader/js/pages/homepage/App.js | 4 ++-- .../js/pages/homepage/components/sidebar/Sidebar.js | 5 ++--- src/newsreader/js/pages/homepage/index.js | 1 + .../news/core/templates/news/core/views/homepage.html | 8 +++++--- src/newsreader/scss/components/body/_body.scss | 5 ++++- src/newsreader/scss/components/navbar/_navbar.scss | 6 +++--- src/newsreader/scss/components/sidebar/_sidebar.scss | 10 +++------- src/newsreader/scss/pages/homepage/index.scss | 5 +++-- src/newsreader/templates/base.html | 8 ++++++-- 9 files changed, 29 insertions(+), 23 deletions(-) diff --git a/src/newsreader/js/pages/homepage/App.js b/src/newsreader/js/pages/homepage/App.js index 01ca773..844f7e1 100644 --- a/src/newsreader/js/pages/homepage/App.js +++ b/src/newsreader/js/pages/homepage/App.js @@ -5,7 +5,6 @@ import { isEqual } from 'lodash'; import { fetchCategories } from './actions/categories'; -import Sidebar from './components/sidebar/Sidebar.js'; import PostList from './components/postlist/PostList.js'; import PostModal from './components/PostModal.js'; import Messages from '../../components/Messages.js'; @@ -15,10 +14,10 @@ class App extends React.Component { this.props.fetchCategories(); } + // TODO: render sidebar separate from main component render() { return ( <> - )} + {/* TODO: check this styling */} {this.props.error && ( )} diff --git a/src/newsreader/js/pages/homepage/components/sidebar/Sidebar.js b/src/newsreader/js/pages/homepage/components/sidebar/Sidebar.js index 88a69f2..393ca8c 100644 --- a/src/newsreader/js/pages/homepage/components/sidebar/Sidebar.js +++ b/src/newsreader/js/pages/homepage/components/sidebar/Sidebar.js @@ -1,6 +1,5 @@ import React from 'react'; import { connect } from 'react-redux'; -import { isEqual } from 'lodash'; import { filterCategories, filterRules } from './filters.js'; @@ -33,7 +32,7 @@ class Sidebar extends React.Component { [CATEGORY_TYPE, RULE_TYPE].includes(this.props.selected.item.type); return ( -
+ <> {(this.props.categories.isFetching || this.props.rules.isFetching) && ( )} @@ -44,7 +43,7 @@ class Sidebar extends React.Component { {showReadButton && } -
+ ); } } diff --git a/src/newsreader/js/pages/homepage/index.js b/src/newsreader/js/pages/homepage/index.js index 86cdd09..7f51d80 100644 --- a/src/newsreader/js/pages/homepage/index.js +++ b/src/newsreader/js/pages/homepage/index.js @@ -16,6 +16,7 @@ if (page) { const app = ( + {/* TODO: split App into Main & Sidebar mounts */} -{% endblock content %} +{% block page_class %}homepage--page{% endblock %} + +{% block sidebar %} +
+{% endblock %} {% block scripts %} {{ homepageSettings|json_script:"homepageSettings" }} diff --git a/src/newsreader/scss/components/body/_body.scss b/src/newsreader/scss/components/body/_body.scss index 34bba4c..3eb1c26 100644 --- a/src/newsreader/scss/components/body/_body.scss +++ b/src/newsreader/scss/components/body/_body.scss @@ -4,6 +4,10 @@ font-family: Rubik, sans-serif; font-size: $font-size; + + display: grid; + grid-template-columns: 1fr 3fr; + grid-gap: 20px; } body { @@ -14,5 +18,4 @@ body { padding: 0; box-sizing: border-box; } - } diff --git a/src/newsreader/scss/components/navbar/_navbar.scss b/src/newsreader/scss/components/navbar/_navbar.scss index afdacce..ad81832 100644 --- a/src/newsreader/scss/components/navbar/_navbar.scss +++ b/src/newsreader/scss/components/navbar/_navbar.scss @@ -1,4 +1,7 @@ .nav { + grid-column: 1 /3; + grid-row: 1; + display: flex; justify-content: center; align-items: center; @@ -6,9 +9,6 @@ padding: 10px 0; width: 100%; - position: sticky; - top: 0; - background-color: var(--lightest-accent-color); ol { diff --git a/src/newsreader/scss/components/sidebar/_sidebar.scss b/src/newsreader/scss/components/sidebar/_sidebar.scss index 0521af4..c21f652 100644 --- a/src/newsreader/scss/components/sidebar/_sidebar.scss +++ b/src/newsreader/scss/components/sidebar/_sidebar.scss @@ -1,13 +1,10 @@ .sidebar { + grid-column: 1; + grid-row: 2; + display: flex; flex-direction: column; align-items: center; - align-self: start; - - position: sticky; - top: 50px; - - width: 20%; &__nav { width: 100%; @@ -15,7 +12,6 @@ overflow: auto; list-style: none; - } &__container { diff --git a/src/newsreader/scss/pages/homepage/index.scss b/src/newsreader/scss/pages/homepage/index.scss index 30f5a50..b6eff8b 100644 --- a/src/newsreader/scss/pages/homepage/index.scss +++ b/src/newsreader/scss/pages/homepage/index.scss @@ -1,9 +1,10 @@ #homepage--page { + grid-column: 2; + grid-row: 2; + display: flex; flex-direction: row; align-items: initial; - width: 100%; - margin: 20px 0 0 0; background-color: initial; } diff --git a/src/newsreader/templates/base.html b/src/newsreader/templates/base.html index 3c65329..76dee73 100644 --- a/src/newsreader/templates/base.html +++ b/src/newsreader/templates/base.html @@ -10,7 +10,7 @@ {% endblock %} - +