From 77d7fcc138da2ca24c56805d3cd49cd5925a79ad Mon Sep 17 00:00:00 2001
From: "Angelo D. Moura" <up201303828@fe.up.pt>
Date: Wed, 2 Dec 2020 00:59:20 +0000
Subject: [PATCH] [Directory] Finished implementing groups stream as a plugin

---
 plugins/Directory/Controller/Directory.php |  7 +++
 plugins/Directory/Directory.php            | 11 ++++-
 public/assets/css/directory/groups.css     | 54 +++++++++++++++++++++
 public/assets/css/network/public.css       | 56 ----------------------
 public/assets/css/network/public_mid.css   | 56 ----------------------
 templates/directory/group.html.twig        |  2 +-
 templates/directory/groups.html.twig       |  9 ++--
 7 files changed, 77 insertions(+), 118 deletions(-)
 create mode 100644 public/assets/css/directory/groups.css

diff --git a/plugins/Directory/Controller/Directory.php b/plugins/Directory/Controller/Directory.php
index d3f59f08b1..118b3c1386 100644
--- a/plugins/Directory/Controller/Directory.php
+++ b/plugins/Directory/Controller/Directory.php
@@ -38,6 +38,13 @@ class Directory
         return ['_template' => 'directory/actors.html.twig', 'actors' => DB::dql('select g from App\Entity\GSActor g order by g.nickname ASC')];
     }
 
