Team details page.

TNL-1906

common/test/acceptance/pages/lms/teams.py

@@ -252,3 +252,63 @@ class TeamPage(CoursePage, PaginatedUIMixin):
     def team_description(self):
         """Get the team's description as displayed in the page header"""
         return self.q(css=TEAMS_HEADER_CSS + ' .page-description')[0].text
+
+    @property
+    def team_members_present(self):
+        """Verifies that team members are present"""
+        return self.q(css='.page-content-secondary .team-members .team-member').present
+
+    @property
+    def team_capacity_text(self):
+        """Returns team capacity text"""
+        return self.q(css='.page-content-secondary .team-capacity :last-child').text[0]
+
+    @property
+    def team_location(self):
+        """ Returns team location/country. """
+        return self.q(css='.page-content-secondary .team-country :last-child').text[0]
+
+    @property
+    def team_language(self):
+        """ Returns team location/country. """
+        return self.q(css='.page-content-secondary .team-language :last-child').text[0]
+
+    @property
+    def team_user_membership_text(self):
+        """Returns the team membership text"""
+        query = self.q(css='.page-content-secondary > .team-user-membership-status')
+        return query.text[0] if query.present else ''
+
+    @property
+    def team_leave_link_present(self):
+        """Verifies that team leave link is present"""
+        return self.q(css='.leave-team-link').present
+
+    @property
+    def team_invite_section_present(self):
+        """Verifies that invite section is present"""
+        return self.q(css='.page-content-secondary .invite-team').present
+
+    @property
+    def team_members(self):
+        """Returns the number of team members in this team"""
+        return len(self.q(css='.page-content-secondary .team-member'))
+
+    def click_first_profile_image(self):
+        """Clicks on first team member's profile image"""
+        self.q(css='.page-content-secondary .members-info > .team-member').first.click()
+
+    @property
+    def first_member_username(self):
+        """Returns the username of team member"""
+        return self.q(css='.page-content-secondary .tooltip-custom').text[0]
+
+    @property
+    def team_invite_help_text(self):
+        """Returns the team invite help text"""
+        return self.q(css='.page-content-secondary .invite-text').text[0]
+
+    @property
+    def team_invite_url(self):
+        """Returns the url of invite link box"""
+        return self.q(css='.page-content-secondary .invite-link-input').attrs('value')[0]

lms/djangoapps/teams/static/teams/js/collections/team.js

@@ -8,6 +8,7 @@
 
                     this.course_id = options.course_id;
                     this.server_api['topic_id'] = this.topic_id = options.topic_id;
+                    this.server_api['expand'] = 'user';
                     this.perPage = options.per_page;
                     this.server_api['course_id'] = function () { return encodeURIComponent(this.course_id); };
                     this.server_api['order_by'] = function () { return 'name'; }; // TODO surface sort order in UI

lms/djangoapps/teams/static/teams/js/spec/views/team_profile_spec.js

