From 1067b577fd265bc0a3e6e65c8160410e086bce7a Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Mon, 15 Mar 2021 18:30:18 +0100
Subject: [PATCH] Improve tabs appearance

---
 assets/css/pages/groups/sections/header.css   | 13 ++++++----
 assets/css/pages/groups/sections/tabs.css     | 25 +++++++++++++++++++
 assets/js/pages/groups/main.js                | 10 ++++++++
 assets/js/pages/groups/pages/posts.js         |  7 +++---
 .../pages/groups/sections/GroupTabs.html      |  4 +--
 system/config/dev.config.php                  |  1 +
 6 files changed, 49 insertions(+), 11 deletions(-)
 create mode 100644 assets/css/pages/groups/sections/tabs.css

diff --git a/assets/css/pages/groups/sections/header.css b/assets/css/pages/groups/sections/header.css
index 9a402c92..60f7466d 100644
--- a/assets/css/pages/groups/sections/header.css
+++ b/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 {
diff --git a/assets/css/pages/groups/sections/tabs.css b/assets/css/pages/groups/sections/tabs.css
new file mode 100644
index 00000000..06faac30
--- /dev/null
+++ b/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;
+}
diff --git a/assets/js/pages/groups/main.js b/assets/js/pages/groups/main.js
index 2423b384..361d122f 100644
--- a/assets/js/pages/groups/main.js
+++ b/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(
diff --git a/assets/js/pages/groups/pages/posts.js b/assets/js/pages/groups/pages/posts.js
index b820b732..222ce1be 100644
--- a/assets/js/pages/groups/pages/posts.js
+++ b/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 {Object} info Information about the group to display
+     * @param {AdvancedGroupInfo} 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
diff --git a/assets/templates/pages/groups/sections/GroupTabs.html b/assets/templates/pages/groups/sections/GroupTabs.html
index aee5af89..770ba1ba 100644
--- a/assets/templates/pages/groups/sections/GroupTabs.html
+++ b/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>
diff --git a/system/config/dev.config.php b/system/config/dev.config.php
index 5e54350f..c6f61a77 100644
--- a/system/config/dev.config.php
+++ b/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