Skip to content

Commit

Permalink
Fix group profile page
Browse files Browse the repository at this point in the history
  • Loading branch information
smithellis committed Sep 9, 2024
1 parent 0967395 commit 5d6e122
Show file tree
Hide file tree
Showing 3 changed files with 74 additions and 43 deletions.
3 changes: 2 additions & 1 deletion kitsune/groups/jinja2/groups/edit.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
79 changes: 38 additions & 41 deletions kitsune/groups/jinja2/groups/profile.html
Original file line number Diff line number Diff line change
@@ -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">
Expand Down Expand Up @@ -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 %}
35 changes: 34 additions & 1 deletion kitsune/sumo/static/sumo/scss/layout/_contributors.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}

0 comments on commit 5d6e122

Please sign in to comment.