@@ -5,26 +5,41 @@ define([
 ], function (_, AjaxHelpers, TeamModel, TeamProfileView, TeamSpecHelpers, DiscussionSpecHelper) {
     'use strict';
     describe('TeamProfileView', function () {
-        var discussionView, createTeamProfileView;
+        var profileView, createTeamProfileView;
 
         beforeEach(function () {
             DiscussionSpecHelper.setUnderscoreFixtures();
         });
 
-        createTeamProfileView = function(requests) {
+        createTeamProfileView = function(requests, options) {
             var model = new TeamModel(
                 {
                     id: "test-team",
                     name: "Test Team",
-                    discussion_topic_id: TeamSpecHelpers.testTeamDiscussionID
+                    discussion_topic_id: TeamSpecHelpers.testTeamDiscussionID,
+                    country: options.country || '',
+                    language: options.language || '',
+                    membership: options.membership || []
                 },
                 { parse: true }
             );
-            discussionView = new TeamProfileView({
+            profileView = new TeamProfileView({
                 courseID: TeamSpecHelpers.testCourseID,
-                model: model
+                model: model,
+                maxTeamSize: options.maxTeamSize || 3,
+                requestUsername: 'bilbo',
+                countries : [
+                    ['', ''],
+                    ['US', 'United States'],
+                    ['CA', 'Canada']
+                ],
+                languages : [
+                    ['', ''],
+                    ['en', 'English'],
+                    ['fr', 'French']
+                ]
             });
-            discussionView.render();
+            profileView.render();
             AjaxHelpers.expectRequest(
                 requests,
                 'GET',
@@ -38,13 +53,147 @@ define([
                 )
             );
             AjaxHelpers.respondWithJson(requests, TeamSpecHelpers.createMockDiscussionResponse());
-            return discussionView;
+            return profileView;
         };
 
-        it('can render itself', function () {
-            var requests = AjaxHelpers.requests(this),
-                view = createTeamProfileView(requests);
-            expect(view.$('.discussion-thread').length).toEqual(3);
+        describe('DiscussionsView', function() {
+            it('can render itself', function () {
+                var requests = AjaxHelpers.requests(this),
+                    view = createTeamProfileView(requests, {});
+                expect(view.$('.discussion-thread').length).toEqual(3);
+            });
+        });
+
+        describe('TeamDetailsView', function() {
+
+            var assertTeamDetails = function(view, members) {
+                expect(view.$('.team-detail-header').text()).toBe('Team Details');
+                expect(view.$('.team-country').text()).toContain('United States');
+                expect(view.$('.team-language').text()).toContain('English');
+                expect(view.$('.team-capacity').text()).toContain(members + ' / 3 Members');
+                expect(view.$('.team-member').length).toBe(members);
+            };
+
+            describe('Non-Member', function() {
+
+                it('can render itself', function() {
+                    var requests = AjaxHelpers.requests(this);
+                    var view = createTeamProfileView(requests, {
+                        country: 'US',
+                        language: 'en'
+                    });
+                    assertTeamDetails(view, 0);
+                    expect(view.$('.team-user-membership-status').length).toBe(0);
+
+                    // Verify that invite and leave team sections are not present.
+                    expect(view.$('.leave-team').length).toBe(0);
+                    expect(view.$('.invite-team').length).toBe(0);
+
+                });
+                it('cannot see the country & language if empty', function() {
+                    var requests = AjaxHelpers.requests(this);
+                    var view = createTeamProfileView(requests, {});
+                    expect(view.$('.team-country').length).toBe(0);
+                    expect(view.$('.team-language').length).toBe(0);
+                });
+            });
+
+            describe('Member', function() {
+
+                it('can render itself', function() {
+                    var requests = AjaxHelpers.requests(this);
+                    var view = createTeamProfileView(requests, {
+                        country: 'US',
+                        language: 'en',
+                        membership: [{
+                            'user': {
+                                'username': 'bilbo',
+                                'profile_image': {
+                                    'has_image': true,
+                                    'image_url_medium': '/image-url'
+                                }
+                            }
+                        }]
+                    });
+                    assertTeamDetails(view, 1);
+                    expect(view.$('.team-user-membership-status').text().trim()).toBe('You are a member of this team.');
+
+                    // assert tooltip text.
+                    expect(view.$('.member-profile p').text()).toBe('bilbo');
+                    // assert user profile page url.
+                    expect(view.$('.member-profile').attr('href')).toBe('/u/bilbo');
+
+                    //Verify that invite and leave team sections are present
+                    expect(view.$('.leave-team-link').text()).toContain('Leave Team');
+                    expect(view.$('.invite-header').text()).toContain('Invite Others');
+                    expect(view.$('.invite-text').text()).toContain('Send this link to friends so that they can join too.');
+                    expect(view.$('.invite-link-input').length).toBe(1);
+
+                });
+                it('cannot see invite url box if team is full', function() {
+                    var requests = AjaxHelpers.requests(this);
+                    var view = createTeamProfileView(requests , {
+                        country: 'US',
+                        language: 'en',
+                        membership: [{
+                            'user': {
+                                'username': 'bilbo',
+                                'profile_image': {
+                                    'has_image': true,
+                                    'image_url_medium': '/image-url'
+                                }
+                            }
+                        },
+                        {
+                            'user': {
+                                'username': 'bilbo1',
+                                'profile_image': {
+                                    'has_image': true,
+                                    'image_url_medium': '/image-url'
+                                }
+                            }
+                        },
+                        {
+                            'user': {
+                                'username': 'bilbo2',
+                                'profile_image': {
+                                    'has_image': true,
+                                    'image_url_medium': '/image-url'
+                                }
+                            }
+                        }]
+                    });
+
+                    assertTeamDetails(view, 3);
+                    expect(view.$('.invite-header').text()).toContain('Invite Others');
+                    expect(view.$('.invite-text').text()).toContain('No invitations are available. This team is full.');
+                    expect(view.$('.invite-link-input').length).toBe(0);
+                });
+                it('can see & select invite url if team has capacity', function() {
+                    var requests = AjaxHelpers.requests(this);
+                    spyOn(TeamProfileView.prototype, 'selectText');
+
+                    var view = createTeamProfileView(requests, {
+                        country: 'US',
+                        language: 'en',
+                        membership: [{
+                            'user': {
+                                'username': 'bilbo',
+                                'profile_image': {
+                                    'has_image': true,
+                                    'image_url_medium': '/image-url'
+                                }
+                            }
+                        }]
+                    });
+                    assertTeamDetails(view, 1);
+
+                    expect(view.$('.invite-link-input').length).toBe(1);
+
+                    view.$('.invite-link-input').click();
+                    expect(view.selectText).toHaveBeenCalled();
+                });
+            });
         });
     });
 });

lms/djangoapps/teams/static/teams/js/spec/views/teams_tab_spec.js

@@ -92,7 +92,7 @@ define([
                 var requests = AjaxHelpers.requests(this),
                     teamsTabView = createTeamsTabView();
                 teamsTabView.router.navigate('teams/test_topic/no_such_team', {trigger: true});
-                AjaxHelpers.expectRequest(requests, 'GET', 'api/teams/no_such_team', null);
+                AjaxHelpers.expectRequest(requests, 'GET', 'api/teams/no_such_team?expand=user', null);
                 AjaxHelpers.respondWithError(requests, 404);
                 expectError(teamsTabView, 'The team "no_such_team" could not be found.');
                 expectFocus(teamsTabView.$('.warning'));

lms/djangoapps/teams/static/teams/js/views/team_card.js

@@ -5,8 +5,9 @@
         'underscore',
         'gettext',
         'js/components/card/views/card',
+        'teams/js/views/team_utils',
         'text!teams/templates/team-country-language.underscore'
-    ], function (Backbone, _, gettext, CardView, teamCountryLanguageTemplate) {
+    ], function (Backbone, _, gettext, CardView, TeamUtils, teamCountryLanguageTemplate) {
         var TeamMembershipView, TeamCountryLanguageView, TeamCardView;
 
         TeamMembershipView = Backbone.View.extend({
@@ -25,15 +26,7 @@
                 var memberships = this.model.get('membership'),
                     maxMemberCount = this.maxTeamSize;
                 this.$el.html(this.template({
-                    membership_message: interpolate(
-                        // Translators: The following message displays the number of members on a team.
-                        ngettext(
-                            '%(member_count)s / %(max_member_count)s Member',
-                            '%(member_count)s / %(max_member_count)s Members',
-                            maxMemberCount
-                        ),
-                        {member_count: memberships.length, max_member_count: maxMemberCount}, true
-                    )
+                    membership_message: TeamUtils.teamCapacityText(memberships.length, maxMemberCount)
                 }));
                 _.each(memberships, function (membership) {
                     this.$('list-member-thumbs').append(

lms/djangoapps/teams/static/teams/js/views/team_profile.js

@@ -4,26 +4,66 @@
 ;(function (define) {
     'use strict';
     define(['backbone', 'underscore', 'gettext', 'teams/js/views/team_discussion',
-            'text!teams/templates/team-profile.underscore'],
-        function (Backbone, _, gettext, TeamDiscussionView, teamTemplate) {
+            'teams/js/views/team_utils',
+            'text!teams/templates/team-profile.underscore',
+            'text!teams/templates/team-member.underscore'
+        ],
+        function (Backbone, _, gettext, TeamDiscussionView, TeamUtils, teamTemplate, teamMemberTemplate) {
             var TeamProfileView = Backbone.View.extend({
+
+                events: {
+                    'click .invite-link-input': 'selectText'
+                },
                 initialize: function (options) {
                     this.courseID = options.courseID;
                     this.discussionTopicID = this.model.get('discussion_topic_id');
+                    this.maxTeamSize = options.maxTeamSize;
+                    this.memberships = this.model.get('membership');
                     this.readOnly = options.readOnly;
+                    this.requestUsername = options.requestUsername;
+                    this.teamInviteUrl = options.teamInviteUrl;
+
+                    this.countries = TeamUtils.selectorOptionsArrayToHashWithBlank(options.countries);
+                    this.languages = TeamUtils.selectorOptionsArrayToHashWithBlank(options.languages);
+
                 },
 
                 render: function () {
                     this.$el.html(_.template(teamTemplate, {
                         courseID: this.courseID,
                         discussionTopicID: this.discussionTopicID,
-                        readOnly: this.readOnly
+                        readOnly: this.readOnly,
+                        country: this.countries[this.model.get('country')],
+                        language: this.languages[this.model.get('language')],
+                        membershipText: TeamUtils.teamCapacityText(this.memberships.length, this.maxTeamSize),
+                        isMember: TeamUtils.isUserMemberOfTeam(this.memberships, this.requestUsername),
+                        hasCapacity: this.memberships.length < this.maxTeamSize,
+                        inviteLink: this.teamInviteUrl
+
                     }));
                     this.discussionView = new TeamDiscussionView({
                         el: this.$('.discussion-module')
                     });
                     this.discussionView.render();
+
+                    this.renderTeamMembers();
                     return this;
+                },
+
+                renderTeamMembers: function() {
+                    var view = this;
+                    _.each(this.memberships, function(membership) {
+                        view.$('.members-info').append(_.template(teamMemberTemplate, {
+                            imageUrl: membership.user.profile_image.image_url_medium,
+                            username: membership.user.username,
+                            memberProfileUrl: '/u/' + membership.user.username
+                        }));
+                    });
+                },
+
+                selectText: function(event) {
+                    event.preventDefault();
+                    $(event.currentTarget).select();
                 }
             });
 

lms/djangoapps/teams/static/teams/js/views/team_utils.js

+/*  Team utility methods*/
+;(function (define) {
+    'use strict';
+    define([
+    ], function () {
+        return {
+
+            /**
+             * Convert a 2d array to an object equivalent with an additional blank element
+             *
+             * @param options {Array.<Array.<string>>} Two dimensional options array
+             * @returns {Object} Hash version of the input array
+             * @example selectorOptionsArrayToHashWithBlank([["a", "alpha"],["b","beta"]])
+             * // returns {"a":"alpha", "b":"beta", "":""}
+             */
+            selectorOptionsArrayToHashWithBlank: function (options) {
+                var map = _.object(options);
+                map[""] = "";
+                return map;
+            },
+
+            teamCapacityText: function (memberCount, maxMemberCount) {
+                return interpolate(
+                    // Translators: The following message displays the number of members on a team.
+                    ngettext(
+                        '%(memberCount)s / %(maxMemberCount)s Member',
+                        '%(memberCount)s / %(maxMemberCount)s Members',
+                        maxMemberCount
+                    ),
+                    {memberCount: memberCount, maxMemberCount: maxMemberCount}, true
+                )
+            },
+            isUserMemberOfTeam: function(memberships, requestUsername) {
+                return _.isObject(
+                    _.find(memberships, function(membership)
+                    {
+                        return membership.user.username === requestUsername;
+                    })
+                );
+            }
+        }
+    });
+
+}).call(this, define || RequireJS.define);

lms/djangoapps/teams/static/teams/js/views/teams.js

@@ -4,8 +4,9 @@
         'backbone',
         'gettext',
         'teams/js/views/team_card',
-        'common/js/components/views/paginated_view'
-    ], function (Backbone, gettext, TeamCardView, PaginatedView) {
+        'common/js/components/views/paginated_view',
+        'teams/js/views/team_utils'
+    ], function (Backbone, gettext, TeamCardView, PaginatedView, TeamUtils) {
         var TeamsView = PaginatedView.extend({
             type: 'teams',
 
@@ -26,25 +27,11 @@
                     router: options.router,
                     topic: options.topic,
                     maxTeamSize: options.maxTeamSize,
-                    countries: this.selectorOptionsArrayToHashWithBlank(options.teamParams.countries),
-                    languages: this.selectorOptionsArrayToHashWithBlank(options.teamParams.languages),
-                    srInfo: this.srInfo
+                    srInfo: this.srInfo,
+                    countries: TeamUtils.selectorOptionsArrayToHashWithBlank(options.teamParams.countries),
+                    languages: TeamUtils.selectorOptionsArrayToHashWithBlank(options.teamParams.languages)
                 });
                 PaginatedView.prototype.initialize.call(this);
-            },
-
-            /**
-             * Convert a 2d array to an object equivalent with an additional blank element
-             *
-             * @param {Array.<Array.<string>>} Two dimensional options array
-             * @returns {Object} Hash version of the input array
-             * @example selectorOptionsArrayToHashWithBlank([["a", "alpha"],["b","beta"]])
-             * // returns {"a":"alpha", "b":"beta", "":""}
-             */
-            selectorOptionsArrayToHashWithBlank: function (options) {
-                var map = _.object(options);
-                map[""] = "";
-                return map;
             }
         });
         return TeamsView;

lms/djangoapps/teams/static/teams/js/views/teams_tab.js

@@ -56,7 +56,7 @@
                     this.languages = options.languages;
                     this.countries = options.countries;
                     this.userInfo = options.userInfo;
-
+                    this.teamsBaseUrl = options.teamsBaseUrl;
                     // This slightly tedious approach is necessary
                     // to use regular expressions within Backbone
                     // routes, allowing us to capture which tab
@@ -267,12 +267,17 @@
                         deferred = $.Deferred(),
                         courseID = this.courseID;
                     self.getTopic(topicID).done(function(topic) {
-                        self.getTeam(teamID).done(function(team) {
+                        self.getTeam(teamID, true).done(function(team) {
                             var readOnly = self.readOnlyDiscussion(team),
                                 view = new TeamProfileView({
                                     courseID: courseID,
                                     model: team,
-                                    readOnly: readOnly
+                                    readOnly: readOnly,
+                                    maxTeamSize: self.maxTeamSize,
+                                    requestUsername: self.userInfo.username,
+                                    countries: self.countries,
+                                    languages: self.languages,
+                                    teamInviteUrl: self.teamsBaseUrl + '#teams/' + topicID + '/' + teamID + '?invite=true'
                                 });
                             deferred.resolve(self.createViewWithHeader(view, team, topic));
                         });
@@ -350,18 +355,21 @@
                  * promise, since the team may need to be fetched from the
                  * server.
                  * @param teamID the string identifier for the requested team
+                 * @param expandUser bool to add the users info.
                  * @returns {promise} a jQuery deferred promise for the team.
                  */
-                getTeam: function (teamID) {
+                getTeam: function (teamID, expandUser) {
                     var team = this.teamsCollection ? this.teamsCollection.get(teamID) : null,
                         self = this,
-                        deferred = $.Deferred();
+                        deferred = $.Deferred(),
+                        teamUrl;
                     if (team) {
                         deferred.resolve(team);
                     } else {
+                        teamUrl = this.teamsUrl + teamID + (expandUser ? '?expand=user': '');
                         team = new TeamModel({
                             id: teamID,
-                            url: this.teamsUrl + teamID
+                            url: teamUrl
                         });
                         team.fetch()
                             .done(function() {

lms/djangoapps/teams/static/teams/templates/team-member.underscore

+<span class="team-member">
+    <a class="member-profile" href="<%= memberProfileUrl %>">
+        <p class="tooltip-custom"><%= username %></p>
+        <img class="image-url" src="<%= imageUrl %>" alt="profile page" />
+    </a>
+</span>

lms/djangoapps/teams/static/teams/templates/team-profile.underscore

 <div class="team-profile">
-    <div class="discussion-module" data-course-id="<%= courseID %>" data-discussion-id="<%= discussionTopicID %>"
-            data-read-only="<%= readOnly %>"
-            data-user-create-comment="<%= !readOnly %>"
-            data-user-create-subcomment="<%= !readOnly %>">
-        <% if ( !readOnly) { %>
-            <a href="#" class="new-post-btn" role="button"><span class="icon fa fa-edit new-post-icon"></span><%= gettext("New Post") %></a>
+    <div class="page-content-main">
+        <div class="discussion-module" data-course-id="<%= courseID %>" data-discussion-id="<%= discussionTopicID %>"
+                data-read-only="<%= readOnly %>"
+                data-user-create-comment="<%= !readOnly %>"
+                data-user-create-subcomment="<%= !readOnly %>">
+            <% if ( !readOnly) { %>
+                <a href="#" class="new-post-btn" role="button"><span class="icon fa fa-edit new-post-icon"></span><%= gettext("New Post") %></a>
+            <% } %>
+        </div>
+    </div>
+
+    <div class="page-content-secondary">
+        <h4 class="team-detail-header"><%- gettext("Team Details") %></h4>
+        <% if (isMember) { %>
+            <div class="team-user-membership-status">
+                <p><%- gettext("You are a member of this team.") %></p>
+            </div>
+        <% } %>
+        <div class="team-members">
+            <span class="sr"><%- gettext("Team member profiles") %></span>
+            <div class="members-info"></div>
+        </div>
+
+        <div class="team-capacity">
+            <span class="sr"><%- gettext("Team capacity") %></span>
+            <span><%- membershipText %></span>
+        </div>
+
+        <% if (country) { %>
+            <div class="team-country">
+                <span class="sr"><%- gettext("The country that team members primarily identify with.") %></span>
+                <i class="icon fa fa-globe fa-fw" aria-hidden="true"></i>
+                <span>
+                    <%- gettext(country) %>
+                </span>
+            </div>
+        <% } %>
+        <% if (language) { %>
+            <div class="team-language">
+                <span class="sr"><%- gettext("The language that team members primarily use to communicate with each other.") %></span>
+                <i class="icon fa fa-comment-o fa-fw" aria-hidden="true"></i>
+                <span>
+                    <%- gettext(language) %>
+                </span>
+            </div>
+        <% } %>
+
+        <% if (isMember) { %>
+            <div class="leave-team">
+                <button class="btn btn-link btn-base btn-secondary leave-team-link"><%- gettext("Leave Team") %></button>
+            </div>
+
+            <div class="divider-lv1"></div>
+
+            <div class="invite-team">
+                <h4 class="invite-header"><%- gettext("Invite Others") %></h4>
+                <% if (hasCapacity) { %>
+                    <input type="text" class="invite-link-input" value="<%= inviteLink %>" aria-describedby="invite-text" readonly >
+                    <span class="invite-text" id="invite-text">
+                        <%- gettext("Send this link to friends so that they can join too.") %>
+                    </span>
+                <% } else {  %>
+                    <span class="invite-text">
+                        <%- gettext("No invitations are available. This team is full.") %>
+                    </span>
+                <% } %>
+            </div>
         <% } %>
     </div>
 </div>

lms/djangoapps/teams/templates/teams/teams.html

@@ -42,7 +42,8 @@
         teamMembershipsUrl: '${ team_memberships_url }',
         maxTeamSize: ${ course.teams_max_size },
         languages: ${ json.dumps(languages, cls=EscapedEdxJSONEncoder) },
-        countries: ${ json.dumps(countries, cls=EscapedEdxJSONEncoder) }
+        countries: ${ json.dumps(countries, cls=EscapedEdxJSONEncoder) },
+        teamsBaseUrl: '${ teams_base_url }'
     });
 </%static:require_module>
 </%block>

lms/djangoapps/teams/views.py

@@ -111,6 +111,7 @@ class TeamsDashboardView(View):
             "languages": settings.ALL_LANGUAGES,
             "countries": list(countries),
             "disable_courseware_js": True,
+            "teams_base_url": reverse('teams_dashboard', request=request, kwargs={'course_id': course_id}),
         }
         return render_to_response("teams/teams.html", context)
 

lms/static/sass/elements/_controls.scss

@@ -403,3 +403,16 @@
       margin-bottom: none;
     }
   }
+
+  .btn-link {
+    @extend %btn-pl-secondary-base;
+
+    background-image: none;
+
+    &:focus,
+    &:hover {
+      background-image: none !important;
+      background-color: transparent !important;
+      color: $link-color;
+    }
+  }

lms/static/sass/shared/_tooltips.scss

@@ -10,3 +10,54 @@
   text-align: center;
   -webkit-font-smoothing: antialiased;
 }
+
+
+// custom tool tip style.
+@mixin tooltip-hover-style ($margin-top) {
+  p {
+    @extend %ui-depth2;
+      background: $dark-gray;
+      border-radius: ($baseline/5);
+      color: $white;
+      font-family: $sans-serif;
+      line-height: lh();
+      opacity: 0.0;
+      padding: 6px;
+      position: absolute;
+      text-shadow: 0 -1px 0 $black;
+      @include transition(all .1s $ease-in-out-quart 0s);
+      white-space: pre;
+      visibility: hidden;
+      pointer-events: none;
+      right: 0;
+
+      &:empty {
+        background: none;
+
+        &::after {
+          display: none;
+        }
+      }
+
+      &::after {
+        background: $dark-gray;
+        content: " ";
+        display: block;
+        height: ($baseline/2);
+        right: 18px;
+        position: absolute;
+        top: ($baseline + ($baseline/4));
+        @include transform(rotate(45deg));
+        width: ($baseline/2);
+      }
+  }
+
+  &:hover, &:focus {
+    p {
+      display: block;
+      margin-top: $margin-top;
+      opacity: 1.0;
+      visibility: visible;
+    }
+  }
+}

lms/static/sass/views/_teams.scss

@@ -346,6 +346,64 @@
     }
   }
 
+  .team-profile {
+
+    .page-content-main {
+      display: inline-block;
+      width: flex-grid(8, 12);
+      vertical-align: top;
+
+      .forum-new-post-form,
+      .edit-post-form {
+        min-width: 700px;
+      }
+    }
+
+    .page-content-secondary {
+      display: inline-block;
+      width: flex-grid(4,12);
+      @include margin-left($baseline * 0.75);
+      margin-bottom: $baseline;
+
+      @extend %t-copy-sub1;
+      color: $gray-l1;
+
+      div, .team-detail-header {
+        margin-bottom: ($baseline/4);
+      }
+
+      .image-url {
+        border: 2px solid $outer-border-color;
+        border-radius: ($baseline/4);
+        margin-bottom: ($baseline/4);
+      }
+
+      .leave-team {
+        margin-bottom: $baseline;
+        margin-top: ($baseline/2);
+      }
+
+      .invite-header, .invite-text {
+        margin-bottom: ($baseline/2);
+      }
+
+      .invite-team {
+        margin-top: ($baseline);
+        margin-bottom: ($baseline/2);
+      }
+      .invite-link-input {
+        width: 100%;
+      }
+
+      .member-profile {
+        position: relative;
+        display: inline-block;
+
+        @include tooltip-hover-style(-($baseline*2));
+      }
+    }
+  }
+
   .create-team {
 
     legend {