Improve tabs appearance

assets/css/pages/groups/sections/header.css

@@ -4,6 +4,12 @@
  * @author Pierre HUBERT
  */
 
+.group-header {
+    margin-bottom: 0px;
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+    border-bottom: none;
+}
 
 .group-header .group-icon {
     max-height: 150px;
@@ -31,13 +37,10 @@
     display: block;
 }
 
-.group-header .col-md-4 {
-    display: table;
-    margin: auto;
-}
-
 .group-header .box-body {
     display: flex;
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
 }
 
 .group-header .box-body .spacer {

assets/css/pages/groups/sections/tabs.css

@@ -0,0 +1,25 @@
+/**
+ * Groups page tabs
+ *
+ * @author Pierre Hubert
+ */
+
+.group-page.tabs-container {
+    padding-top: 0px;
+}
+
+.group-page.tabs-container .nav-tabs-custom {
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+    border-top: 1px solid #dddddd3d;
+}
+
+
+.group-page.tabs-container .nav-tabs-custom > .nav-tabs > li {
+    border-bottom-color: var(--primary-blue) !important;
+}
+
+.group-page.tabs-container .nav-tabs-custom > .nav-tabs > li.active {
+    border-bottom: 3px solid transparent;
+    border-top: none;
+}

assets/js/pages/groups/main.js

@@ -90,6 +90,16 @@ const GroupsPage = {
 			// Display the tabs of the group
 			await GroupTabs.show(group, target, page);
 
+			switch(page) {
+
+				case "posts":
+					GroupPostsPage.display(group, target)
+					return;
+
+				default:
+					ComunicWeb.common.error.pageNotFound(null, target);
+			}
+
 		} catch(e) {
 			console.error(e);
 			target.appendChild(createCallout(

assets/js/pages/groups/pages/posts.js

@@ -9,11 +9,10 @@ const GroupPostsPage = {
     /**
      * Display information about a group
      * 
-     * @param {Number} id The ID of the group to display
+     * @param {AdvancedGroupInfo} info Information about the group to display
-     * @param {Object} info Information about the group to display
      * @param {HTMLElement} target The target for the page
      */
-    display: function(id, info, target){
+    display: function(info, target){
 
         //Check if the user can create posts or not
         if(ComunicWeb.components.groups.utils.canCreatePosts(info)){
@@ -33,7 +32,7 @@ const GroupPostsPage = {
             });
 
             //Display form
-            ComunicWeb.components.posts.form.display("group", id, postFormCol);
+            ComunicWeb.components.posts.form.display("group", info.id, postFormCol);
         }
 
         //Display group posts

assets/templates/pages/groups/sections/GroupTabs.html

@@ -1,7 +1,7 @@
 <!-- Group tabs section -->
-<div class="row group-page">
-    <div class="col-md-6">
 
+<div class="row group-page tabs-container">
+    <div class="col-md-6">
         <div class="nav-tabs-custom">
             <ul class="nav nav-tabs">
               <li v-bind:class="activePage == 'posts' ? 'active': ''"><a @click="openPage('posts')">tr("Posts")</a></li>

system/config/dev.config.php

@@ -275,6 +275,7 @@ class Dev {
 				"css/pages/groups/sections/header.css",
 				"css/pages/groups/sections/membershipBlock.css",
 				"css/pages/groups/sections/posts.css",
+				"css/pages/groups/sections/tabs.css",
 
 
 			//Settings page