+    /**
+     * groups stream
+     *
+     * @param Request $request
+     *
+     * @return array template
+     */
     public function groups(Request $request)
     {
         return ['_template' => 'directory/groups.html.twig', 'groups' => DB::dql('select g from App\Entity\Group g order by g.nickname ASC')];
diff --git a/plugins/Directory/Directory.php b/plugins/Directory/Directory.php
index ed7ca97693..190dfc12c7 100644
--- a/plugins/Directory/Directory.php
+++ b/plugins/Directory/Directory.php
@@ -50,8 +50,15 @@ class Directory extends Module
      */
     public function onStartTwigPopulateVars(array &$vars): bool
     {
-        $vars['main_nav_tabs'][] = ['title' => 'Actors',
-            'route'                         => 'actors',
+        $vars['main_nav_tabs']=[
+            [
+                'title' => 'Actors',
+                'route' => 'actors',
+            ],
+            [
+                'title' => 'Groups',
+                'route' => 'groups',
+            ]
         ];
 
         return Event::next;
diff --git a/public/assets/css/directory/groups.css b/public/assets/css/directory/groups.css
new file mode 100644
index 0000000000..2e95c4333c
--- /dev/null
+++ b/public/assets/css/directory/groups.css
@@ -0,0 +1,54 @@
+/*groups stream*/
+.groups{
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.groups > h1 {
+    padding: var(--unit-size);
+}
+
+.notes-wrap .timeline .groups > div {
+    margin:  var(--unit-size) var(--unit-size) 0 var(--unit-size);
+    border-radius: var(--unit-size);
+    width: 100%;
+}
+.notes-wrap .timeline .groups > div:last-child {
+    margin:  var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size);
+}
+
+.group{
+    display: flex;
+    flex-wrap: wrap;
+    border: solid 2px var(--accent-low);
+    border-radius: var(--unit-size);
+    box-shadow: var(--shadow);
+    margin-bottom: var(--unit-size);
+}
+
+.group-content {
+    order: 3;
+    word-break: break-word;
+    padding: var(--small-size);
+    border-radius: 0 0 var(--unit-size) var(--unit-size);
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.group-info{
+    order: 3;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.group-description{
+    order: 3;
+    word-break: break-word;
+    padding: var(--small-size);
+    border-radius: 0 0 var(--unit-size) var(--unit-size);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: right;
+}
\ No newline at end of file
diff --git a/public/assets/css/network/public.css b/public/assets/css/network/public.css
index 529de450ea..b833d1492a 100644
--- a/public/assets/css/network/public.css
+++ b/public/assets/css/network/public.css
@@ -411,59 +411,3 @@
     cursor: pointer;
     z-index: 0;
 }
-
-
-/*groups stream*/
-.groups{
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.groups > h1 {
-    padding: var(--unit-size);
-}
-
-.notes-wrap .timeline .groups > div {
-    margin:  var(--unit-size) var(--unit-size) 0 var(--unit-size);
-    border-radius: var(--unit-size);
-    width: 100%;
-}
-.notes-wrap .timeline .groups > div:last-child {
-    margin:  var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size);
-}
-
-.group{
-    display: flex;
-    flex-wrap: wrap;
-    border: solid 2px var(--accent-low);
-    border-radius: var(--unit-size);
-    box-shadow: var(--shadow);
-    margin-bottom: var(--unit-size);
-}
-
-.group-content {
-    order: 3;
-    word-break: break-word;
-    padding: var(--small-size);
-    border-radius: 0 0 var(--unit-size) var(--unit-size);
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-}
-
-.group-info {
-    order: 3;
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.group-description {
-    order: 3;
-    word-break: break-word;
-    padding: var(--small-size);
-    border-radius: 0 0 var(--unit-size) var(--unit-size);
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: right;
-}
diff --git a/public/assets/css/network/public_mid.css b/public/assets/css/network/public_mid.css
index 8b4e4e2dcc..846104ae6b 100644
--- a/public/assets/css/network/public_mid.css
+++ b/public/assets/css/network/public_mid.css
@@ -410,59 +410,3 @@
     cursor: pointer;
     z-index: 0;
 }
-
-/*groups stream*/
-.groups{
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.groups > h1 {
-    padding: var(--unit-size);
-}
-
-.notes-wrap .timeline .groups > div {
-    margin:  var(--unit-size) var(--unit-size) 0 var(--unit-size);
-    border-radius: var(--unit-size);
-    width: 100%;
-}
-
-.notes-wrap .timeline .groups > div:last-child {
-    margin:  var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size);
-}
-
-.group{
-    display: flex;
-    flex-wrap: wrap;
-    border: solid 2px var(--accent-low);
-    border-radius: var(--unit-size);
-    box-shadow: var(--shadow);
-    margin-bottom: var(--unit-size);
-}
-
-.group-content {
-    order: 3;
-    word-break: break-word;
-    padding: var(--small-size);
-    border-radius: 0 0 var(--unit-size) var(--unit-size);
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-}
-
-.group-info {
-    order: 3;
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.group-description {
-    order: 3;
-    word-break: break-word;
-    padding: var(--small-size);
-    border-radius: 0 0 var(--unit-size) var(--unit-size);
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: right;
-}
diff --git a/templates/directory/group.html.twig b/templates/directory/group.html.twig
index 3c02c4dc47..2206334e95 100644
--- a/templates/directory/group.html.twig
+++ b/templates/directory/group.html.twig
@@ -4,7 +4,7 @@
             <div class="group-info">
                 {% set nickname = group.getNickname() %}
                 <div class="group-img">
-                    <img class="icon icon-group" src="{{  asset(group.getStreamLogo()) }}" alt="{{ nickname }}'s logo">
+                    <img class="icon icon-group" src="{{  group.getStreamLogo() }}" alt="{{ nickname }}'s logo">
                 </div>
                 <div class="group-nickname">
                     <b id="nick">{{ nickname }}</b>
diff --git a/templates/directory/groups.html.twig b/templates/directory/groups.html.twig
index 2aefc8b052..46f98672f4 100644
--- a/templates/directory/groups.html.twig
+++ b/templates/directory/groups.html.twig
@@ -14,6 +14,7 @@
           media="screen and (max-width: 1300px)">
     <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public_small.css') }}"
           media="screen and (max-width: 750px)">
+    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/directory/groups.css') }}">
 {% endblock %}
 
 {% block header %}
@@ -90,9 +91,11 @@
                         <li>
                             <a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>Network</a>
                         </li>
-                        <li>
-                            <a href="{{ path('groups') }}" class='hover-effect {{ active('groups') }}'>Groups</a>
-                        </li>
+                        {% for tab in main_nav_tabs %}
+                            <li>
+                                <a href="{{ path(tab['route']) }}" class='hover-effect {{ active(tab['route']) }}' >{{ tab['title'] }}</a>
+                            </li>
+                        {% endfor %}
                     </ul>
                 </nav>
                 <div class="timeline">