Fix group profile page

mozilla · Sep 9, 2024 · 5d6e122 · 5d6e122
1 parent 0967395
commit 5d6e122
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 43 deletions.
diff --git a/kitsune/groups/jinja2/groups/edit.html b/kitsune/groups/jinja2/groups/edit.html
@@ -4,7 +4,8 @@
 
 {% block content %}
   <article id="group-profile" class="main">
-    <h1>{{ _('Edit {group} profile information')|f(group=profile.group.name) }}</h1>
+  <h1>{{ _('Edit Group Description') }}</h1>
+    <strong>{{ _('Editing description for group {group}')|f(group=profile.group.name) }}</strong>
 
     <form action="" method="post">
       {% csrf_token %}

diff --git a/kitsune/groups/jinja2/groups/profile.html b/kitsune/groups/jinja2/groups/profile.html
@@ -1,82 +1,73 @@
 {% extends "groups/base.html" %}
 {% from "layout/errorlist.html" import errorlist %}
 {% set title = _('{group} | Groups')|f(group=profile.group.name) %}
+{% set avatar_alt = _('Avatar for {group} group')|f(group=profile.group.name) %}
 
 {% block content %}
   <article id="group-profile" class="main">
     <section id="avatar-area">
-      <img src="{{ group_avatar(profile) }}" alt="" />
+      <img class='group-avatar' src="{{ group_avatar(profile) }}" alt="{{ avatar_alt }}" />
       {% if user_can_edit %}
-        <p><a href="{{ url('groups.edit_avatar', profile.slug) }}" title="{{ _('Change avatar') }}">{{ _('Change') }}</a></p>
+        <p><a class="sumo-button button primary-button button-lg" href="{{ url('groups.edit_avatar', profile.slug) }}" title="{{ _('Change avatar') }}">{{ _('Change Group Avatar') }}</a></p>
         {% if profile.avatar %}
-          <p><a href="{{ url('groups.delete_avatar', profile.slug) }}" title="{{ _('Delete avatar') }}">{{ _('Delete') }}</a></p>
+          <p><a class="sumo-button button primary-button button-lg" href="{{ url('groups.delete_avatar', profile.slug) }}" title="{{ _('Delete avatar') }}">{{ _('Delete Group Avatar') }}</a></p>
         {% endif %}
       {% endif %}
     </section>
     <section id="main-area">
-      {% if user.is_staff and user.has_perm('groups.change_groupprofile') %}
-        <a class="edit" href="{{ url('admin:groups_groupprofile_change', profile.id) }}">{{ _('Edit in admin') }}</a>
-      {% endif %}
+      <div id="group-info" class="editable">
       <h1>{{ profile.group.name }}</h1>
-        {% if user_can_edit %}
-          <a class="edit" href="{{ url('groups.edit', profile.slug) }}">{{ _('Edit group profile') }}</a>
+      <section class="mzp-c-emphasis-box">
+        <div id="doc-content">
+        {% if profile.information_html %}
+          <blockquote>{{ profile.information_html|safe }}</blockquote>
         {% endif %}
-      <div id="doc-content">
-        {{ profile.information_html|safe }}
-      </div>
-
-      <div id="group-leaders" class="editable">
-        {% if user_can_manage_leaders %}
-          <a class="edit" href="#group-leaders">{{ _('Edit group leaders') }}</a>
+        </div>
+        {% if user_can_edit %}
+          <a class="sumo-button button primary-button button-lg" href="{{ url('groups.edit', profile.slug) }}">{{ _('Edit group profile') }}</a>      
         {% endif %}
+      </section>
+      <div id="group-leaders">
         <h2>{{ _('Group Leaders') }}</h2>
         <ul class="users leaders">
           {% for user in leaders %}
             <li>
               {{ user_row(user) }}
-              {% if user_can_manage_leaders %}
-                <div class="remove edit-mode">
-                  <a href="{{ url('groups.remove_leader', profile.slug, user.id) }}" title="{{ _('Remove user from leaders') }}">&#x2716;</a>
-                </div>
-              {% endif %}
             </li>
           {% endfor %}
         </ul>
         {% if user_can_manage_leaders %}
-          <form id="add-member-form" class="edit-mode" action="{{ url('groups.add_leader', profile.slug) }}" method="POST">
+          <form id="add-member-form" action="{{ url('groups.add_leader', profile.slug) }}" method="POST">
             {% csrf_token %}
             {{ errorlist(leader_form) }}
