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 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 (
<>
<Sidebar />
<PostList
feedUrl={this.props.feedUrl}
subredditUrl={this.props.subredditUrl}
@ -41,6 +40,7 @@ class App extends React.Component {
/>
)}
{/* TODO: check this styling */}
{this.props.error && (
<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 { 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 (
<div className="sidebar">
<>
{(this.props.categories.isFetching || this.props.rules.isFetching) && (
<LoadingIndicator />
)}
@ -44,7 +43,7 @@ class Sidebar extends React.Component {
</ul>
{showReadButton && <ReadButton />}
</div>
</>
);
}
}

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

@ -16,6 +16,7 @@ if (page) {
const app = (
<Provider store={store}>
{/* TODO: split App into Main & Sidebar mounts */}
<App
feedUrl={feedUrl.substring(1, feedUrl.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" %}
{% load static %}
{% block content %}
<main id="homepage--page" class="main"></main>
{% endblock content %}
{% block page_class %}homepage--page{% endblock %}
{% block sidebar %}
<div className="sidebar"></div>
{% endblock %}
{% block scripts %}
{{ homepageSettings|json_script:"homepageSettings" }}

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

@ -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;
}
}

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

@ -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 {

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

@ -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 {

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

@ -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;
}

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

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