From bed87f8a10ee8e160322a2d8f964654b23c428fa Mon Sep 17 00:00:00 2001
From: Daniel Siepmann <coding@daniel-siepmann.de>
Date: Fri, 14 Aug 2020 11:46:55 +0200
Subject: [PATCH] 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             |  4 ----
 assets/sass/components/_content.scss |  2 +-
 assets/sass/components/_sidebar.scss | 10 ---------
 assets/sass/index.scss               |  1 -
 config/packages/twig.yaml            |  1 -
 config/routes.yaml                   |  9 ++++----
 public/css/style.css                 | 14 ++----------
 src/Controller/BucketController.php  | 21 +++++++++++++++++-
 templates/base.html.twig             | 10 +--------
 templates/bucket/index.html.twig     | 33 +++++++++++++---------------
 templates/bucket/show.html.twig      | 24 ++++++++++++++++++++
 templates/feed/index.html.twig       | 20 -----------------
 12 files changed, 68 insertions(+), 81 deletions(-)
 delete mode 100644 assets/sass/components/_sidebar.scss
 create mode 100644 templates/bucket/show.html.twig
 delete mode 100644 templates/feed/index.html.twig

diff --git a/assets/sass/_layout.scss b/assets/sass/_layout.scss
index 13cbcda..e69de29 100644
--- a/assets/sass/_layout.scss
+++ b/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));
-}
diff --git a/assets/sass/components/_content.scss b/assets/sass/components/_content.scss
index bfd166d..8b51a5e 100644
--- a/assets/sass/components/_content.scss
+++ b/assets/sass/components/_content.scss
@@ -1,4 +1,4 @@
-body > main > section {
+body > main {
     padding: var(--spacing-elements);
     header h1 {
         margin: 0;
diff --git a/assets/sass/components/_sidebar.scss b/assets/sass/components/_sidebar.scss
deleted file mode 100644
index b77e25e..0000000
--- a/assets/sass/components/_sidebar.scss
+++ /dev/null
@@ -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);
-    }
-}
diff --git a/assets/sass/index.scss b/assets/sass/index.scss
index 0c3b2f1..d5ffe7d 100644
--- a/assets/sass/index.scss
+++ b/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';
diff --git a/config/packages/twig.yaml b/config/packages/twig.yaml
index a159146..747b309 100644
--- a/config/packages/twig.yaml
+++ b/config/packages/twig.yaml
@@ -2,4 +2,3 @@ twig:
     default_path: '%kernel.project_dir%/templates'
     globals:
         app_name: RSS Reader
-        buckets: '@App\Repository\BucketRepository'
diff --git a/config/routes.yaml b/config/routes.yaml
index 47c6097..f6d5ae1 100644
--- a/config/routes.yaml
+++ b/config/routes.yaml
@@ -1,9 +1,10 @@
-# Static pages / templates
 start:
     path: /
-    controller: Symfony\Bundle\FrameworkBundle\Controller\TemplateController
-    defaults:
-        template: 'static/start.html.twig'
+    controller: App\Controller\BucketController::index
+
+buckets:
+    path: /buckets/
+    controller: App\Controller\BucketController::index
 
 bucket:
     path: /bucket/{slug}
diff --git a/public/css/style.css b/public/css/style.css
index 943faf1..208e190 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -51,15 +51,9 @@ body > header {
   body > header h1 {
     margin: 0; }
 
-body > main > nav {
-  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 {
+body > main {
   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)); }
diff --git a/src/Controller/BucketController.php b/src/Controller/BucketController.php
index 1041dfb..6bbe471 100644
--- a/src/Controller/BucketController.php
+++ b/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,
         ]);
     }
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 1bae3c3..650e014 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -13,15 +13,7 @@
         </header>
 
         <main>
-            <nav>
-                {% for bucket in buckets.findAll %}
-                    <a href="{{ path('bucket', {slug: bucket.slug}) }}">{{ bucket.name }}</a>
-                {% endfor %}
-            </nav>
-
-            <section>
-                {% block body %}{% endblock %}
-            </section>
+            {% block body %}{% endblock %}
         </main>
 
         <footer>
diff --git a/templates/bucket/index.html.twig b/templates/bucket/index.html.twig
index 67648bb..a998b1c 100644
--- a/templates/bucket/index.html.twig
+++ b/templates/bucket/index.html.twig
@@ -1,24 +1,21 @@
 {% 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>
+    {% for bucket in buckets %}
+        <article>
+            <h1><a href="{{ path('bucket', {slug: bucket.slug}) }}">Bucket: {{ bucket.name }}</a> <small>with {{ bucket.feeds | length }} feeds</small></h1>
 
-    {# TODO: collect newest entries of all feeds in controller #}
-    {{ include('feed/entries.html.twig', {entries: bucket.feeds.first.entries | slice(0, 10) }) }}
+            <main>
+                <ul>
+                {% for feed in bucket.feeds %}
+                    <li>{{ feed.name }}</li>
+                {% endfor %}
+                </ul>
+            </main>
 
-    <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>
+            <nav>
+            </nav>
+
+        </article>
+    {% endfor %}
 {% endblock %}
diff --git a/templates/bucket/show.html.twig b/templates/bucket/show.html.twig
new file mode 100644
index 0000000..67648bb
--- /dev/null
+++ b/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 %}
diff --git a/templates/feed/index.html.twig b/templates/feed/index.html.twig
deleted file mode 100644
index ca9a9aa..0000000
--- a/templates/feed/index.html.twig
+++ /dev/null
@@ -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 %}