From e10a315efd677e33c56c6aef80e38d794578d48c Mon Sep 17 00:00:00 2001
From: m-e-l-u-h-a-n <purushottam.tiwari.cd.cse19@itbhu.ac.in>
Date: Wed, 23 Jun 2021 15:18:01 +0530
Subject: [PATCH] temaplate: Separate stream and user group tabs in user
 profile modal.

We had stream and group tab inside a common div with class
`subscription-group-list` due to this adding any info
elements like alert boxes that were specific to one of them
became difficult. To fix this we keep them in their own
`.tabcontent` div. This change also makes the handling of
display of different tabs a lot easier and cleans
up unnecessary javascript code that was handling the
display of common parent div of stream and group tab.
---
 static/js/popovers.js                   | 15 ++-------------
 static/styles/popovers.css              |  3 ++-
 static/templates/user_profile_modal.hbs |  8 +++++---
 3 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/static/js/popovers.js b/static/js/popovers.js
index 9004317eb1..0aff131487 100644
--- a/static/js/popovers.js
+++ b/static/js/popovers.js
@@ -429,27 +429,16 @@ export function show_user_profile(user) {
             {label: $t({defaultMessage: "User groups"}), key: "groups-tab"},
         ],
         callback(name, key) {
-            function hide_profile_tab() {
-                $("#profile-tab").hide();
-                $(".subscription-group-list").show();
-            }
+            $(".tabcontent").hide();
+            $("#" + key).show();
             switch (name) {
                 case "User groups":
-                    hide_profile_tab();
-                    $("#streams-tab").hide();
                     render_user_group_list(groups_of_user, user);
                     break;
                 case "Streams":
-                    hide_profile_tab();
-                    $("#groups-tab").hide();
                     render_user_stream_list(user_streams, user);
                     break;
-                default:
-                    // default is profile section
-                    $(".subscription-group-list").hide();
-                    break;
             }
-            $("#" + key).show();
         },
     };
 
diff --git a/static/styles/popovers.css b/static/styles/popovers.css
index 0388d3c510..d9854f5b1a 100644
--- a/static/styles/popovers.css
+++ b/static/styles/popovers.css
@@ -362,7 +362,8 @@ ul {
         margin-bottom: 20px;
     }
 
-    .subscription-group-list {
+    .subscription-group-list,
+    .subscription-stream-list {
         position: relative;
         border: 1px solid hsl(0, 0%, 83%);
         border-radius: 4px;
diff --git a/static/templates/user_profile_modal.hbs b/static/templates/user_profile_modal.hbs
index 267018fc86..31cfd96151 100644
--- a/static/templates/user_profile_modal.hbs
+++ b/static/templates/user_profile_modal.hbs
@@ -64,12 +64,14 @@
                 </div>
             </div>
 
-            <div class="subscription-group-list">
-                <div class="tabcontent" id="streams-tab">
+            <div class="tabcontent" id="streams-tab">
+                <div class="subscription-stream-list">
                     <table class="user-stream-list" data-empty="{{t 'No stream subscriptions.'}}"></table>
                 </div>
+            </div>
 
-                <div class="tabcontent" id="groups-tab">
+            <div class="tabcontent" id="groups-tab">
+                <div class="subscription-group-list">
                     <table class="user-group-list" data-empty="{{t 'No user group subscriptions.'}}"></table>
                 </div>
             </div>