Improve layout

Don't have left sidebar.
Add small sidebar to the right of each entry to interact with each
entry.

assets/sass/_layout.scss

@@ -1,4 +0,0 @@
-body > main {
-    display: grid;
-    grid-template-columns: var(--width-sidebar-max) calc(100% - var(--width-sidebar-max));
-}

assets/sass/components/_content.scss

@@ -1,4 +1,4 @@
-body > main > section {
+body > main {
     padding: var(--spacing-elements);
     header h1 {
         margin: 0;

assets/sass/components/_sidebar.scss

@@ -1,10 +0,0 @@
-body > main > nav {
-    border: {
-        right: var(--color-blue-light) solid var(--width-border-default);
-    }
-
-    a {
-        display: block;
-        padding: var(--spacing-small-elements);
-    }
-}

assets/sass/index.scss

@@ -1,7 +1,6 @@
 @import 'variables';
 @import 'elements';
 @import 'components/header';
-@import 'components/sidebar';
 @import 'components/content';
 @import 'components/footer';
 @import 'layout';

config/packages/twig.yaml

@@ -2,4 +2,3 @@ twig:
     default_path: '%kernel.project_dir%/templates'
     globals:
         app_name: RSS Reader
-        buckets: '@App\Repository\BucketRepository'

config/routes.yaml

@@ -1,9 +1,10 @@
-# Static pages / templates
 start:
     path: /
-    controller: Symfony\Bundle\FrameworkBundle\Controller\TemplateController
+    controller: App\Controller\BucketController::index
-    defaults:
+
-        template: 'static/start.html.twig'
+buckets:
+    path: /buckets/
+    controller: App\Controller\BucketController::index
 
 bucket:
     path: /bucket/{slug}

public/css/style.css

@@ -51,15 +51,9 @@ body > header {
   body > header h1 {
     margin: 0; }
 
-body > main > nav {
+body > main {
-  border-right: var(--color-blue-light) solid var(--width-border-default); }
-  body > main > nav a {
-    display: block;
-    padding: var(--spacing-small-elements); }
-
-body > main > section {
   padding: var(--spacing-elements); }
-  body > main > section header h1 {
+  body > main header h1 {
     margin: 0; }
 
 article {
@@ -97,7 +91,3 @@ article {
 body > footer {
   padding: var(--spacing-small-elements);
   border-top: var(--color-blue-light) solid var(--width-border-default); }
-
-body > main {
-  display: grid;
-  grid-template-columns: var(--width-sidebar-max) calc(100% - var(--width-sidebar-max)); }

src/Controller/BucketController.php

@@ -3,13 +3,32 @@
 namespace App\Controller;
 
 use App\Entity\Bucket;
+use App\Repository\BucketRepository;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 
 class BucketController extends AbstractController
 {
-    public function show(Bucket $bucket)
+    /**
+     * @var BucketRepository
+     */
+    private $repository;
+
+    public function __construct(
+        BucketRepository $repository
+    ) {
+        $this->repository = $repository;
+    }
+
+    public function index()
     {
         return $this->render('bucket/index.html.twig', [
+            'buckets' => $this->repository->findAll(),
+        ]);
+    }
+
+    public function show(Bucket $bucket)
+    {
+        return $this->render('bucket/show.html.twig', [
             'bucket' => $bucket,
         ]);
     }

templates/base.html.twig

@@ -13,15 +13,7 @@
         </header>
 
         <main>
-            <nav>
+            {% block body %}{% endblock %}
-                {% for bucket in buckets.findAll %}
-                    <a href="{{ path('bucket', {slug: bucket.slug}) }}">{{ bucket.name }}</a>
-                {% endfor %}
-            </nav>
-
-            <section>
-                {% block body %}{% endblock %}
-            </section>
         </main>
 
         <footer>

templates/bucket/index.html.twig

@@ -1,24 +1,21 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}{{ bucket.name }} | {{ parent() }}{% endblock %}
-
 {% block body %}
-    <header>
+    {% for bucket in buckets %}
-        <h1>Bucket: {{ bucket.name }} <small>with {{ bucket.feeds | length }} feeds</small></h1>
+        <article>
-        <nav> </nav>
+            <h1><a href="{{ path('bucket', {slug: bucket.slug}) }}">Bucket: {{ bucket.name }}</a> <small>with {{ bucket.feeds | length }} feeds</small></h1>
-    </header>
 
-    {# TODO: collect newest entries of all feeds in controller #}
+            <main>
-    {{ include('feed/entries.html.twig', {entries: bucket.feeds.first.entries | slice(0, 10) }) }}
+                <ul>
+                {% for feed in bucket.feeds %}
+                    <li>{{ feed.name }}</li>
+                {% endfor %}
+                </ul>
+            </main>
 
-    <aside>
+            <nav>
-        <h1>Feeds in this bucket</h1>
+            </nav>
-        <ul>
+
-            {% for feed in bucket.feeds %}
+        </article>
-                <li>
+    {% endfor %}
-                    <a href="{{ path('feed', {slug: feed.slug}) }}">{{ feed.name }}</a>
-                </li>
-            {% endfor %}
-        </ul>
-    </aside>
 {% endblock %}

templates/bucket/show.html.twig

@@ -0,0 +1,24 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}{{ bucket.name }} | {{ parent() }}{% endblock %}
+
+{% block body %}
+    <header>
+        <h1>Bucket: {{ bucket.name }} <small>with {{ bucket.feeds | length }} feeds</small></h1>
+        <nav> </nav>
+    </header>
+
+    {# TODO: collect newest entries of all feeds in controller #}
+    {{ include('feed/entries.html.twig', {entries: bucket.feeds.first.entries | slice(0, 10) }) }}
+
+    <aside>
+        <h1>Feeds in this bucket</h1>
+        <ul>
+            {% for feed in bucket.feeds %}
+                <li>
+                    <a href="{{ path('feed', {slug: feed.slug}) }}">{{ feed.name }}</a>
+                </li>
+            {% endfor %}
+        </ul>
+    </aside>
+{% endblock %}

templates/feed/index.html.twig

@@ -1,20 +0,0 @@
-{% extends 'base.html.twig' %}
-
-{% block title %}Hello FeedController!{% endblock %}
-
-{% block body %}
-<style>
-    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
-    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
-</style>
-
-<div class="example-wrapper">
-    <h1>Hello {{ controller_name }}! ✅</h1>
-
-    This friendly message is coming from:
-    <ul>
-        <li>Your controller at <code><a href="{{ '/home/daniels/Projects/own/rss/project/src/Controller/FeedController.php'|file_link(0) }}">src/Controller/FeedController.php</a></code></li>
-        <li>Your template at <code><a href="{{ '/home/daniels/Projects/own/rss/project/templates/feed/index.html.twig'|file_link(0) }}">templates/feed/index.html.twig</a></code></li>
-    </ul>
-</div>
-{% endblock %}