-            {{ leader_form.users|safe }}
-            <input type="submit" value="{{ _('Add Leader') }}" />
+            <section class="mzp-c-emphasis-box">
+              <p>{{ _('Search for a user or users below. When you are ready to add them, click the Add Leaders button.') }}</p>
+              {{ leader_form.users|safe }}
+              <input type="submit" class="sumo-button button primary-button button-lg" value="{{ _('Add Leader(s)') }}" />
+            </section>
           </form>
         {% endif %}
       </div>
-
-      <div id="group-members" class="editable">
-        {% if user_can_edit %}
-          <a class="edit" href="#group-members">{{ _('Edit group members') }}</a>
-        {% endif %}
+      <div id="group-members">
         <h2>{{ _('Group Members') }}</h2>
-        {% if user_can_edit %}
-          <form id="add-member-form" class="edit-mode" action="{{ url('groups.add_member', profile.slug) }}" method="POST">
-            {% csrf_token %}
-            {{ errorlist(member_form) }}
-            {{ member_form.users|safe }}
-            <input type="submit" value="{{ _('Add Member') }}" />
-          </form>
-        {% endif %}
         <ul class="users members container_12 cf">
           {% for user in members %}
             <li class="grid_4">
               {{ user_row(user) }}
-              {% if user_can_edit %}
-                <div class="remove edit-mode">
-                  <a href="{{ url('groups.remove_member', profile.slug, user.id) }}" title="{{ _('Remove user from group') }}">&#x2716;</a>
-                </div>
-              {% endif %}
             </li>
           {% endfor %}
         </ul>
+        {% if user_can_edit %}
+          <form id="add-member-form" action="{{ url('groups.add_member', profile.slug) }}" method="POST">
+            {% csrf_token %}
+            {{ errorlist(member_form) }}
+            <section class="mzp-c-emphasis-box">
+              <p>{{ _('Search for a user or users below. When you are ready to add them, click the Add Members button.') }}</p>
+              {{ member_form.users|safe }}
+              <input type="submit" class="sumo-button button primary-button button-lg" value="{{ _('Add Member(s)') }}" />
+            </section>
+          </form>
+        {% endif %}
       </div>
       {% if is_paginated %}
       <div class="pagination">
@@ -106,5 +97,11 @@ <h2>{{ _('Group Members') }}</h2>
   <div class="info">
     <a rel="nofollow" href="{{ profile_url(user) }}">{{ display_name(user) }}</a>
     {{ private_message(user) }}
+    {% if user_can_manage_leaders and user in leaders %}
+        <a class="sumo-button warning-button button-sm" href="{{ url('groups.remove_leader', profile.slug, user.id) }}" title="{{ _('Remove user from leaders') }}">Remove From Leaders</a>
+    {% endif %}
+    {% if user_can_edit %}
+        <a class="sumo-button warning-button button-sm" href="{{ url('groups.remove_member', profile.slug, user.id) }}" title="{{ _('Remove user from group') }}">Remove From Group</a>
+    {% endif %}
   </div>
 {%- endmacro %}
diff --git a/kitsune/sumo/static/sumo/scss/layout/_contributors.scss b/kitsune/sumo/static/sumo/scss/layout/_contributors.scss
@@ -231,11 +231,17 @@ ol.headings-list {
   }
 }
 
+
 .users {
   display: flex;
   flex-wrap: wrap;
   margin: p.$spacing-lg 0;
 
+  img {
+    width: 200px;
+    height: 200px;
+  }
+
   li {
     flex: 1 1 100%;
     max-width: 340px;
@@ -263,4 +269,31 @@ ol.headings-list {
       }
     }
   }
-}
+}
+.avatar, .info {
+  display: flex;
+  flex-direction: column; // Stack children vertically
+  align-items: center; // Center-align children horizontally
+  justify-content: center; // Center-align children vertically, if there's enough height
+
+  img {
+    margin: 0 auto; // Center-align the image specifically if needed
+    width: 200px;
+    height: 200px;
+  }
+
+  .pm {
+    width: 100%; // Ensure the paragraph fills the width to center the button inside it
+    display: flex;
+    justify-content: center; // Center-align the button
+  }
+}
+
+.group-avatar {
+  width: 200px;
+  height: 200px;
+}
+
+.button {
+  width: 200px;
+}