[Directory] Finished implementing groups stream as a plugin

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')];

plugins/Directory/Directory.php

@@ -50,8 +50,15 @@ class Directory extends Module
      */
     public function onStartTwigPopulateVars(array &$vars): bool
     {
-        $vars['main_nav_tabs'][] = ['title' => 'Actors',
+        $vars['main_nav_tabs']=[
+            [
+                'title' => 'Actors',
                 'route' => 'actors',
+            ],
+            [
+                'title' => 'Groups',
+                'route' => 'groups',
+            ]
         ];
 
         return Event::next;

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

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

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

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>

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>
+                        {% for tab in main_nav_tabs %}
                             <li>
-                            <a href="{{ path('groups') }}" class='hover-effect {{ active('groups') }}'>Groups</a>
+                                <a href="{{ path(tab['route']) }}" class='hover-effect {{ active(tab['route']) }}' >{{ tab['title'] }}</a>
                             </li>
+                        {% endfor %}
                     </ul>
                 </nav>
                 <div class="timeline">