sonny/newsreader
1
0
Fork 0
Code Issues 13 Pull requests 2 Projects Releases 58 Packages Wiki Activity Actions

Initial commit

Browse source
This commit is contained in:
Sonny Bakker 2021-06-17 09:21:37 +02:00
parent 426f857f05
commit 762826ed85
9 changed files with 29 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/newsreader/js/pages/homepage/App.js
View file

@ -5,7 +5,6 @@ import { isEqual } from 'lodash';
import { fetchCategories } from './actions/categories'; import { fetchCategories } from './actions/categories';
import Sidebar from './components/sidebar/Sidebar.js';
import PostList from './components/postlist/PostList.js'; import PostList from './components/postlist/PostList.js';
import PostModal from './components/PostModal.js'; import PostModal from './components/PostModal.js';
import Messages from '../../components/Messages.js'; import Messages from '../../components/Messages.js';
@ -15,10 +14,10 @@ class App extends React.Component {
this.props.fetchCategories(); this.props.fetchCategories();
} }
// TODO: render sidebar separate from main component
render() { render() {
return ( return (
<> <>
<Sidebar />
<PostList <PostList
feedUrl={this.props.feedUrl} feedUrl={this.props.feedUrl}
subredditUrl={this.props.subredditUrl} subredditUrl={this.props.subredditUrl}
@ -41,6 +40,7 @@ class App extends React.Component {
/> />
)} )}
{/* TODO: check this styling */}
{this.props.error && ( {this.props.error && (
<Messages messages={[{ type: 'error', text: this.props.error.message }]} /> <Messages messages={[{ type: 'error', text: this.props.error.message }]} />
)} )}

5
src/newsreader/js/pages/homepage/components/sidebar/Sidebar.js
View file

@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { isEqual } from 'lodash';
import { filterCategories, filterRules } from './filters.js'; 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); [CATEGORY_TYPE, RULE_TYPE].includes(this.props.selected.item.type);
return ( return (
<div className="sidebar"> <>
{(this.props.categories.isFetching || this.props.rules.isFetching) && ( {(this.props.categories.isFetching || this.props.rules.isFetching) && (
<LoadingIndicator /> <LoadingIndicator />
)} )}
@ -44,7 +43,7 @@ class Sidebar extends React.Component {
</ul> </ul>
{showReadButton && <ReadButton />} {showReadButton && <ReadButton />}
</div> </>
); );
} }
} }

1
src/newsreader/js/pages/homepage/index.js
View file

@ -16,6 +16,7 @@ if (page) {
const app = ( const app = (
<Provider store={store}> <Provider store={store}>
{/* TODO: split App into Main & Sidebar mounts */}
<App <App
feedUrl={feedUrl.substring(1, feedUrl.length - 3)} feedUrl={feedUrl.substring(1, feedUrl.length - 3)}
subredditUrl={subredditUrl.substring(1, subredditUrl.length - 3)} subredditUrl={subredditUrl.substring(1, subredditUrl.length - 3)}

8
src/newsreader/news/core/templates/news/core/views/homepage.html
View file

@ -1,9 +1,11 @@
{% extends "base.html" %} {% extends "base.html" %}
{% load static %} {% load static %}
{% block content %} {% block page_class %}homepage--page{% endblock %}
<main id="homepage--page" class="main"></main>
{% endblock content %} {% block sidebar %}
<div className="sidebar"></div>
{% endblock %}
{% block scripts %} {% block scripts %}
{{ homepageSettings|json_script:"homepageSettings" }} {{ homepageSettings|json_script:"homepageSettings" }}

5
src/newsreader/scss/components/body/_body.scss
View file

@ -4,6 +4,10 @@
font-family: Rubik, sans-serif; font-family: Rubik, sans-serif;
font-size: $font-size; font-size: $font-size;
display: grid;
grid-template-columns: 1fr 3fr;
grid-gap: 20px;
} }
body { body {
@ -14,5 +18,4 @@ body {
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
} }

6
src/newsreader/scss/components/navbar/_navbar.scss
View file

@ -1,4 +1,7 @@
.nav { .nav {
grid-column: 1 /3;
grid-row: 1;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -6,9 +9,6 @@
padding: 10px 0; padding: 10px 0;
width: 100%; width: 100%;
position: sticky;
top: 0;
background-color: var(--lightest-accent-color); background-color: var(--lightest-accent-color);
ol { ol {

10
src/newsreader/scss/components/sidebar/_sidebar.scss
View file

@ -1,13 +1,10 @@
.sidebar { .sidebar {
grid-column: 1;
grid-row: 2;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
align-self: start;
position: sticky;
top: 50px;
width: 20%;
&__nav { &__nav {
width: 100%; width: 100%;
@ -15,7 +12,6 @@
overflow: auto; overflow: auto;
list-style: none; list-style: none;
} }
&__container { &__container {

5
src/newsreader/scss/pages/homepage/index.scss
View file

@ -1,9 +1,10 @@
#homepage--page { #homepage--page {
grid-column: 2;
grid-row: 2;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: initial; align-items: initial;
width: 100%;
margin: 20px 0 0 0;
background-color: initial; background-color: initial;
} }

8
src/newsreader/templates/base.html
View file

@ -10,7 +10,7 @@
{% endblock %} {% endblock %}
</head> </head>
<body class="body"> <body class="body {% block page_class %}{% endblock %}">
<nav class="nav"> <nav class="nav">
<ol> <ol>
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}
@ -41,7 +41,11 @@
</ul> </ul>
{% endif %} {% endif %}
{% block content %}{% endblock content %} {% block sidebar %}{% endblock %}
<main class="main">
{% block content %}{% endblock content %}
</main>
</body> </body>
{% block scripts %} {% block scripts %}